@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Theme Name: Template Name – HTML5 Template
    Author: Theme Pure
    Support: basictheme@gmail.com
    Description: Template Name  – HTML5 Template
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

    01. THEME DEFAULT CSS
	02. MEANMENU CSS START
	03. header CSS START
	04. hero CSS START
	05. about CSS START
	06. service CSS START
	07. case CSS START
	08. testimonial CSS START
	09. brand CSS START
	10. blog CSS START
	11. social CSS START
	12. cta CSS START
	13. cart CSS START
	14. team CSS START
	15. price CSS START
	16. 404 CSS START
	17. price CSS START
	18. product CSS START
	19. newsletter CSS START
	20. contact CSS START
	21. footer CSS START

**********************************************/
/*----------------------------------------*/
/*  01. THEME DEFAULT CSS START
/*----------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root {
  /**
  @font family declaration
  */
  --tp-ff-body: 'Poppins', sans-serif;
  --tp-ff-heading: 'Poppins', sans-serif;
  --tp-ff-fontawesome: Font Awesome 5 Pro;
  --tp-ff-head: 'Poppins', sans-serif;
  /**
  @color declaration
  */
  --tp-common-white: #ffffff;
  --tp-common-white-2: #F3F3F3;
  --tp-common-white-3: #F5F5F5;
  --tp-common-black: #151718;
  --tp-common-black-2: #52525C;
  --tp-common-black-3: #1F2021;
  --tp-common-yellow: #EED064;
  --tp-common-yellow-2: #FDFAEF;
  --tp-common-green: #EB4D00;
  --tp-common-green-1: #1ea334;
  --tp-common-green-2: #EBFAF2;
  --tp-common-blue: #f2f2ff;
  --tp-common-orange: #0a0a09;
  --tp-common-red: #E01E5A;
  --tp-common-sky: #1EDBDC;
  --tp-common-deep-blue: #4C40F7;
  --tp-heading-primary: #151718;
  --tp-grey-1: #F0F0F0;
  --tp-grey-2: #F9F9F9;
  --tp-grey-3: #C2C2C2;
  --tp-grey-4: #DDDDDD;
  --tp-grey-5: #888888;
  --tp-grey-6: #F7F7F7;
  --tp-grey-7: #F6F6F6;
  --tp-text-body: #211c15;
  --tp-text-p: #211c15;
  --tp-theme-1: #EB4D00;
  --tp-theme-2: #ff5500;
  --tp-theme-g-1: linear-gradient(180deg, #F15B00 80%, #E13600 100%);
  --tp-theme-g-2: linear-gradient(180deg, #F15B00 100%, #E13600 50%);
  --tp-border-1: #F5F5F5;
  --tp-border-2: #F4F4F4;
  --tp-border-3: #EDEFEB;
  --tp-border-4: #F1F3F6;
  --tp-border-5: #333435;
  --tp-border-6: #38393A;
  --tp-border-7: #CCD5DA;
  --tp-service-1: #f8f8ff;
  --tp-service-2: #fff7f6;
  --tp-service-3: #f2f8ff;
}



/*---------------------------------
	typography css start 
---------------------------------*/
body {
  font-family: var(--tp-ff-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--tp-text-body);
  line-height: 26px;
  overflow-x: hidden;
}

html, body {
  overflow-x: hidden;
}

a {
  text-decoration: none;
  transition: 0.3s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--tp-ff-heading);
  color: var(--tp-common-black);
  margin-top: 0px;
  font-weight: 700;
  line-height: 1.1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

img {
  max-width: 100%;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

ul {
  margin: 0px;
  padding: 0px;
}

p {
  color: var(--tp-text-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
}

.z-index {
  position: relative;
  z-index: 2;
}

.z-index-3 {
  position: relative;
  z-index: 3;
}

.z-index-4 {
  position: relative;
  z-index: 4;
}

.z-index-5 {
  position: relative;
  z-index: 5;
}

.z-index-6 {
  position: relative;
  z-index: 6;
}

a,
.btn,
button,
input,
select,
textarea,
li,
img,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

li {
  list-style: none;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

input,
textarea {
  outline: none;
  color: var(--tp-common-black);
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: rgb(116, 116, 116);
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: rgb(116, 116, 116);
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: rgb(116, 116, 116);
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: rgb(116, 116, 116);
}

input[type=color] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  padding: 0;
  border-radius: 50%;
}

*::-moz-selection {
  background: var(--tp-theme-2);
  color: var(--tp-common-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--tp-theme-2);
  color: var(--tp-common-white);
  text-shadow: none;
}

::selection {
  background: var(--tp-theme-1);
  color: var(--tp-common-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--tp-common-black);
  font-size: var(--tp-fz-body);
  opacity: 1;
}

*::placeholder {
  color: var(--tp-common-black);
  font-size: var(--tp-fz-body);
  opacity: 1;
}

/*---------------------------------
    common classes css start 
---------------------------------*/
.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.include-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.gx-10 {
  --bs-gutter-x: 10px;
}

.gx-30 {
  --bs-gutter-x: 30px;
}

.gx-40 {
  --bs-gutter-x: 40px;
}

.gx-50 {
  --bs-gutter-x: 12px;
}

.gx-60 {
  --bs-gutter-x: 65px;
}

.gx-20 {
  --bs-gutter-x: 20px;
}

/*--
    - Spacing
-----------------------------------------*/
.tp-btn {
  display: inline-block;
  color: var(--tp-common-white);
  background: var(--tp-theme-1);
  border-radius: 10px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  padding: 0 50px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-transform: uppercase;
  transition: 0.3s;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-0.48deg);
  box-shadow: 0px 9px 14px rgba(89, 86, 233, 0.19);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-btn {
    height: 55px;
    line-height: 55px;
    padding: 0 30px;
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-btn {
    height: 55px;
    line-height: 55px;
    padding: 0 30px;
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .tp-btn {
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    font-size: 14px;
  }
}
.tp-btn i {
  padding-left: 17px;
}


.tp-btn-sm {
  display: inline-block;
  color: var(--tp-common-white);
  background: var(--tp-common-deep-blue);
  border-radius: 5px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-transform: uppercase;
  transition: 0.3s;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tp-btn-sm i {
  padding-left: 17px;
}
.tp-btn-sm:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-green);
  transform: translateY(-4px);
}
.tp-btn-sm:hover i {
  animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-radius {
  display: inline-block;
  color: var(--tp-common-white);
  background: var(--tp-common-deep-blue);
  border-radius: 10px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  padding: 0 50px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-transform: uppercase;
  transition: 0.3s;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-0.48deg);
  border-radius: 96px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-btn-radius {
    height: 55px;
    line-height: 55px;
    padding: 0 30px;
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-btn-radius {
    height: 55px;
    line-height: 55px;
    padding: 0 30px;
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .tp-btn-radius {
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    font-size: 14px;
  }
}
.tp-btn-radius i {
  padding-left: 17px;
}
.tp-btn-radius:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-green);
}
.tp-btn-radius:hover i {
  animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-yellow {
  display: inline-block;
  color: var(--tp-common-black);
  background: var(--tp-common-yellow);
  border-radius: 5px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 0 40px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-transform: uppercase;
  transition: 0.3s;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0px 9px 14px rgba(89, 86, 233, 0.19);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-btn-yellow {
    height: 55px;
    line-height: 55px;
    padding: 0 20px;
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .tp-btn-yellow {
    height: 55px;
    line-height: 55px;
    padding: 0 40px;
    font-size: 15px;
  }
}
.tp-btn-yellow i {
  padding-left: 5px;
}
.tp-btn-yellow:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-black);
}
.tp-btn-yellow:hover i {
  animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-black {
  display: inline-block;
  color: var(--tp-common-white);
  background: var(--tp-common-black);
  border-radius: 5px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 0 40px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-transform: uppercase;
  transition: 0.3s;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-btn-black {
    height: 55px;
    line-height: 55px;
    padding: 0 20px;
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .tp-btn-black {
    height: 55px;
    line-height: 55px;
    padding: 0 40px;
    font-size: 15px;
  }
}
.tp-btn-black i {
  padding-left: 7px;
}
.tp-btn-black:hover {
  color: var(--tp-common-white);
  background: var(--tp-theme-1);
}
.tp-btn-black:hover i {
  animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-green {
  display: inline-block;
  color: var(--tp-common-white);
  background: var(--tp-common-green);
  border-radius: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0 30px;
  z-index: 1;
  overflow: hidden;
  transition: 0.3s;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.tp-btn-green:hover {
  color: var(--tp-theme-1);
  background-color: var(--tp-common-white);
}
.tp-btn-green:hover i {
  animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-green.bdr-hvr:hover {
  background-color: transparent;
}

.tp-btn-orange {
  display: inline-block;
  color: var(--tp-common-white);
  background: var(--tp-common-orange);
  border-radius: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0 30px;
  z-index: 1;
  overflow: hidden;
  transition: 0.3s;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.tp-btn-orange:hover {
  color: var(--tp-theme-1);
  background-color: var(--tp-common-white);
}
.tp-btn-orange:hover i {
  animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-orange-radius {
  display: inline-block;
  color: var(--tp-common-white);
  background: var(--tp-common-orange);
  border-radius: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0 30px;
  z-index: 1;
  overflow: hidden;
  transition: 0.3s;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.tp-btn-orange-radius:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-green);
}
.tp-btn-orange-radius:hover i {
  animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-radius-2 {
  display: inline-block;
  color: var(--tp-common-white);
  background: var(--tp-theme-1);
  border-radius: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0 30px;
  z-index: 1;
  overflow: hidden;
  transition: 0.3s;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.tp-btn-radius-2:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-green);
}
.tp-btn-radius-2:hover i {
  animation: tfLeftToRight 0.5s forwards;
}

.tp-btn-border {
  display: inline-block;
  color: var(--tp-common-white);
  text-align: center;
  height: 70px;
  line-height: 66px;
  padding: 0 50px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: 0.3s;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px dashed var(--tp-border-5);
  border-radius: 110px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-btn-border {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    font-size: 14px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-btn-border {
    height: 55px;
    line-height: 55px;
    padding: 0 30px;
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .tp-btn-border {
    height: 55px;
    line-height: 55px;
    padding: 0 40px;
    font-size: 15px;
  }
}
.tp-btn-border i {
  padding-left: 17px;
}
.tp-btn-border:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-common-green);
  border: 2px dashed var(--tp-common-green);
}
.tp-btn-border:hover i {
  animation: tfLeftToRight 0.5s forwards;
}

.tp-link a {
  position: relative;
}
.tp-link a svg {
  position: relative;
  z-index: 2;
  margin-right: 20px;
}
.tp-link a::after {
  position: absolute;
  content: "";
  height: 35px;
  width: 35px;
  background-color: rgba(238, 208, 100, 0.15);
  border-radius: 50%;
  transition: 0.5s;
  top: -8px;
  left: 10px;
}
.tp-link a::before {
  position: absolute;
  content: "";
  height: 35px;
  width: 35px;
  background-color: var(--tp-common-yellow);
  border-radius: 50%;
  transition: 0.3s;
  top: -8px;
  left: 10px;
  transform: scale(0.3);
  opacity: 0;
  visibility: hidden;
}
.tp-link a span {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: 0.3s;
}
.tp-link a:hover span {
  color: var(--tp-common-yellow);
}
.tp-link a:hover::before {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

.tp-link-green a::after {
  background-color: rgba(255, 165, 0, 0.15);
}
.tp-link-green a::before {
  background-color: var(--tp-common-green);
}
.tp-link-green a:hover span {
  color: var(--tp-theme-1);
}

.tp-link-border a {
  position: relative;
}
.tp-link-border a span {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.135em;
  text-transform: uppercase;
  margin-right: 15px;
  transition: 0.3s;
  color: var(--tp-common-grey);
}
.tp-link-border a svg {
  position: relative;
  color: var(--tp-common-grey);
  z-index: 2;
  transition: 0.3s;
}
.tp-link-border a:hover span {
  color: var(--tp-common-green);
}
.tp-link-border a:hover svg {
  color: var(--tp-common-green);
}
.tp-link-border a:hover::before {
  border: 1px dashed var(--tp-common-green);
}
.tp-link-border a::before {
  content: "";
  position: absolute;
  right: -10px;
  top: -6px;
  height: 30px;
  width: 30px;
  border: 1px dashed var(--tp-border-6);
  border-radius: 50%;
  transition: 0.3s;
}

/* pulse effect animation */
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes moving {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes about-circle {
  0% {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes services-triangle {
  0% {
    -webkit-transform: rotate(0deg) translateX(-50px);
    -moz-transform: rotate(0deg) translateX(-50px);
    -ms-transform: rotate(0deg) translateX(-50px);
    -o-transform: rotate(0deg) translateX(-50px);
    transform: rotate(0deg) translateX(-50px);
  }
  100% {
    -webkit-transform: rotate(360deg) translateY(100px);
    -moz-transform: rotate(360deg) translateY(100px);
    -ms-transform: rotate(360deg) translateY(100px);
    -o-transform: rotate(360deg) translateY(100px);
    transform: rotate(360deg) translateY(100px);
  }
}
@keyframes hero-3-dot-2 {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes tfLeftToRight {
  49% {
    transform: translateX(30%);
  }
  50% {
    opacity: 0;
    transform: translateX(-30%);
  }
  51% {
    opacity: 1;
  }
}
@keyframes rotate2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes moving {
  0% {
    transform: translatey(0px);
  }
  20% {
    transform: translateX(-50px);
  }
  50% {
    transform: translatey(-40px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes leftright {
  0% {
    transform: translatex(0);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes movinglight {
  0% {
    transform: translatey(0px);
  }
  20% {
    transform: translateX(-70px);
  }
  50% {
    transform: translatey(-70px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes movinglight2 {
  0% {
    transform: translatey(0px);
  }
  20% {
    transform: translateX(70px);
  }
  50% {
    transform: translatey(70px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes movingtop {
  0% {
    transform: translatey(0px);
  }
  20% {
    transform: translatey(70px);
  }
  50% {
    transform: translatey(-70px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes circle-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes circle-animation2 {
  0% {
    transform: scale(-1, 1) rotate(360deg);
  }
  100% {
    transform: scale(-1, 1) rotate(0deg);
  }
}
@keyframes zoom {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}
@keyframes zoom2 {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}
@keyframes wobble-vertical {
  10% {
    transform: translateY(-10px);
  }
  50% {
    transform: skew(15deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: translate(0);
  }
}
@-webkit-keyframes section-highlight {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes section-highlight {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-ms-keyframes section-highlight {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes section-highlight {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes widthcalc {
  0% {
    width: 20%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 90%;
  }
  90% {
    opacity: 75%;
  }
  90% {
    opacity: 100%;
  }
}
/* right bounce */
@-webkit-keyframes bounceRight {
  0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -ms-transform: translateX(-90px);
    transform: translateX(-90px);
  }
  60% {
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}
@-moz-keyframes bounceRight {
  0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -ms-transform: translateX(-90px);
    transform: translateX(-90px);
  }
  60% {
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}
@keyframes bounceRight {
  0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  60% {
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }
}
/* /right bounce */
@keyframes icon-bounce {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@keyframes light-one {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.6;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
/*--- preloader ---*/
.dark #preloader {
  background-color: #232323;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f7f7;
  z-index: 999999;
}

.preloader {
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
}

.preloader span {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #53C351;
  -webkit-animation: preloader 1.3s linear infinite;
  animation: preloader 1.3s linear infinite;
}

.preloader span:last-child {
  animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
}

@keyframes preloader {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}
@-webkit-keyframes preloader {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1, 1);
    opacity: 0;
  }
}
/*--- end of preloader ---*/
/*---------------------------------------
         Background color
-----------------------------------------*/
.grey-bg {
  background: var(--tp-grey-6);
}

.white-bg {
  background: var(--tp-common-white);
}

.black-bg {
  background: var(--tp-common-black);
}

.theme-bg {
  background: var(--tp-theme-1);
}

.body-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.6);
  visibility: hidden;
  opacity: 0;
  transition: 0.45s ease-in-out;
}
.body-overlay.apply {
  opacity: 1;
  visibility: visible;
}
.body-overlay:hover {
  cursor: url(../img/cross-out.png), pointer;
}

.tp-instagram img {
  width: 100%;
}

.tpoffcanvas {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  right: -100%;
  width: 480px;
  bottom: 0;
  box-shadow: 0 16px -32px 0 rgba(0, 0, 0, 0.8);
  background-color: var(--tp-common-white);
  z-index: 9999;
  padding: 50px;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.45s ease-in-out;
  overflow-y: scroll;
}
.tpoffcanvas.opened {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 767px) {
  .tpoffcanvas {
    width: 100%;
    padding: 10px 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpoffcanvas {
    width: 400px;
    padding: 40px;
  }
}
.tpoffcanvas.opened {
  right: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 0.6s;
}
.tpoffcanvas__logo {
  margin-bottom: 20px;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tpoffcanvas__logo {
    padding-top: 6px;
  }
}
.tpoffcanvas__logo svg {
  width: 26px;
  height: 100%;
}
.tpoffcanvas__close-btn button {
  font-size: 35px;
  color: black;
  position: absolute;
  right: 20px;
  top: 52px;
  transition: 1s;
  font-weight: 300;
  opacity: 0.4;
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 0.6s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tpoffcanvas__close-btn button {
    font-size: 16px;
    right: 20px;
    top: 23px;
  }
  .copyyear{
    margin-top: 0px !important;
  }
}
@media (max-width: 767px) {
  .tpoffcanvas__close-btn button {
    font-size: 16px;
    
    top: 24px;
  }
}
.tpoffcanvas__close-btn button:hover {
  color: #fff;
  opacity: 1;
}
.tpoffcanvas__content {
  margin-bottom: 30px;
}
.tpoffcanvas__content p {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 25px;
}
.tpoffcanvas__content span {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
  display: inline-block;
}
.tpoffcanvas__content a {
  font-size: 30px;
  line-height: 51px;
  font-weight: 700;
  color: var(--tp-common-black);
  display: inline-block;
}
@media (max-width: 767px) {
  .tpoffcanvas__content a {
    font-size: 27px;
  }
}
.tpoffcanvas__social {
  margin-top: 50px;
}
.tpoffcanvas__social .social-icon a {
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  background-color: var(--tp-grey-1);
  color: var(--tp-theme-1);
  margin-right: 15px;
  transition: 0.3s;
  display: inline-block;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .tpoffcanvas__social .social-icon a {
    margin-right: 3px;
  }
}
.tpoffcanvas__social .social-icon a:hover {
  background-color: var(--tp-common-green);
  color: var(--tp-common-white);
}
.tpoffcanvas__text {
  border-bottom: 1px solid #3b3838;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpoffcanvas__text {
    display: none;
  }
}
.tpoffcanvas__text p {
  color: var(--tp-common-white);
  font-size: 18px;
}
.tpoffcanvas__info {
  border-top: 1px dashed #ced4da;
  padding-bottom: 30px;
  margin-bottom: 20px;
}
.tpoffcanvas__info .offcanva-title {
  color: var(--tp-common-black);
  margin: 25px 0 20px 0;
  font-size: 20px;
  font-weight: 600;
}
.tpoffcanvas__info-icon a {
  height: 50px;
  width: 50px;
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
  display: inline-block;
  text-align: center;
  line-height: 50px;
  border-radius: 50px;
  font-weight: 500;
  font-size: 18px;
  margin-right: 20px;
}
.tpoffcanvas__info-address span {
  display: block;
  color: var(--tp-common-black);
  font-size: 16px;
  font-weight: 400;
}
.tpoffcanvas__info-address a {
  display: block;
  color: var(--tp-common-black);
  font-size: 18px;
  font-weight: 600;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .tpoffcanvas__info-address a {
    font-size: 16px;
  }
}
.tpoffcanvas__info-address a:hover {
  color: var(--tp-theme-1);
}

.mobile-menu.mean-container {
  margin-bottom: 50px;
}

.offcan-social-title {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
  display: inline-block;
}

.tpoffcanvas-social {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header-border-2.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--tp-common-white);
  width: 100%;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  box-shadow: 0px 2px 55px rgba(168, 182, 218, 0.32);
  z-index: 999;
}

.header-border-2.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--tp-common-white);
  width: 100%;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  box-shadow: 0px 10px 21px rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.header-transparent.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  width: 100%;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  z-index: 1000;
}
.header-transparent.header-sticky.header-border {
  border: none;
}

.black-bg.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #051B46;
  width: 100%;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  z-index: 999;
}
.black-bg.header-sticky.header-border {
  border: none;
}

.sticky-white-bg.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--tp-common-white);
  width: 100%;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  box-shadow: 0px 10px 21px rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.tp-header-black-sticky.header-sticky {
  background-color: #2c2c2c;
}

.breadcrumb-height {
  padding-top: 300px;
  padding-bottom: 160px;
}
@media (max-width: 767px) {
  .breadcrumb-height {
    padding-top: 170px;
    padding-bottom: 80px;
  }
}

.breadcrumb__title {
  font-size: 60px;
  line-height: 74px;
  letter-spacing: -0.01em;
  color: var(--tp-common-black);
  padding-bottom: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb__title {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .breadcrumb__title {
    font-size: 35px;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}
.breadcrumb__list {
  display: inline-block;
  padding: 0px 10px;
}
.breadcrumb__list span {
  font-size: 16px;
  color: var(--tp-common-black);
  font-weight: 500;
  text-transform: uppercase;
}
.breadcrumb__list span.dvdr i {
  font-size: 18px;
  padding: 0px 5px;
  font-weight: 400;
}
.breadcrumb__subtitle {
  font-size: 18px;
  font-weight: 300;
  color: var(--tp-common-black);
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .breadcrumb__subtitle {
    font-size: 15px;
  }
}

.breadcrumb__area {
  background-size: cover;
  background-position: center;
}

.tp-custom-accordio .accordion-items {
  margin-bottom: 20px;
  border: 1px solid var(--tp-border-1);
  border-radius: 10px;
}
.tp-custom-accordio .accordion-items:not(.collapsed) {
  background-color: var(--tp-common-white);
}
.tp-custom-accordio .accordion-buttons {
  position: relative;
  width: 100%;
  padding-left: 20px;
  text-align: left;
  font-weight: 500;
  font-size: 20px;
  padding: 32px 45px;
  color: #212121;
  border-radius: 10px 10px 0 0;
}
@media (max-width: 767px) {
  .tp-custom-accordio .accordion-buttons {
    font-size: 17px;
    padding: 28px 20px 28px 92px;
  }
}
.tp-custom-accordio .accordion-buttons::after {
  position: absolute;
  content: "\f063";
  font-family: "Font Awesome 5 Pro";
  background-image: none;
  top: 35px;
  right: 35px;
  color: #B8BCC8;
  width: auto;
  height: auto;
  font-weight: 700;
  font-size: 16px;
  color: var(--tp-theme-1);
}
@media (max-width: 767px) {
  .tp-custom-accordio .accordion-buttons::after {
    top: 33px;
    right: 18px;
  }
}
.tp-custom-accordio .accordion-buttons.collapsed {
  padding: 32px 35px 32px 110px;
}
.tp-custom-accordio .accordion-buttons.collapsed::after {
  color: #B8BCC8;
  content: "\f062";
}
.tp-custom-accordio .accordion-buttons svg {
  margin-right: 15px;
}
.tp-custom-accordio .collapsed {
  border-radius: 10px 10px 10px 10px;
}
.tp-custom-accordio .accordion-body {
  padding: 20px 45px;
  position: relative;
  z-index: 1;
  border-radius: 0 0px 10px 10px;
  font-size: 18px;
  line-height: 1.5;
  color: #60687a;
  letter-spacing: 0.5px;
}
@media (max-width: 767px) {
  .tp-custom-accordio .accordion-body {
    padding: 20px 25px;
  }
}
.tp-custom-accordio .accordion-body::before {
  position: absolute;
  content: "";
  height: 2px;
  background-color: var(--tp-grey-1);
  top: 0;
  left: 45px;
  right: 45px;
}

.faq-accordio-border .accordion-items {
  background-color: var(--tp-common-white);
  border: 1px solid #F5F5F5;
  border-radius: 10px;
}

.accordion-items {
  position: relative;
}

.accordion-items.bg-url-1::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/how-secure-my-data-collected-by-these-services.svg");
  background-size: contain;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.accordion-items.bg-url-1 .collapsed::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/how-secure-my-data-collected-by-these-services.svg");
  background-size: contain;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation: 0.4s fadeIn;
  animation-fill-mode: forwards;
  visibility: hidden;
}

@keyframes fadeIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
.accordion-items.bg-url-2::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/is-there-a-free-trial-to-test-the-platform-and-services.svg");
  background-size: contain;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.accordion-items.bg-url-2 .collapsed::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/is-there-a-free-trial-to-test-the-platform-and-services.svg");
  background-size: contain;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation: 0.4s fadeIn;
  animation-fill-mode: forwards;
  visibility: hidden;
}

.accordion-items.bg-url-3::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/is-customer-support-available-for-assistance.svg");
  background-size: contain;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.accordion-items.bg-url-3 .collapsed::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/is-customer-support-available-for-assistance.svg");
  background-size: contain;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation: 0.4s fadeIn;
  animation-fill-mode: forwards;
  visibility: hidden;
}

.accordion-items.bg-url-4::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/are-these-services-included-in-one-package-or-separately.svg");
  background-size: contain;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.accordion-items.bg-url-4 .collapsed::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/are-these-services-included-in-one-package-or-separately.svg");
  background-size: contain;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation: 0.4s fadeIn;
  animation-fill-mode: forwards;
  visibility: hidden;
}

.accordion-items.bg-url-5::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/do-i-have-to-pay-to-find-verified-email-addresses.svg");
  background-size: contain;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.accordion-items.bg-url-5 .collapsed::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/do-i-have-to-pay-to-find-verified-email-addresses.svg");
  background-size: contain;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation: 0.4s fadeIn;
  animation-fill-mode: forwards;
  visibility: hidden;
}

.accordion-items.bg-url-6::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/are-there-limitations-on-email-and-contact-management.svg");
  background-size: contain;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.accordion-items.bg-url-6 .collapsed::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/are-there-limitations-on-email-and-contact-management.svg");
  background-size: contain;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation: 0.4s fadeIn;
  animation-fill-mode: forwards;
  visibility: hidden;
}

.accordion-items.bg-url-7::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/what-happens-after-my-free-trial.svg");
  background-size: contain;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.accordion-items.bg-url-7 .collapsed::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/what-happens-after-my-free-trial.svg");
  background-size: contain;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation: 0.4s fadeIn;
  animation-fill-mode: forwards;
  visibility: hidden;
}

.accordion-items.bg-url-8::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/can-i-try-to-find-emails-for-free-first.svg");
  background-size: contain;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.accordion-items.bg-url-8 .collapsed::before {
  content: "";
  background-image: url("https://divsly.com/gofox/assets/img/products/faq/can-i-try-to-find-emails-for-free-first.svg");
  background-size: contain;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation: 0.4s fadeIn;
  animation-fill-mode: forwards;
  visibility: hidden;
}

.tp-section-subtitle {
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  color: var(--tp-common-black-2);
  background-color: var(--tp-common-white);
  display: inline-block;
  padding: 10px 20px;
  border-radius: 65px;
  border: 1px solid var(--tp-border-1);
  box-shadow: 0px 9px 15px rgba(7, 18, 35, 0.08);
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .tp-section-subtitle {
    padding: 10px 13px;
  }
}
.tp-section-subtitle::after {
  content: "";
  height: 12px;
  width: 12px;
  background-color: var(--tp-theme-1);
  display: inline-block;
  border-radius: 50%;
  margin-left: 10px;
}
.tp-section-subtitle::before {
  content: "";
  height: 12px;
  width: 12px;
  background-color: var(--tp-theme-1);
  display: inline-block;
  border-radius: 50%;
  margin-right: 10px;
}
.tp-section-subtitle.tp-green-color::after {
  background-color: var(--tp-common-green);
}
.tp-section-subtitle.tp-green-color::before {
  background-color: var(--tp-common-green);
}
.tp-section-subtitle.tp-yellow-color::after {
  background-color: var(--tp-common-yellow);
}
.tp-section-subtitle.tp-yellow-color::before {
  background-color: var(--tp-common-yellow);
}

.tp-section-title {
  font-weight: 600;
  font-size: 55px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-section-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-section-title {
    font-size: 45px;
  }
}
@media (max-width: 767px) {
  .tp-section-title {
    font-size: 40px;
  }
}

.tp-section-title-sm {
  font-weight: 600;
  font-size: 55px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-section-title-sm {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-section-title-sm {
    font-size: 45px;
  }
}
@media (max-width: 767px) {
  .tp-section-title-sm {
    font-size: 35px;
  }
}

.tp-section-title-xs {
  font-weight: 600;
  font-size: 45px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-section-title-xs br {
    display: none;
  }
}
@media (max-width: 767px) {
  .tp-section-title-xs {
    font-size: 32px;
  }
  .tp-section-title-xs br {
    display: none;
  }
}

.tp-section-subtitle {
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  color: var(--tp-common-black-2);
  background-color: var(--tp-common-white);
  display: inline-block;
  padding: 10px 20px;
  border-radius: 65px;
  border: 1px solid var(--tp-border-1);
  box-shadow: 0px 9px 15px rgba(7, 18, 35, 0.08);
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .tp-section-subtitle {
    padding: 10px 13px;
  }
}
.tp-section-subtitle.bg-theme-tag {
  background-color: #fff4ef;
  box-shadow: none;
}
.tp-section-subtitle::after {
  content: "";
  height: 12px;
  width: 12px;
  background-color: var(--tp-theme-1);
  display: inline-block;
  border-radius: 50%;
  margin-left: 10px;
}
.tp-section-subtitle::before {
  content: "";
  height: 12px;
  width: 12px;
  background-color: var(--tp-theme-1);
  display: inline-block;
  border-radius: 50%;
  margin-right: 10px;
}
.tp-section-subtitle.tp-green-color::after {
  background-color: var(--tp-common-green);
}
.tp-section-subtitle.tp-green-color::before {
  background-color: var(--tp-common-green);
}
.tp-section-subtitle.tp-yellow-color::after {
  background-color: var(--tp-common-yellow);
}
.tp-section-subtitle.tp-yellow-color::before {
  background-color: var(--tp-common-yellow);
}

@media (max-width: 767px) {
  .tp-section-subtitle-1 {
    padding: 10px 13px;
  }
}
.tp-section-subtitle-1::before {
  content: "";
  height: 12px;
  width: 12px;
  background-color: var(--tp-theme-1);
  display: inline-block;
  border-radius: 50%;
  margin-right: 10px;
}
.tp-section-subtitle-1.tp-green-color::after {
  background-color: var(--tp-common-green);
}
.tp-section-subtitle-1.tp-green-color::before {
  background-color: var(--tp-common-green);
}

/*----------------------------------------*/
/*  03. MEANMENU CSS START
/*----------------------------------------*/
.mobile-menu.mean-container {
  overflow: hidden;
}
@media (max-width: 767px) {
  .mobile-menu.mean-container {
    margin-bottom: 30px;
  }
}

.mobile-menu .sidebar-list {
  clear: both;
}
.mobile-menu .sidebar-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 5px;
  color: var(--tp-common-white);
}
.mobile-menu .sidebar-list li::after {
  top: 10px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid #c00;
  background-color: transparent;
  content: "";
  display: inline-block;
  position: absolute;
}
.mobile-menu .tp-sidebar-social {
  margin-top: 20px;
}
.mobile-menu .tp-sidebar-social a {
  margin-right: 5px;
  background-color: var(--tp-theme-primary);
  color: #fff;
  display: inline-block;
  width: 35px;
  height: 35px;
  text-align: center;
  font-size: 14px;
  line-height: 34px;
}

.sidebar-title h3 {
  color: var(--tp-common-white);
}

/* mean menu customize */
.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 15px 0;
  color: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
  text-transform: none;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--tp-theme-1);
}

.mean-container .mean-nav ul li .mobile-signup-btn {
  height: 25px;
  width: 100%;
  margin: 0;
  margin-top: 20px;
  line-height: 20px;
  color: var(--tp-common-white);
  border-radius: 10px;
  background-color: var(--tp-theme-1);
  text-align: center;
  padding-bottom: 20px;
  padding-top: 15px;
}

.mean-container .mean-nav ul li .mobile-signup-btn span {
  color: var(--tp-grey-2);
  position: absolute;
  font-size: 12px;
  top: 66%;
  font-weight: 400;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 10px;
}

.mean-container .mean-nav ul li {
  font-size: 18px;
  font-weight: 500;
}

.mean-container .mean-nav ul li li a {
  padding: 10px;
  color: var(--tp-common-black-2);
  background-color: #fafafa;
  width: 100%;
}
.mean-container .mean-nav ul li li a span {
  color: var(--tp-theme-1);
}

.mean-container .mean-nav ul li .clr-the {
  color: var(--tp-theme-1) !important;
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 10px;
  padding: 0 !important;
  line-height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  height: 30px;
  width: 30px;
  line-height: 30px;
  color: #000;
  line-height: 30px;
  top: 0;
  font-weight: 400;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--clr-theme-1);
  color: var(--tp-theme-1);
  border-color: #888888;
}

.mean-container .mean-nav ul li > a > i {
  display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
  display: inline-block;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
  color: var(--clr-common-black);
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  color: var(--tp-common-black);
}

.mean-container .mean-nav ul li li li a {
  width: 100%;
  padding: 10px 2%;
}

/*----------------------------------------*/
/*  03. header CSS START
/*----------------------------------------*/
.header-pl-pr {
  padding-left: 60px;
  padding-right: 60px;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .header-pl-pr {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .header-pl-pr {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-pl-pr {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-pl-pr {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-pl-pr {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 767px) {
  .header-pl-pr {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.header-border-bottom {
  border-bottom: 1px solid #e7f3f9;
  transition: 0.4s all;
}

.header-transparent {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  right: 0;
  z-index: 1000;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tp-md-space {
    padding: 15px 15px;
  }
}

.tp-logo-border {
  padding: 5px 0;
  padding-right: 80px;
  margin-right: 60px;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .tp-logo-border {
    padding-right: 40px;
    margin-right: 40px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-logo-border {
    padding-right: 20px;
    margin-right: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-logo-border {
    padding-right: 20px;
    margin-right: 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-logo-border {
    padding-right: 20px;
    margin-right: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-logo-border {
    padding-right: 0px;
    margin-right: 0px;
  }
}
@media (max-width: 767px) {
  .tp-logo-border {
    padding: 20px 0;
    padding-right: 0px;
    margin-right: 0px;
    border-right: 0;
  }
}

.tp-logo svg {
  width: 100px;
}

.tp-main-menu ul {
  text-align: center;
}
.tp-main-menu ul li {
  display: inline-block;
  margin: 0px 10px !important;
  position: relative;
}
.tp-main-menu ul li:last-child {
  margin-right: 0;
  margin-left: -7px !important;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .tp-main-menu ul li {
    margin: 0px 25px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-main-menu ul li {
    margin: 0px 18px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-main-menu ul li {
    margin: 0px 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-main-menu ul li {
    margin: 0px 10px;
  }
}
.tp-main-menu ul li a {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  padding: 20px 0px;
  display: inline-block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-main-menu ul li a {
    font-size: 14px;
    padding: 20px 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-main-menu ul li a {
    font-size: 14px;
    padding: 20px 0px;
  }
}
.tp-main-menu ul li a:hover {
color: #eb4d00ba;
}
.tp-main-menu ul li > .submenu {
  position: absolute;
  background-color: #fff;
  width: 270px;
  z-index: 999;
  margin-left: 0;
  padding: 30px 0px;
  top: 110%;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  box-shadow: 0px 8px 20px rgba(61, 110, 168, 0.2);
  text-align: start;
  border-top: 5px solid var(--tp-theme-1);
  border-radius: 5px 5px 0 0;
}
.tp-main-menu ul li > .submenu li {
  margin: 0;
  display: block;
  margin-bottom: 15px;
  padding: 0 40px;
}
.tp-main-menu ul li > .submenu li:last-child {
  margin-bottom: 0;
}
.tp-main-menu ul li > .submenu li a {
  padding: 0;
  margin: 0;
  display: inline-block;
  text-transform: capitalizes;
  font-size: 14px;
  color: var(--tp-common-black);
  position: relative;
  letter-spacing: 1px;
}
.tp-main-menu ul li > .submenu li a::after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0;
  left: auto;
  height: 1px;
  width: 0;
  background-color: var(--tp-theme-1);
  transition: 0.7s;
  display: inline-block;
}
.tp-main-menu ul li > .submenu li:hover a {
  color: var(--tp-theme-1);
}
.tp-main-menu ul li > .submenu li:hover a::after {
  width: 100%;
  right: auto;
  left: 0;
}


@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-white-menu ul {
    margin-right: -100px;
  }
}
.tp-white-menu ul li {
  margin: 0px 40px;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .tp-white-menu ul li {
    margin: 0px 32px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-white-menu ul li {
    margin: 0px 23px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-white-menu ul li {
    margin: 0px 20px;
  }
}
.tp-white-menu ul li a {
  color: var(--tp-common-white);
  font-size: 14px;
}

.submenu-2 ul li:hover a {
  color: var(--tp-common-orange);
}
.submenu-2 ul li > .submenu {
  border-top: 5px solid var(--tp-common-orange);
}
.submenu-2 ul li > .submenu li a::after {
  background-color: var(--tp-common-orange);
}
.submenu-2 ul li > .submenu li:hover a {
  color: var(--tp-common-orange);
}
.submenu-2 ul li > .submenu li:hover a::after {
  width: 100%;
  right: auto;
  left: 0;
}

.tp-header-right {
  margin-left: 55px;
}
@media (max-width: 767px) {
  .tp-header-right {
    padding-right: 34px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-header-right {
    margin-left: 0px;
  }
}
.tp-header-right ul {
  text-align: end;
}
.tp-header-right ul li {
  display: inline-block;
  padding: 35px 0px;
  padding-left: 45px;
  margin-left: 45px;
  /* border-left: 1px solid var(--tp-border-3); */
  position: relative;
}
.tp-header-right ul li:hover .minicart {
  opacity: 1;
  visibility: visible;
  top: 100%;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .tp-header-right ul li {
    padding-left: 35px;
    margin-left: 35px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-header-right ul li {
    padding-left: 30px;
    margin-left: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-header-right ul li {
    padding: 25px 0px;
    padding-left: 20px;
    margin-left: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-header-right ul li {
    padding: 25px 0px;
    padding-left: 15px;
    margin-left: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-header-right ul li {
    padding: 15px 0px;
    padding-left: 15px;
    margin-left: 15px;
  }
}
@media (max-width: 767px) {
  .tp-header-right ul li {
    padding: 0px 0px;
    padding-left: 15px;
    margin-left: 0px;
    border-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-header-right ul li {
    padding: 12px 15px;
    padding-left: 25px;
  }
}
.tp-header-right ul li > a {
  height: 55px;
  width: 55px;
  color: var(--tp-common-black);
  display: inline-block;
  text-align: center;
  line-height: 55px;
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  opacity: 0.76;
  border: 1px solid var(--tp-border-1);
  box-shadow: 0px 6px 12px rgba(74, 74, 74, 0.07);
  border-radius: 8px;
}
.tp-header-right ul li > a i {
  transition: 0.3s;
}
.tp-header-right ul li > a > span {
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  height: 20px;
  width: 20px;
  background-color: var(--tp-common-green);
  display: inline-block;
  position: absolute;
  right: -10px;
  top: 33px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  box-shadow: 0px 4px 8px rgba(91, 91, 91, 0.25);
  cursor: pointer;
}

@media (min-width: 1200px) {
  .tp-header-right {
    display: none;
  }
}
.header-right-two > a.tp-search, .minicart-box > a.tp-search, .search-wrapper > a.tp-search {
  color: var(--tp-common-white);
  font-size: 22px;
  font-weight: 600;
}
.header-right-two > a.bars, .minicart-box > a.bars, .search-wrapper > a.bars {
  color: var(--tp-common-white);
  font-size: 22px;
  font-weight: 600;
}
@media (max-width: 767px) {
  .header-right-two > a.bars, .minicart-box > a.bars, .search-wrapper > a.bars {
    margin-left: 0;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background-color: var(--tp-common-orange);
    color: var(--tp-common-white);
    text-align: center;
    border-radius: 5px;
    font-size: 16px;
  }
}
.header-right-two > a.tp-shopping-bskt, .minicart-box > a.tp-shopping-bskt, .search-wrapper > a.tp-shopping-bskt {
  color: var(--tp-common-white);
  font-size: 22px;
  font-weight: 600;
  position: relative;
  padding: 38px 0;
  margin-left: 40px;
}
.header-right-two > a.tp-shopping-bskt span, .minicart-box > a.tp-shopping-bskt span, .search-wrapper > a.tp-shopping-bskt span {
  height: 20px;
  width: 20px;
  background-color: #FF7425;
  display: inline-block;
  border-radius: 50%;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  top: 28px;
  right: -16px;
}
.header-right-two > a.tp-btn-border, .minicart-box > a.tp-btn-border, .search-wrapper > a.tp-btn-border {
  margin-left: 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .header-right-two > a.tp-btn-border, .minicart-box > a.tp-btn-border, .search-wrapper > a.tp-btn-border {
    margin-left: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-right-two > a.tp-btn-border, .minicart-box > a.tp-btn-border, .search-wrapper > a.tp-btn-border {
    margin-left: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-right-two > a.tp-btn-border, .minicart-box > a.tp-btn-border, .search-wrapper > a.tp-btn-border {
    margin-left: 50px;
  }
}

.tp-social-menu ul li {
  display: inline-block;
  margin: 55px 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-social-menu ul li {
    margin: 40px 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-social-menu ul li {
    margin: 40px 20px;
  }
}
.tp-social-menu ul li a {
  padding: 10px 12px;
  border: 2px solid var(--tp-border-1);
  border-radius: 47px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
}
.tp-social-menu ul li a img {
  padding-right: 8px;
}

.header-right-three button {
  height: 55px;
  width: 55px;
  background-color: var(--tp-common-white);
  color: var(--tp-common-black);
  text-align: center;
  line-height: 55px;
  border-radius: 8px;
  font-size: 22px;
  font-weight: 400;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .header-right-three button {
    box-shadow: 0px 6px 12px rgba(74, 74, 74, 0.07);
  }
}

.header-sticky .header-right-three button {
  box-shadow: 0px 6px 12px rgba(74, 74, 74, 0.07);
}

.header-three.header-sticky {
  box-shadow: 0px 6px 12px rgba(74, 74, 74, 0.07);
}

.tp-search-form {
  position: absolute;
  top: 110%;
  right: -50px;
  padding: 40px;
  background-color: black;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
  z-index: 9;
}
.tp-search-form.search-right {
  right: 400px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-search-form.search-right {
    right: 200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-search-form.search-right {
    right: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-search-form.search-right {
    right: 100px;
  }
}
@media (max-width: 767px) {
  .tp-search-form {
    padding: 20px;
  }
}
.tp-search-form button {
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--tp-common-white);
}
.tp-search-form input {
  padding-right: 50px;
  width: 270px;
  margin-bottom: 0;
  color: inherit;
  border: none;
  display: block;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-width: 0 0 1px 0;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--tp-common-white);
  background-color: transparent;
}
@media (max-width: 767px) {
  .tp-search-form input {
    width: 200px;
    height: 40px;
  }
}
.tp-search-form input::-webkit-input-placeholder {
  color: var(--tp-grey-1);
  font-size: 16px;
}
.tp-search-form input:-moz-placeholder {
  color: var(--tp-grey-1);
  font-size: 16px;
}
.tp-search-form input::-moz-placeholder {
  color: var(--tp-grey-1);
  font-size: 16px;
}
.tp-search-form input:-ms-input-placeholder {
  color: var(--tp-grey-1);
  font-size: 16px;
}
.tp-search-form input:focus::-webkit-input-placeholder {
  color: var(--tp-common-white);
}
.tp-search-form input:focus:-moz-placeholder {
  color: var(--tp-common-white);
}
.tp-search-form input:focus::-moz-placeholder {
  color: var(--tp-common-white);
}
.tp-search-form input:focus:-ms-input-placeholder {
  color: var(--tp-common-white);
}

@media (max-width: 767px) {
  .tp-header-black-sticky {
    padding: 20px 0;
  }
}

.search-open .tp-search-form {
  top: 100%;
  visibility: visible;
  opacity: 1;
}

.tp-search-box {
  position: relative;
}
.tp-search-box .search-close {
  font-weight: 300;
  font-size: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.3s;
}

.search-open .tp-search-box .search-close {
  transform: translate(-50%, -50%) scale(1);
}

.search-open .tp-search-toggle {
  transition: 0.3s;
  opacity: 0;
  transform: scale(0);
}

.minicart-box:hover .minicart {
  opacity: 1;
  visibility: visible;
}

.minicart {
  background: #fff;
  opacity: 0;
  padding: 25px;
  position: absolute;
  right: -50px;
  top: 110%;
  transition: all 0.3s ease 0s;
  width: 350px;
  z-index: 9;
  box-shadow: 0px 8px 20px rgba(61, 110, 168, 0.3);
  visibility: hidden;
}
@media (max-width: 767px) {
  .minicart {
    right: -69px;
    width: 325px;
    display: none;
  }
}

.checkout-link .tp-btn {
  height: 50px;
  line-height: 50px;
}
.checkout-link .tp-btn-dark-lg {
  height: 50px;
  line-height: 50px;
}

.ede-shop-cart:hover .minicart {
  opacity: 1;
  visibility: visible;
  z-index: 99;
  top: 100%;
}

.minicart .cart-img {
  float: left;
}

.minicart .cart-content {
  float: left;
  padding-left: 15px;
  text-align: left;
}

.minicart .cart-content a {
  color: var(--tp-common-black);
  font-size: 15px;
  font-weight: 700;
}

.minicart .cart-content a:hover {
  color: var(--tp-theme-1);
  background: none;
}

.minicart .cart-img img {
  width: 85px;
}

.minicart .cart-price span {
  color: #ddd;
  font-size: 13px;
}

.minicart .cart-price .new {
  font-size: 14px;
  color: #747691;
}

.minicart .cart-price span {
  color: #a5a7bc;
  font-size: 13px;
  font-weight: 500;
}

.minicart > div {
  display: block;
  margin-bottom: 7px;
  margin-left: 0;
  overflow: hidden;
  padding: 0;
}

.minicart > li:last-child {
  margin-bottom: 0;
}

.minicart .del-icon > a {
  color: var(--tp-common-black);
}

.minicart .del-icon > a:hover {
  color: var(--tp-common-orange);
  background: none;
}

.minicart .del-icon {
  float: right;
  margin-top: 30px;
}

.total-price span {
  color: #747691;
  font-weight: 700;
  font-size: 16px;
}

.total-price {
  border-top: 1px solid #cacadb;
  overflow: hidden;
  padding-top: 25px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.minicart .checkout-link a:last-child {
  margin: 0;
}

.minicart .checkout-link a.red-color:hover {
  background: #84b77c;
}

.header-sep {
  line-height: 1;
  height: 2px;
}

.tp-product-quantity {
  width: 148px;
  position: relative;
}

.tp-cart-plus,
.tp-cart-minus {
  width: 45px;
  height: 44px;
  line-height: 44px;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  color: var(--tp-common-black);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.tp-cart-plus::after,
.tp-cart-minus::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 26px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  background-color: #DADCE0;
}
.tp-cart-plus svg,
.tp-cart-minus svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
.tp-cart-plus:hover,
.tp-cart-minus:hover {
  cursor: pointer;
  color: var(--tp-theme-1);
}
.tp-cart-plus.tp-cart-plus,
.tp-cart-minus.tp-cart-plus {
  left: auto;
  right: 0;
}
.tp-cart-plus.tp-cart-plus::after,
.tp-cart-minus.tp-cart-plus::after {
  left: 0;
  right: auto;
}

.tp-cart-input[type=text] {
  height: 44px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #DADCE0;
  background-color: var(--tp-common-white);
  padding: 0 45px;
}
.tp-cart-input[type=text]:focus {
  outline: none;
}

.header-sticky .tp-social-menu ul li {
  margin: 30px 25px;
}

.z-999 {
  z-index: 999;
}

.side-navbar {
  position: fixed;
  visibility: hidden;
  transition: all 0.5s ease;
}

.side-navbar-1 {
  position: fixed;
  visibility: hidden;
  transition: all 0.5s ease;
}

.side-menu {
  width: auto;
  right: -200%;
  z-index: 999;
  width: 70vw;
  padding-left: 25px;
  height: 100vh;
  background-color: var(--tp-common-white);
  display: flex;
  justify-content: space-between;
  box-shadow: -2px 0px 10px 0px #00000012;
}
.side-menu ::-webkit-scrollbar {
  width: 5px;
}
.side-menu ::-webkit-scrollbar-track {
  background: #fff;
}
.side-menu ::-webkit-scrollbar-thumb {
  background: #cacadb;
  border-radius: 25px;
  visibility: hidden;
}
.side-menu ::-webkit-scrollbar-thumb:hover {
  background: #888888;
}
.side-menu:hover ::-webkit-scrollbar-thumb {
  visibility: visible;
}
.side-menu .side-menu-left {
  overflow-y: scroll;
  height: 100vh;
}
.side-menu div:nth-child(1) {
  padding-top: 90px;
  width: 100%;
}
.side-menu div:nth-child(2) {
  width: 30%;
}
.side-menu div .side-nav-left-list {
  display: grid;
  grid-template-columns: auto auto auto auto;grid-template-columns: repeat(5, 1fr);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .side-menu div .side-nav-left-list {
    grid-template-columns: auto auto auto;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .side-menu div .side-nav-left-list {
    grid-template-columns: auto auto auto;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .side-menu div .side-nav-left-list {
    grid-template-columns: auto auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .side-menu div .side-nav-left-list {
    grid-template-columns: auto auto;
  }
}

.side-menu div .side-nav-left-list li .sub-title-sm {
  font-size: 15px;
  letter-spacing: 0.35px;
}
.side-menu div .side-nav-left-list li .tp-service-sm-title {
  font-size: 20px;
  font-family: var(--tp-ff-head);
  font-weight: 600;
 
}
.side-menu div .side-nav-left-list li .tp-service-sm-title:hover {
  color: var(--tp-theme-1);
  transition: none;
}
.side-menu div .side-nav-right-heads {
  border-left: 1px solid var(--tp-grey-4);
  background:
  radial-gradient(circle at 80% 35%, rgba(255, 122, 45, 0.12), transparent 35%),
  linear-gradient(180deg, #1F3159 0%, #15233E 45%, #0E1728 100%);
  padding-top: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .side-menu div .side-nav-right-heads {
    padding-top: 40%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .side-menu div .side-nav-right-heads {
    padding-top: 40%;
  }
}
.side-menu div .side-nav-right-heads h3 {
  font-size: 2rem;
  font-weight: 600;
  padding: 0px 10px;
  width: 15.3vw;
  color: #fff;
  margin-bottom: 0px;
  text-align: left;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .side-menu div .side-nav-right-heads h3 {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .side-menu div .side-nav-right-heads h3 {
    font-size: 1.7rem;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .side-menu div .side-nav-right-heads h3 {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .side-menu div .side-nav-right-heads h3 {
    font-size: 1.5rem;
  }
}
.side-menu div .side-nav-right-heads .side-menu-btm-text {
  font-size: 28px;
  font-weight: 600;
}
.side-menu div .side-nav-right-heads p {
  color: #dbd7d7;
  font-size: 15px;
  padding: 0px 10px;
  line-height: 19px;
  margin-bottom: 10px;
}
.side-menu div .side-nav-right-heads img {
  border-radius: 15px;
  margin-top: 20px;
}

@media xxxl {
  .invisible-xl-lg {
    display: none;
  }
}
@media xxl {
  .invisible-xl-lg {
    display: none;
  }
}
@media xl {
  .invisible-xl-lg {
    display: none;
  }
}
@media lg {
  .invisible-xl-lg {
    display: none;
  }
}
@media md {
  .invisible-xl-lg {
    display: none;
  }
}
@media md {
  .invisible-xl-lg {
    display: none;
  }
}

.side-menu-1 {
  width: auto;
  right: -200%;
  z-index: 999;
  width: 70vw;
  padding-left: 25px;
  height: 100vh;
  background-color: var(--tp-common-white);
  display: flex;
  justify-content: space-between;
    box-shadow: -2px 0px 10px 0px #00000012;

}
.side-menu-1 .s-m-grid {
  display: grid;
  grid-template-columns: 35% auto;
}
.side-menu-1 .s-m-grid ::-webkit-scrollbar-thumb {
  visibility: hidden;
}
.side-menu-1 .s-m-grid:hover ::-webkit-scrollbar-thumb {
  visibility: visible;
}
.side-menu-1 div ul:first-child {
  padding-right: 30px;
  border-right: 1px solid var(--tp-grey-1);
}
.side-menu-1 div ul:first-child li {
  padding: 13px 20px 13px 0px;
  font-size: 26px;
}
.side-menu-1 div ul:first-child li h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.side-menu-1 div ul:first-child li .tp-service-sm-title-ns {
  font-size: 18px;
  font-family: var(--tp-ff-head);
  font-weight: 500;
  color: var(--tp-common-black);
  margin-bottom: 0px;
}
.side-menu-1 div ul:first-child li .tp-service-sm-title-ns:hover {
  color: var(--tp-theme-1);
  transition: none;
}
.side-menu-1 div ul li {
  padding: 7px 20px;
}
.side-menu-1 div ul li .sub-title-sm {
  font-size: 14px;
  letter-spacing: 0.35px;
  margin-bottom: 12px;
}
.side-menu-1 div ul li .tp-service-sm-title {
  font-size: 20px;
  font-family: var(--tp-ff-head);
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 7px;
}
.side-menu-1 div ul li .tp-service-sm-title:hover {
  color: var(--tp-theme-1);
  transition: none;
}
.side-menu-1 div:nth-child(1) {
  padding-top: 90px;
  width: 100%;
}
.side-menu-1 div .side-nav-right-heads {
  border-left: 1px solid var(--tp-grey-4);
  background-color: #8fd8fc;
  padding-top: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .side-menu-1 div .side-nav-right-heads {
    padding-top: 40%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .side-menu-1 div .side-nav-right-heads {
    padding-top: 40%;
  }
}
.side-menu-1 div .side-nav-right-heads h3 {
  font-size: 2rem;
  font-weight: 600;
  padding: 0px 10px;
  width: 15.3vw;
  color: #173D4E;
  margin-bottom: 0px;
  text-align: left;
}
.side-menu-1 div .side-nav-right-heads .side-menu-btm-text {
  font-size: 28px;
  font-weight: 600;
}
.side-menu-1 div .side-nav-right-heads p {
  color: rgb(85, 85, 85);
  font-size: 15px;
  padding: 0px 10px;
  margin-bottom: 10px;
}
.side-menu-1 div .side-nav-right-heads img {
  border-radius: 15px;
  margin-top: 20px;
}

.sivenavbottom img {
  width: 90%;
}
.sivenavbottom{
  margin-bottom: 20px;
  margin-top: 20px;
}

.clr-the {
  color: var(--tp-theme-1);
}

.options-s-menu {
  padding: 20px 0px 0px 30px;
  display: none;
  overflow-y: scroll;
}

body ::-webkit-scrollbar {
  width: 5px;
}
body ::-webkit-scrollbar-track {
  background: #fff;
}
body ::-webkit-scrollbar-thumb {
  background: #cacadb;
  border-radius: 25px;
}
body ::-webkit-scrollbar-thumb:hover {
  background: #888888;
}

.show {
  display: block;
}

.tp-service-sm-title-ns.overview-head {
  font-size: 25px;
  font-family: var(--tp-ff-head);
  font-weight: 400;
  padding: 20px;
}

.tp-service-sm-title-ns.active1 {
  color: var(--tp-theme-1);
}

.side-nav-left-list-1 hr {
  margin: 30px 20px 30px 0px;
}

.side-nav-left-list-1 span {
  font-weight: 600;
}

.tp-service-sm-title-ns.overview-head:hover {
  color: var(--tp-theme-1);
}

.tp-service-sm-title-ns.overview-head i {
  padding-left: 20px;
}

.side-nav-left-head {
  font-size: 25px;
  font-weight: 600;
  padding-bottom: 20px;
  
  color: var(--tp-theme-1);
}

.watchbtn {
  width: 100px;
  font-size: 15px;
  border: 1px solid var(--tp-theme-1);
  padding: 10px 20px;
  border-radius: 5px;
  color: var(--tp-theme-1);
}

.watchdemo-div {
  align-items: center;
  height: 70px;
  left: 0;
}
.watchdemo-div h3 {
  font-size: 20px;
  margin-left: 50px;
}

.side-nav-login {
  right: -200%;
  width: 50vw;
  padding-left: 130px;
  height: 100vh;
  background-color: #e7f3f9;
  position: fixed;
  visibility: hidden;
  transition: all 0.5s ease;
}
@media (max-width: 767px) {
  .side-nav-login {
    width: 100vw;
    padding-left: 30px;
  }
}

.side-nav-signup {
  width: auto;
  right: -200%;
  top: 50px;
  width: 50vw;
  padding-left: 130px;
  height: 100vh;
  background-color: #e7f3f9;
  position: fixed;
  visibility: hidden;
  transition: all 0.5s ease;
}
@media (max-width: 767px) {
  .side-nav-signup {
    top: 20px;
    width: 100vw;
    padding-left: 30px;
  }
}

.side-nav-closebtn {
  position: absolute;
  top: 60px;
  left: 45px;
  font-size: 15px;
  display: none;
}
@media (max-width: 767px) {
  .side-nav-closebtn {
    top: 12%;
    color: #000;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    display: block;
  }
}

.side-nav-login-form {
  width: 80%;
  height: 100vh;
  justify-content: center;
  display: flex;
  margin-top: 50px;
  flex-direction: column;
}
@media (max-width: 767px) {
  .side-nav-login-form {
    height: 90vh;
    width: 90%;
  }
}

.side-nav-signup-form {
  width: 80%;
  height: 100vh;
  justify-content: center;
  display: flex;
  top: 50px;
  flex-direction: column;
}
@media (max-width: 767px) {
  .side-nav-signup-form {
    height: 100vh;
    width: 90%;
  }
}

.underline-input {
  background-color: transparent;
  border: none;
  padding-left: 0px;
  border-bottom: 1px solid #000;
  outline: none;
  height: 70px;
  font-size: 45px;
  border-radius: 0px;
}
@media (max-width: 767px) {
  .underline-input {
    height: 30px;
    font-size: 25px;
    padding-bottom: 10px;
  }
}

.underline-input::placeholder {
  color: #000;
}

.underline-input:focus {
  background-color: transparent;
  border: none;
  padding-left: 0px;
  box-shadow: none;
  border-radius: 0px;
  border-bottom: 1px solid var(--tp-theme-1);
}

.form-check-input {
  width: 20px;
  height: 20px;
}

.side-nav-forget:hover {
  color: var(--tp-theme-1);
}

.side-nav-login-btn {
  margin-top: 20px;
  margin-left: 2px;
  font-size: 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 800;
  color: #000;
}
@media (max-width: 767px) {
  .side-nav-login-btn {
    margin-top: 15px;
    font-size: 18px;
  }
}

.side-nav-signup-next {
  margin-top: 40px;
  margin-left: 2px;
  font-size: 25px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 800;
  color: #000;
  cursor: pointer;
}
@media (max-width: 767px) {
  .side-nav-signup-next {
    margin-top: 15px;
    font-size: 18px;
  }
}

.side-nav-signup-create {
  margin-top: 40px;
  margin-left: 2px;
  font-size: 25px;
  display: flex;
  justify-content: flex-end !important;
  align-items: center;
  font-weight: 800;
  color: #000;
  cursor: pointer;
  width: 100%;
}
@media (max-width: 767px) {
  .side-nav-signup-create {
    margin-top: 15px;
    font-size: 18px;
  }
}

#signup-2 {
  display: none;
}

.btn-google {
  display: inline-block;
  text-align: center;
  color: var(--colors-grey-900);
  padding: 18px 18px 18px 18px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  border-radius: 3px;
  transition: all 250ms ease;
  border: 1px solid #000;
  vertical-align: baseline;
  height: 75px;
}
.btn-google:hover {
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
  .btn-google.mt-40 {
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  .btn-google {
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    height: 55px;
  }
}

.or-login {
  overflow: hidden;
  position: relative;
  text-align: center;
  color: #000;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
}
@media (max-width: 767px) {
  .or-login {
    margin-top: 20px;
  }
}
.or-login::after {
  content: "";
  position: absolute;
  top: 50%;
  border-bottom: 1px solid #000;
  width: 55%;
  margin: 0 20px;
}
@media (max-width: 767px) {
  .or-login::after {
    width: 40%;
    right: -5%;
  }
}
.or-login::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5%;
  border-bottom: 1px solid #000;
  width: 45%;
  margin: 0 20px;
}
@media (max-width: 767px) {
  .or-login::before {
    width: 40%;
    left: -5%;
  }
}

.side-nav-signup-head {
  text-align: left;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .side-nav-signup-head {
    margin-bottom: 20px;
  }
}

.side-nav-signup-head h3 {
  font-size: 35px;
  font-weight: 400;
  font-family: var(--tp-ff-head);
}
@media (max-width: 767px) {
  .side-nav-signup-head h3 {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .side-nav-signup-head p {
    font-size: 13px;
    line-height: 16px;
  }
}

.side-nav-login-btn i {
  margin-left: 10px;
}

.side-nav-signup-next i {
  margin-left: 10px;
}

.side-nav-signup-create i {
  margin-left: 10px;
}

.side-nav-signup-next:hover {
  color: var(--tp-common-black-2);
}

.side-nav-signup-next:hover i {
  transform: translateX(5px);
  transition: 0.3s all;
}

.side-nav-signup-create:hover {
  color: var(--tp-common-black-2);
}

.side-nav-signup-create:hover i {
  transform: translateX(5px);
  transition: 0.3s all;
}

.side-nav-login-btn:hover {
  color: var(--tp-common-black-2);
}

.side-nav-login-btn:hover i {
  transform: translateX(5px);
  transition: 0.3s all;
}

.bottom-text-log-sign {
  margin-top: 20px;
  bottom: 30px;
  text-align: start;
  font-size: 18px;
}
@media (max-width: 767px) {
  .bottom-text-log-sign {
    font-size: 15px;
  }
}

.z-999 {
  z-index: 999;
}

.bottom-text-log-sign a {
  text-decoration: underline;
}

.bottom-text-log-sign a:hover {
  color: var(--tp-theme-1);
}

.btn.tp-btn.btn-primary {
  border: none;
  height: 50px;
  line-height: 50px;
  box-shadow: none;
  border: 1px solid transparent;
}

.btn.tp-btn.btn-primary:hover {
  border: 1px solid var(--tp-theme-1);
  background-color: transparent;
  color: var(--tp-theme-1);
}

.mobile-signup-btn span {
  letter-spacing: 0.35px;
}

/*----------------------------------------*/
/*  04. hero CSS START
/*----------------------------------------*/
.hero-grideant-bg {
  padding-top: 120px;
  
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .hero-grideant-bg {
    padding-top: 110px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-grideant-bg {
    padding-top: 10px;
  }
}

.hero-space {
  padding-bottom: 115px;
}
@media (max-width: 767px) {
  .hero-space {
    padding-bottom: 70px;
  }
}

/* @media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero {
    margin-bottom: 70px;
  }
} */
.tp-hero__section-box .tp-slider-title {
  padding-bottom: 10px;
}
.tp-hero__section-box p {
  font-size: 20px;
  line-height: 32px;
  color: var(--tp-common-black-2);
  padding-bottom: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero__section-box p {
    font-size: 17px;
    line-height: 26px;
  }
}
@media (max-width: 767px) {
  .tp-hero__section-box p {
    font-size: 16px;
    line-height: 26px;
  }
}
@media (max-width: 767px) {
  .tp-hero__wrapper {
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
}
.tp-hero__button {
  margin-right: 50px;
  line-height: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero__button {
    margin-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero__button {
    margin-right: 20px;
  }
  .hero-grideant-bg{
        padding-top: 110px !important;
    }
     .tp-hero__wrapper {
    flex-wrap: wrap;
    /* margin-bottom: 20px; */
  }
}
@media (max-width: 767px) {
  .tp-hero__button {
    margin-bottom: 20px;
    margin-right: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero__button {
    margin-right: 20px;
  }
}
@media (max-width: 767px) {
  .tp-hero__play-button {
    margin-bottom: 20px;
  }
}
.tp-hero__play-button a {
  font-weight: 900;
  font-size: 16px;
  height: 70px;
  width: 70px;
  background-color: var(--tp-common-yellow);
  border-radius: 50%;
  text-align: center;
  line-height: 70px;
  display: inline-block;
  color: var(--tp-common-white);
  transition: 0.3s;
  margin-right: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero__play-button a {
    font-size: 13px;
    height: 60px;
    width: 60px;
    line-height: 60px;
  }
}
@media (max-width: 767px) {
  .tp-hero__play-button a {
    font-size: 14px;
    height: 55px;
    width: 55px;
    line-height: 55px;
  }
}
.tp-hero__play-button a:hover {
  background-color: var(--tp-theme-1);
}
.tp-hero__play-button span {
  font-weight: 700;
  font-size: 16px;
  line-height: 64px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tp-common-black);
}
.tp-hero__thumb {
  mix-blend-mode: luminosity;
}
.tp-hero__thumb img {
  color: var(--tp-common-black);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero__thumb img {
    width: 100%;
  }
}
.tp-hero__thumb3 {
  margin-top: 30px;
  margin-right: -150px;
  margin-bottom: 55px;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .tp-hero__thumb3 {
    margin-right: -90px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero__thumb3 {
    margin-right: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tp-hero__thumb3 {
    margin-right: 0px;
    margin-top: 0;
  }
}
.tp-hero__thumb3-shape-1 {
  position: absolute;
  top: 35%;
  left: -11%;
  z-index: -1;
}
.tp-hero__thumb3-shape-2 {
  position: absolute;
  top: 19%;
  right: -4%;
  animation: jumpTwo 4s infinite linear;
}

.tp-slider-title {
    font-weight: 600;
    font-size: 64px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-family: "Poppins", sans-serif !important;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-slider-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-slider-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-slider-title {
    font-size: 65px;
  }
}
@media (max-width: 767px) {
  .tp-slider-title {
    font-size: 40px;
  }
}

.tp-slider-sm-title {
  font-weight: 600;
  font-size: 66px;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-slider-sm-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-slider-sm-title {
    font-size: 60px;
  }
}
@media (max-width: 767px) {
  .tp-slider-sm-title {
    font-size: 34px;
  }
}

.tp-hero-shape-one {
  position: absolute;
  top: 5px;
  right: 20px;
  z-index: 3;
  animation: jumpTwo 4s infinite linear;
}

.tp-hero-shape-two {
  position: absolute;
  bottom: 112px;
  right: 28px;
  z-index: 3;
}

.tp-hero-shape-four {
  position: absolute;
  right: 0;
  animation: rotate2 5s linear infinite;
}

.tp-hero-shape-three {
  position: absolute;
  bottom: 95px;
  left: -60px;
  z-index: 3;
  animation: moving 5s ease-in-out infinite;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-shape-three {
    bottom: 40px;
    left: -103px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-shape-three {
    bottom: 40px;
    left: -130px;
  }
}

.tp-slider-exp-title {
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  padding-bottom: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-slider-exp-title {
    padding-bottom: 5px;
  }
}
@media (max-width: 767px) {
  .tp-slider-exp-title {
    font-size: 25px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tp-slider-exprience {
    margin-bottom: 60px;
  }
}
.tp-slider-exprience__content {
  padding-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-slider-exprience__content {
    padding-bottom: 5px;
  }
}
.tp-slider-exprience__content p {
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--tp-common-black-2);
  padding-right: 140px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-slider-exprience__content p {
    padding-right: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-slider-exprience__content p {
    padding-right: 45px;
  }
}
@media (max-width: 767px) {
  .tp-slider-exprience__content p {
    padding-right: 0px;
    font-size: 17px;
    line-height: 28px;
  }
}
.tp-slider-exprience__img {
  margin-right: 15px;
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .tp-slider-exprience__img {
    margin-right: 7px;
  }
}
.tp-slider-exprience__meta span {
  font-weight: 400;
  font-size: 14px;
  color: var(--tp-common-black-2);
}
@media (max-width: 767px) {
  .tp-slider-exprience__meta span {
    font-size: 13px;
  }
}
.tp-slider-exprience__meta span i {
  color: var(--tp-common-yellow);
}

.tp-client-name {
  font-weight: 600;
  font-size: 20px;
}

.tp-slider-exp-item {
  background-color: var(--tp-common-white);
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0px 9px 15px rgba(7, 18, 35, 0.08);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-slider-exp-item {
    padding: 28px;
  }
}
.tp-slider-exp-item__icon {
  height: 50px;
  width: 50px;
  background-color: var(--tp-common-yellow);
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  margin-bottom: 20px;
}
.tp-slider-exp-item__icon svg {
  color: var(--tp-common-white);
}
.tp-slider-exp-item__icon.icon-bg-green {
  background-color: var(--tp-common-green);
}

.tp-exp-sm-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  color: var(--tp-common-black);
  padding-bottom: 20px;
  
}
.hero-banner-divider-title{
white-space: nowrap;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-exp-sm-title br {
    display: none;
  }
}

.hero-bg-img {
  padding-top: 280px;
  padding-bottom: 130px;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .hero-bg-img {
    padding-top: 170px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-bg-img {
    padding-top: 180px;
  }
}

.hero-overlay {
  position: relative;
}
.hero-overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: #191B1D;
  opacity: 0.7;
}

.hero-section-title-box h3 {
  margin-bottom: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-section-title-box h3 br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-section-title-box h3 {
    margin-bottom: 40px;
  }
}
@media (max-width: 767px) {
  .hero-section-title-box h3 {
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-section-title-box h3 {
    margin-bottom: 40px;
  }
}
.hero-section-title-box h3 span img {
  border-radius: 106px;
}

@media (max-width: 767px) {
  .tp-hero-content {
    flex-wrap: wrap;
  }
}
.tp-hero-content__thumb {
  padding-left: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-content__thumb {
    padding-left: 0;
    margin-bottom: 40px;
  }
}
@media (max-width: 767px) {
  .tp-hero-content__thumb {
    padding-left: 0;
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero-content__thumb {
    padding-left: 0;
    margin-bottom: 40px;
    width: 100%;
  }
}
.tp-hero-content__thumb img {
  border-radius: 106px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-hero-content__thumb img {
    width: 100%;
  }
}
.tp-hero-content__text {
  padding-left: 20px;
  padding-right: 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-content__text {
    padding-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-content__text {
    padding-right: 0;
    padding-left: 30px;
  }
}
@media (max-width: 767px) {
  .tp-hero-content__text {
    padding-right: 0;
    padding-left: 0px;
  }
}
.tp-hero-content__text p {
  font-weight: 400;
  font-size: 26px;
  line-height: 44px;
  color: var(--tp-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-content__text p {
    font-size: 20px;
    line-height: 33px;
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-hero-content__text p {
    font-size: 17px;
    line-height: 29px;
  }
}
@media (max-width: 767px) {
  .tp-hero-content__text p {
    font-size: 20px;
    line-height: 28px;
  }
}

.scroll-down .circle-1, .scroll-down .circle-2, .scroll-down .circle-3 {
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 8px;
}
.scroll-down .circle-1 {
  height: 15px;
  width: 15px;
  background-color: rgba(255, 255, 255, 0.1);
}
.scroll-down .circle-2 {
  height: 9px;
  width: 9px;
  background-color: rgba(255, 255, 255, 0.4);
}
.scroll-down .circle-3 {
  height: 5px;
  width: 5px;
  background-color: white;
}
.scroll-down > span {
  margin-top: 2px;
  display: inline-block;
}
.scroll-down > span i {
  font-size: 35px;
  color: var(--tp-common-orange);
  transform: rotate(180deg);
}

.tp-hero-blue-shape {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: 480px;
  background-color: var(--tp-theme-1);
  z-index: -1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-hero-blue-shape {
    width: 380px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-hero-blue-shape {
    width: 340px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-blue-shape {
    width: 385px;
  }
}

.review-wrapper {
  padding: 20px 15px;
  display: inline-block;
  background-color: var(--tp-common-white);
  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
  border-radius: 12px;
  position: absolute;
  top: 10%;
  left: -10%;
  animation: jumpTwo 4s infinite linear;
}

.review-wrapper-2 {
  padding: 20px 15px;
  display: inline-block;
  background-color: var(--tp-common-white);
  box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
  border-radius: 12px;
  position: absolute;
  bottom: 10%;
  left: -10%;
  animation: about-circle 5s linear infinite alternate;
}

.reviews-text span {
  font-weight: 700;
  font-size: 14px;
  color: var(--tp-common-black);
}
.reviews-text p {
  font-weight: 500;
  font-size: 12px;
  color: #818181;
}
.reviews-text p span {
  color: var(--tp-common-black);
}
.reviews-text p i {
  color: var(--tp-common-yellow);
}

.hero-space-three {
  padding-top: 140px;
}

.hero-thumb-space {
  margin-bottom: 100px;
}

/*----------------------------------------*/
/*  05. about CSS START
/*----------------------------------------*/
.tp-ab-section-title-box {
  padding-left: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-ab-section-title-box {
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-ab-section-title-box {
    padding-left: 30px;
  }
}
@media (max-width: 767px) {
  .tp-ab-section-title-box {
    padding-left: 0px;
  }
}
.tp-ab-section-title-box .tp-section-title {
  padding-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-ab-section-title-box .tp-section-title {
    padding-bottom: 15px;
  }
}
.tp-ab-section-title-box p {
  padding-bottom: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-ab-section-title-box p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .tp-ab-section-title-box p {
    font-size: 17px;
    line-height: 26px;
  }
  .tp-ab-section-title-box p br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-ab-section-title-box p {
    font-size: 18px;
    line-height: 26px;
    padding-bottom: 10px;
  }
  .tp-ab-section-title-box p br {
    display: none;
  }
}

.tp-ab-shape-one {
  position: absolute;
  top: 37px;
  left: 16px;
  animation: jumpTwo 4s infinite linear;
}

.tp-ab-shape-two {
  position: absolute;
  bottom: 102px;
  right: 72px;
}

.tp-about-thumb {
  mix-blend-mode: luminosity;
}
.tp-about-thumb img {
  background-color: #000000;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-about-thumb img {
    width: 100%;
    margin-top: 100px;
  }
}
@media (max-width: 767px) {
  .tp-about-thumb img {
    margin-top: 70px;
    padding-bottom: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-about-thumb img {
    margin-top: 100px;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .ab-area-sapce {
    padding-top: 0;
  }
}

.ab-title-xs {
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .ab-title-xs {
    font-size: 30px;
  }
  .ab-title-xs br {
    display: none;
  }
}

.ab-inner-img img {
  border-radius: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ab-inner-content {
    margin-bottom: 60px;
  }
}
.ab-inner-content p {
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  color: #6A6A74;
  padding-right: 40px;
  padding-bottom: 20px;
}

.tp-inner-list ul li {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--tp-common-black);
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
}
.tp-inner-list ul li:last-child {
  margin-bottom: 0;
}
.tp-inner-list ul li i {
  color: var(--tp-theme-1);
  position: absolute;
  top: 4px;
  left: 0;
  font-weight: 600;
}

.counter-item h4 {
  font-weight: 600;
  font-size: 65px;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  display: inline-block;
  position: relative;
}
.counter-item h4::before {
  content: "";
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #ffa376;
  z-index: -1;
  position: absolute;
  top: 10px;
  left: 0;
}
.counter-item h3 {
  font-weight: 700;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.am-fea-space {
  padding-left: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .am-fea-space {
    padding-left: 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .am-fea-space {
    padding-left: 0px;
  }
}

.am-fea-space-2 {
  padding-left: 75px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .am-fea-space-2 {
    padding-left: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .am-fea-space-2 {
    padding-left: 0px;
  }
}

.actestimonial {
  padding-right: 45px;
}
.actestimonial__icon {
  margin-bottom: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .actestimonial__icon {
    margin-bottom: 20px;
  }
}
.actestimonial__position {
  margin-bottom: 35px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .actestimonial__position {
    margin-bottom: 20px;
  }
}
.actestimonial__position span {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}
.actestimonial__paragraph p {
  font-weight: 400;
  font-size: 26px;
  color: var(--tp-common-black);
  line-height: 1.6;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .actestimonial__paragraph p {
    font-size: 21px;
  }
}
@media (max-width: 767px) {
  .actestimonial__paragraph p {
    font-size: 16px;
    margin-bottom: 50px;
  }
}
.actestimonial__paragraph p span {
  color: var(--tp-common-blue);
  font-size: 23px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .actestimonial__paragraph p span {
    font-size: 20px;
  }
}

.ac-client-name {
  font-size: 24px;
  color: var(--tp-common-black);
  font-weight: 700;
}

.am-p-space-1 {
  padding-bottom: 25px;
  padding-right: 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .am-p-space-1 {
    padding-right: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .am-p-space-1 {
    padding-right: 0px;
  }
}

.am-p-space-2 {
  padding-bottom: 25px;
  padding-right: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .am-p-space-2 {
    padding-right: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .am-p-space-2 {
    padding-right: 0px;
  }
}

.am-p-space-3 {
  padding-bottom: 25px;
  padding-right: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .am-p-space-3 {
    padding-right: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .am-p-space-3 {
    padding-right: 0px;
  }
}

.ac-ab-img {
  width: 100%;
  border-radius: 15px;
}
.ac-ab-img img {
  border-radius: 15px;
  width: 100%;
  transform: scale(1);
  transition: 1s;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ac-ab-img img {
    width: 100%;
  }
}
.ac-ab-img:hover img {
  transform: scale(1.1);
}

.tp-inner-play-button a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 105px;
  width: 105px;
  background-color: var(--tp-theme-1);
  text-align: center;
  line-height: 105px;
  color: var(--tp-common-white);
  border-radius: 50%;
  font-size: 20px;
  transition: 0.3s;
  animation: pulse 2s infinite;
}
@media (max-width: 767px) {
  .tp-inner-play-button a {
    height: 70px;
    width: 70px;
    line-height: 74px;
    font-size: 12px;
  }
}
.tp-inner-play-button a:hover {
  background-color: var(--tp-common-yellow);
}

.ab-info-space {
  padding-top: 120px;
}
@media (max-width: 767px) {
  .ab-info-space {
    padding-top: 70px;
  }
}

.amaboutinfo__client-info h4 {
  font-size: 30px;
  color: var(--tp-common-black);
  font-weight: 500;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .amaboutinfo__client-info h4 {
    font-size: 24px;
  }
}
.amaboutinfo__client-info span {
  font-size: 12px;
  color: var(--tp-theme-1);
  text-transform: uppercase;
  padding-bottom: 25px;
  display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .amaboutinfo__client-info span {
    padding-bottom: 5px;
  }
}
.amaboutinfo__client-info p {
  color: #8A90A2;
  font-size: 15px;
  font-weight: 400;
  padding-bottom: 25px;
  padding-right: 81px;
  line-height: 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .amaboutinfo__client-info p {
    padding-right: 0px;
  }
}
.amaboutinfo__experience p {
  font-size: 16px;
  font-weight: 400;
  color: #8A90A2;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .amaboutinfo__experience p {
    font-size: 14px;
  }
}
.amaboutinfo__experience p:hover a {
  color: var(--tp-theme-1);
}
.amaboutinfo__experience p b {
  color: var(--tp-common-black);
}

.amaboutsocial__icon {
  overflow: hidden;
}
@media (max-width: 767px) {
  .amaboutsocial__icon {
    display: inline-block;
    margin-bottom: 0;
  }
}
.amaboutsocial__icon > a {
  display: inline-block;
}
.amaboutsocial__icon .tp-si.tp-si-color-2 {
  background-color: var(--tp-common-blue);
}
.amaboutsocial__icon .tp-si__text {
  background-color: #4267B2;
  height: 42px;
  padding-left: 16px;
  padding-right: 28px;
  display: inline-block;
  color: var(--tp-common-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 42px;
  border-radius: 3px 0 0 3px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  margin-right: -112px;
  z-index: -1;
  position: relative;
}
@media (max-width: 767px) {
  .amaboutsocial__icon .tp-si__text {
    display: none;
  }
}
.amaboutsocial__icon .tp-si__text.tp-si-color-1 {
  background-color: #E40028;
}
.amaboutsocial__icon .tp-si__text.tp-si-color-2 {
  background-color: var(--tp-theme-1);
}
.amaboutsocial__icon .tp-si__text.tp-si-color-3 {
  background-color: var(--tp-common-blue);
}
.amaboutsocial__icon .tp-si__text.tp-si-color-4 {
  background-color: #E40028;
}
.amaboutsocial__icon .tp-si__text::after {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  height: 1px;
  width: 14px;
  background-color: rgba(255, 255, 255, 0.15);
  display: inline-block;
  z-index: 9;
}
.amaboutsocial__icon .tp-si__icon {
  background-color: #4267B2;
  height: 42px;
  width: 42px;
  text-align: center;
  display: inline-block;
  color: var(--tp-common-white);
  line-height: 42px;
  border-radius: 3px;
}
@media (max-width: 767px) {
  .amaboutsocial__icon .tp-si__icon {
    margin-right: 10px;
    margin-top: 20px;
  }
}
.amaboutsocial__icon .tp-si__icon.tp-si-color-1 {
  background-color: #E40028;
}
.amaboutsocial__icon .tp-si__icon.tp-si-color-2 {
  background-color: var(--tp-theme-1);
}
.amaboutsocial__icon .tp-si__icon.tp-si-color-3 {
  background-color: var(--tp-common-blue);
}
.amaboutsocial__icon .tp-si__icon.tp-si-color-4 {
  background-color: #E40028;
}

.si-btn-link:hover .tp-si__text {
  opacity: 1;
  visibility: visible;
  margin-right: 0px;
}
.si-btn-link:hover .tp-si__icon {
  border-radius: 0 3px 3px 0;
}

.feature-bottom-space {
  padding-bottom: 90px;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .feature-bottom-space {
    padding-bottom: 90px;
  }
}

.amfeature {
  padding-top: 50px;
}
@media (max-width: 767px) {
  .amfeature {
    padding-left: 0px;
  }
}
.amfeature__item p {
  font-size: 15px;
  line-height: 26px;
}
.amfeature__title p {
  font-size: 16px;
}
.amfeature__list ul li {
  color: var(--tp-common-black);
  font-size: 15px;
  font-weight: 500;
  position: relative;
  padding-left: 30px;
  padding-bottom: 5px;
}
.amfeature__list ul li i {
  color: #726FFC;
  font-weight: 500;
  position: absolute;
  left: 0;
  top: 6px;
}

.amskill__title p {
  font-size: 16px;
  line-height: 26px;
}

.am-skill-title {
  font-size: 30px;
  color: var(--tp-common-black);
  font-weight: 500;
  padding-bottom: 25px;
}

.am-skill-sm-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--tp-common-black);
  padding-bottom: 20px;
}

.am-contact-title {
  font-size: 24px;
  color: var(--tp-common-black);
  font-weight: 500;
  position: relative;
  overflow: hidden;
  background-color: var(--tp-common-white);
  padding-right: 90px;
  display: inline-block;
  margin-bottom: 0;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .am-contact-title {
    font-size: 23px;
  }
}

.am-border-shape {
  position: absolute;
  height: 1px;
  background-color: #F4F6FB;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  z-index: -1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .am-about-area {
    padding-bottom: 0;
  }
}
@media (max-width: 767px) {
  .am-about-area {
    padding-bottom: 0;
    padding-top: 70px;
  }
}

.contact-form {
  background-color: var(--tp-grey-6);
  border-radius: 20px;
  padding: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-form {
    padding: 30px;
  }
}
@media (max-width: 767px) {
  .contact-form {
    padding: 10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .contact-form {
    padding: 30px;
  }
}
.contact-form .input {
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .contact-form .input {
    margin-bottom: 10px;
  }
}
.contact-form .input input {
  width: 100%;
  height: 65px;
  border-radius: 5px;
  border: 1px solid transparent;
  padding: 0px 20px;
  border-radius: 5px;
}
.contact-form .input input:focus {
  border: 1px solid var(--tp-common-green);
}
.contact-form .textarea {
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .contact-form .textarea {
    margin-bottom: 10px;
  }
}
.contact-form .textarea textarea {
  width: 100%;
  height: 180px;
  padding: 15px 20px;
  border: 1px solid transparent;
  outline: 0;
  resize: none;
  border-radius: 5px;
  transition: 0.3s;
}
.contact-form .textarea textarea:focus {
  border: 1px solid var(--tp-common-green);
}

.am-contact-info {
  margin-bottom: 35px;
}

/*----------------------------------------*/
/*  06. service CSS START
/*----------------------------------------*/
.tp-service-sm-title {
  font-weight: 600;
  font-size: 17px;
  line-height: 22px;
  margin-bottom: 7px !important;
  cursor: pointer;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-sm-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .tp-service-sm-title {
    font-size: 20px;
    line-height: 27px;
  }
  .tp-service-sm-title br {
    display: none;
  }
}

.tp-service-sm-title-head {
  font-weight: 600;
  font-size: 35px;
  color: #36835a;
  line-height: 40px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-sm-title-head br {
    display: none;
  }
}
@media (max-width: 767px) {
  .tp-service-sm-title-head {
    font-size: 25px;
    line-height: 26px;
  }
  .tp-service-sm-title-head br {
    display: none;
  }
}

.tp-service-sm-title-head-1 {
  font-weight: 600;
  font-size: 35px;
  color: rgb(102, 85, 20);
  line-height: 40px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-sm-title-head-1 br {
    display: none;
  }
}
@media (max-width: 767px) {
  .tp-service-sm-title-head-1 {
    font-size: 25px;
    line-height: 26px;
  }
  .tp-service-sm-title-head-1 br {
    display: none;
  }
}

.tp-service-sm-title-head-2 {
  font-weight: 600;
  font-size: 35px;
  color: rgb(71, 71, 110);
  line-height: 40px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-sm-title-head-2 br {
    display: none;
  }
}
@media (max-width: 767px) {
  .tp-service-sm-title-head-2 {
    font-size: 25px;
    line-height: 26px;
  }
  .tp-service-sm-title-head-2 br {
    display: none;
  }
}

.tp-service-sm-title-head-2 span, .tp-service-sm-title-head-1 span, .tp-service-sm-title-head span {
  color: var(--tp-theme-1);
}

.service-section-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  align-items: center;
}

.service-space-left {
  padding-left: 45px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .service-space-left {
    padding-left: 0;
  }
}

.tp-service-item {
  background-color: var(--tp-common-yellow-2);
  padding: 40px 45px;
  border-radius: 20px;
}
@media (max-width: 767px) {
  .tp-service-item {
    padding: 17px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-service-item {
    padding: 30px;
  }
}
.tp-service-item__content .tp-service-sm-title {
  margin-bottom: 35px;
}
.tp-service-item__button-link a {
  padding: 15px 20px 15px 5px;
  background-color: var(--tp-common-white);
  border-radius: 100px;
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  line-height: 17px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tp-common-black);
  line-height: 1;
}
.tp-service-item__button-link a:hover {
  color: var(--tp-common-yellow);
}
@media (max-width: 767px) {
  .tp-service-item__button-link a {
    font-size: 12px;
    padding: 10px 5px 10px 0px;
  }
}
.tp-service-item__button-link a span {
  position: relative;
  margin-right: 10px;
}
.tp-service-item__button-link a span::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 13px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: var(--tp-common-yellow);
}
@media (max-width: 767px) {
  .tp-service-item__button-link a span::after {
    top: -2px;
    left: 17px;
    height: 20px;
    width: 20px;
  }
}
.tp-service-item__button-link a span svg {
  color: var(--tp-common-white);
  position: relative;
  z-index: 5;
}
.tp-service-item__icon span {
  height: 67px;
  width: 67px;
  background-color: var(--tp-common-yellow);
  display: inline-block;
  text-align: center;
  line-height: 67px;
  border-radius: 50%;
}
.tp-service-item__icon span svg {
  color: var(--tp-common-white);
}
.tp-service-item.sv-color-blue-one {
  background-color: #FFF2EE;
}
.tp-service-item.sv-color-blue-one .tp-service-item__button-link a:hover {
  color: var(--tp-common-green);
}
.tp-service-item.sv-color-blue-one .tp-service-item__button-link a span::after {
  background-color: var(--tp-common-green);
}
.tp-service-item.sv-color-blue-one .tp-service-item__icon span {
  background-color: var(--tp-common-green);
}
.tp-service-item.sv-color-blue-two {
  background-color: var(--tp-common-blue);
}
.tp-service-item.sv-color-blue-two .tp-service-item__button-link a:hover {
  color: var(--tp-theme-1);
}
.tp-service-item.sv-color-blue-two .tp-service-item__button-link a span::after {
  background-color: var(--tp-theme-1);
}
.tp-service-item.sv-color-blue-two .tp-service-item__icon span {
  background-color: var(--tp-theme-1);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-content {
    margin-bottom: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-space-bottom {
    padding-bottom: 0;
  }
}

.tp-service-item-two {
  background-color: var(--tp-common-black-3);
  padding: 80px 55px;
  border-radius: 20px;
  position: relative;
  transition: 0.3s;
}
.tp-service-item-two:hover {
  margin-top: -10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-item-two {
    padding: 55px 40px;
  }
}
.tp-service-item-two__icon {
  margin-bottom: 55px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-item-two__icon {
    margin-bottom: 30px;
  }
}
.tp-service-item-two__icon svg {
  min-height: 74px;
  min-width: 74px;
}
.tp-service-item-two__title {
  padding-bottom: 30px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--tp-border-5);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-service-item-two__title {
    padding-bottom: 20px;
  }
}
.tp-service-item-two__title a {
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.tp-service-item-two__title a:hover {
  background-size: 0% 1px, 100% 1px;
}
.tp-service-item-two__button:hover span {
  color: var(--tp-common-green);
}
.tp-service-item-two__button span {
  font-weight: 400;
  font-size: 16px;
  color: var(--tp-grey-3);
  transition: 0.3s;
}
.tp-service-item-two__count {
  position: absolute;
  top: 80px;
  right: 55px;
}
.tp-service-item-two__count .counter-content {
  height: 50px;
  width: 50px;
  background-color: var(--tp-common-black);
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  border: 2px dashed var(--tp-border-5);
  position: relative;
}
.tp-service-item-two__count .counter-content::after {
  font-size: 14px;
  content: "0" counter(count);
  counter-increment: count;
  color: #fff;
  font-weight: 400;
}

.tp-service-sm-title:hover {
  color: var(--tp-theme-1);
  transition: all 0.1s linear;
}

.counter-row {
  counter-reset: count;
}

.service-item-three {
  padding: 55px 60px;
  border: 1px solid var(--tp-border-1);
  border-radius: 20px;
  transition: 0.4s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-item-three {
    padding: 40px 30px;
  }
}
@media (max-width: 767px) {
  .service-item-three {
    padding: 30px 30px;
  }
}
.service-item-three:hover {
  box-shadow: 0px 55px 89px rgba(0, 0, 0, 0.1);
}
.service-item-three__img {
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .service-item-three__img {
    margin-bottom: 15px;
  }
}
.service-item-three__content {
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .service-item-three__content {
    margin-bottom: 15px;
  }
}
.service-item-three__content p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #6A6A74;
}
@media (max-width: 767px) {
  .service-item-three__content p {
    font-size: 15px;
    margin-bottom: 0;
  }
}
.service-item-three__content .tp-service-sm-title {
  margin-bottom: 30px;
}
.service-item-three__content .tp-service-sm-title:hover {
  color: var(--tp-common-green);
}
@media (max-width: 767px) {
  .service-item-three__content .tp-service-sm-title {
    margin-bottom: 5px;
  }
}
.service-item-three__button a {
  font-weight: 700;
  font-size: 15px;
  line-height: 17px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tp-common-black);
  line-height: 0;
  transition: 0.3s;
}
.service-item-three__button a:hover {
  color: var(--tp-common-green);
}
.service-item-three__button a:hover span::after {
  background-color: var(--tp-common-green);
}
.service-item-three__button a:hover span svg {
  color: var(--tp-common-white);
  position: relative;
  z-index: 5;
}
@media (max-width: 767px) {
  .service-item-three__button a {
    font-size: 13px;
  }
}
.service-item-three__button a span {
  position: relative;
  margin-right: 10px;
}
.service-item-three__button a span::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 13px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: var(--tp-common-yellow);
  transition: 0.3s;
}
.service-item-three__button a span svg {
  color: var(--tp-common-white);
  position: relative;
  z-index: 5;
}

.sv-details-thumb img {
  border-radius: 15px;
}

.sv-details-title {
  font-weight: 600;
  font-size: 50px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: capitalize;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sv-details-title {
    font-size: 38px;
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .sv-details-title {
    font-size: 33px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sv-details-title {
    font-size: 40px;
    margin-bottom: 30px;
  }
}

.sv-details-title-sm {
  font-style: normal;
  font-weight: 600;
  font-size: 26px;
  text-transform: capitalize;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sv-details-content.sv-details-md-space {
    margin-bottom: 70px;
  }
}
.sv-details-content p {
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #6A6A74;
}

.sub-title-sm {
  font-size: 15px;
  margin-bottom: 5px;
  line-height: 20px;
  color: var(--tp-common-black-2);
}

.tp-service-item__icon {
  margin-bottom: 16px;
}

.tp-service-item.srv-color-purple {
  background-color: var(--tp-service-1);
}

.tp-service-item.srv-color-red {
  background-color: var(--tp-service-2);
}

.tp-service-item.srv-color-blue {
  background-color: var(--tp-service-3);
}

/*----------------------------------------*/
/*  07. case CSS START
/*----------------------------------------*/
.case-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.case-space {
  padding-top: 130px;
  padding-bottom: 110px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .case-space {
    padding-bottom: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .case-space {
    padding-top: 0px;
  }
}

.tp-case-thumb {
  border-radius: 20px;
  border: 5px solid var(--tp-common-white);
}
.tp-case-thumb:hover img {
  transform: scale(1.1);
}
.tp-case-thumb img {
  border-radius: 15px;
  width: 100%;
  transition: 0.7s;
}

.tp-case-title {
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--tp-common-white);
  padding-bottom: 15px;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .tp-case-title {
    font-size: 21px;
  }
}
.tp-case-title a:hover {
  color: var(--tp-common-green);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-case-title {
    font-size: 25px;
    padding-bottom: 5px;
  }
}

.tp-case-item__content {
  margin-top: 50px;
}
.tp-case-item:hover .tp-case-item__thumb {
  border-radius: 20px;
}
.tp-case-item:hover .tp-case-item__thumb img {
  transform: scale(1.1);
  border-radius: 20px;
}
.tp-case-item__thumb {
  border-radius: 20px;
}
.tp-case-item__thumb img {
  width: 100%;
  border-radius: 20px;
  transition: 0.9s;
}

.tp-case-subtitle {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #DDDDDD;
}
.tp-case-subtitle::before {
  height: 15px;
  width: 15px;
  background-color: var(--tp-common-green);
  border-radius: 50%;
  content: "";
  display: inline-block;
  transform: translateY(2px);
  margin-right: 5px;
}

.tp-case-slider-active .slick-slide {
  padding: 0px 15px;
}

.tp-case-wrapper {
  margin-left: -300px;
  margin-right: -300px;
}
@media (max-width: 767px) {
  .tp-case-wrapper {
    margin-left: 0px;
    margin-right: 0px;
  }
}

.tp-case-active .slick-slide {
  padding: 0px 15px;
}

.case-grident-bg {
  background: linear-gradient(180deg, #F7F7F7 26.29%, rgba(247, 247, 247, 0) 79.02%);
}

.tp-circle-text a {
  font-weight: 500;
  font-size: 15px;
  color: var(--tp-common-white);
  line-height: 1.3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  height: 110px;
  width: 110px;
  background-color: var(--tp-common-black);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
}

.tp-case-active .tp-case-item {
  border: 5px solid var(--tp-common-white);
  border-radius: 20px;
}
.tp-case-active .tp-case-item__thumb img {
  margin-bottom: 0;
}

.tp-case-item {
  margin-bottom: 30px;
}
.tp-case-item:hover .tp-circle-text a {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.case-icon a {
  font-size: 20px;
  color: var(--tp-common-white);
  display: block;
  background-color: var(--tp-common-red);
  text-align: center;
  padding: 10px 0;
  margin-bottom: 15px;
  border-radius: 3px;
}
.case-icon a.pinterest {
  background-color: #E40028;
}
.case-icon a.twitter {
  background-color: #1DA1F2;
}
.case-icon a.behance {
  background-color: #0E63FF;
}

.case-details-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}

.case-custom-space-1 {
  padding-top: 80px;
}

.case-custom-space-2 {
  padding-right: 60px;
  border-right: 1px solid var(--tp-border-7);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .case-custom-space-2 {
    padding-right: 0px;
    border-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-custom-space-2 {
    padding-right: 0px;
    border-right: 0;
  }
}

.case-custom-space-3 {
  padding-left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .case-custom-space-3 {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-custom-space-3 {
    padding-left: 0;
  }
}

.case-sapce-top {
  padding-top: 80px;
}

.case-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.case-icon a {
  height: 80px;
  width: 80px;
  background-color: var(--tp-common-green);
  color: var(--tp-common-white);
  font-size: 28px;
  text-align: center;
  line-height: 60px;
  border-radius: 50%;
  transform: rotate(30deg) scale(0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
}
.case-icon a:hover {
  color: var(--tp-common-white);
}

.tp-case-thumb:hover .case-icon a {
  transform: rotate(30deg) scale(1);
  opacity: 1;
  visibility: visible;
}

.case-social-icon {
  margin-right: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-social-icon {
    margin-right: 0;
  }
}
.case-social-icon a {
  display: block;
  padding: 10px 20px;
  background-color: var(--tp-common-green);
  color: var(--tp-common-white);
  text-align: center;
  margin-bottom: 10px;
  border-radius: 5px;
  font-size: 20px;
}
.case-social-icon a.behance {
  background-color: #0E63FF;
}
.case-social-icon a.twitter {
  background-color: #1DA1F2;
}
.case-social-icon a.pinterest {
  background-color: #E40028;
}

/*----------------------------------------*/
/*  08. testimonial CSS START
/*----------------------------------------*/
.tp-testimonial-space {
  padding-top: 130px;
  padding-bottom: 110px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .tp-testimonial-space {
    padding-top: 0;
  }
}

.tp-testimonial-item {
  background-color: var(--tp-common-yellow-2);
  padding: 50px 60px;
  padding-right: 75px;
  border-radius: 20px;
  position: relative;
  z-index: 3;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-testimonial-item {
    padding: 50px 30px;
    padding-right: 30px;
    padding-right: 25px;
  }
}
@media (max-width: 767px) {
  .tp-testimonial-item {
    padding-right: 0px;
    padding: 20px 20px;
  }
}
.tp-testimonial-item__icon {
  margin-bottom: 20px;
}
.tp-testimonial-item__icon i {
  box-shadow: 0px 4px 4px rgba(238, 208, 100, 0.26);
  height: 56px;
  width: 56px;
  background-color: var(--tp-common-yellow);
  border-radius: 50%;
  text-align: center;
  line-height: 56px;
  font-weight: 900;
  font-size: 22px;
  color: var(--tp-common-white);
}
.tp-testimonial-item__text p {
  font-weight: 500;
  font-size: 22px;
  line-height: 40px;
  color: var(--tp-common-black);
  padding-bottom: 20px;
}
@media (max-width: 767px) {
  .tp-testimonial-item__text p {
    font-size: 19px;
    line-height: 29px;
  }
}
.tp-testimonial-item__info-img {
  border: 4px solid var(--tp-common-white);
  border-radius: 50%;
  margin-right: 15px;
  flex: 0 0 auto;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-testimonial-item__info-img {
    margin-right: 10px;
  }
}
.tp-testimonial-item__info-text span {
  font-weight: 400;
  font-size: 14px;
  color: var(--tp-common-black);
}
.tp-testimonial-item__ratting span {
  color: var(--tp-common-yellow);
  margin-left: 3px;
}

.client-name {
  font-weight: 600;
  font-size: 20px;
}
@media (max-width: 767px) {
  .client-name {
    font-size: 16px;
  }
}

.testimonial-bg-color-2 {
  background-color: var(--tp-common-green-2);
}
.testimonial-bg-color-2 .tp-testimonial-item__icon i {
  background-color: var(--tp-common-green);
}
.testimonial-bg-color-2 .tp-testimonial-item__ratting span {
  color: var(--tp-common-green);
}

.testimonial-bg-color-3 {
  background-color: var(--tp-common-blue);
}
.testimonial-bg-color-3 .tp-testimonial-item__icon i {
  background-color: var(--tp-theme-1);
}
.testimonial-bg-color-3 .tp-testimonial-item__ratting span {
  color: var(--tp-theme-1);
}

.testimonial-border-shape {
  background-position: left top;
  background-repeat: no-repeat;
}

.tp-test-title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-test-title {
    font-size: 17px;
  }
}

.tp-testi-2 {
  padding: 80px 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-testi-2 {
    padding: 55px 55px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-testi-2 {
    padding: 50px 70px;
  }
}
@media (max-width: 767px) {
  .tp-testi-2 {
    padding: 20px 20px;
  }
}
.tp-testi-2__wrapper {
  margin-bottom: 45px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tp-testi-2__wrapper {
    margin-bottom: 20px;
  }
}
.tp-testi-2__wrapper-icon i {
  color: #1C9CEA;
  font-size: 40px;
  font-weight: 400;
}
@media (max-width: 767px) {
  .tp-testi-2__wrapper-icon i {
    display: none;
  }
}
.tp-testi-2__meta-img {
  flex: 0 0 auto;
  margin-right: 30px;
}
.tp-testi-2__meta-img img {
  border-radius: 50%;
}
.tp-testi-2__meta-info span {
  font-weight: 400;
  font-size: 14px;
}
.tp-testi-2__text p {
  font-weight: 400;
  font-size: 40px;
  line-height: 1.3;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-testi-2__text p {
    font-size: 31px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-testi-2__text p {
    font-size: 27px;
  }
}
@media (max-width: 767px) {
  .tp-testi-2__text p {
    font-size: 21px;
  }
}

.tp-testi-bottom {
  padding: 40px 80px;
  padding-right: 60px;
  width: 33%;
  transition: 0.4s;
  border-right: 1px solid var(--tp-grey-3);
  cursor: pointer;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-testi-bottom {
    padding: 30px 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-testi-bottom {
    padding: 40px 44px;
  }
}
@media (max-width: 767px) {
  .tp-testi-bottom {
    padding: 20px 20px;
    padding-right: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-testi-bottom {
    padding: 20px 60px;
  }
}

.tp-testi-sm-img img {
  margin-right: 15px;
  border: 5px solid var(--tp-common-white);
  border-radius: 50%;
}

.tp-test-border-wrapper {
  border: 1px solid var(--tp-grey-3);
}

.test-img-active {
  position: relative;
}
.test-img-active button {
  height: 40px;
  width: 40px;
  border: 1px dashed;
  display: inline-block;
  position: absolute;
  font-size: 16px;
  border-radius: 50%;
  background-color: var(--tp-common-black);
  z-index: 9;
  transition: 0.3s;
}
.test-img-active button:hover {
  background-color: var(--tp-common-green);
  color: var(--tp-common-white);
  border-color: var(--tp-common-green);
}
.test-img-active button.slick-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -20px;
}
.test-img-active button.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -20px;
}

.tp-testi-info-text.tp-test-title {
  margin-bottom: 10px;
}
.tp-testi-info-text span {
  font-weight: 400;
  font-size: 14px;
  color: var(--tp-common-white);
}

.tp-testimonial-three__content {
  background-color: var(--tp-common-white);
  border-radius: 15px;
  padding: 20px 50px;
  padding-top: 50px;
  min-height: 430px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-testimonial-three__content {
    padding: 20px 45px;
    min-height: 370px;
  }
}
@media (max-width: 767px) {
  .tp-testimonial-three__content {
    padding: 20px 22px;
    min-height: 310px;
  }
}
.tp-testimonial-three__content-icon {
  margin-bottom: 50px;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  line-height: 45px;
  text-align: center;
  color: var(--tp-common-white);
  font-weight: 500;
  background-color: var(--tp-common-red);
  display: inline-block;
}
@media (max-width: 767px) {
  .tp-testimonial-three__content-icon {
    margin-bottom: 20px;
  }
}
.tp-testimonial-three__content-icon.content-icon-1 {
  background-color: var(--tp-common-yellow);
}
.tp-testimonial-three__content-icon.content-icon-2 {
  background-color: var(--tp-common-green);
}
.tp-testimonial-three__content-icon.content-icon-3 {
  background-color: var(--tp-theme-1);
}
.tp-testimonial-three__content-icon.content-icon-4 {
  background-color: var(--tp-common-sky);
}
.tp-testimonial-three__content-icon.content-icon-5 {
  background-color: var(--tp-common-orange);
}
.tp-testimonial-three__content-text p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 0;
}
.tp-testimonial-three__user {
  margin-top: -50px;
}
.tp-testimonial-three__user-img {
  margin-bottom: 25px;
}
.tp-testimonial-three__user-content span {
  font-weight: 400;
  font-size: 14px;
}

.user-title {
  font-weight: 600;
  font-size: 20px;
  color: var(--tp-common-black);
}

.testimonial-slide-wrapper {
  margin-left: -140px;
  margin-right: -140px;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .testimonial-slide-wrapper {
    margin-left: -120px;
    margin-right: -120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .testimonial-slide-wrapper {
    margin-left: 0px;
    margin-right: 0px;
  }
}
.testimonial-slide-wrapper .slick-slide {
  padding: 0px 15px;
}
.testimonial-slide-wrapper .slick-slide img {
  display: inline-block;
}

.test-img-active .slick-current .tp-testi-bottom {
  border-bottom: 2px solid var(--tp-common-green);
}

/*----------------------------------------*/
/*  09. barnd CSS START
/*----------------------------------------*/
.tp-brand-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
}

.tp-brand-title-box span {
  color: var(--tp-theme-1);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .brand-space-bottom {
    padding-bottom: 0px;
  }
}

.tp-brand-item-two {
  height: 278px;
  width: 278px;
  border: 2px dashed var(--tp-border-5);
  border-radius: 50%;
  text-align: center;
  line-height: 278px;
  margin: 0 -10px 0px -10px;
  transition: 0.3s;
}
.tp-brand-item-two:hover {
  margin-top: -10px;
  border-color: var(--tp-common-green);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-brand-item-two {
    height: 240px;
    width: 240px;
    line-height: 240px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-brand-item-two {
    height: 200px;
    width: 200px;
    line-height: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-brand-item-two {
    height: 250px;
    width: 250px;
    line-height: 250px;
  }
}
@media (max-width: 767px) {
  .tp-brand-item-two {
    margin: 0px 0px 0px 0px;
    margin: 0 auto;
  }
}

.brand-center .brand-logo {
  text-align: center;
}

@media (max-width: 767px) {
  .brand-logo {
    text-align: center;
  }
}

/*----------------------------------------*/
/*  10. blog CSS START
/*----------------------------------------*/
.blog-grident-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blog-space {
  padding-top: 90px;
  padding-bottom: 90px;
}
@media (max-width: 767px) {
  .blog-space {
    padding-top: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-space {
    padding-top: 0;
  }
}

.tp-blog-item {
  background-color: var(--tp-common-white);
  padding: 30px;
  border-radius: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-blog-item {
    padding: 20px;
  }
}
@media (max-width: 767px) {
  .tp-blog-item {
    padding: 20px;
  }
}
.tp-blog-item:hover .tp-blog-item__thumb {
  border-radius: 20px;
}
.tp-blog-item:hover .tp-blog-item__thumb img {
  border-radius: 20px;
  transform: scale(1.1);
}
.tp-blog-item__thumb {
  margin-bottom: 40px;
  border-radius: 20px;
}
.tp-blog-item__thumb img {
  border-radius: 20px;
  transform: scale(1);
  transition: 0.4s;
}
.tp-blog-item__tag {
  margin-bottom: 30px;
}
.tp-blog-item__tag span {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  background-color: var(--tp-theme-1);
  padding: 0px 15px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  display: inline-block;
}
@media (max-width: 767px) {
  .tp-blog-item__tag span {
    font-size: 12px;
    padding: 0px 10px;
  }
}
.tp-blog-item__tag span.tag-color-green {
  background-color: var(--tp-common-green);
}
.tp-blog-item__tag span:first-child {
  margin-right: 10px;
}
@media (max-width: 767px) {
  .tp-blog-item__tag span:first-child {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.tp-blog-item__blog-title {
  margin-bottom: 25px;
}
.tp-blog-item__button {
  padding-bottom: 15px;
}

.tp-blog-title-lg {
  font-weight: 500;
  font-size: 30px;
  line-height: 44px;
  letter-spacing: -0.01em;
}
.tp-blog-title-lg a:hover {
  color: var(--tp-theme-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-blog-title-lg {
    font-size: 22px;
    line-height: 30px;
  }
}
@media (max-width: 767px) {
  .tp-blog-title-lg {
    font-size: 20px;
    line-height: 28px;
  }
}

.tp-blog-title {
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-blog-title {
    font-size: 22px;
    line-height: 30px;
  }
}
@media (max-width: 767px) {
  .tp-blog-title {
    font-size: 20px;
    line-height: 28px;
  }
}

.blog-item-two {
  background-color: var(--tp-common-white);
  border-radius: 15px;
  padding: 0px 26px;
}
@media (max-width: 767px) {
  .blog-item-two {
    padding: 0px;
  }
}
.blog-item-two:hover .blog-item-two__thumb {
  border-radius: 5px;
}
.blog-item-two:hover .blog-item-two__thumb img {
  border-radius: 5px;
  transform: scale(1.1);
}
.blog-item-two__thumb {
  border-radius: 5px;
}
.blog-item-two__thumb img {
  border-radius: 5px;
  width: 100%;
  transform: scale(1);
}
.blog-item-two__content {
  padding: 35px 0px 35px 0px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-item-two__content {
    padding: 30px 20px;
  }
}
.blog-item-two__content-meta {
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tp-grey-5);
  padding-bottom: 15px;
}
.blog-item-two__content-title {
  padding-bottom: 15px;
}
.blog-item-two__content-title a {
  background-image: linear-gradient(#000000, #000000), linear-gradient(#000000, #000000);
  display: inline;
  background-size: 0% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s linear;
}
.blog-item-two__content-title a:hover {
  background-size: 0% 1px, 100% 1px;
}

.blog-item-two__content-title p {
  font-size: 18px;
  line-height: 30px;
}

.tp-blog-wrapper {
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .tp-blog-wrapper .tp-blog-button {
    margin-top: 30px;
  }
}

@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__wrapper {
    padding-right: 0px;
    margin-bottom: 50px;
  }
}

.postbox__thumb .play-btn {
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
  height: 90px;
  width: 90px;
  background-color: var(--tp-common-white);
  text-align: center;
  line-height: 90px;
  color: var(--tp-theme-2);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
.postbox__thumb .play-btn:hover {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}
.postbox__thumb img {
  border-radius: 20px;
  margin-bottom: 40px;
}
.postbox__audio {
  height: 100%;
  width: 100%;
}
.postbox__audio iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.postbox__item-single:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.postbox__content p img {
  margin-bottom: 30px;
  max-width: 100%;
  border-radius: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox__content p img {
    width: 100%;
  }
}
.postbox__content-single {
  padding-left: 0;
  padding-right: 0;
  border: none;
}
.postbox__title {
  font-size: 36px;
  font-weight: 600;
  color: var(--tp-common-black);
  line-height: 1.2;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox__title {
    font-size: 33px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__title {
    font-size: 33px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox__title {
    font-size: 30px;
  }
  .postbox__title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .postbox__title {
    font-size: 25px;
  }
  .postbox__title br {
    display: none;
  }
}
.postbox__title a:hover {
  color: var(--tp-theme-1);
}
.postbox__meta {
  margin-bottom: 20px;
}
.postbox__meta span {
  font-size: 14px;
  font-weight: 700;
  color: #8A90A2;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 30px;
}
.postbox__meta span:last-child {
  margin-right: 0;
}
.postbox__meta span i {
  color: var(--tp-theme-1);
  margin-right: 3px;
  font-weight: 500;
}
.postbox__meta span:hover {
  color: var(--tp-common-black);
}
.postbox__text {
  margin-bottom: 50px;
  padding-right: 30px;
}
.postbox__text img {
  max-width: 100%;
}
.postbox__text p {
  margin-bottom: 28px;
  font-size: 17px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox__text p {
    font-size: 16px;
  }
}
.postbox__text-single p {
  margin-bottom: 15px;
}
.postbox__slider button {
  position: absolute;
  left: 50px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  font-size: 30px;
  color: var(--tp-common-white);
}
.postbox__slider button.slick-next {
  left: auto;
  right: 50px;
}
@media (max-width: 767px) {
  .postbox__slider button.slick-next {
    right: 10px;
  }
}
@media (max-width: 767px) {
  .postbox__slider button {
    left: 10px;
  }
}
.postbox__comment ul li {
  margin-bottom: 30px;
  list-style: none;
}
.postbox__comment ul li.children {
  margin-left: 100px;
}
@media (max-width: 767px) {
  .postbox__comment ul li.children {
    margin-left: 15px;
  }
}
.postbox__comment ul-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--tp-common-black);
  margin-bottom: 40px;
  margin-right: 20px;
}
.postbox__comment-input {
  position: relative;
  margin-bottom: 20px;
}
.postbox__comment-input span {
  font-weight: 600;
  color: var(--tp-common-black);
  margin-bottom: 12px;
  display: block;
}
.postbox__comment-input input, .postbox__comment-input textarea {
  height: 55px;
  padding: 0 20px;
  width: 100%;
  font-size: 14px;
  outline: none;
  color: var(--tp-common-black);
  background-color: var(--tp-grey-6);
  border: 1px solid #f7f7f7;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -o-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
}
.postbox__comment-input input:focus, .postbox__comment-input textarea:focus {
  border-color: var(--tp-common-green);
}
.postbox__comment-input textarea {
  height: 175px;
  resize: none;
  padding-top: 20px;
  padding-bottom: 20px;
  color: var(--tp-common-black);
  background-color: var(--tp-grey-6);
}
.postbox__comment-title {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 35px;
  color: var(--tp-common-black);
}
.postbox__comment-avater img {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.postbox__comment-name {
  margin-bottom: 5px;
}
.postbox__comment-name h5 {
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  color: var(--tp-common-black);
}
.postbox__comment-name span {
  font-size: 14px;
  color: #8A879F;
  text-transform: uppercase;
  letter-spacing: 1px;
}
@media (max-width: 767px) {
  .postbox__comment-text {
    margin-left: 0;
    margin-top: 15px;
  }
}
.postbox__comment-text p {
  font-size: 16px;
  color: var(--tp-text-11);
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .postbox__comment-text p br {
    display: none;
  }
}
.postbox__comment-reply {
  margin-top: 10px;
}
.postbox__comment-reply a {
  display: inline-block;
  color: var(--tp-theme-1);
  background: rgba(61, 108, 231, 0.1);
  height: 22px;
  line-height: 22px;
  padding: 0 10px;
  font-weight: 500;
  font-size: 14px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.postbox__comment-reply a:hover {
  color: var(--tp-common-white);
  background: var(--tp-theme-1);
}
.postbox__comment-agree {
  padding-left: 5px;
}
.postbox__comment-agree input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 14px;
  height: 14px;
  background: var(--tp-common-white);
  border: 1px solid #b9bac1;
  outline: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  flex: 0 0 auto;
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  -o-transform: translateY(-1px);
  transform: translateY(-1px);
}
.postbox__comment-agree input:checked {
  position: relative;
  background-color: var(--tp-theme-1);
  border-color: transparent;
}
.postbox__comment-agree input:checked::after {
  box-sizing: border-box;
  content: "\f00c";
  position: absolute;
  font-family: var(--tp-ff-fontawesome);
  font-size: 10px;
  color: var(--tp-common-white);
  top: 46%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.postbox__comment-agree input:hover {
  cursor: pointer;
}
.postbox__comment-agree label {
  padding-left: 8px;
  color: var(--tp-text-1);
  line-height: 1;
}
.postbox__comment-agree label a {
  color: var(--tp-common-black);
  font-weight: 600;
  padding-left: 4px;
}
.postbox__comment-agree label a:hover {
  color: var(--tp-theme-1);
}
.postbox__comment-agree label:hover {
  cursor: pointer;
}
.postbox__tag span {
  font-size: 20px;
  margin-bottom: 17px;
  color: var(--tp-common-black);
  margin-right: 30px;
  font-weight: 500;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox__social {
    margin-top: 40px;
  }
}
.postbox__social span {
  font-size: 20px;
  color: var(--tp-common-black);
  font-weight: 500;
}
.postbox__social a {
  font-size: 15px;
  padding-left: 30px;
}
.postbox__social a .tp-linkedin {
  color: #0E6BA1;
}
.postbox__social a .tp-pinterest {
  color: #D70220;
}
.postbox__social a .tp-facebook {
  color: #0E6BA1;
}
.postbox__social a .tp-twitter {
  color: #36B6ED;
}

.postbox__comment-form-title {
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 35px;
  color: var(--tp-common-black);
}
@media (max-width: 767px) {
  .postbox__comment-form-title {
    font-size: 25px;
  }
}

.postbox__social-wrapper {
  border-bottom: 1px solid #ECEEF3;
  padding-bottom: 40px;
  margin-bottom: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox__comment-form {
    margin-bottom: 50px;
  }
}

.aproch-title {
  font-size: 36px;
  margin-bottom: 15px;
}

.approch-item {
  margin-bottom: 65px;
}
.approch-item ul li {
  position: relative;
  padding-left: 30px;
}
.approch-item ul li i {
  color: var(--tp-theme-2);
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  top: 5px;
  left: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .approch-thumb {
    margin-bottom: 40px;
  }
}
.approch-thumb img {
  border-radius: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .approch-thumb img {
    width: 100%;
  }
}

.postbox__comment-info {
  flex: 0 0 auto;
}

.rc__post ul li:not(:last-child) {
  margin-bottom: 15px;
}
.rc__post-thumb {
  flex: 0 0 auto;
}
.rc__post-thumb img {
  border-radius: 10px;
  width: 100px;
  height: 80px;
  flex: 0 0 auto;
  object-fit: cover;
}
.rc__post-title {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--tp-common-black);
  line-height: 22px;
}
.rc__post-title a:hover {
  color: var(--tp-theme-1);
}
.rc__meta span {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tp-theme-3);
}

.sidebar__wrapper {
  padding-left: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar__wrapper {
    padding-left: 0;
  }
}
.sidebar__widget {
  padding: 40px;
  border: 1px solid #F6F6F6;
}
@media (max-width: 767px) {
  .sidebar__widget {
    padding-left: 20px;
  }
}
.sidebar__widget-title {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 30px;
  color: var(--tp-common-black);
}
.sidebar__widget:last-child-title {
  border-bottom: 0;
}
.sidebar__widget ul li {
  list-style: none;
}
.sidebar__widget ul li:last-child {
  padding-bottom: 0;
}
.sidebar__widget ul li:last-child a {
  margin-bottom: 0;
}
.sidebar__widget ul li:first-child {
  padding-top: 0;
}
.sidebar__widget ul li a {
  color: #6A6A74;
  display: block;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 7px 0px;
}
.sidebar__widget ul li a:hover {
  color: var(--tp-common-black);
}
.sidebar__widget ul li a:hover span {
  color: var(--tp-common-black);
}
.sidebar__widget ul li span {
  float: right;
  color: #6A6A74;
  font-size: 15px;
  font-weight: 500;
}
.sidebar__search {
  position: relative;
}
.sidebar__search input {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: var(--tp-grey-1);
  padding: 0 25px;
  text-transform: capitalize;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -o-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
  border: 1px solid var(--tp-grey-1);
  outline: none;
  padding-top: 3px;
  padding-right: 80px;
}
@media (max-width: 767px) {
  .sidebar__search input {
    padding-right: 40px;
    padding-left: 15px;
  }
}
.sidebar__search input:focus {
  border-color: var(--tp-common-green);
}
.sidebar__search input::placeholder {
  color: #777777;
}
.sidebar__search button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0 24px;
  color: #fff;
  line-height: 60px;
  -webkit-border-radius: 0 7px 7px 0;
  -moz-border-radius: 0 7px 7px 0;
  -o-border-radius: 0 7px 7px 0;
  -ms-border-radius: 0 7px 7px 0;
  border-radius: 0 7px 7px 0;
  color: var(--tp-common-black);
}
.sidebar__banner-content {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: var(--tp-theme-1);
}
.sidebar__banner-content h4 {
  padding: 15px 20px;
  font-size: 24px;
  color: var(--tp-common-white);
  text-transform: uppercase;
  margin-bottom: 0;
}

.tagcloud a {
  border: 1px solid #F2F4F6;
  color: var(--tp-theme-3);
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 10px 25px;
  margin-bottom: 8px;
  margin-right: 10px;
  text-transform: uppercase;
  border-radius: 5px;
  transition: 0.3s;
}
.tagcloud a:hover {
  background: var(--tp-theme-1);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-1);
}

blockquote {
  background: var(--tp-grey-1);
  padding: 35px 50px;
  margin-bottom: 35px;
}
@media (max-width: 767px) {
  blockquote {
    padding-left: 15px;
    padding-right: 15px;
  }
}
blockquote p {
  line-height: 1.5;
  font-size: 20px;
  color: #57565e;
  font-weight: 400;
}
blockquote cite {
  font-size: 18px;
  display: block;
  margin-top: 10px;
  color: #070337;
  font-style: inherit;
  font-weight: 600;
  position: relative;
}
blockquote cite::before {
  content: "";
  font-size: 28px;
  color: var(--tp-theme-1);
  padding-bottom: 0px;
  display: inline-block;
  background: var(--tp-theme-1);
  height: 2px;
  width: 40px;
  font-weight: 400;
  text-align: center;
  top: -4px;
  margin-right: 10px;
  position: relative;
}

.blog-post-slider-active {
  position: relative;
  margin-bottom: 40px;
}
.blog-post-slider-active .swiper-slide img {
  border-radius: 5px;
  width: 100%;
}

.blog-nav-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 5;
}

.blog-nav-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 5;
}

.blog-post-slider-nav .nav-button {
  height: 60px;
  width: 60px;
  background-color: var(--tp-common-white);
  text-align: center;
  line-height: 60px;
  font-size: 24px;
  color: var(--tp-common-black);
}

.basic-pagination ul li:not(:last-child) {
  margin-right: 10px;
}

.basic-pagination ul li {
  display: inline-block;
}

.basic-pagination ul li a, .basic-pagination ul li span {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 46px;
  text-align: center;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -o-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
  border: 1px solid var(--tp-border-1);
  font-size: 18px;
  font-weight: 600;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .basic-pagination ul li a, .basic-pagination ul li span {
    width: 40px;
    height: 40px;
    line-height: 38px;
  }
}

.basic-pagination ul li a:hover, .basic-pagination ul li a.current, .basic-pagination ul li span:hover, .basic-pagination ul li span.current {
  background: var(--tp-theme-1);
  border-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}

.blog-item-two__content-title p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/*----------------------------------------*/
/*  11. social CSS START
/*----------------------------------------*/
.tp-social-item {
  padding: 50px 20px;
  text-align: center;
  border: 1px solid var(--tp-border-1);
  margin: 0px -1px 0px -1px;
  border-bottom: 3px solid #4064AC;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-social-item {
    padding: 40px 15px;
  }
}
.tp-social-item:hover {
  background-color: #4064AC;
}
.tp-social-item:hover span {
  color: var(--tp-common-white);
}
.tp-social-item:hover span i {
  color: var(--tp-common-white);
}
.tp-social-item span {
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--tp-common-black);
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-social-item span {
    font-size: 19px;
  }
}
.tp-social-item span i {
  color: #4064AC;
  margin-right: 10px;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-social-item span i {
    margin-right: 6px;
  }
}
.tp-social-item.tp-youtube {
  border-bottom: 3px solid #FF0000;
}
.tp-social-item.tp-youtube:hover {
  background-color: #FF0000;
}
.tp-social-item.tp-youtube:hover i {
  color: var(--tp-common-white);
}
.tp-social-item.tp-youtube span i {
  color: #FF0000;
}
.tp-social-item.tp-behance {
  border-bottom: 3px solid #1DA1F2;
}
.tp-social-item.tp-behance:hover {
  background-color: #1DA1F2;
}
.tp-social-item.tp-behance:hover i {
  color: var(--tp-common-white);
}
.tp-social-item.tp-behance span i {
  color: #1DA1F2;
}
.tp-social-item.tp-dribble {
  border-bottom: 3px solid #FF56BB;
}
.tp-social-item.tp-dribble:hover {
  background-color: #FF56BB;
}
.tp-social-item.tp-dribble:hover i {
  color: var(--tp-common-white);
}
.tp-social-item.tp-dribble span i {
  color: #FF56BB;
}
.tp-social-item.tp-twitter {
  border-bottom: 3px solid #1DA1F2;
}
.tp-social-item.tp-twitter:hover {
  background-color: #1DA1F2;
}
.tp-social-item.tp-twitter:hover i {
  color: var(--tp-common-white);
}
.tp-social-item.tp-twitter span i {
  color: #1DA1F2;
}
.tp-social-item.tp-linkedin {
  border-bottom: 3px solid #4064AC;
}
.tp-social-item.tp-linkedin:hover {
  background-color: #4064AC;
}
.tp-social-item.tp-linkedin:hover i {
  color: var(--tp-common-white);
}
.tp-social-item.tp-linkedin span i {
  color: #4064AC;
}

/*----------------------------------------*/
/*  12. cta CSS START
/*----------------------------------------*/
.tp-cta-item {
  margin: 0px -20px 0px -20px;
  border: 2px dashed var(--tp-common-green);
  border-radius: 50%;
  width: 580px;
  height: 580px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-cta-item {
    width: 500px;
    height: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-cta-item {
    width: 370px;
    height: 370px;
    margin: 0px -20px 0px -20px;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .tp-cta-item {
    width: 300px;
    height: 300px;
    margin: 0px 0px 0px 0px;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-cta-item {
    width: 280px;
    height: 280px;
    margin: 0px 0px 0px 0px;
    margin: 0 auto;
  }
}
.tp-cta-item.orange-border {
  border-color: var(--tp-common-orange);
}

.tp-cta-title {
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.01em;
  color: var(--tp-common-white);
  margin-bottom: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-cta-title {
    font-size: 30px;
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .tp-cta-title {
    font-size: 27px;
    margin-bottom: 20px;
  }
}

.cta-big-text {
  font-weight: 600;
  font-size: 122px;
  letter-spacing: -0.02em;
  margin-bottom: 0;
  -webkit-text-stroke: 1px #000;
  color: transparent;
  transition: 0.4s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cta-big-text {
    font-size: 95px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta-big-text {
    font-size: 75px;
  }
}
@media (max-width: 767px) {
  .cta-big-text {
    font-size: 90px;
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cta-big-text {
    font-size: 55px;
  }
}

.cta-effect-img {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  z-index: -1;
}

.cta-space {
  padding-bottom: 140px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta-space {
    padding-bottom: 90px;
  }
}
@media (max-width: 767px) {
  .cta-space {
    padding-bottom: 40px;
  }
}

.cta-item:hover .cta-big-text {
  -webkit-text-stroke: 1px transparent;
  color: var(--tp-common-black);
}
.cta-item:hover .cta-effect-img {
  bottom: 50px;
  visibility: visible;
  opacity: 1;
  z-index: 10;
}

.marque-item {
  padding-top: 40px;
}
.marque-item span {
  font-weight: 600;
  font-size: 122px;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1px #000;
  color: transparent;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .marque-item span {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .marque-item span {
    font-size: 75px;
  }
}
@media (max-width: 767px) {
  .marque-item span {
    font-size: 70px;
  }
}

.tp-marque-wrapper {
  margin-left: -200px;
  margin-right: -200px;
}

.marque-slider-active .marque-item {
  padding-bottom: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .marque-slider-active .marque-item {
    padding-bottom: 50px;
  }
}
.marque-slider-active .slick-slide {
  padding: 0px 55px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .marque-slider-active .slick-slide {
    padding: 0px 20px;
  }
}
@media (max-width: 767px) {
  .marque-slider-active .slick-slide {
    padding: 0px 10px;
  }
}

.marque-slider-active-2 .marque-item {
  padding-bottom: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .marque-slider-active-2 .marque-item {
    padding-bottom: 90px;
  }
}
.marque-slider-active-2 .slick-slide {
  padding: 0px 55px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .marque-slider-active-2 .slick-slide {
    padding: 0px 20px;
  }
}
@media (max-width: 767px) {
  .marque-slider-active-2 .slick-slide {
    padding: 0px 10px;
  }
}
.marque-slider-active-2 .marque-item {
  padding-top: 40px;
}
.marque-slider-active-2 .marque-item span {
  font-weight: 600;
  font-size: 122px;
  letter-spacing: -0.02em;
  color: #000;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .marque-slider-active-2 .marque-item span {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .marque-slider-active-2 .marque-item span {
    font-size: 75px;
  }
}
@media (max-width: 767px) {
  .marque-slider-active-2 .marque-item span {
    font-size: 70px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta-space-three {
    padding-top: 0;
  }
}
@media (max-width: 767px) {
  .cta-space-three {
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cta-img {
    margin-top: 30px;
  }
}

.tp-news-letter-area.newsletter-space {
  position: relative;
  z-index: 1;
}

/*----------------------------------------*/
/*  13. cart CSS START
/*----------------------------------------*/
/* 16. Cart */
.table-content .table > :not(:first-child) {
  border-top: 0;
}
.table-content table {
  background: #ffffff;
  border-color: #eaedff;
  border-radius: 0;
  border-style: solid;
  border-width: 1px 0 0 1px;
  text-align: center;
  width: 100%;
  margin-bottom: 0;
}

.table-content .table > :not(:last-child) > :last-child > * {
  border-bottom-color: #eaedff;
}

.table-content .product-quantity {
  float: none;
}

.table-content table td.product-name {
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
}

.table-content table td.product-name a:hover {
  color: var(--tp-theme-1);
}

.table-content table td {
  border-top: medium none;
  padding: 20px 10px;
  vertical-align: middle;
  font-size: 16px;
}

.table-content table th, .table-content table td {
  border-bottom: 1px solid #eaedff;
  border-right: 1px solid #eaedff;
}

.product-quantity input {
  color: #000;
  font-size: 14px;
  font-weight: normal;
}

.table td, .table th {
  border-top: 1px solid #eaedff;
}

.product-quantity > input {
  width: 80px;
  text-align: center;
}

.table-content table td.product-subtotal {
  font-size: 16px;
}

.table-content table td .cart-plus-minus {
  float: none;
  margin: 0 auto;
}

.coupon-all {
  margin-top: 50px;
}

.coupon {
  float: left;
}

@media (max-width: 767px) {
  .coupon {
    float: none;
  }
}
#coupon_code {
  height: 70px;
  border: 2px solid #eaedff;
  padding: 0 15px;
  margin-right: 10px;
}

@media (max-width: 767px) {
  #coupon_code {
    margin-bottom: 15px;
  }
}
.coupon2 {
  float: right;
}

.checkout-link .tp-btn:hover {
  background-color: var(--tp-theme-2);
}
.checkout-link .tp-btn-dark-lg:hover {
  background-color: var(--tp-theme-1);
}

@media (max-width: 767px) {
  .coupon2 {
    float: none;
    margin-top: 15px;
  }
}
.cart-page-total {
  padding-top: 50px;
}

.cart-page-total > h2 {
  font-size: 25px;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.cart-page-total > ul {
  border: 1px solid #eaedff;
}

.cart-page-total > ul > li {
  list-style: none;
  font-size: 15px;
  color: #6f7172;
  padding: 20px 30px;
  border-bottom: 1px solid #eaedff;
  font-weight: 400;
}

.cart-page-total ul > li > span {
  float: right;
}

.cart-page-total li:last-child {
  border-bottom: 0;
}

td.product-thumbnail img {
  width: 125px;
}

/* 17. Checkout */
.coupon-accordion h3 {
  background-color: #f7f7f7;
  border-top: 3px solid var(--tp-theme-1);
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 25px;
  padding: 1em 2em 1em 3.5em;
  position: relative;
  width: auto;
}

.coupon-accordion h3::before {
  content: "\f07b";
  left: 15px;
  top: 13px;
  position: absolute;
  color: var(--tp-theme-1);
  font-family: "Font Awesome 5 Pro";
  font-weight: 700;
}

.coupon-accordion span {
  color: #6f7172;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 500;
}

.coupon-accordion span:hover, p.lost-password a:hover {
  color: var(--tp-common-black);
}

.coupon-content {
  border: 1px solid #eaedff;
  display: none;
  margin-bottom: 20px;
  padding: 30px;
}

.coupon-info p.coupon-text {
  margin-bottom: 15px;
}

.coupon-info p {
  margin-bottom: 0;
}

.coupon-info p.form-row-first label, .coupon-info p.form-row-last label {
  display: block;
  color: #6f7172;
}

.coupon-info p.form-row-first label span.required, .coupon-info p.form-row-last label span.required {
  color: var(--tp-theme-1);
  font-weight: 700;
}

.coupon-info p.form-row-first input, .coupon-info p.form-row-last input {
  border: 1px solid #eaedff;
  height: 45px;
  margin: 0 0 14px;
  max-width: 100%;
  padding: 0 0 0 10px;
  width: 100%;
  outline: none;
  font-size: 14px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.coupon-info p.form-row-first input:focus, .coupon-info p.form-row-last input:focus {
  border-color: var(--tp-common-green);
}

.coupon-info p.form-row input[type=submit]:hover, p.checkout-coupon input[type=submit]:hover {
  background: #3e976c none repeat scroll 0 0;
}

.coupon-info p.form-row input[type=checkbox] {
  position: relative;
  top: -1px;
}

.form-row > label {
  margin-top: 15px;
  margin-left: 15px;
  color: #6f7172;
}

.buttons-cart input, .coupon input[type=submit], .buttons-cart a, .coupon-info p.form-row input[type=submit] {
  background: #252525 none repeat scroll 0 0;
  border: medium none;
  color: #fff;
  display: inline-block;
  float: left;
  font-size: 12px;
  font-weight: 700;
  height: 40px;
  line-height: 40px;
  margin-right: 15px;
  padding: 0 15px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}

p.lost-password {
  margin-top: 15px;
}

p.lost-password a {
  color: #6f6f6f;
}

p.checkout-coupon input[type=text] {
  height: 50px;
  padding: 0 15px;
  width: 100%;
  border: 1px solid #eaedff;
  margin-bottom: 15px;
  font-size: 14px;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
p.checkout-coupon input[type=text]:focus {
  border-color: var(--tp-common-green);
}

.coupon-checkout-content {
  display: none;
}

.checkbox-form h3 {
  border-bottom: 1px solid #eaedff;
  font-size: 26px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  width: 100%;
}

.country-select {
  margin-bottom: 30px;
  position: relative;
}

.country-select select {
  width: 100%;
  background-color: transparent;
  border: 1px solid #eaedff;
  padding: 0 10px;
  height: 50px;
}

.country-select label, .checkout-form-list label {
  color: #6f7172;
  display: block;
  margin: 0 0 5px;
}

.country-select label span.required, .checkout-form-list label span.required {
  color: var(--tp-theme-1);
}

.country-select .nice-select {
  border: 1px solid #eaedff;
  height: 45px;
  padding-left: 10px;
  width: 100%;
  color: #6f7172;
  margin-bottom: 20px;
}

.nice-select.open {
  border-color: var(-tp-common-green);
}

.country-select .nice-select .list {
  width: 100%;
}

.checkout-form-list {
  margin-bottom: 30px;
}

.checkout-form-list label {
  color: #6f7172;
}

.checkout-form-list input[type=text], .checkout-form-list input[type=password], .checkout-form-list input[type=email] {
  background: #ffffff;
  border: 1px solid #eaedff;
  border-radius: 0;
  height: 45px;
  padding: 0 0 0 10px;
  width: 100%;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.checkout-form-list input[type=text]:focus, .checkout-form-list input[type=password]:focus, .checkout-form-list input[type=email]:focus {
  border-color: var(--tp-common-green);
}

.checkout-form-list input[type=text]::-moz-placeholder,
.checkout-form-list input[type=password]::-moz-placeholder,
.checkout-form-list input[type=email]::-moz-placeholder {
  color: #6f7172;
  opacity: 1;
}

.checkout-form-list input[type=text]::placeholder,
.checkout-form-list input[type=password]::placeholder,
.checkout-form-list input[type=email]::placeholder {
  color: #6f7172;
  opacity: 1;
}

.checkout-form-list input[type=checkbox] {
  display: inline-block;
  margin-right: 10px;
  position: relative;
  top: -1px;
}

.create-acc label {
  color: #6f7172;
  display: inline-block;
}

.create-account {
  display: none;
}

.ship-different-title h3 label {
  display: inline-block;
  margin-right: 20px;
  color: var(--tp-common-black);
}

.order-notes textarea {
  border: 1px solid #eaedff;
  height: 120px;
  padding: 15px;
  width: 100%;
  outline: 0;
  resize: none;
}

.order-notes textarea:focus {
  border-color: var(--tp-common-green);
}

.order-notes textarea::-moz-placeholder {
  color: #6f7172;
  opacity: 1;
}

.order-notes textarea::placeholder {
  color: #6f7172;
  opacity: 1;
}

#ship-box-info {
  display: none;
}

.panel-group .panel {
  border-radius: 0;
}

.panel-default > .panel-heading {
  border-radius: 0;
}

.your-order {
  padding: 30px 40px 45px;
  border: 3px solid #f7f7f7;
}

@media (max-width: 767px) {
  .your-order {
    padding: 15px;
  }
}
.your-order h3 {
  border-bottom: 1px solid #eaedff;
  font-size: 30px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  width: 100%;
}

.your-order-table table {
  background: none;
  border: 0;
  width: 100%;
}

.your-order-table table th, .your-order-table table td {
  border-bottom: 1px solid #eaedff;
  border-right: medium none;
  color: #6f7172;
  font-size: 14px;
  padding: 15px 0;
  text-align: left;
}

@media (max-width: 767px) {
  .your-order-table table th, .your-order-table table td {
    padding-right: 10px;
  }
}
.your-order-table table th {
  border-top: medium none;
  color: #6f7172;
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  width: 250px;
}

.panel-body > p {
  color: #222;
}

.your-order-table table .shipping ul li {
  list-style: none;
}

.your-order-table table .shipping ul li input {
  position: relative;
  top: -1px;
}

.your-order-table table .shipping ul li label {
  color: #6f7172;
}

.your-order-table table .shipping th {
  vertical-align: top;
}

.your-order-table table .order-total th {
  border-bottom: 0;
  font-size: 14px;
}

.your-order-table table .order-total td {
  border-bottom: medium none;
}

.your-order-table table tr.cart_item:hover {
  background: #F9F9F9;
}

.your-order-table table tr.order-total td span {
  color: var(--tp-common-black);
  font-size: 18px;
  font-weight: 500;
}

.payment-method {
  margin-top: 40px;
}
.payment-method .accordion-item:last-of-type {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.payment-method .accordion-item {
  background-color: #fff;
  border: 0;
  border-bottom: 1px solid #e7e7e7;
}
.payment-method .accordion-button {
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-black);
  padding: 23px 0;
  border: none;
}
.payment-method .accordion-button:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.payment-method .accordion-button::after {
  position: absolute;
  content: "\f067";
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Pro";
  font-size: 16px;
  font-weight: 400;
  margin-left: 0;
  background-image: none;
  color: var(--tp-theme-1);
}
.payment-method .accordion-button:not(.collapsed) {
  color: var(--tp-common-black);
  background-color: var(--tp-common-white);
  box-shadow: none;
}
.payment-method .accordion-button:not(.collapsed)::after {
  content: "\f068";
}
.payment-method .accordion-body {
  padding: 8px 0;
  padding-bottom: 40px;
}
.payment-method .accordion-collapse {
  border: none;
}

.panel-title > a {
  display: block;
}

.order-button-payment input {
  background: #232323 none repeat scroll 0 0;
  border: medium none;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  height: 40px;
  margin: 0px 0 0;
  padding: 0;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  width: 100%;
}

.order-button-payment input:hover {
  background: #3e976c none repeat scroll 0 0;
}

.payment-method .btn-link {
  -moz-user-select: none;
  background: no-repeat;
  border: medium none;
  border-radius: 0;
  color: #444;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 0;
  padding: 3px 10px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
}

.payment-method .card {
  background-color: #ffffff;
  border: 1px solid #eaedff;
  border-radius: 0;
  margin-bottom: 10px;
}

.payment-method .accordion .card:first-of-type {
  border: 1px solid #eaedff;
}

.card-header:first-child {
  border-radius: 0;
}

.payment-method .card-header {
  background-color: #ffffff;
  border-bottom: 1px solid #eaedff;
}

.order-button-payment button {
  width: 100%;
}

.tp-shop-quantity {
  display: flex;
  display: inline-block;
}
.tp-shop-quantity .cart-minus {
  height: 38px;
  width: 38px;
  background-color: var(--tp-common-white);
  text-align: center;
  line-height: 38px;
  cursor: pointer;
}
.tp-shop-quantity input {
  border: 0;
  background-color: transparent;
  height: 38px;
  width: 38px;
  text-align: center;
  line-height: 38px;
}
.tp-shop-quantity .cart-plus {
  height: 38px;
  width: 38px;
  background-color: var(--tp-common-white);
  text-align: center;
  line-height: 38px;
  cursor: pointer;
}

.tp-quantity {
  display: flex;
  background-color: var(--tp-grey-1);
  padding: 3px;
}

.tp-shop-cart a {
  font-size: 16px;
  color: var(--tp-common-white);
  height: 42px;
  width: 42px;
  background-color: var(--tp-theme-2);
  display: inline-block;
  font-weight: 600;
  text-align: center;
  line-height: 40px;
  transition: 0.3s;
}
.tp-shop-cart:hover a {
  background-color: var(--tp-theme-1);
}

.tp-shop-button {
  line-height: 1;
}

/*----------------------------------------*/
/*  14. team CSS START
/*----------------------------------------*/
.tp-team-thumb {
  height: 285px;
  width: 285px;
  position: relative;
  display: inline-block;
  border-radius: 50%;
  margin-bottom: 50px;
  transition: 0.7s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-team-thumb {
    height: 240px;
    width: 240px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-team-thumb {
    height: 200px;
    width: 200px;
  }
}
@media (max-width: 767px) {
  .tp-team-thumb {
    height: 260px;
    width: 260px;
  }
}
.tp-team-thumb-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  z-index: 9;
}
.tp-team-thumb-icon a {
  height: 55px;
  width: 55px;
  background-color: var(--tp-common-white);
  border-radius: 50%;
  text-align: center;
  line-height: 65px;
  display: inline-block;
}
.tp-team-thumb-icon a i {
  transform: rotate(-38deg);
  font-size: 20px;
  font-weight: 600;
  color: var(--tp-common-black);
}
.tp-team-thumb:hover::before {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.tp-team-thumb:hover::after {
  border-color: var(--tp-common-green);
}
.tp-team-thumb:hover .tp-team-thumb-icon {
  opacity: 1;
  visibility: visible;
}
.tp-team-thumb::before {
  position: absolute;
  content: "";
  background-color: rgba(51, 204, 121, 0.7);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7);
  transition: 0.4s;
}
.tp-team-thumb::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px dashed var(--tp-border-7);
  border-radius: 50%;
  transform: scale(1.1);
  transition: 0.4s;
}
.tp-team-thumb img {
  border-radius: 50%;
  width: 100%;
  transition: 0.7s;
}
.tp-team:hover-thumb img {
  transform: scale(1.1);
}

.tp-team-content span {
  font-weight: 400;
  font-size: 14px;
  text-transform: capitalize;
  color: var(--tp-grey-4);
  padding-bottom: 10px;
  display: inline-block;
}

.tp-team-social a {
  font-weight: 400;
  font-size: 14px;
  color: var(--tp-common-white);
  padding: 0px 20px;
  border-right: 1px solid var(--tp-border-5);
}
.tp-team-social a:hover {
  color: var(--tp-theme-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-team-social a {
    padding: 0px 15px;
  }
}
.tp-team-social a:last-child {
  border-right: 0;
}

.tp-team-title {
  font-size: 20px;
  font-weight: 600;
  transition: 0.3s;
}
.tp-team-title:hover a {
  color: var(--tp-common-green);
  display: inline-block;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-team-title {
    font-size: 18px;
  }
}

.team-inner .tp-team-content .tp-team-title {
  color: var(--tp-common-black);
}
.team-inner .tp-team-content span {
  color: #6A6A74;
}
.team-inner .tp-team-social a {
  color: var(--tp-common-black);
  border-right: 1px solid var(--tp-border-7);
}
.team-inner .tp-team-social a:hover {
  color: var(--tp-common-green);
}

/*----------------------------------------*/
/*  17. price CSS START
/*----------------------------------------*/
.tp-price {
  padding: 70px 60px;
  border-radius: 20px 0px 0px 20px;
  box-shadow: 0px 2px 12px rgba(20, 20, 43, 0.08);
  height: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-price {
    padding: 60px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-price {
    padding: 60px 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-price {
    padding: 60px 40px;
    border-radius: 20px 20px 0px 0px;
  }
}
@media (max-width: 767px) {
  .tp-price {
    padding: 20px 15px;
    border-radius: 20px 20px 0px 0px;
  }
}
.tp-price.price-grey-bg {
  background: #F7F7F7;
  border-radius: 0 20px 20px 0;
  border: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-price.price-grey-bg {
    padding: 60px 40px;
    border-radius: 0px 0px 20px 20px;
  }
}
@media (max-width: 767px) {
  .tp-price.price-grey-bg {
    padding: 20px 15px;
    border-radius: 0px 0px 20px 20px;
  }
}
.tp-price__content {
  margin-bottom: 40px;
}
.tp-price__content-circle {
  height: 70px;
  width: 70px;
  background-color: #EDECFE;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}
.tp-price__content-circle span {
  height: 40px;
  width: 40px;
  background-color: var(--tp-common-white);
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(180deg);
}
.tp-price__content-circle span::before {
  content: "";
  height: 100%;
  width: 50%;
  background-color: var(--tp-common-deep-blue);
  display: inline-block;
}
.tp-price__content-text span {
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
  color: #6A6A74;
}
.tp-price__content-text h5 {
  font-weight: 600;
  font-size: 24px;
  line-height: 35px;
  margin-bottom: 0;
}
.tp-price p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
}
.tp-price__price {
  margin-bottom: 30px;
  display: inline-block;
}
.tp-price__price span {
  font-weight: 500;
  font-size: 20px;
  line-height: 22px;
  color: #6A6A74;
}
.tp-price__price b {
  font-weight: 600;
  font-size: 54px;
  line-height: 66px;
  color: var(--tp-common-black);
}
.tp-price__title {
  margin-bottom: 30px;
}
.tp-price__list ul li {
  margin-bottom: 15px;
  position: relative;
  padding-left: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-price__list ul li {
    margin-bottom: 10px;
  }
}
.tp-price__list ul li.price-disable {
  color: #BAB9CA;
}
.tp-price__list ul li.price-disable i {
  background-color: #BAB9CA;
}
.tp-price__list ul li i {
  height: 25px;
  width: 25px;
  background-color: var(--tp-common-deep-blue);
  color: var(--tp-common-white);
  text-align: center;
  line-height: 25px;
  border-radius: 50%;
  position: absolute;
  left: 0;
}

/*----------------------------------------*/
/*  18. product CSS START
/*----------------------------------------*/
.tp-product-title {
  font-size: 18px;
  color: var(--tp-common-black);
  font-weight: 500;
}
.tp-product-title:hover {
  color: var(--tp-theme-1);
}

.tpproduct__img {
  margin-bottom: 25px;
  position: relative;
}
.tpproduct__img::after {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(41, 41, 48, 0.6);
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.tpproduct__meta span {
  color: #777B83;
  font-size: 18px;
  font-weight: 500;
}
.tpproduct__meta .product-rating {
  color: #F7931E;
  margin-bottom: 5px;
}
.tpproduct:hover .tpproduct__img::after {
  opacity: 1;
  visibility: visible;
}
.tpproduct:hover .tpproduct__img .tp-product-icon {
  opacity: 1;
  visibility: visible;
  bottom: 40%;
}

.tp-product-icon {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  padding: 0px 10px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
.tp-product-icon a {
  height: 50px;
  width: 50px;
  background-color: var(--tp-common-white);
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  font-weight: 300;
  color: var(--tp-common-black);
  margin: 0px 6px;
}
.tp-product-icon a:hover {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}

.productdetails {
  padding-left: 35px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .productdetails {
    padding-left: 0;
  }
}
.productdetails__content p {
  font-size: 16px;
  font-weight: 400;
  color: #777B83;
  line-height: 26px;
  padding-bottom: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .productdetails__content p br {
    display: none;
  }
}
.productdetails__ratting i {
  color: var(--tp-common-yellow);
  font-size: 14px;
}
.productdetails__ratting span {
  font-size: 14px;
  color: var(--tp-common-black);
  font-weight: 500;
  padding-bottom: 30px;
  display: inline-block;
}
.productdetails__ratting h4 {
  font-weight: 700;
  font-size: 30px;
  color: var(--tp-common-black);
  padding-bottom: 25px;
}
.productdetails__ratting h4 del {
  font-size: 20px;
  font-weight: 500;
  color: #B9B9B9;
}
.productdetails__model {
  padding-bottom: 45px;
}
.productdetails__model h5 {
  font-size: 16px;
  color: var(--tp-common-black);
  font-weight: 500;
  padding-bottom: 10px;
}
.productdetails__model a {
  font-size: 12px;
  color: #777B83;
  font-weight: 600;
  text-transform: uppercase;
  background-color: #F7F8FD;
  height: 25px;
  display: inline-block;
  padding: 0px 20px;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.productdetails__model a:hover {
  background-color: var(--tp-theme-1);
  color: var(--tp-common-white);
}

.pd-title {
  font-size: 30px;
  font-weight: 500;
  color: var(--tp-common-black);
  padding-bottom: 10px;
}

/*----------------------------------------*/
/*  19. SHOP CSS START
/*----------------------------------------*/
.productdetails-tabs {
  padding-top: 90px;
  padding-bottom: 90px;
}

.tpshopitem:hover .tpshopitem__thumb img {
  transform: scale(1.2);
}
.tpshopitem:hover .tpshopitem__thumb-icon {
  bottom: 14px;
  opacity: 1;
  visibility: visible;
}
.tpshopitem__thumb {
  border: 1px solid #ECEFF4;
  border-radius: 5px;
}
.tpshopitem__thumb img {
  width: 100%;
  -webkit-transition: all 1s ease-out 0s;
  -moz-transition: all 1s ease-out 0s;
  -ms-transition: all 1s ease-out 0s;
  -o-transition: all 1s ease-out 0s;
  transition: all 1s ease-out 0s;
}
.tpshopitem__thumb-icon {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.tpshopitem__thumb-icon a {
  margin: 0 5px;
  height: 45px;
  width: 45px;
  line-height: 45px;
  border: 1px solid var(--tp-theme-blue);
  border-radius: 50%;
  display: inline-block;
  background-color: #0E63FF;
  color: var(--tp-common-white);
}
.tpshopitem__thumb-icon a:hover {
  background-color: var(--tp-theme-pink);
  border: 1px solid var(--tp-theme-pink);
}
.tpshopitem__content p {
  font-size: 18px;
  font-weight: 500;
  color: #777B83;
  margin-bottom: 6px;
}
.tpshopitem__title {
  font-size: 18px;
  font-weight: 500;
  display: block;
}
.tpshopitem__title a {
  background-image: linear-gradient(#0E63FF, #0E63FF), linear-gradient(#0E63FF, #0E63FF);
  background-repeat: no-repeat;
  background-position: 100% 100%, 0% 100%;
  background-size: 0% 1px, 0 1px;
  display: inline;
}
.tpshopitem__title a:hover {
  background-size: 0% 1px, 100% 1px;
  color: var(--tp-theme-blue);
}
.tpshopitem__review i {
  color: #F7931E;
}
.tpshopitem__product-base {
  position: absolute;
  top: 20px;
  left: 30px;
  font-weight: 700;
  font-size: 12px;
  color: var(--tp-common-white);
  padding: 6px 13px;
  background: #FD4766;
  border-radius: 5px;
  line-height: 1;
}

.tpproduct span {
  font-weight: 500;
  font-size: 15px;
}

.tpfilter {
  justify-content: end;
}
@media (max-width: 767px) {
  .tpfilter {
    justify-content: start;
  }
}
.tpfilter span {
  font-weight: 500;
  font-size: 15px;
}
.tpfilter .nice-select {
  padding-left: 5px;
  border: none;
  color: var(--tp-theme-primary);
}

.productthumb img {
  border-radius: 25px;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .productthumb img {
    max-width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .product {
    margin-left: 0;
  }
}
.product__details-content p {
  font-weight: 400;
  font-size: 16px;
  color: #777B83;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .product__details-content p br {
    display: none;
  }
}
.product-dtitle {
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .product-dtitle {
    font-size: 24px;
  }
}
.product-dinfo span {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: #141515;
}
.product-rating a {
  color: #FFDC60;
}
.product-dprice {
  font-weight: 400;
  font-size: 30px;
  line-height: 38px;
  letter-spacing: 0.02em;
}
.product-model-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 15px;
  color: #0B0B0B;
}
.product-quantity-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 15px;
  letter-spacing: 0.02em;
  color: #0B0B0B;
}
.product-quantity input {
  color: var(--tp-theme-primary);
  border: none;
  width: 40px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}
.product-model-list a {
  font-size: 12px;
  font-weight: 600;
  color: #777B83;
  background: #F7F8FD;
  display: inline-block;
  padding: 0 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-right: 15px;
  border-radius: 2px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .product-model-list a {
    margin-right: 8px;
  }
}
@media (max-width: 767px) {
  .product-model-list a {
    margin-right: 5px;
    padding: 0 6px;
  }
}
.product-model-list a:last-child {
  margin-right: 0;
}
.product-model-list a:hover {
  background: var(--tp-theme-blue);
  color: var(--tp-common-white);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tp-product-img {
    margin-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .tp-product-img img {
    max-width: 100%;
  }
}

.tp-product-quantity .cart-minus, .tp-product-quantity .cart-plus {
  cursor: pointer;
  color: #8D8884;
}
.tp-product-quantity .cart-minus:hover, .tp-product-quantity .cart-plus:hover {
  color: var(--tp-theme-primary);
}
.tp-product-quantity input {
  height: 30px;
  width: 32px;
  font-size: 14px;
  border: none;
  font-weight: 700;
  text-align: center;
}

.product-rating {
  margin-right: 20px;
}
.product-rating a {
  font-size: 16px;
  color: #FFDC60;
}

.product-dinfo {
  display: flex;
}

.product-dprice del {
  font-size: 20px;
  color: #B9B9B9;
}

.pro-details-nav {
  background: #F9FAFB;
  display: inline-block;
  padding: 7px 7px;
}

.pro-details-nav-btn {
  border: none;
}
.pro-details-nav-btn li {
  font-weight: 500;
  font-size: 18px;
  color: var(--tp-text-body);
  position: relative;
}
.pro-details-nav-btn li button span {
  position: relative;
  z-index: 9;
}
.pro-details-nav-btn li button::before {
  content: "";
  height: 100%;
  width: 102%;
  top: 0;
  left: -1px;
  background: #fff;
  position: absolute;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
}
.pro-details-nav-btn li button.active::before {
  opacity: 1;
  visibility: visible;
}
.pro-details-nav-btn li::after {
  position: absolute;
  content: "";
  height: 40px;
  width: 1px;
  background: #DFE3E9;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .pro-details-nav-btn li::after {
    display: none;
  }
}
.pro-details-nav-btn li:last-child::after {
  display: none;
}
@media (max-width: 767px) {
  .pro-details-nav-btn li {
    font-size: 16px;
  }
}
.pro-details-nav-btn li .nav-links {
  padding: 20px 45px;
  border-radius: 5px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pro-details-nav-btn li .nav-links {
    padding: 10px 20px;
  }
}
@media (max-width: 767px) {
  .pro-details-nav-btn li .nav-links {
    padding: 5px 15px;
  }
}
.pro-details-nav-btn li .nav-links.active {
  background: var(--tp-common-white);
  color: var(--tp-common-black);
}

.tab-para p {
  font-size: 16px;
  line-height: 30px;
}

.comments-box {
  margin-bottom: 50px;
}

.user-rating ul li {
  display: inline-block;
  color: #FFDC60;
}

.comments-text span, .comments-text p {
  font-size: 14px;
  color: #777777;
  line-height: 26px;
}

.comment-title p {
  color: #777777;
  font-size: 16px;
}

.comment-rating span {
  font-weight: 500;
  margin-right: 5px;
}
.comment-rating ul li {
  display: inline-block;
  color: #FFDC60;
}

.comment-input {
  margin-bottom: 30px;
}
.comment-input input, .comment-input textarea {
  height: 55px;
  padding: 0 20px;
  width: 100%;
  font-size: 14px;
  outline: none;
  color: var(--tp-common-black);
  background-color: var(--tp-grey-6);
  border: 1px solid #f7f7f7;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -o-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
}
.comment-input input:focus, .comment-input textarea:focus {
  border: 1px solid var(--tp-common-green);
}
.comment-input textarea {
  height: 175px;
  resize: none;
  padding-top: 20px;
  padding-bottom: 20px;
  color: var(--tp-common-black);
  background-color: var(--tp-grey-6);
}
.comment-input textarea:focus {
  border: 1px solid var(--tp-common-green);
}

.comments-avatar {
  flex: 0 0 auto;
}

.table .add-info {
  font-size: 18px;
  font-weight: 500;
}

.table td {
  padding: 18px;
}

@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .shop-left-right {
    margin-left: 0;
    margin-right: 0;
  }
}

.tp-comments-title {
  font-size: 24px;
  color: var(--tp-common-black);
  font-weight: 700;
  text-transform: capitalize;
}
@media (max-width: 767px) {
  .tp-comments-title {
    font-size: 18px;
  }
}

.avatar-name b {
  color: var(--tp-common-black);
  font-weight: 700;
  text-transform: uppercase;
}

.shop-faq .accordion-header button {
  font-size: 18px;
  padding: 20px 55px 20px 30px;
}
@media (max-width: 767px) {
  .shop-faq .accordion-header button {
    font-size: 14px;
  }
}
.shop-faq .accordion-content p br {
  display: none;
}
.shop-faq .accordion-content p {
  padding: 0 75px 20px 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .product-button a {
    margin-bottom: 10px;
  }
}

.comment-title {
  font-size: 24px;
  color: var(--tp-common-black);
  font-weight: 700;
  text-transform: capitalize;
}

.tp-product-slider-active {
  margin: 0 -15px;
}
.tp-product-slider-active .slick-slide {
  padding: 0px 15px;
}

/*----------------------------------------*/
/*  16. 404 CSS START
/*----------------------------------------*/
.height-404 {
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.wrapper-404 {
  height: 100vh;
}

.tp-404-content h4 {
  font-size: 40px;
  font-weight: 600;
  font-size: 30px;
  color: #fff;
}

.header-grey-bg {
  background-color: #F7F7F7;
}

/*----------------------------------------*/
/*  18. news-letter CSS START
/*----------------------------------------*/
.tp-newsletter-title {
  font-weight: 600;
  font-size: 35px;
  letter-spacing: -0.01em;
  color: var(--tp-common-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-newsletter-title {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .tp-newsletter-title {
    font-size: 25px;
    margin-bottom: 20px;
  }
}

.tp-newsletter-wrapper {
  background-color: var(--tp-theme-1);
  padding: 20px 50px;
  border-radius: 10px;
  margin: 30px 0;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .tp-newsletter-wrapper {
    padding: 20px 20px;
  }
}

.tp-newsletter__input input {
  width: 100%;
  height: 76px;
  border: 2px solid var(--tp-theme-1);
  border-radius: 40px;
  padding-left: 30px;
  padding-right: 240px;
  font-weight: 500;
  font-size: 14px;
  color: var(--tp-common-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-newsletter__input input {
    padding-right: 170px;
  }
}
@media (max-width: 767px) {
  .tp-newsletter__input input {
    margin-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.tp-newsletter__input input::placeholder {
  color: rgba(34, 34, 34, 0.43);
}
.tp-newsletter__input button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}
@media (max-width: 767px) {
  .tp-newsletter__input button {
    position: static;
  }
}

.newsletter-section-box .tp-section-title-sm {
  padding-bottom: 15px;
}
.newsletter-section-box p {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--tp-grey-4);
}

.newsletter-space .tp-newsletter-wrapper {
  margin: 0;
  background-color: var(--tp-common-black-3);
}

/*----------------------------------------*/
/*  19. contact CSS START
/*----------------------------------------*/
.tp-contact-wrapper {
  padding: 80px 120px;
  background-color: var(--tp-common-white);
  border-radius: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-contact-wrapper {
    padding: 70px 70px;
  }
}
@media (max-width: 767px) {
  .tp-contact-wrapper {
    padding: 20px 20px;
  }
}

.contact-icon {
  margin-right: 20px;
  flex: 0 0 auto;
}

.contact-info-item {
  margin-bottom: 10px;
  border: 1px solid var(--tp-border-1);
  padding: 30px;
  border-radius: 20px;
  margin-right: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact-info-item {
    margin-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-info-item {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .contact-info-item {
    padding: 20px;
    margin-right: 0;
  }
}
.contact-info-item:last-child {
  margin-bottom: 0;
}

.contact-loaction {
  line-height: 18px;
}
.contact-loaction a {
  font-weight: 400;
  font-size: 14px;
  color: var(--tp-common-black);
}

.tp-contact-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.03em;
}

.tpcontact__form input {
  padding: 0px 20px;
  height: 60px;
  width: 100%;
  font-weight: 400;
  font-size: 15px;
  color: var(--tp-common-black);
  background-color: var(--tp-grey-6);
  border: 1px solid transparent;
  border-radius: 5px;
  margin-bottom: 20px;
  transition: 0.3s;
}
.tpcontact__form input:focus {
  border: 1px solid var(--tp-common-green);
}
.tpcontact__form textarea {
  height: 215px;
  width: 100%;
  resize: none;
  padding: 20px 20px;
  font-weight: 400;
  font-size: 15px;
  color: var(--tp-common-black);
  background-color: var(--tp-grey-6);
  border: 1px solid transparent;
  border-radius: 5px;
  outline: 0;
  margin-bottom: 20px;
  transition: 0.3s;
}
.tpcontact__form textarea:focus {
  border: 1px solid var(--tp-common-green);
}

.tp-contact-shape {
  position: absolute;
  top: -75px;
  right: -60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-contact-shape {
    right: -42px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-contact-shape {
    top: -90px;
    right: -40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-us-sction-box {
    margin-bottom: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-info {
    margin-bottom: 70px;
  }
}

.contact-box {
  background-color: var(--tp-common-deep-blue);
  padding: 70px 60px;
  padding-bottom: 100px;
  border-radius: 20px 0px 20px 0px;
  transform: translateX(100px);
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact-box {
    padding: 50px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-box {
    transform: translateX(40px);
    padding: 40px 25px;
  }
}
@media (max-width: 767px) {
  .contact-box {
    transform: translateX(0px);
    padding: 40px 25px;
  }
}
.contact-box-circle {
  height: 40px;
  width: 40px;
  line-height: 40px;
  background-color: var(--tp-common-white);
  text-align: center;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  z-index: 2;
}
@media (max-width: 767px) {
  .contact-box-circle {
    display: none;
  }
}
.contact-box-circle::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background-color: var(--tp-common-deep-blue);
  display: inline-block;
  border-bottom-right-radius: 200px;
  border-top-right-radius: 200px;
  z-index: -1;
}
.contact-box-circle span {
  color: var(--tp-common-black);
  font-weight: 600;
}
.contact-box-circle span:last-child {
  color: var(--tp-common-white);
}
.contact-box__title {
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  color: var(--tp-common-white);
  margin-bottom: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact-box__title {
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-box__title {
    margin-bottom: 35px;
  }
}
@media (max-width: 767px) {
  .contact-box__title {
    font-size: 30px;
    margin-bottom: 30px;
  }
  .contact-box__title br {
    display: none;
  }
}
.contact-box__info-list {
  margin-bottom: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact-box__info-list {
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-box__info-list {
    margin-bottom: 40px;
  }
}
@media (max-width: 767px) {
  .contact-box__info-list {
    margin-bottom: 35px;
  }
}
.contact-box__info-list ul li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-box__info-list ul li {
    margin-bottom: 15px;
  }
}
@media (max-width: 767px) {
  .contact-box__info-list ul li {
    margin-bottom: 15px;
  }
}
.contact-box__info-list ul li:last-child {
  margin-bottom: 0;
}
.contact-box__info-list ul li a {
  font-weight: 700;
  font-size: 20px;
  line-height: 23px;
  color: #FFFFFF;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact-box__info-list ul li a {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-box__info-list ul li a {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .contact-box__info-list ul li a {
    font-size: 17px;
  }
}
.contact-box__info-list ul li a i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 25px;
}
@media (max-width: 767px) {
  .contact-box__info-list ul li a i {
    top: 2px;
    font-size: 19px;
  }
}
.contact-box__social ul li {
  display: inline-block;
  margin-right: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact-box__social ul li {
    margin-right: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-box__social ul li {
    margin-right: 18px;
  }
}
@media (max-width: 767px) {
  .contact-box__social ul li {
    margin-right: 20px;
  }
}
.contact-box__social ul li a {
  color: var(--tp-common-white);
  font-size: 22px;
}
@media (max-width: 767px) {
  .contact-box__social ul li a {
    font-size: 17px;
  }
}

.contact-wrapper {
  padding: 110px;
  padding-left: 200px;
  border: 1px solid var(--tp-border-1);
  box-shadow: 0px 0px 40px rgba(99, 99, 99, 0.06);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact-wrapper {
    padding: 40px;
    padding-left: 170px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-wrapper {
    padding: 40px;
    padding-left: 80px;
  }
}
@media (max-width: 767px) {
  .contact-wrapper {
    padding: 20px;
    padding-left: 20px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact-us-sction-box {
    margin-bottom: 40px;
  }
}

/*----------------------------------------*/
/*  20. footer CSS START
/*----------------------------------------*/
.footer-bg {
  position: relative;
  background-size: cover;
  padding-bottom: 30px;
}
.footer-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.tp-footer-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tp-common-white);
  padding-bottom: 20px;
}

.tp-footer-widget__social {
  position: relative;
}
.tp-footer-widget__social a {
  position: relative;
  display: inline-block;
}
.tp-footer-widget__social a::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.tp-footer-widget__list ul.footer-position li {
  padding-left: 40px;
  position: relative;
  margin-bottom: 15px;
}
.tp-footer-widget__list ul.footer-position li a {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--tp-common-white);
}
.tp-footer-widget__list ul.footer-position li a span {
  position: absolute;
  top: 6px;
  left: 0;
  font-size: 20px;
}
.tp-footer-widget__list ul li {
  padding-bottom: 5px;
}
.tp-footer-widget__list ul li a {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--tp-common-white);
  transition: 0.3s;
}
.tp-footer-widget__list ul li a:hover {
  color: var(--tp-common-green);
}

.footer-space-one {
  padding-left: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-space-one {
    padding-left: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .footer-space-one {
    padding-left: 0px;
  }
}

.footer-border-top {
  border-top: 1px solid var(--tp-border-5);
}

.copyright-left p {
  color: var(--tp-common-white);
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .copyright-right-side ul {
    margin-bottom: 30px;
  }
}
.copyright-right-side ul li {
  display: inline-block;
  padding-left: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .copyright-right-side ul li {
    padding-left: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .copyright-right-side ul li {
    padding-left: 0px;
    padding: 0px 15px;
  }
}
@media (max-width: 767px) {
  .copyright-right-side ul li {
    padding-left: 0px;
    padding: 0px 10px;
  }
}
.copyright-right-side ul li:first-child {
  padding-left: 0;
}
.copyright-right-side ul li a {
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  color: var(--tp-common-white);
}
.copyright-right-side ul li a:hover {
  color: var(--tp-common-orange);
}

.footer-scroll {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%);
  z-index: 3;
}
.footer-scroll button {
  height: 40px;
  width: 40px;
  background-color: white;
  border: 2px dashed var(--tp-common-white);
  border-radius: 50%;
}

.footer-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 35px;
  color: var(--tp-common-white);
  transition: 0.4s;
  z-index: 99;
}
@media (max-width: 767px) {
  .footer-icons {
    font-size: 20px;
  }
}

.scroll-top {
  width: 50px;
  height: 50px;
  line-height: 50px;
  position: fixed;
  bottom: 30px;
  right: 50px;
  font-size: 16px;
  border-radius: 6px;
  z-index: 99;
  color: var(--tp-common-white);
  text-align: center;
  cursor: pointer;
  background: var(--tp-common-green);
  transition: 1s ease;
  border: none;
}
@media (max-width: 767px) {
  .scroll-top {
    right: 30px;
  }
}

.scroll-top.open {
  bottom: 30px;
}

.scroll-top::after {
  position: absolute;
  z-index: -1;
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}

.cta-sticky-btn {
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 998;
  background-color: var(--tp-theme-1);
}

.cta-sticky-btn p {
  color: var(--tp-common-white);
  font-size: 18px;
  font-weight: 600;
  box-sizing: border-box;
  width: 100%;
  bottom: 40px;
  position: absolute;
  padding-left: 20px;
  z-index: 1002;
  line-height: 0px;
  margin-bottom: 0px;
}

.cta-sticky-btn span {
  display: block;
  font-size: 12px;
  position: absolute;
  letter-spacing: 0.35px;
  bottom: 20px;
  left: 20px;
  color: var(--tp-common-white);
}

.cta-sticky-btn svg {
  position: absolute;
  right: 50px;
  bottom: 20px;
}

/* cusotm css */
:root {
  --colors-grey-100: #F7F9FA;
  --colors-grey-200: #EEF0F3;
  --colors-grey-300: #DFE3E8;
  --colors-grey-400: #C7CDD4;
  --colors-grey-500: #A1A7AD;
  --colors-grey-600: #8b9196;
}

.z--1 {
  z-index: -1;
}

.tp-hero__section-box {
  border-bottom: 2px solid rgba(255, 188, 163, 0.57);
}


.hero-3-features div div img {
  height: 40px;
}
.quote-mark {
      color: #f0592a;
    font-size: 50px;
    font-weight: 800;
    line-height: 0.5;
    font-family: Georgia, "Times New Roman", serif;
}
.banner-text-bg {
  background-color: var(--tp-common-green-2);
  padding: 20px;
  border-radius: 15px;
      background: #fff;
    
    padding: 25px;
        box-shadow: 0 0px 11px rgba(0, 0, 0, 0.06);
        margin-top: 20px !important;
}

.banner-text-bg p {
  font-size: 21px;
    line-height: 1.35;
    color: #1a1a1a;
    font-weight: 500;
    margin: 4px 0 28px;
}

.banner-text-bg span {
  font-weight: 500;
  font-size: 13px;
  color: #52525C;
}
.banner-ceoimg{
  border-radius: 50%;
    height: 40px;
}

.tp-brand-icon img {
  filter: grayscale(100);
  height: 35px;
}

.slick-slide.slick-active {
  width: 100px;
}

.hero-3-features div div img {
  margin: 0px auto;
  border-radius: 10px;
}

.hero-3-features div div p {
  font-size: 18px;
  padding-top: 10px;
  font-weight: 500;
}
.baneer-card-text{
  font-size: 14px !important;
  padding-top: 5px !important;
  font-weight: 600 !important;
}

.hero-3-features div:nth-child(1) div {
  
  width: 120px;
  height: 120px;
  
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 16px;
  border-radius: 15px;
  
  cursor: pointer;
}

.hero-3-features div:nth-child(2) div {
  
  width: 120px;
  height: 120px;
  
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 16px;
  margin-bottom: 20px;
  border-radius: 15px;
  cursor: pointer;
}

.hero-3-features div:nth-child(3) div {
  
  width: 120px;
  height: 120px;
  
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 15px;
  cursor: pointer;
    margin-right: 16px;

  
}
.hero-3-features div:nth-child(4) div {
  
  width: 120px;
  height: 120px;
  
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 15px;
  cursor: pointer;
}

.custom-btn.tp-btn:hover {
  background: var(--tp-theme-g-2);
  transform: translateY(-4px);
}

.nav-login-btn.tp-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;

    height: 44px;
    line-height: 42px;
    width: 100%;
    box-shadow: none;
    padding: 0 20px;
    text-transform: capitalize;
    margin-bottom: -17px;
    border-radius: 7px;

    background: var(--tp-theme-1);
    color: #fff !important;
    border: 1px solid transparent;
}

.nav-login-btn.tp-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.18); /* Light overlay */
    transition: left 0.4s ease;
    z-index: 0;
}

.nav-login-btn.tp-btn:hover::before {
    left: 0;
}

.nav-login-btn.tp-btn span,
.nav-login-btn.tp-btn i,
.nav-login-btn.tp-btn svg {
    position: relative;
    z-index: 1;
}

.faq-custom.tp-custom-accordio .accordion-buttons {
  padding: 20px 15px;
}

.faq-custom.tp-custom-accordio .accordion-buttons::after {
  top: 21px;
}

.tp-service-item.h-462 {
  height: 462px;
}

.tp-service-item.h-221 {
  height: 221px;
}

.tp-service-item.h-450 {
  height: 425px;
}

.tp-service-item.h-201 {
  height: 201px;
}

.slick-next.slick-arrow {
  color: white;
  border: 1px solid black;
}

.slick-prev.slick-arrow {
  color: white;
  border: 1px solid black;
}

.fs-12 {
  font-size: 12px;
}

.h-215 {
  height: 215px;
}

.why-soopr-div .points div:nth-child(1) {
  background-color: orange;
  width: 64px;
  height: 64px;
  margin: 0px 0px 20px 0px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.why-soopr-div .points div i {
  font-size: 23px;
  color: var(--tp-black-2);
}

.why-soopr-div .points {
  display: flex;
  gap: 20px;
  padding-top: 10px;
}
.why-soopr-div .points:nth-child(1) div:nth-child(1) {
  background-color: var(--tp-common-blue);
}
.why-soopr-div .points:nth-child(1) div:nth-child(1) i {
  color: #b1b1f9;
}
.why-soopr-div .points:nth-child(2) div:nth-child(1) {
  background-color: var(--tp-common-yellow-2);
}
.why-soopr-div .points:nth-child(2) div:nth-child(1) i {
  color: #f3dc87;
}
.why-soopr-div .points:nth-child(3) div:nth-child(1) {
  background-color: var(--tp-common-green-2);
}
.why-soopr-div .points:nth-child(3) div:nth-child(1) i {
  color: #9acdb1;
}
.why-soopr-div .points div p {
  font-size: 16px;
  color: #5a5a5a;
}

.tp-service-sm-title-1 {
  font-weight: 600;
  font-size: 25px;
  line-height: 30px;
}

.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 767px) {
  .hero-3-features div:nth-child(3) div, .hero-3-features div:nth-child(1) div, .hero-3-features div:nth-child(2) div {
    width: 100%;
  }
  .sm-ps-0 {
    padding-left: 0px !important;
  }
}
/* button */
.custom-btn.tp-btn {
  display: inline-block;
  color: var(--tp-common-white);
  background: var(--tp-theme-1);
  border-radius: 5px;
  text-transform: none;
  text-align: center;
  padding: 16px 30px;
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;

  box-shadow: none;
}

@media (max-width: 767px) {
  main {
    overflow-x: hidden !important;
  }
  .sm-ps-8 {
    padding-left: 0.8rem !important;
  }
  .tp-hero__wrapper {
    width: 100%;
    justify-content: center;
  }
  .tp-hero__button {
    margin: 0px;
  }
  .navbar-bg-white {
    height: 56px;
  }
  /* .banner-text-bg {
    margin-left: 20px !important;
    margin-right: 20px !important;
  } */
  .hero-space .tp-link-green {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .hero-space .tp-link a svg {
    margin-bottom: 7px;
  }
  .tp-service-sm-title {
    line-height: 27px;
  }
  .tp-service-item.h-201 {
    height: auto;
    width: auto;
  }
  .tp-service-item.h-450 {
    height: auto;
    width: 100%;
  }
  .tp-service-sm-title-head, .tp-service-sm-title-head-1, .tp-service-sm-title-head-2 {
    font-size: 35px;
    line-height: 35px;
  }
  .tp-service-sm-title-head-1 {
    line-height: 42px;
  }
  .tp-service-sm-title-head-2 {
    line-height: 36px;
  }
  .sm-order-first {
    order: -1 !important;
  }
  .brand-item {
    width: 50%;
    padding: 10px;
  }
  .brand-item .tp-brand-icon img {
    width: 100%;
  }
 
  .w-sm-34 {
    width: 34% !important;
  }
  .why-soopr-div {
    width: 100%;
  }
  .why-soopr-div .points div:nth-child(1) {
    background-color: orange;
    padding: 18px 20px;
    margin: 0px 0px 20px 0px;
    border-radius: 10px;
  }
  .why-soopr-div .points div i {
    font-size: 23px;
    color: var(--tp-black-2);
  }
  .why-soopr-div .points {
    display: flex;
    gap: 10px;
    padding-top: 10px;
  }
  .why-soopr-div .points:nth-child(1) div:nth-child(1) {
    background-color: var(--tp-common-blue);
  }
  .why-soopr-div .points:nth-child(2) div:nth-child(1) {
    background-color: var(--tp-common-yellow-2);
  }
  .why-soopr-div .points:nth-child(3) div:nth-child(1) {
    background-color: var(--tp-common-green-2);
  }
  .why-soopr-div .points div p {
    font-size: 15px;
  }
  .why-soopr-div .points div:nth-child(1) {
    width: 20%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .why-soopr-div .points div:nth-child(2) {
    width: 80%;
  }
  .tp-logo-border {
    padding: 8px 0px;
  }
  /* #cta-sticky {
    display: none !important;
  } */
 
  .hero-3-features div div p {
    font-size: 16px;
  }
  .hero-3-features .col-4:nth-child(1) {
    padding-right: 12px !important;
    padding-left: 5px;
  }
  .hero-3-features .col-4:nth-child(2) {
    padding-right: 0px;
    padding-left: 0px;
  }
  .hero-3-features .col-4:nth-child(3) {
    padding-right: 5px;
    padding-left: 12px;
  }
  .tp-logo svg {
    width: 70px;
  }
  .hero-3-features div:nth-child(3) div, .hero-3-features div:nth-child(2) div, .hero-3-features div:nth-child(1) div {
    height: 134px;
  }
  .tp-service-item.h-462 {
    height: 374px;
  }
  .tp-service-item.h-221 {
    height: 120px;
  }
  .tp-service-item.h-450 {
    height: 380px;
  }
  .tp-service-item.h-201 {
    height: 120px;
  }
  .tp-service-item.h-215 {
    height: 264px;
  }
  .sm-w-50.w-25 {
    width: 50% !important;
  }
  .tp-newsletter__input input {
    width: 100%;
    height: 60px;
  }
  .tp-newsletter__input button {
    height: 60px;
    width: 100%;
  }
  .tp-header-right ul li > a {
    box-shadow: none;
    border: none;
    width: 15px;
  }
  .sm-px-20 {
    padding-left: 20px;
    padding-right: 20px;
  }
  .sm-fs-12 {
    font-size: 12px;
  }
  .sm-w-40 {
    width: 40% !important;
  }
  .pt-120 {
    padding-top: 60px;
  }
  .pb-120 {
    padding-bottom: 60px;
  }
  .hero-grideant-bg {
    padding-bottom: 0px;
    padding-top: 78px;
  }
  .pb-110 {
    padding-bottom: 60px;
  }
  .sm-px-15 {
    padding-left: 15px;
    padding-right: 15px;
  }
  .sm-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .ph-img-51 {
    width: 51%;
  }
  .tp-testi-2__text {
    width: 300px;
  }
  .blog-space {
    padding-bottom: 10px;
  }
  .sm-pb-30 {
    padding-bottom: 30px;
  }
  .sm-row-reverse {
    flex-direction: column-reverse;
  }
  .hero-book-your-getstartedfree{
    width: 100%;
  }
  .byt-preview{
    margin-right: 0px !important;
  }
  .container-auto{
    padding-left: 20px !important;
        padding-right: 20px;
  }
  .section-divider-gap{
    margin-bottom: 50px !important;
  }
  .newheading-fontsize {
      font-size: 30px !important;
  }
  .footer-sectin-margin {
    margin-top: -79px !important;
 }
  .byt-info {
    margin-left: 0px !important;
  }
  .crmhero-eyebrow {
  align-items: start !important;
  }
  .gofox-hero-leftcard {
    height: 100% !important;
  }

  .tp-brand-icon img{
    flex-direction: column;
  }
  .cf-section{
    padding: 50px 24px !important;
  }
  .home-pg-faq li.nav-item {
      width: 100%;
  }
  .gofox-head{
    margin-bottom: 30px !important;
  }
  .pmh-hub img {
    width: 65px !important;
    height: 65px !important;
  }
  .pmh-hub {
    width: 100px !important;
    height: 100px !important;
  }
  .pmh-node img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
 }
 .eyebrow-space {
    height: 24px !important;
  }
  .crmft-visual-panel{
    display: block !important;
  }
  .crmft-visual{
    aspect-ratio: 16 / 13.4 !important;
  }
  .banner-boxs .banner-card {
    width: 100px !important;
    height: 115px !important;
    margin-right: 6px !important;
    
  }
   .banner-card-1{
margin-right: 12px !important;
  }
   .banner-card-2{
margin-right: 12px !important;
  }

  .banner-card-3{
margin-right: 0px !important;
  }
  .gofox-herocard-hidden{
    display: none;
  }
  .banner-btn-topspaicng{
    margin-top: 20px !important;
  }
  .hero-3-features {
    padding-top: 45px !important;
  }
  .tp-brand-icon img {
    height: 30px;
  }
  .gofox-mock{
  flex-direction: column;
  }
  .sticky-buttn-gap{
    margin-bottom: 20px;
  }
  .sticky-buttn-width{
    width: 100% !important;
  }
  .scroll-top.open{
    bottom: 69px !important;
  }
  /* .crmb-meta{
    flex-direction: column;
    align-items: start !important;
    justify-content: flex-start  !important;
  } */
  .crmb-card{
    flex-direction: column !important;
  }
  .feature-card1-image{
    padding: 24px 24px 24px 24px !important;
        border-radius: 20px !important;

  }
  .feature-section {
    grid-template-columns: repeat(1, 1fr) !important;
      grid-template-columns:1fr !important;
  }
  .crmhero-sectiobg{
    margin-bottom: 50px !important;
  }
      .fc-grid,.feature-grid,.innerfeatue-grid {
      grid-template-columns: repeat(1, 1fr) !important;
  }
  .gcr-hero{
    padding: 70px 24px 60px 24px !important;
  }
  .feature-row-2 {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .cta-row{
        margin-bottom: 40px !important;
  }
  .pmh-node--giropay img{
    height: 45px !important;
}
   .section-heading-padding {
    margin-bottom: 30px !important;
}
.header-bottem-spacing {
    margin-bottom: 30px !important;
}


}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .resource-side-div .resource-text {
    padding-left: 15px;
  }
  .gofox-herocard-hidden{
    display: none;
  }
  .banner-btn-topspaicng{
    margin-top: 20px !important;
    justify-content: center;
  }
   .hero-3-features {
    padding-top: 45px !important;
    justify-content: center;
  }
  .gofox-mock{
  flex-direction: column;
  }
  .scroll-top.open {
    bottom: 73px !important;
  }
  .scroll-top{
    bottom: 70px !important;
  }
  .trusted-by-brand{
    gap: 35px !important;
  }
  .feature-card1-image{
    padding: 24px 24px 24px 24px !important;
    border-radius: 20px !important;
  }
  .innerfeatue-heropanel{
    gap: 0px !important;
  }
     .feature-grid {
        
        grid-template-columns: 1fr 1fr !important;
    }
  .grid-template-columns{
        
        grid-template-columns: 1fr 1fr !important;
    }
     .comparison-wall{
      grid-template-columns: repeat(2, 1fr);
    }
    .comparison-wall {
    grid-template-columns: repeat(2, 1fr) !important;
  }
   .cta-row{
        margin-bottom: 40px !important;
  }
   .site-footer .links-container {
    flex-wrap: wrap !important;
    justify-content: flex-start;
    row-gap: 28px;
  }

  .site-footer .links-column {
    width: 33.333% !important;
    padding-right: 16px;
    box-sizing: border-box;
  }
  .site-footer .tagline{
    text-align: start !important;
  }
  .pmh-node--giropay img{
    height: 45px !important;
}

}




/* .testimonial-section-padding{
  padding:50px 0 !important
} */

.pb-5.header-bottem-spacing{
  padding-bottom: 30px !important;
}
.tpoffcanvas{
  padding: 20px 20px 20px 20px !important;
}
a.meanmenu-reveal {
	display: none;
}

/* when under viewport size, .mean-container is added to body */
.mean-container .mean-bar {
	float: left;
	width: 100%;
	position: relative;
	/* background: #070337; */
	padding: 4px 0;
	min-height: 42px;
	z-index: 999999;
}

.mean-container a.meanmenu-reveal {
	width: 22px;
	height: 22px;
	padding: 13px 13px 11px 13px;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	text-indent: -9999em;
	line-height: 22px;
	font-size: 1px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
}

.mean-container a.meanmenu-reveal span {
	display: block;
	background: #fff;
	height: 3px;
	margin-top: 3px;
}

.mean-container .mean-nav {
	float: left;
	width: 100%;
	/* background: #070337; */
	/* margin-top: 44px; */
}

.mean-container .mean-nav ul {
	padding: 0;
	margin: 0;
	width: 100%;
	list-style-type: none;
}

.mean-container .mean-nav ul li {
	position: relative;
	float: left;
	width: 100%;
      font-size: 17px;
    font-weight: 500;
        padding: 15px 0;
}

.mean-container .mean-nav ul li a {
    width: 100%;
    padding: 15px 0;
    color: #000000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 17px;
    line-height: 1.5 !important;
    font-weight: 600;
    text-transform: none;
    height: 24px !important;
}
.mean-last{
  display: none !important;
}
.mobile-get-started{
  display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0 !important;
}
.tpoffcanvas__info-address{
  margin-bottom: 20px !important;
}
.mean-container .mean-nav ul li li a {
	width: 80%;
	padding: 10px 10%;
	text-shadow: none !important;
	visibility: visible;
}


.mean-container .mean-nav ul li li li a {
	width: 70%;
	padding: 10px 15%;
}

.mean-container .mean-nav ul li li li li a {
	width: 60%;
	padding: 10px 20%;
}

.mean-container .mean-nav ul li li li li li a {
	width: 50%;
	padding: 10px 25%;
}


.mean-container .mean-nav ul li a.mean-expand {
	margin-top: 1px;
	width: 26px;
	height: 32px;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	font-weight: 700;
	background: transparent;
	border: none !important;
	font-size: 14px;
}




.mean-container .mean-push {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	clear: both;
}

.mean-nav .wrapper {
	width: 100%;
	padding: 0;
	margin: 0;
}

/* Fix for box sizing on Foundation Framework etc. */
.mean-container .mean-bar, .mean-container .mean-bar * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}


.mean-remove {
	display: none !important;
}

/* .header-separation{
  display: none;
} */

.home-pg-faq .nav-tabs .nav-link {
width: 100%;
}

.tp-brand-area-header{
  margin-bottom: 15px;
}




.z-10 {
  z-index: 10;
}

.resource-side-div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 43px;
}
@media (max-width: 767px) {
  .resource-side-div div img {
    width: 94%;
    display: block;
    margin: 0px auto;
  }
}
@media (max-width: 767px) {
  .resource-side-div {
    margin-top: 50px;
    display: block;
  }
}
.resource-side-div .resource-text {
  width: 50%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .resource-side-div .resource-text {
    padding-left: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .resource-side-div .resource-text {
    padding-left: 15px;
  }
}

@media (max-width: 767px) {
  .resource-side-div .resource-text {
    width: auto;
    margin-top: 15px;
    padding-left: 12px;
  }
}
.resource-side-div .resource-text span {
  color: var(--tp-theme-1);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.8px;
}
.resource-side-div .resource-text p {
  font-size: 20px;
  line-height: 30px;
  color: #5a5a5a;
}
.resource-side-div .resource-text h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 1.5rem;
  font-family: var(--tp-ff-head);
  color: #060C3B;
}
.resource-side-div .resource-text h3:hover {
  color: var(--tp-theme-1);
}
@media (max-width: 767px) {
  .resource-side-div .resource-text h3 {
    padding: 5px 0px;
  }
}

.resource-large-text {
  margin-top: 40px;
  padding-right: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .resource-large-text {
    margin-bottom: 50px;
  }
}
.resource-large-text span {
  color: var(--tp-theme-1);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.5px;
}
.resource-large-text h3 {
  margin-top: 50px;
  padding-bottom: 15px;
}
.resource-large-text h3 a {
  padding: 13px 0px;
  line-height: 45px;
  font-family: var(--tp-ff-head);
  font-size: 35px;
  font-weight: 500;
  color: #060C3B;
}
.resource-large-text h3 a:hover {
  color: var(--tp-theme-1);
}
@media (max-width: 767px) {
  .resource-large-text h3 a {
    font-size: 27px;
    line-height: 35px;
    margin-bottom: 0px;
  }
}
.resource-large-text .read-btn {
  padding: 13px 0px;
  line-height: 26px;
  font-family: var(--tp-ff-head);
  font-size: 20px;
  font-weight: 400;
  color: var(--tp-theme-1);
}
.resource-large-text .read-btn:hover {
  text-decoration: underline 1px solid var(--tp-theme-1);
}

.resource-2-text {
  padding: 0px 30px;
}
@media (max-width: 767px) {
  .resource-2-text {
    margin-bottom: 40px;
  }
}
.resource-2-text h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  font-family: var(--tp-ff-head);
  color: #060C3B;
  margin-bottom: 0px;
  padding: 40px 0px 30px 0px;
}
.resource-2-text h3:hover {
  color: var(--tp-theme-1);
}
@media (max-width: 767px) {
  .resource-2-text h3 {
    line-height: 30px;
    padding: 15px 0px;
  }
}
.resource-2-text p {
  font-size: 20px;
  line-height: 30px;
  padding-bottom: 20px;
  color: #5a5a5a;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--tp-grey-1);
}
@media (max-width: 767px) {
  .resource-2-text p {
    line-height: 20px;
    padding-bottom: 15px;
  }
}
.resource-2-text span {
  font-size: 12px;
}

.resource-img-zoom img {
  border-radius: 5px;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.resource-img-zoom img:hover {
  transform: scale(1.02);
  overflow: hidden;
}

.resource-banner-text h1 {
  font-weight: 500;
  font-size: 60px;
  line-height: 1.3;
  margin-bottom: 28px;
  font-family: var(--tp-ff-head);
  letter-spacing: -0.01em;
}
@media (max-width: 767px) {
  .resource-banner-text h1 {
    font-size: 40px;
  }
}

.resource-banner-text {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: start;
}
.resource-banner-text p {
  margin-bottom: 20px;
  font-size: 20px;
  line-height: 30px;
  color: #5a5a5a;
}
@media (max-width: 767px) {
  .resource-banner-text p {
    font-size: 15px;
    line-height: 26px;
  }
}

.resource-banner {
  padding-top: 20px;
}
.resource-banner div img {
  margin-bottom: 40px;
  top: 50px;
}

.resource-2-post {
  padding-top: 30px;
}
.resource-2-post div {
  padding: 15px;
}
.resource-2-post div h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 1.5rem;
  font-family: var(--tp-ff-head);
}
.resource-2-post div h3:hover {
  color: var(--tp-theme-1);
}
.resource-2-post div img {
  width: 100%;
  border-radius: 5px;
}

.resource-banner-img {
  width: 100%;
  padding-right: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .resource-banner-img {
    padding-right: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .resource-banner-img {
    padding-right: 0px;
  }
}
@media (max-width: 767px) {
  .resource-banner-img {
    padding-right: 0px;
  }
}

.right-resource-div {
  max-width: 660px;
  padding-top: 120px;
}
@media (max-width: 767px) {
  .right-resource-div {
    padding-top: 20px;
  }
}

.breadcrumb-item.back {
  color: #949494;
}

.breadcrumb-item.active {
  color: var(--tp-black-2);
}

.article-text {
  padding-left: 45px;
}
.article-text .source {
  color: #8a57f2;
  text-decoration: underline;
  margin-bottom: 20px;
  font-size: 13px;
}
.article-text h3 {
  font-size: 30px;
  font-weight: 500;
  margin: 0px 0px 15px 0px;
  font-family: var(--tp-ff-head);
}
.article-text p {
  font-size: 16px;
  line-height: 28px;
  margin-bottom: 20px;
}
.article-text p a {
  color: var(--tp-theme-1);
  text-decoration: underline;
}
.article-text p:first-of-type::first-letter {
  font-size: 150%;
  font-weight: 300;
}
.article-text img {
  display: block;
  margin: 0px auto;
  margin-top: 20px;
  margin-bottom: 30px;
  border-radius: 5px;
}
.article-text ul {
  margin-bottom: 20px;
}
.article-text ul li {
  font-size: 16px;
  font-weight: 700;
  display: flex;
}
.article-text ul li span {
  padding-left: 10px;
}
.article-text ul li a {
  color: var(--tp-theme-1);
  text-decoration: underline;
}
.article-text ul li i {
  font-weight: 700;
  display: inline-block;
  padding-top: 5px;
}
.article-text .article-quote {
  padding: 30px;
  background-color: rgb(246, 246, 246);
  width: 100%;
  margin: 50px 0px;
  border-left: 6px solid var(--tp-theme-1);
}
.article-text .article-quote span {
  font-size: 22px;
  letter-spacing: 0.4px;
  line-height: 30px;
  font-family: var(--tp-ff-head);
  color: var(--tp-common-black);
  font-weight: 400;
  font-style: italic;
}

.article-img .source {
  color: #8a57f2;
  font-size: 13px;
  text-decoration: underline;
  margin-bottom: 20px;
}

.article-menu {
  height: auto;
  border: 1px solid #ed9529;
  padding: 14px;
  margin-top: 10px;
  border-radius: 5px;
  background-color: #fffaf5;
  z-index: 1;
  position: sticky;
  top: 10%;
}
.article-menu .article-menu-title {
  font-size: 25px;
  font-family: var(--tp-ff-head);
  font-weight: 500;
}
.article-menu ul li {
  padding: 10px 15px;
  font-size: 16px;
  font-weight: 500;
}
.article-menu ul li:hover {
  color: var(--tp-theme-1);
}

.article-divider {
  width: 60%;
  margin: 0px auto;
}

.article-head {
  margin-bottom: 80px;
}
.article-head h1 {
  font-size: 50px;
  width: 80%;
  line-height: 70px;
  text-align: center;
  margin: 0px auto;
  font-family: var(--tp-ff-head);
}

.article-img img {
  border: 1px solid var(--tp-grey-4);
  border-radius: 30px;
}

.tp-tooltip {
  position: relative;
}

.tp-tooltip h3 {
  text-align: center;
  color: var(--tp-common-white);
  font-size: 18px;
  padding-top: 8px;
  font-family: var(--tp-ff-heading);
  font-weight: 500;
}

.tp-tooltip .top {
  width: 100%;
  left: 0;
  top: 0px;
  padding: 10px 20px;
  color: #ffffff;
  background-color: var(--tp-theme-1);
  font-weight: normal;
  font-size: 14px;
  border-radius: 5px;
  position: relative;
  z-index: 99999999;
  box-sizing: border-box;
  display: block;
}

.tp-tooltip .top i {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  width: 30px;
  height: 15px;
  overflow: hidden;
}

.tp-tooltip .top i::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: var(--tp-theme-1);
}

.email-finder-head-section {
  padding-bottom: 50px;
}

.finder-image img {
  width: 500px;
}

.finder-heading h1 {
  font-size: 64px;
  font-weight: 700;
  margin-bottom: 5px;
  margin-top: 20px;
  line-height: 1.2;
  text-align: center;
  font-family: var(--tp-ff-heading);
}

.finder-heading p {
  width: 60%;
  text-align: center;
  margin: 0px auto;
  padding-bottom: 20px;
}

.finder-form p {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px;
}

.finder-form {
  max-width: 700px;
  background: linear-gradient(0deg, #FAFBFB, #FAFBFB);
  border: 1px solid #f2f4f9;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 30px 50px 25px;
  margin-left: auto;
  margin-right: auto;
}

.finder-form form {
  display: flex;
  margin-bottom: 10px;
}

.finder-form form input {
  height: 50px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13px;
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -4px;
  border-right: none;
}

.finder-form form input:focus {
  outline: none;
  box-shadow: none;
  border: 1px solid var(--tp-theme-1);
}

.finder-form form input::placeholder {
  opacity: 0.5;
}

.finder-form button {
  font-weight: 600;
  padding: 14px 20px;
  height: 50px;
  display: inline-block;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  background-color: var(--tp-theme-1);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  text-align: center;
  line-height: 1.6;
  text-decoration: none;
  min-width: 150px;
  transition: all 300ms;
}

.finder-form button:hover {
  background-color: var(--tp-theme-2);
}

.finder-form span {
  color: #666;
  font-size: 13px;
  line-height: 150%;
}

.bar-percentage {
  background: #fff3ed;
  border: 1px solid #fdd8c5;
  display: flex;
  padding: 30px 0px;
}

.bar-percentage div h3 {
  color: var(--tp-theme-1);
}

.what-we-are {
  display: flex;
}

.what-we-are div div i {
  padding: 20px;
  font-size: 22px;
}

.what-we-are:nth-child(1) i {
  color: #ffdf6b;
}

.what-we-are:nth-child(2) i {
  color: #72ffb4;
}

.what-we-are:nth-child(3) i {
  color: #8a8aff;
}

.what-we-are div div:nth-child(1) i {
  background-color: #fff;
}

.what-we-are {
  width: 33.33%;
  justify-content: center;
}

.what-we-are-txt {
  padding-left: 20px;
}

.bar-percentage div span {
  font-size: 20px;
  color: grey;
}

.tp-btn.chrome {
  height: 60px;
  line-height: 60px;
}

.more-features-section-heading {
  background-image: url("https://divsly.com/gofox/assets/img/products/more-features.svg");
  background-color: #fcfcfc;
  background-size: 103% 110%;
  padding: 110px 0px 0px 70px;
  background-repeat: no-repeat;
  background-position: right;
}

.more-features-section-heading h3 {
  color: var(--tp-black-2);
}

.more-features-section-heading p {
  color: #574a2e;
}

.more-features-card-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "heading heading . ." "heading heading . ." ". . . .";
}

.more-features-section-heading {
  grid-area: heading;
}

.more-feature-card.light-card {
  background-color: white;
}

.more-feature-card.clr-card {
  background-color: rgb(255, 250, 245);
}

.more-feature-card:nth-child(1) i {
  background-color: var(--tp-common-green-2);
}

.more-feature-card:nth-child(1) a {
  color: rgb(46, 161, 46);
  background-color: var(--tp-common-green-2);
  border-color: rgb(46, 161, 46);
}

.more-feature-card:nth-child(2) i {
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
}

.more-feature-card:nth-child(2) a {
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
  border-color: #a0a0ff;
}
.more-feature-card:nth-child(2) a:hover {
  transform: translateY(-5px);
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
  border-color: #a0a0ff;
}

.more-feature-card:nth-child(3) i {
  background-color: var(--tp-common-yellow-2);
}

.more-feature-card:nth-child(3) a {
  color: #ffc800;
  background-color: var(--tp-common-yellow-2);
  border-color: #ffc800;
}
.more-feature-card:nth-child(3) a:hover {
  transform: translateY(-5px);
  color: #ffc800;
  background-color: var(--tp-common-yellow-2);
  border-color: #ffc800;
}

.more-feature-card:nth-child(4) i {
  background-color: var(--tp-common-blue);
}

.more-feature-card:nth-child(4) a {
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
  border-color: #a0a0ff;
}
.more-feature-card:nth-child(4) a:hover {
  transform: translateY(-5px);
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
  border-color: #a0a0ff;
}

.more-feature-card:nth-child(5) i {
  background-color: rgb(255, 223, 190);
}

.more-feature-card:nth-child(5) a {
  color: var(--tp-theme-1);
  background-color: rgb(255, 249, 239);
  border-color: var(--tp-theme-1);
}
.more-feature-card:nth-child(5) a:hover {
  transform: translateY(-5px);
  color: var(--tp-theme-1);
  background-color: rgb(255, 249, 239);
  border-color: var(--tp-theme-1);
}

.more-feature-card:nth-child(6) i {
  background-color: var(--tp-common-green-2);
}

.more-feature-card:nth-child(6) a {
  color: rgb(46, 161, 46);
  background-color: var(--tp-common-green-2);
  border-color: rgb(46, 161, 46);
}
.more-feature-card:nth-child(6) a:hover {
  transform: translateY(-5px);
  color: rgb(46, 161, 46);
  background-color: var(--tp-common-green-2);
  border-color: rgb(46, 161, 46);
}

.more-feature-card:nth-child(7) i {
  background-color: var(--tp-common-blue);
}

.more-feature-card:nth-child(7) a {
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
  border-color: #a0a0ff;
}
.more-feature-card:nth-child(7) a:hover {
  transform: translateY(-5px);
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
  border-color: #a0a0ff;
}

.more-feature-card:nth-child(8) i {
  background-color: var(--tp-common-green-2);
}

.more-feature-card:nth-child(8) a {
  color: rgb(46, 161, 46);
  background-color: var(--tp-common-green-2);
  border-color: rgb(46, 161, 46);
}
.more-feature-card:nth-child(8) a:hover {
  transform: translateY(-5px);
  color: rgb(46, 161, 46);
  background-color: var(--tp-common-green-2);
  border-color: rgb(46, 161, 46);
}

.more-feature-card:nth-child(9) i {
  background-color: var(--tp-common-blue);
}

.more-feature-card:nth-child(9) a {
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
  border-color: #a0a0ff;
}
.more-feature-card:nth-child(9) a:hover {
  transform: translateY(-5px);
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
  border-color: #a0a0ff;
}

.more-feature-card:nth-child(10) i {
  background-color: var(--tp-common-yellow-2);
}

.more-feature-card:nth-child(10) a {
  color: #ffc800;
  background-color: var(--tp-common-yellow-2);
  border-color: #ffc800;
}
.more-feature-card:nth-child(10) a:hover {
  transform: translateY(-5px);
  color: #ffc800;
  background-color: var(--tp-common-yellow-2);
  border-color: #ffc800;
}

.more-feature-card:nth-child(11) i {
  background-color: rgb(255, 223, 190);
}

.more-feature-card:nth-child(11) a {
  color: var(--tp-theme-1);
  background-color: rgb(255, 249, 239);
  border-color: var(--tp-theme-1);
}
.more-feature-card:nth-child(11) a:hover {
  transform: translateY(-5px);
  color: var(--tp-theme-1);
  background-color: rgb(255, 249, 239);
  border-color: var(--tp-theme-1);
}

.more-feature-card:nth-child(12) i {
  background-color: var(--tp-common-blue);
}

.more-feature-card:nth-child(12) a {
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
  border-color: #a0a0ff;
}
.more-feature-card:nth-child(12) a:hover {
  transform: translateY(-5px);
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
  border-color: #a0a0ff;
}

.more-feature-card:nth-child(13) i {
  background-color: var(--tp-common-green-2);
}

.more-feature-card:nth-child(13) a {
  color: rgb(46, 161, 46);
  background-color: var(--tp-common-green-2);
  border-color: rgb(46, 161, 46);
}
.more-feature-card:nth-child(13) a:hover {
  transform: translateY(-5px);
  color: rgb(46, 161, 46);
  background-color: var(--tp-common-green-2);
  border-color: rgb(46, 161, 46);
}

.more-feature-card:nth-child(14) i {
  background-color: var(--tp-common-blue);
}

.more-feature-card:nth-child(14) a {
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
  border-color: #a0a0ff;
}
.more-feature-card:nth-child(14) a:hover {
  transform: translateY(-5px);
  color: #a0a0ff;
  background-color: var(--tp-common-blue);
  border-color: #a0a0ff;
}

.more-feature-card:nth-child(15) i {
  background-color: var(--tp-common-yellow-2);
}

.more-feature-card:nth-child(15) a {
  color: #ffc800;
  background-color: var(--tp-common-yellow-2);
  border-color: #ffc800;
}
.more-feature-card:nth-child(15) a:hover {
  transform: translateY(-5px);
  color: #ffc800;
  background-color: var(--tp-common-yellow-2);
  border-color: #ffc800;
}

.more-feature-card {
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.more-feature-card i {
  color: #ffb17d;
  padding: 5px;
  font-size: 32px;
}

.more-feature-card h3 {
  font-size: 22px;
  font-family: var(--tp-ff-heading);
  font-weight: 500;
  margin-top: 30px;
}

.more-feature-card p {
  font-size: 16px;
  font-family: var(--tp-ff-heading);
  padding-bottom: 10px;
  line-height: 1.7em;
  color: #574a2e;
}

.more-feature-card a {
  color: var(--tp-theme-1);
  background-color: transparent;
  border: 1px solid var(--tp-theme-1);
  transform: translate(0px);
  height: 44px;
  line-height: 42px;
  width: 100%;
  box-shadow: none;
  padding: 0px 20px;
  text-transform: capitalize;
  border-radius: 5px;
  max-width: 130px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.more-feature-card a:hover {
  background: var(--tp-theme-1);
  border: 1px solid transparent;
  color: var(--tp-common-white);
}

.faq-gradient {
  background-position: center;
}

.faq-container {
  width: 60%;
  margin: 0px auto;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .faq-container {
    width: 70%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .faq-container {
    width: 70%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .faq-container {
    width: 70%;
  }
}
@media (max-width: 767px) {
  .faq-container {
    width: 100%;
  }
}

.accordion-header.faq-head button {
  font-weight: 500;
  line-height: 1.3;
  color: #2e2151;
  cursor: pointer;
  font-size: 22px;
}
@media (max-width: 767px) {
  .accordion-header.faq-head button {
    font-size: 18px;
  }
}

.soopr-people-heading {
  margin-left: -15px;
  margin-right: -15px;
  position: relative;
  height: 920px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: transparent;
  background-image: linear-gradient(450deg, rgba(165, 180, 255, 0.1) 0%, rgba(255, 212, 252, 0.1) 46%, rgba(255, 204, 112, 0.15) 100%), url("https://divsly.com/gofox/assets/img/products/white-bg-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.soopr-people-heading div .btn {
  font-weight: 600;
  padding: 14px 20px;
  height: 53px;
  display: inline-block;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  background-color: var(--tp-theme-1);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-decoration: none;
  min-width: 150px;
  transition: all 300ms;
}
.soopr-people-heading div .btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
.soopr-people-heading div .btn.tp-btn-outline {
  font-weight: 600;
  padding: 14px 20px;
  height: 53px;
  display: inline-block;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  background-color: transparent;
  color: var(--tp-theme-1);
  border: 1px solid var(--tp-theme-1);
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-decoration: none;
  min-width: 150px;
  transition: all 300ms;
}
.soopr-people-heading div .btn.tp-btn-outline:hover {
  background-color: rgb(255, 234, 217);
  transform: translateY(-2px);
}

.soopr-people-heading-wrapper {
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.soopr-people-heading h2 {
  margin-bottom: 50px;
  font-size: 4.5rem;
}

.gradient-text span {
  font-size: 4.5rem;
  -webkit-text-stroke: 1px var(--tp-theme-1);
  transition: 0.4s;
  cursor: pointer;
}
.gradient-text span:hover {
  background: linear-gradient(to right, #FF8C00, var(--tp-theme-1));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.4s;
}

.access-six-hundred-million {
  letter-spacing: -0.02em;
  margin-bottom: 0;
  -webkit-text-stroke: 1px #000;
  color: transparent;
  transition: 0.4s;
}
.access-six-hundred-million:hover .access-six-hundred-million {
  -webkit-text-stroke: 1px transparent;
  color: var(--tp-common-black);
}
.access-six-hundred-million:hover .access-six-hundred-million-img {
  bottom: 60px;
  visibility: visible;
  opacity: 1;
  z-index: 10;
}

.access-six-hundred-million-img {
  position: absolute;
  bottom: 80px;
  left: 50%;
  width: 250px;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  z-index: -1;
}

.access-six-hundred-million {
  letter-spacing: -0.02em;
  margin-bottom: 0;
  -webkit-text-stroke: 1px #000;
  color: transparent;
  transition: 0.4s;
}

.people-img-container .part {
  position: absolute;
}

.people-img-container .part-1 {
  top: 17%;
  left: 30%;
  animation: about-circle 8s linear infinite alternate;
}

.people-img-container .part-2 {
  top: 10%;
  left: 65%;
  animation: jump 10s linear infinite alternate;
}

.people-img-container .part-3 {
  top: 23%;
  right: 13%;
  animation: jumpThree 7s linear infinite alternate;
}

.people-img-container .part-7 {
  width: 50px;
  top: 18%;
  right: 16%;
  box-shadow: 1px 1px 10px 10px rgba(0, 0, 0, 0.02);
  animation: jumpThree 5s linear infinite alternate;
}

.people-img-container .part-4 {
  bottom: 20%;
  right: 20%;
  animation: scale-upOne 3s linear infinite alternate;
}

.people-img-container .part-5 {
  bottom: 5%;
  right: 50%;
  animation: scale-up-two 10s linear infinite alternate;
}

.people-img-container .part-8 {
  width: 200px;
  bottom: 17%;
  right: 50%;
  animation: tpfadeLeft 3s linear infinite alternate;
}

.people-img-container .part-6 {
  bottom: 20%;
  left: 20%;
  animation: jump 12s linear infinite alternate;
}

.people-img-container .part-9 {
  width: 200px;
  bottom: 70%;
  left: 10%;
  animation: jump 13s linear infinite alternate;
}

.tp-ab-shape-two {
  animation: jumpTwo 7s linear infinite alternate;
}

/*# sourceMappingURL=style.css.map */
.newheading-fontsize{

        font-weight: 600;
    font-size: 50px;
    line-height: 1.2;
    /* text-align: center; */
    
}
.newsubheading-fontsize{
      font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #5f6368;
    max-width: 700px;
    margin-top: 10px;

}


/* book-trip-tabs */
.header-bottem-spacing {
  margin-bottom: 65px;
}
 
  .byt-wrap {
    
    display: flex;
    justify-content: center;
    padding-bottom: 0px !important;
        flex-direction: column;
    align-items: center;
  }

  .byt-card {
    background-color: #ffffff;
    border-radius: 28px;
    padding: 32px 40px 48px 40px;
    /* max-width: 1320px; */
    width: 100%;
    
  }

  /* ---------- Tabs ---------- */

  .byt-tabbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 40px;
  }

  .byt-tabbar-arrow {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #FFE2D2;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa0ac;
    cursor: pointer;
  }

  .byt-tabbar-arrow:hover {
    color: #4b3fbf;
  }

  .byt-tabbar-arrow svg {
    width: 18px;
    height: 18px;
  }

  .byt-tabs-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    scrollbar-width: none;
  }

  .byt-tabs-scroll::-webkit-scrollbar {
    display: none;
  }

  .byt-tab {
   min-width: 126px;
    height: 113px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    border: none;
    background: #f8f9fa;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #FFF9F6;
    border: 1px solid #FFE2D2;
  }

  .byt-tab:hover {
     border: 2px solid #EB4D00;
  }

  .byt-tab--active {
    border: 2px solid #EB4D00;
  }

  .byt-tab-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .byt-tab-icon svg {
       stroke: #EB4D00;
    width: 35px;
    height: auto;
    font-weight: 700;
  }


  /* ---------- Body ---------- */

  .byt-body {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 32px;
    align-items: center;
  }

  .byt-eyebrow {
    font-size: 14px;
    font-weight: 600;
    color: #EB4D00;
    margin-bottom: 10px;
  }

  .byt-title {
    
    font-weight: 600;
    font-size: 40px;
    line-height: 1.2;
    color: #17182b;
    margin-bottom: 32px;
  }

  .byt-steps {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .byt-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .byt-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .byt-step-icon svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
  }

  .byt-step-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 10px;
    
  }

  .byt-step-text {
        font-size: 15px;
    margin-bottom: 5px;
    line-height: 20px;
    color: var(--tp-common-black-2);
    /* max-width: 320px; */
  }

  /* ---------- Preview mockup ---------- */

  .byt-preview {
    position: relative;
    /* min-height: 320px;
        margin-right: 74px; */
  }

  .byt-preview-card {
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(20, 20, 50, 0.14);
    padding: 12px;
    max-width: 320px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .byt-preview-photo {
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
  }

  .byt-preview-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .byt-preview-name {
    font-size: 1rem;
    font-weight: 700;
    color: #17182b;
    margin: 14px 4px 4px 4px;
  }

  .byt-preview-meta {
    font-size: 0.75rem;
    color: #9aa0ac;
    margin: 0 4px 14px 4px;
  }

  .byt-preview-icons {
    display: flex;
    gap: 8px;
    margin: 0 4px 16px 4px;
  }

  .byt-preview-icons span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #f1f2f6;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .byt-preview-icons svg {
    width: 13px;
    height: 13px;
    stroke: #6c63d1;
  }

  .byt-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 4px;
  }

  .byt-preview-people {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #6b6f7d;
  }

  .byt-preview-people svg {
    width: 14px;
    height: 14px;
    stroke: #6b6f7d;
  }

  .byt-preview-heart svg {
    width: 18px;
    height: 18px;
    stroke: #6c63d1;
  }

  .byt-preview-badge {
    position: absolute;
    right: -36px;
    bottom: 30px;
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(20, 20, 50, 0.16);
    padding: 12px 18px 12px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
    width: 220px;
  }

  .byt-preview-badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fdeee0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .byt-preview-badge-icon svg {
    width: 18px;
    height: 18px;
    stroke: #d97a35;
  }

  .byt-preview-badge-status {
    font-size: 0.65rem;
    color: #9aa0ac;
    margin-bottom: 2px;
  }

  .byt-preview-badge-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #17182b;
    margin-bottom: 6px;
  }

  .byt-preview-progress-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #6c63d1;
    margin-bottom: 4px;
  }

  .byt-preview-progress-track {
    width: 100%;
    height: 4px;
    background-color: #eceef4;
    border-radius: 4px;
    overflow: hidden;
  }

  .byt-preview-progress-fill {
    height: 100%;
    background-color: #6c63d1;
    border-radius: 4px;
    width: 40%;
  }

  @media (max-width: 800px) {
    .byt-body {
      grid-template-columns: 1fr;
    }
    .byt-preview-badge {
      position: static;
      margin: 16px auto 0 auto;
    }
    .byt-card {
      padding: 24px 20px 36px 20px;
    }
  }
  .byt-tab-header{
        color: #000;
    font-size: 16px;
    font-weight: 600;
  }

    @keyframes bytInfoIn {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes bytPreviewIn {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .byt-info.byt-animate-in {
    animation: bytInfoIn 1s ease forwards;
  }
  .byt-info{
    margin-left: 38px;
  }
  .byt-preview.byt-animate-in {
    animation: bytPreviewIn 1s ease forwards;
  }
/* book-trip-tabs ends */



/* integration */

.integration-section{
    position:relative;
    width:100%;
    min-height:700px;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;

    
        background: radial-gradient(circle at top center, #EB4D00 0%, #8A5A14 30%, #2B2416 65%, #000000 100%);
}

/* Center Content */

.integration-content{
    text-align:center;
    color:#fff;
    z-index:2;
}

.sub-title{
    font-size:15px;
    letter-spacing:.8px;
    margin-bottom:20px;
}

.sub-title i{
    color:#2b5cff;
    margin-right:8px;
}

.integration-content h2{
    font-size: 48.75px;
   
    line-height: 60px;
    font-weight: 800 !important;
    margin-bottom: 28px;
    color: #fff;
}

.integration-description{
    width:480px;
    margin:auto;
    font-size:20px;
    line-height:1.6;
    margin-bottom:40px;
    opacity:.95;
    color: #fff;
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#1357ff;
    color:#fff;
    text-decoration:none;
    padding:18px 38px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.btn:hover{
    background:#0c46d5;
}

/* Cards */

/* Initial State */
.integration-card{
    position:absolute;
    text-align:center;
    opacity:0;
    transform:translateY(40px) scale(.8);
    animation:cardReveal .8s ease forwards;
}

/* First Cards */
.linkhive,
.workstream{
    animation-delay:0s;
}

/* After 2 Seconds */
.flowsync,
.growmate{
    animation-delay:2s;
}
.pipedrive,.slack{
    animation-delay:1.5s;
}
.pipeflow,
.coresuite
{
    animation-delay:1s;
}
/* Animation */
@keyframes cardReveal{
    from{
        opacity:0;
        transform:translateY(40px) scale(.8);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.logo-box{
    width:88px;
    height:88px;
    background:#fff;
    border-radius:18px;

    display:flex;
    justify-content:center;
    align-items:center;

    box-shadow:0 18px 35px rgba(0,0,0,.12);
}

.logo-box img{
    width:45px;
}

.integration-card span{
    display:inline-block;
    margin-top:12px;
    background:#fff;
    padding:8px 16px;
    border-radius:30px;
    font-size:14px;
}

/* Positions */

.flowsync{
    top:120px;
    left:15%;
}

.pipeflow{
    top:120px;
    left:24%;
}

.coresuite{
    top:120px;
    right:24%;
}

.growmate{
    top:120px;
    right:15%;
}

.linkhive{
    bottom:170px;
    left:31%;
}

.pipedrive{
     bottom:170px;
    left:23%;
}

.workstream{
    bottom:170px;
    right:30%;
}
.slack{
    bottom:170px;
    right:22%;
}

/* Responsive */

@media(max-width:992px){

.integration-section{
    padding:80px 20px;
    min-height:auto;
}

.integration-content h2{
    font-size:42px;
}

.integration-description{
    width:100%;
    font-size:18px;
}

.integration-card{
    position:static;
    margin:15px;
}

.integration-section{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.integration-content{
    grid-column:1/-1;
    order:-1;
}

}
 /* .hero-book-your-getstartedfree {
    display: inline-block;
    color: var(--tp-common-white);
    background: var(--tp-theme-1);
    border-radius: 10px;
    text-transform: none;
    text-align: center;
    padding: 16px 30px !important;
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.08em;
    height: 71px;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
}
        .hero-book-your-getstartedfree:hover {
    border-radius: 10px !important;
    background: white !important;
    color: var(--tp-theme-1) !important;
    border: 1px solid var(--tp-theme-1) !important;
    width: fit-content;
} */
/* integration */

/* faq */

             .home-pg-faq .nav-tabs {
    border: none;
    justify-content: center;
    gap: 25px;
    margin-bottom: 80px;
}
.home-pg-faq .nav-tabs .nav-link.active {
    background: #EB4D00;
    color: white;
    border-color: #EB4D00
;
}
.home-pg-faq .nav-tabs .nav-link {
    border: 2px solid #EB4D00;
    background: #ffffff;
    color: #EB4D00;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 14px;
    transition: 0.3s ease;
    min-width: 140px !important;
}
.home-pg-faq .nav-tabs .nav-link:hover {
    background: #EB4D00;
    color: white;
    border-color: #EB4D00
;
}
.home-pg-faq {
    max-width: 100%;
    margin: auto;
}

.home-pg-faq .faq-item {
    border-radius: 20px;
    padding: 18px 25px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: none;
    transition: 0.3s ease;
    border: 1px solid #ece8f5;
    border-radius: 15px;
}
.home-pg-faq .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 18px;
    color: #000;
    line-height: 1.55;
}
.home-pg-faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    font-size: 16px;
    color: #35303f;
    line-height: 1.6;
}
.home-pg-faq .faq-icon
 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: 0.3s ease;
}
         
/* bolg */
.card-xl-stretch a.card-rounded {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.card-xl-stretch a.card-rounded::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit; /* keeps your background-image */
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
  transform: scale(1);
}

.card-xl-stretch a.card-rounded:hover::before {
  transform: scale(1.2);
}
.threeline-clamp {
  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  line-clamp: 3;

  -webkit-box-orient: vertical;
}

.blog-read-more {
  font-weight: 500;
  text-decoration: none;
  font-size: 15.6px;
  transition: color 0.3s ease;
  color: #EB4D00;
}
.blog-read-more:hover {
  color: #eb4d00cc;
}

.blog-card {
  width: 90%;
  margin: 0px auto;
  cursor: pointer;
  padding: 30px 20px;
  transition: all 0.3s ease-in-out 0s;
  border-radius: 10px;
}

.blog-card:hover {
  box-shadow: 1px 1px 20px 5px #e2e9ff;
  border-radius: 10px;
}
.blog-card-header {
  font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
 
}

/* bolg */


 /* testimonial section */

.new-testimonial-header {
  margin-bottom: 60px;
}

.new-testimonial-title {
  font-size: 60px;
  font-weight: 600;
}

.new-testimonial-subtitle {
  color: #ff5a6d;
  font-weight: 600;
}

.new-testimonial-slider {
  overflow: hidden;
  width: 100%;
}

.new-testimonial-track {
  display: flex;
  transition: transform 0.6s ease;
}

.testimonial-slide {
  flex: 0 0 100%;
  display: flex;
  gap: 40px;
}

.new-testimonial-item {
  flex: 1;
}

.new-testimonial-bubble {
  position: relative;
  padding: 60px;
  border-radius: 30px;
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  font-style: italic;
  height: 250px;
  display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    box-sizing: border-box;
}

/* Slide 1 */
/* =========================
   SLIDE 1
========================= */
.testimonial-slide:nth-child(1)
  .new-testimonial-item:nth-child(1)
  .new-testimonial-bubble {
  background: #FFF5F0;
  border: 1px solid #FFE1D3;
}

.testimonial-slide:nth-child(1)
  .new-testimonial-item:nth-child(2)
  .new-testimonial-bubble {
  background: #FFF8F5;
  border: 1px solid #FFE7DC;
}

/* =========================
   SLIDE 2
========================= */
.testimonial-slide:nth-child(2)
  .new-testimonial-item:nth-child(1)
  .new-testimonial-bubble {
  background: #F2FCF6;
  border: 1px solid #D6F3E1;
}

.testimonial-slide:nth-child(2)
  .new-testimonial-item:nth-child(2)
  .new-testimonial-bubble {
  background: #FFFBEF;
  border: 1px solid #FFECC4;
}

/* =========================
   SLIDE 3
========================= */
.testimonial-slide:nth-child(3)
  .new-testimonial-item:nth-child(1)
  .new-testimonial-bubble {
  background: #FFF3F2;
  border: 1px solid #FFD9D5;
}

.testimonial-slide:nth-child(3)
  .new-testimonial-item:nth-child(2)
  .new-testimonial-bubble {
  background: #F6F1FF;
  border: 1px solid #E7D9FF;
}

/* =========================
   SLIDE 4
========================= */
.testimonial-slide:nth-child(4)
  .new-testimonial-item:nth-child(1)
  .new-testimonial-bubble {
  background: #FFF6E9;
  border: 1px solid #FFE7BF;
}

.testimonial-slide:nth-child(4)
  .new-testimonial-item:nth-child(2)
  .new-testimonial-bubble {
  background: #F3F8FF;
  border: 1px solid #D9E8FF;
}

/* =========================
   Arrow Colors
========================= */

/* Slide 1 */
.testimonial-slide:nth-child(1)
  .new-testimonial-item:nth-child(1)
  .new-testimonial-bubble::after {
  border-top-color: #FFF5F0;
}

.testimonial-slide:nth-child(1)
  .new-testimonial-item:nth-child(2)
  .new-testimonial-bubble::after {
  border-top-color: #FFF8F5;
}

/* Slide 2 */
.testimonial-slide:nth-child(2)
  .new-testimonial-item:nth-child(1)
  .new-testimonial-bubble::after {
  border-top-color: #F2FCF6;
}

.testimonial-slide:nth-child(2)
  .new-testimonial-item:nth-child(2)
  .new-testimonial-bubble::after {
  border-top-color: #FFFBEF;
}

/* Slide 3 */
.testimonial-slide:nth-child(3)
  .new-testimonial-item:nth-child(1)
  .new-testimonial-bubble::after {
  border-top-color: #FFF3F2;
}

.testimonial-slide:nth-child(3)
  .new-testimonial-item:nth-child(2)
  .new-testimonial-bubble::after {
  border-top-color: #F6F1FF;
}

/* Slide 4 */
.testimonial-slide:nth-child(4)
  .new-testimonial-item:nth-child(1)
  .new-testimonial-bubble::after {
  border-top-color: #FFF6E9;
}

.testimonial-slide:nth-child(4)
  .new-testimonial-item:nth-child(2)
  .new-testimonial-bubble::after {
  border-top-color: #F3F8FF;
}
.new-testimonial-bubble {
  position: relative;
  z-index: 1;
}

/* QUOTE IMAGE */
.new-testimonial-bubble::before {
  content: "";
  position: absolute;

  top: 5px;
  left: 0px;
  width: 100%;
  height: 100%;

   background: url("https://divsly.com/gofox/assets/img/testimonial/quote-left-testimonial-black.png")
        no-repeat center;
    background-size: contain;

    filter: brightness(0) saturate(100%)
            invert(42%) sepia(95%)
            saturate(3460%) hue-rotate(10deg)
            brightness(98%) contrast(95%);
  background-size: contain;

  opacity: 0.1; /* 👈 ONLY image fades */
  z-index: 0;
}

/* TEXT ABOVE IMAGE */
.new-testimonial-bubble p {
  position: relative;
  z-index: 2;
}

.new-testimonial-bubble,
.new-testimonial-item {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.new-testimonial-item:nth-child(2) .new-testimonial-bubble::after {
  border-top: 22px solid #FFF5F0;
}

.new-testimonial-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 25px;
  padding-left: 20px;
}

.new-testimonial-profile img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.new-testimonial-profile-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #111;
}

.new-testimonial-profile span {
  font-size: 1.2rem;
  color: #8b8b8b;
}

.new-testimonial-dots {
  text-align: center;
  margin-top: 40px;
}

.new-testimonial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #EB4D00;
  display: inline-block;
  margin: 5px;
  opacity: 0.4;
}

.new-testimonial-dot.active {
  opacity: 1;
}

.new-testimonial-circle {
  position: absolute;
  right: -31px;
  top: -34px;
  width: 160px;
  animation: testimonialZoom 4s ease-in-out infinite;
}

@keyframes testimonialZoom {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}
.sub-heading-steps-includes {
  font-size: 1.75rem;
  font-weight: 600;
}

.sub-text-includes {
  font-size: 14.6px;
  color: #35303f;
      margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.sub-heading-includes {
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 26px;
  margin-bottom: 10px;
}
@media (min-width: 1700px) {
  .sub-heading-includes {
    font-size: 1.6rem;
    font-weight: 600;
  }
}

@media (max-width: 991px) {
  .new-testimonial {
    padding: 40px 20px;
  }

  .testimonial-slide {
    flex-direction: column;
    gap: 30px;
  }

  .new-testimonial-bubble {
    padding: 40px 35px;
    font-size: 18px;
  }

  .new-testimonial-title {
    font-size: 42px;
  }

  .new-testimonial-profile img {
    width: 55px;
    height: 55px;
  }

  .new-testimonial-profile-name {
    font-size: 18px;
  }
  .new-testimonial-circle {
    position: absolute;
    right: -6px;
    top: -118px;
    width: 160px;
    animation: testimonialZoom 4s ease-in-out infinite;
  }
}

@media (max-width: 576px) {
  .new-testimonial {
    padding: 5px 15px;
  }

  .testimonial-slide {
    flex-direction: column;
    gap: 25px;
  }

  .new-testimonial-bubble {
    padding: 30px 25px;
    font-size: 16px;
    border-radius: 25px;
  }

  .new-testimonial-profile {
    padding-left: 10px;
  }

  .new-testimonial-profile img {
    width: 48px;
    height: 48px;
  }

  .new-testimonial-profile-name {
    font-size: 16px;
  }

  .new-testimonial-profile span {
    font-size: 13px;
  }

  .new-testimonial-circle {
    display: none;
  }
  .new-testimonial-circle {
    position: absolute;
    right: -6px;
    top: -118px;
    width: 160px;
    animation: testimonialZoom 4s ease-in-out infinite;
  }
}.new-testimonial-track {
    display: flex;
}

.testimonial-slide {
    flex: 0 0 100%;
}
.new-testimonial-slider{
    overflow:hidden;
    width:100%;
}

.new-testimonial-track{
    display:flex;
    transition:transform .6s ease;
}

.testimonial-slide{
    min-width:100%;
    display:flex;
    gap:40px;
}
/* .testimonial-section-padding{
    padding: 100px 0;
   
} */

 /* testimonial section */


  .voices-section {
    
    background: #fff;
  }

  .voices-heading {
    text-align: center;
    margin-bottom: 60px;
  }

  /* .voices-heading span {
    color: #2563eb;
    font-size: 14px;
    font-weight: 600;
  } */

  
  .cards-testimonials-header{
    font-weight: 800;
    font-size: 48.75px;
    line-height: 1.2;
  }



  /* grid wall */
  .quotewall {
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .quotewall.section-divider-gap {
    margin-top: 40px;
  }

  /* base tile */
  .quotetile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 30px;
    background: #fff;
    overflow: hidden;
  }

  .quotetile--tall {
    grid-row: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 30px;
   
    overflow: hidden;
  }

  .quotetile--ink {
    background: #000;
    color: #fff;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .quotetile--peach {
    background: linear-gradient(
      135deg,
      #FFFDFB 0%,
      #FFF7F2 20%,
      #FFF2EA 45%,
      #FFEADF 70%,
      #FFF8F4 100%
    );
    color: #000;
    grid-column: 3;
    grid-row: 2 / span 2;
        position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 30px;
  
    overflow: hidden;
  }

  .quotewall > .quotetile:nth-child(2) { grid-column: 2; }
  .quotewall > .quotetile:nth-child(3) { grid-column: 3; }
  .quotewall > .quotetile:nth-child(4) { grid-column: 2; }
  .quotewall > .quotetile:nth-child(6) { grid-column: 1; }
  .quotewall > .quotetile:nth-child(7) { grid-column: 2; }

  .quotetile-rating {
    color: #FFC107;
    font-size: 20px;
    letter-spacing: 3px;
  }

  .quotetile-rating--ink {
    color: #000;
  }

  .quotetile-copy {
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    position: relative;
    z-index: 1;
  }

  .quotetile--ink .quotetile-copy,
  .quotetile--peach .quotetile-copy {
    color: inherit;
  }

  .quotetile--ink .quotetile-copy {
    color: #fff;
  }

  /* decorative quotation mark, drawn with CSS instead of an image asset */
  .quotetile::after {
       content: "";
    position: absolute;
    width: 20%;
    height: 100%;
    background: url(/assets/img/testimonial/quote-left-testimonial-black.png) no-repeat center;
    background-size: contain;
    filter: brightness(0) saturate(100%) invert(42%) sepia(95%) saturate(3460%) hue-rotate(10deg) brightness(98%) contrast(95%);
    background-size: contain;
    opacity: 0.1;
    z-index: 0;
    right: 14px;
    bottom: -53px;
  }

  .quotetile-person {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
    position: relative;
    z-index: 1;
  }

  .quotetile-person img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
  }

  .quotetile-person h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
  }

  .quotetile-person span {
    color: #9a9a9a;
    font-size: 14px;
  }

  .quotetile--ink .quotetile-person span,
  .quotetile--peach .quotetile-person span {
    color: rgba(255,255,255,.8);
  }

  .quotetile--peach .quotetile-person span {
    color: #000;
  }

  @media (max-width: 960px) {
    .quotewall { grid-template-columns: repeat(2, 1fr); }
    .quotetile--ink, .quotetile--peach { grid-column: auto; grid-row: auto; }
  }

  @media (max-width: 640px) {
    .quotewall { grid-template-columns: 1fr; }
    .quotewall > .quotetile:nth-child(n) { grid-column: auto; }
    .voices-heading h2 { font-size: 38px; }
  } 
/* feature-section */

.feature-section{
    max-width:1320px;
    margin:100px auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.feature-card{
    background:#fafafa;
    border:1px solid #e9e9e9;
    border-radius:16px;
    overflow:hidden;
    padding:26px;
    transition:.35s;
}
.feature-card-smart{
    background: linear-gradient(131deg, rgb(245, 246, 248) 0%, rgb(218, 221, 227) 3%, rgb(245, 246, 248) 46%, rgb(255, 255, 255) 55%, rgb(245, 246, 248) 100%) !important;
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.feature-card-Advanced{
    background: radial-gradient(circle at 0% 0%, rgba(235, 77, 0, .45), transparent 40%), radial-gradient(circle at 100% 0%, rgba(235, 77, 0, .45), transparent 40%), linear-gradient(180deg, #FFE4D5, #FFF8F5);

}

.feature-image{
    background:#fff;
    border-radius:14px;
    padding:25px;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:290px;
    margin-bottom:60px;
}

.feature-image img{
    width:100%;
    max-width:420px;
    display:block;
}

.feature-card-header{
    font-size:24px;
    font-weight:500;
    color:#111;
    margin-bottom:12px;
}

.feature-card-text{
    font-size:16px;
    line-height:1.7;
    color:#666;
    max-width:90%;
}

@media(max-width:991px){

.feature-section{
    grid-template-columns:2fr;
}


.feature-image{
    min-height:220px;
}

}

/* pricing */
   .pricing-section{
            padding:90px 0;
        }

        .pricing-tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-size:14px;
            font-weight:600;
            text-transform:uppercase;
            color:#EB4D00;
            margin-bottom:18px;
        }

        .pricing-title{
            font-size:58px;
            font-weight:800;
            line-height:1.1;
            margin-bottom:18px;
        }

        .pricing-subtitle{
            color:#6c757d;
            max-width:470px;
            margin:auto;
            font-size:18px;
        }

        .pricing-card{
            border-radius:25px;
            padding:18px;
            background:#f4f5f8;
            height:100%;
        }

        .feature-card-Advanced.active{
            background: radial-gradient(circle at 0% 0%, rgba(235, 77, 0, .45), transparent 40%), radial-gradient(circle at 100% 0%, rgba(235, 77, 0, .45), transparent 40%), linear-gradient(180deg, #FFE4D5, #FFF8F5);
        }

        .pricing-inner{
            background:#fff;
            border-radius:20px;
            padding:30px;
            box-shadow:0 12px 35px rgba(0,0,0,.08);
        }

        .pricingplan-title{
            display:flex;
            align-items:center;
            gap:15px;
            font-size:32px;
            font-weight:500;
            margin-bottom:18px;
        }

        .plan-icon{
            width:38px;
            height:38px;
            border-radius:50%;
            background:linear-gradient(135deg, #FFFDFB 0%, #FFF7F2 20%, #FFF2EA 45%, #FFEADF 70%, #FFF8F4 100%);;
            color:#EB4D00;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .plan-icon i{
            font-size:20px;
        }

        .pricingplan-subtitle{
            color:#707070;
            line-height:1.7;
            margin-bottom:50px;
            font-size: 16px;
        }

        .price-area{
            display:flex;
            justify-content:space-between;
            align-items:center;
            
            gap:15px;
        }

        .pricingtext-font-size{
            font-size:18px;
            font-weight:600;
        }

        .pricingtext-font-size span{
            font-size:45px;
            font-weight:800;
        }

        .btn-outline-custom{
            border:1.5px solid #111;
            border-radius:50px;
            padding:15px 25px;
            font-weight:600;
            transition:.3s;
        }

        .btn-outline-custom:hover{
            background:#111;
            color:#fff;
        }

        .price-btn-blue{
            background:#EB4D00;
            color:#fff;
            border-radius:10px;
            padding:10px 20px;
            font-weight:600;
        }
        .price-btn-blue:hover{
                
    border: 1px solid var(--tp-theme-1);
    
        }
        .starterprice-btn-blue{
                color: var(--tp-theme-1) !important;
    border: 1px solid var(--tp-theme-1) !important;
            border-radius:10px;
            padding:10px 20px;
            font-weight:600;
        }
        .starterprice-btn-blue:hover{
            background: var(--tp-theme-1) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
        }


        .price-btn-blue:hover{
            background:#fff;
            color:#EB4D00cc;
        }

        .feature-list{
            margin-top:35px;
        }

        .feature-list ul{
            list-style:none;
            padding:0;
            margin:0;
        }

        .feature-list li{
            margin-bottom:18px;
            display:flex;
            align-items:center;
            gap:12px;
            font-size:17px;
        }

        .feature-list i{
            color:#EB4D00;;
            font-size:18px;
        }

        @media(max-width:991px){

            .pricing-title{
                font-size:42px;
            }

            .price-area{
                flex-direction:column;
                align-items:flex-start;
            }

            .price span{
                font-size:45px;
            }

        }

  .hero-3-features {
    padding-top: 35px;
  }
  .hero-book-your-demobtn {
    position: relative;
    overflow: hidden;
    z-index: 1;

    color: black !important;
    background: #fff;
    border: 1px solid black !important;
    transform: translate(0px);

    width: 100% !important;
    box-shadow: none;
    padding: 20px 30px !important;
    font-weight: 700;
    font-size: 16px;
    height: 71px;

    border-radius: 10px !important;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: color 0.4s ease, border-color 0.4s ease;
}

.hero-book-your-demobtn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #e5e7eb;
    transition: left 0.4s ease;
    z-index: -1;
    border-radius: 10px;
  
}

.hero-book-your-demobtn:hover::before {
    left: 0;
}

.hero-book-your-demobtn:hover {
    
    border-color: black !important;
}
 .hero-book-your-getstartedfree {
    position: relative;
    overflow: hidden;
    z-index: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #fff !important;
    background: var(--tp-theme-1);
    border: 1px solid var(--tp-theme-1);
    border-radius: 10px;
    padding: 16px 30px !important;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.08em;
    height: 71px;
    box-shadow: none;
    width: fit-content;
}

.hero-book-your-getstartedfree::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.18); /* Transition layer */
    transition: left 0.4s ease;
    z-index: 0;
     color: #fff !important;
}

.hero-book-your-getstartedfree:hover::before {
    left: 0;
}

.hero-book-your-getstartedfree span,
.hero-book-your-getstartedfree i,
.hero-book-your-getstartedfree svg {
    position: relative;
    z-index: 1;
}


  .banner-badge {
    font-size: 13px;
    font-weight: 700;
    color: #EB4D00;
    background-color: #fbe6db;
    width: fit-content;
    border-radius: 8px;
    padding: 2px 8px;
    margin-bottom: 8px;
  }

  .banner-btn a {
    font-size: 18px;
    color: white;
    font-weight: 600;
    padding: 20px 42px !important;
  }
  .new-banner-img {
    border-radius: 25px;
    max-width: 90%;
  }
  .banner-card {
    border-radius: 10px;
    padding: 35px 5px;
  }

  .banner-card-1 {
    background: #F6F0F0;
    border: 2px dashed #F6F0F0;
  }
  .banner-card-2 {
    background: #F6F0F0;
    border: 2px dashed #F6F0F0;
  }
  .banner-card-3 {
    background: #F6F0F0;
    border: 2px dashed #F6F0F0;
  }
  .banner-card p {
    font-weight: 500;
    font-size: 18px;
    color: black;
  }

  .banner-card-1.active {
    background: #FFDCDC;
    border: 2.5px dashed #000;
  }

  .banner-card-2.active {
    background: #FFDCDC;
    border: 2.5px dashed #000;
  }

  .banner-card-3.active {
   background: #FFDCDC;
    border: 2.5px dashed #000;
  }
  .banner-card img {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
  }


  .voices-section {
    
    background: #fff;
  }

  .voices-heading {
    text-align: center;
    margin-bottom: 60px;
  }

  /* .voices-heading span {
    color: #EB4D00;
    font-size: 14px;
    font-weight: 600;
  } */

  .cards-testimonials-header {
    font-weight: 800;
    font-size: 48.75px;
    line-height: 1.2;
  }


  /* grid wall */
  .quotewall {
    max-width: 1320px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .quotewall.section-divider-gap {
    margin-top: 40px;
  }

  /* base tile */
  .quotetile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 30px;
    background: #fff;
    overflow: hidden;
  }

  .quotetile--tall {
    grid-row: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 30px;
   
    overflow: hidden;
  }

  .quotetile--ink {
    background: #000;
    color: #fff;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .quotetile--peach {
    background: linear-gradient(
      135deg,
      #FFFDFB 0%,
      #FFF7F2 20%,
      #FFF2EA 45%,
      #FFEADF 70%,
      #FFF8F4 100%
    );
    color: #000;
    grid-column: 3;
    grid-row: 2 / span 2;
        position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 30px;
  
    overflow: hidden;
  }

  .quotewall > .quotetile:nth-child(2) { grid-column: 2; }
  .quotewall > .quotetile:nth-child(3) { grid-column: 3; }
  .quotewall > .quotetile:nth-child(4) { grid-column: 2; }
  .quotewall > .quotetile:nth-child(6) { grid-column: 1; }
  .quotewall > .quotetile:nth-child(7) { grid-column: 2; }

  .quotetile-rating {
    color: #FFC107;
    font-size: 20px;
    letter-spacing: 3px;
  }

  .quotetile-rating--ink {
    color: #000;
  }

  .quotetile-copy {
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    position: relative;
    z-index: 1;
  }

  .quotetile--ink .quotetile-copy,
  .quotetile--peach .quotetile-copy {
    color: inherit;
  }

  .quotetile--ink .quotetile-copy {
    color: #fff;
  }

  /* decorative quotation mark, drawn with CSS instead of an image asset */
  .quotetile::after {
       content: "";
    position: absolute;
    width: 20%;
    height: 100%;
    background: url(/assets/img/testimonial/quote-left-testimonial-black.png) no-repeat center;
    background-size: contain;
    filter: brightness(0) saturate(100%) invert(42%) sepia(95%) saturate(3460%) hue-rotate(10deg) brightness(98%) contrast(95%);
    background-size: contain;
    opacity: 0.1;
    z-index: 0;
    right: 14px;
    bottom: -53px;
  }

  .quotetile-person {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
    position: relative;
    z-index: 1;
  }

  .quotetile-person img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
  }

  .quotetile-person h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
  }

  .quotetile-person span {
    color: #9a9a9a;
    font-size: 14px;
  }

  .quotetile--ink .quotetile-person span,
  .quotetile--peach .quotetile-person span {
    color: rgba(255,255,255,.8);
  }

  .quotetile--peach .quotetile-person span {
    color: #000;
  }

  @media (max-width: 960px) {
  .quotewall { grid-template-columns: repeat(2, 1fr); }
  .quotetile--ink, .quotetile--peach { grid-column: auto; grid-row: auto; }
  .quotewall > .quotetile:nth-child(n) { grid-column: auto; }
}

  @media (max-width: 640px) {
    .quotewall { grid-template-columns: 1fr; }
    .quotewall > .quotetile:nth-child(n) { grid-column: auto; }
    .voices-heading h2 { font-size: 38px; }
  } 
/* feature-section */

.feature-section{
    max-width:1300px;
    margin:100px auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.feature-card{
    background:#fafafa;
    border:1px solid #e9e9e9;
    border-radius:16px;
    overflow:hidden;
    padding:26px;
    transition:.35s;
}
.feature-card-smart{
    background: linear-gradient(131deg, rgb(245, 246, 248) 0%, rgb(218, 221, 227) 3%, rgb(245, 246, 248) 46%, rgb(255, 255, 255) 55%, rgb(245, 246, 248) 100%) !important;
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.feature-card-Advanced{
    background: radial-gradient(circle at 0% 0%, rgba(235, 77, 0, .45), transparent 40%), radial-gradient(circle at 100% 0%, rgba(235, 77, 0, .45), transparent 40%), linear-gradient(180deg, #FFE4D5, #FFF8F5);

}

.feature-image{
    background:#fff;
    border-radius:14px;
    padding:25px;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:290px;
    margin-bottom:60px;
}

.feature-image img{
    width:100%;
    max-width:420px;
    display:block;
}

.feature-card-header{
    font-size:24px;
    font-weight:500;
    color:#111;
    margin-bottom:12px;
}

.feature-card-text{
    font-size:16px;
    line-height:1.7;
    color:#666;
    max-width:90%;
}



/* pricing */
   .pricing-section{
            padding:90px 0;
        }

        .pricing-tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-size:14px;
            font-weight:600;
            text-transform:uppercase;
            color:#EB4D00;
            margin-bottom:18px;
        }

        .pricing-title{
            font-size:58px;
            font-weight:800;
            line-height:1.1;
            margin-bottom:18px;
        }

        .pricing-subtitle{
            color:#6c757d;
            max-width:470px;
            margin:auto;
            font-size:18px;
        }

        .pricing-card{
            border-radius:25px;
            padding:18px;
            background:#f4f5f8;
            height:100%;
        }

        .feature-card-Advanced.active{
            background: radial-gradient(circle at 0% 0%, rgba(235, 77, 0, .45), transparent 40%), radial-gradient(circle at 100% 0%, rgba(235, 77, 0, .45), transparent 40%), linear-gradient(180deg, #FFE4D5, #FFF8F5);
        }

        .pricing-inner{
            background:#fff;
            border-radius:20px;
            padding:30px;
            box-shadow:0 12px 35px rgba(0,0,0,.08);
        }

        .pricingplan-title{
            display:flex;
            align-items:center;
            gap:15px;
            font-size:32px;
            font-weight:500;
            margin-bottom:18px;
        }

        .plan-icon{
            width:38px;
            height:38px;
            border-radius:50%;
            background:linear-gradient(135deg, #FFFDFB 0%, #FFF7F2 20%, #FFF2EA 45%, #FFEADF 70%, #FFF8F4 100%);;
            color:#EB4D00;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .plan-icon i{
            font-size:20px;
        }

        .pricingplan-subtitle{
            color:#707070;
            line-height:1.7;
            margin-bottom:50px;
            font-size: 16px;
        }

        .price-area{
            display:flex;
            justify-content:space-between;
            align-items:center;
            
            gap:15px;
        }

        .pricingtext-font-size{
            font-size:18px;
            font-weight:600;
        }

        .pricingtext-font-size span{
            font-size:45px;
            font-weight:800;
        }

        .btn-outline-custom{
            border:1.5px solid #111;
            border-radius:50px;
            padding:15px 25px;
            font-weight:600;
            transition:.3s;
        }

        .btn-outline-custom:hover{
            background:#111;
            color:#fff;
        }

        .price-btn-blue{
            background:#EB4D00;
            color:#fff;
            border-radius:10px;
            padding:10px 20px;
            font-weight:600;
        }
        .price-btn-blue:hover{
                
    border: 1px solid var(--tp-theme-1);
    
        }
        .starterprice-btn-blue{
                color: var(--tp-theme-1) !important;
    border: 1px solid var(--tp-theme-1) !important;
            border-radius:10px;
            padding:10px 20px;
            font-weight:600;
        }
        .starterprice-btn-blue:hover{
            background: var(--tp-theme-1) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
        }


        .price-btn-blue:hover{
            background:#fff;
            color:#EB4D00cc;
        }

        .feature-list{
            margin-top:35px;
        }

        .feature-list ul{
            list-style:none;
            padding:0;
            margin:0;
        }

        .feature-list li{
            margin-bottom:18px;
            display:flex;
            align-items:center;
            gap:12px;
            font-size:17px;
        }

        .feature-list i{
            color:#EB4D00;;
            font-size:18px;
        }

        @media(max-width:991px){

            .pricing-title{
                font-size:42px;
            }

            .price-area{
                flex-direction:column;
                align-items:flex-start;
            }

            .price span{
                font-size:45px;
            }

        }

.powerful-tools-hero{
    position:relative;
    padding:90px 24px 0px;
    
    overflow:hidden;
    text-align:center;
  }

  /* decorative ghost panels behind the headline */
  .ghost-panel{
    position:absolute;
    top:-60px;
    border:1px solid rgba(255,255,255,0.25);
    border-radius:24px;
    background:rgba(255,255,255,0.04);
    pointer-events:none;
  }
  .ghost-panel.left{ left:1%; width:340px; height:150px; }
  .ghost-panel.right{ right:1%; width:340px; height:150px; }
  .ghost-panel.center{ left:22%; width:56%; height:150px; top:-90px; }

  .ghost-line{
    position:absolute;
    top:150px;
    width:1px;
    height:130px;
    background:rgba(255,255,255,0.18);
  }
  .ghost-line.l1{ left:12%; }
  .ghost-line.l2{ right:12%; }
  .ghost-line.l3{ left:22%; }
  .ghost-line.l4{ right:22%; }
  .ghost-dot{
    position:absolute;
    width:8px;height:8px;border-radius:50%;
    border:1px solid rgba(255,255,255,0.3);
    top:275px;
  }
  .ghost-dot.d1{left:calc(12% - 4px);}
  .ghost-dot.d2{right:calc(12% - 4px);}

  .hero-content{
    position:relative;
    z-index:2;
    max-width:1000px;
    margin:0 auto;
  }

  .eyebrow-space{ height:60px; }

  .feature-hero-header{
    color:var(--white);
   font-weight: 700;
    font-size: 64px;
    line-height: 1.15;
    letter-spacing:-0.02em;
    margin-bottom:24px;
  }

  .feature-hero-subtext{
    color:rgba(255,255,255,0.85);
   font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    max-width:900px;
    margin:0 auto 36px;
  }
  .salesfeature-hero-subtext{
    margin-bottom: 60px !important;
  }

  .cta-row{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-bottom:45px;
  }

  .get-started-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 26px;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    border:none;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .get-started-btn:hover{ transform:translateY(-2px); }
  .get-started-btn svg{ width:14px; height:14px; }

  .get-started-btn.btn-dark{
    background:#0b0f19;
    color:#fff;
  }
  .get-started-btn.btn-dark:hover{ box-shadow:0 8px 20px rgba(0,0,0,0.35); }

  .get-started-btn.btn-light{
    background:#ffffff;
    color:#0b0f19;
  }
  .get-started-btn.btn-light:hover{ box-shadow:0 8px 20px rgba(0,0,0,0.15); }

  /* ===== Cards row ===== */
  .cards-row{
    position:relative;
    z-index:3;
    max-width:1000px;
    margin:0 auto;
    
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    padding:0 24px;
  }

  .feature-card-image{
    background:#ffffff;
    /* border-radius:var(--radius-lg); */
    box-shadow:0 30px 60px -20px rgba(15,35,90,0.25);
    padding:24px 24px 0px 24px;
    text-align:left;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  /* Chart card */
  .card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
  }
  .card-title{ font-size:15px; font-weight:700; color:#0b1220;}
  .range-pill{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:#4b5568;
    background:#f3f5f9;
    padding:6px 12px;
    border-radius:999px;
    font-weight:500;
  }

  .chart-wrap{
    position:relative;
    display:flex;
  }
  .y-axis{
    display:flex;
    flex-direction:column-reverse;
    justify-content:space-between;
    font-size:11px;
    color:var(--gray-text);
    padding-right:10px;
    padding-bottom:22px;
  }
  .chart-area{
    position:relative;
    flex:1;
  }
  .chart-area svg{ width:100%; height:180px; display:block; }

  .tooltip{
    position:absolute;
    top:24px;
    left:52%;
    transform:translateX(-50%);
    background:#fff;
    border:1px solid var(--gray-line);
    border-radius:10px;
    padding:8px 14px;
    box-shadow:0 10px 24px rgba(15,35,90,0.14);
    font-size:12px;
    min-width:90px;
  }
  .tooltip .name{ color:var(--gray-text); margin-bottom:4px; }
  .tooltip .value{ font-weight:700; display:flex; align-items:center; gap:6px; }
  .tooltip .value::before{
    content:"";
    width:6px;height:6px;border-radius:50%;
    background:var(--blue-mid);
    display:inline-block;
  }

  .x-axis{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:var(--gray-text);
    margin-top:6px;
    padding-left:2px;
  }
  .x-axis .active{ color:var(--ink); font-weight:700; }

  /* CRM card */
  .crm-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:18px;
  }
  .crm-title{ font-size:15px; font-weight:700; margin-bottom:10px; }
  .crm-meta{ font-size:12px; color:var(--gray-text); display:flex; gap:22px; }
  .crm-meta b{ color:var(--ink); font-weight:600; }
  .tag{
    font-size:11px;
    font-weight:700;
    padding:5px 12px;
    border-radius:999px;
  }
  .tag-medium{ background:#e8edff; color:#3b5bfd; }
  .tag-high{ background:#e3faec; color:#1fae5f; }

  .person-row{
    border-top:1px solid var(--gray-line);
    padding:16px 0;
    position:relative;
  }
  .person-row:last-child{ border-bottom:none; }
  .person-name{ font-size:14px; font-weight:700; margin-bottom:10px; }
  .bar-line{
    height:8px;
    border-radius:6px;
    background:#eef1f6;
    width:78%;
    margin-bottom:8px;
  }
  .bar-line.short{ width:52%; }

  .progress-float{
    position:absolute;
    right:-6px;
    top:-14px;
    width:150px;
    background:#ffffff;
    border-radius:16px;
    box-shadow:0 20px 40px -12px rgba(15,35,90,0.28);
    padding:14px 16px 16px;
  }
  .progress-label{
    font-size:10px;
    color:var(--gray-text);
    font-weight:600;
    margin-bottom:8px;
  }
  .donut{
    width:88px;
    height:88px;
    margin:0 auto;
    position:relative;
  }
  .donut-value{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .donut-value .pct{ font-size:19px; font-weight:800; line-height:1; }
  .donut-value .sub{ font-size:8px; color:var(--blue-mid); font-weight:700; margin-top:3px; }

  .legend{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:10px;
    font-size:9px;
    color:var(--gray-text);
  }
  .legend span{ display:flex; align-items:center; gap:5px; }
  .legend i{ width:6px; height:6px; border-radius:50%; display:inline-block; }
  .legend i.done{ background:var(--blue-mid); }
  .legend i.prog{ background:#cdd9f5; }

  /* ===== Cards entrance animation ===== */
  /* Cards stay hidden until .cards-row gets .in-view (added by the
     IntersectionObserver script at the bottom of the page), then the
     first card slides in from the left and the second from the right. */
  .cards-row .feature-card-image{
    opacity:0;
  }
  .cards-row .feature-card-image:nth-child(1){
    transform:translateX(-60px);
  }
  .cards-row .feature-card-image:nth-child(2){
    transform:translateX(60px);
  }
  .cards-row.in-view .feature-card-image:nth-child(1){
    animation: slideInFromLeft .8s cubic-bezier(.22,.68,0,1.2) forwards;
    animation-delay:.15s;
  }
  .cards-row.in-view .feature-card-image:nth-child(2){
    animation: slideInFromRight .8s cubic-bezier(.22,.68,0,1.2) forwards;
    animation-delay:.35s;
  }

  @keyframes slideInFromLeft{
    from{ opacity:0; transform:translateX(-60px); }
    to{ opacity:1; transform:translateX(0); }
  }
  @keyframes slideInFromRight{
    from{ opacity:0; transform:translateX(60px); }
    to{ opacity:1; transform:translateX(0); }
  }

  @media (max-width: 880px){
    .feature-hero-header{ font-size:36px; }
    .cards-row{ grid-template-columns:1fr; margin-top:0px; }
    .ghost-panel, .ghost-line, .ghost-dot{ display:none; }
    .powerful-tools-hero{ padding:70px 16px 0px; }
  }
   @font-face {
      src: url("https://divsly.com/gofox/assets/fonts/GoogleSans-Regular.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
   }

  

   .section-heading {
      font-variation-settings: "wght" 900 !important;
      line-height: 60px;
      margin-bottom: 0.75rem !important;
      font-size: 48.75px !important;
   }

   .sub-titles-includes {
      font-size: 22.75px;
      color: #35303f;
      line-height: 1.3;
   }

   .section-heading-padding {
      margin-bottom: 65px;
   }


   .grow-your-businesscards {
      margin-bottom: 20px;
   }

  
  .cf-section {
    background-color: #f7f8fb;
    padding: 100px 24px;
  }

  .cf-header {
    max-width: 900px;
    margin: 0 auto 75px auto;
    text-align: center;
  }
  .cf-header .newsubheading-fontsize{
max-width: 700px !important;
  }
 
  .cf-title {
    
    font-size: 48.75px;
    line-height: 1.12;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 20px;
  }

  .cf-subtitle {
   font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #8a8fa3;
  }

  .cf-grid {
    
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .cf-card {
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
  }

  .cf-card--purple { background-color: #e6dff5; }
  .cf-card--gray   { background-color: #dfe4e3; }
  .cf-card--peach  { background-color: #f7e3cf; }
  .cf-card--green  { background-color: #dce8d8; }
  .cf-card--blue   { background-color: #d7e0f5; }
  .cf-card--pink   { background-color: #f0dcf0; }

  .cf-icon-wrap {
    width: 64px;
    height: 64px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
  }

  .cf-icon-wrap svg {
        width: 26px !important;
    height: 26px;
    stroke: #1c1c1e !important;
    stroke-width: 2 !important;
    fill: none;
  }

  .cf-card-title {
    font-size: 22px;
    margin-bottom: 9px;
    font-weight: 600;
    line-height: 32px;
    color: #15130F;
    margin-bottom: 14px;
  }

  .cf-card-text {
        font-size: 16px;
    line-height: 1.55;
    color: #15130fc7;
  }

  @media (max-width: 900px) {
    .cf-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 600px) {
    .cf-grid {
      grid-template-columns: 1fr;
    }
    .cf-title {
      font-size: 1.8rem;
    }
  }

  .crmbc-top{
    padding:140px 60px 140px;
    background: linear-gradient(180deg, #F0EDF9 0%, #F5F3FA 100%);
        display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .crmbc-top h1{
    font-weight: 800;
    font-size: 48.75px;
    line-height: 1.2;
    color: var(--crmbc-ink); line-height:1.18; max-width:760px;
  }
 

  .crmbc-carousel-wrap{
    position:relative;
    padding: 6px 0 70px;
    background: #F5F3FA;
  }
  .crmbc-carousel{
    overflow:hidden;
    padding: 6px 0 20px;
  }
  .crmbc-track{
    display:flex; gap:24px;
    width:max-content;
    padding: 6px 60px 20px;
    animation: crmbcScrollLeft 34s linear infinite;
  }
  .crmbc-carousel-wrap:hover .crmbc-track{
    animation-play-state: paused;
  }
  @keyframes crmbcScrollLeft{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }

  .crmbc-fade{
    position:absolute; top:0; bottom:70px; width:80px; z-index:2; pointer-events:none;
  }
  .crmbc-fade.crmbc-left{ left:0; background: linear-gradient(90deg, #F5F3FA, transparent); }
  .crmbc-fade.crmbc-right{ right:0; background: linear-gradient(270deg, #F5F3FA, transparent); }

  .crmbc-card{
    scroll-snap-align:start;
    flex: 0 0 600px;
    background:#fff;
    border-radius:26px;
    padding:22px;
    display:flex;
    gap:20px;
    box-shadow: 0 20px 45px -30px rgba(23,26,59,0.25);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .crmbc-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 26px 55px -28px rgba(23,26,59,0.3);
  }

  .crmbc-visual{
    flex:0 0 160px;
    width:160px; height:300px;
    border-radius:18px;
    position:relative;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .crmbc-visual svg{ width:100%; height:100%; }

  .crmbc-body{
    flex:1;
    display:flex; flex-direction:column;
    min-width:0;
  }

  .crmbc-badge{
    display:inline-flex; align-items:center; gap:7px;
    font-size:15px; font-weight:800; letter-spacing:-0.01em;
    margin-bottom:16px;
  }
  .crmbc-badge svg{ width:20px; height:20px; }

  .crmbc-body h4{
    font-size:21px; font-weight:800; color:var(--crmbc-ink); letter-spacing:-0.01em;
    margin-bottom:10px; line-height:1.25;
  }
  .crmbc-body p.crmbc-desc{
    font-size:13.5px; color:var(--crmbc-sub); line-height:1.55;
  }

  .crmbc-divider{
    height:1px; background:var(--crmbc-line); margin:16px 0 14px;
  }

  .crmbc-footer{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .crmbc-stats{ display:flex; gap:26px; }
  .crmbc-stat label{
    display:block; font-size:11px; color:var(--crmbc-sub); margin-bottom:4px;
  }
  .crmbc-stat span{
    display:block; font-size:14px; font-weight:700; color:var(--crmbc-ink);
  }
  .crmbc-arrow{
    flex-shrink:0;
    width:42px; height:42px; border-radius:50%;
    background: var(--crmbc-arrow-bg);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .crmbc-arrow:hover{ background:#d9d4fb; transform: translateX(2px); }
  .crmbc-arrow svg{ width:16px; height:16px; }

  @media (max-width:640px){
    .crmbc-top{ padding:56px 24px 40px; }
    .crmbc-top h1{ font-size:32px; }
    .crmbc-carousel{ padding:6px 24px 20px; }
    .crmbc-card{ flex-basis:340px; }
    .crmbc-visual{ flex-basis:96px; width:96px; }
  }

  .feature-grid{
     margin:0 auto;
    display:grid;
    grid-template-columns: 1.62fr 1fr;
    gap:22px;
  }
  .innerfeatue-grid{
        
         margin:0 auto;
    display:grid;
    grid-template-columns: 1.62fr 1fr;
    gap:22px;
    }
  .feature-row-2{
    grid-column: 1 / -1;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:22px;
    margin-top:22px;
  }

  /* Shared visual base is expressed per-card below (no shared .card class) */
  .hero-panel,
  .innerfeatue-heropanel,
  .leadscore-panel,
  .analytics-panel,
  .sequences-panel,
  .pipeline-panel{
    background: var(--card-bg);
    border:1px solid #E7E7EE !important;
    border-radius:22px;
    padding:32px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:352px;
    position:relative;
    overflow:hidden;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .hero-panel:hover,
  .innerfeatue-heropanel:hover,
  .leadscore-panel:hover,
  .analytics-panel:hover,
  .sequences-panel:hover,
  .pipeline-panel:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -18px rgba(24,26,42,0.14);
  }

  .grow-section-animate {
   opacity: 0;
   transform: translateY(60px);
   transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.grow-section-animate.in-view {
   opacity: 1;
   transform: translateY(0);
}

/* Optional: stagger the individual cards as they rise up too */
.grow-section-animate .grow-your-businesscards {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.grow-section-animate.in-view .grow-your-businesscards {
   opacity: 1;
   transform: translateY(0);
}

/* Stagger delays so cards don't all animate at once */
.grow-section-animate.in-view .grow-your-businesscards:nth-of-type(1) { transition-delay: 0.05s; }
.grow-section-animate.in-view .grow-your-businesscards:nth-of-type(2) { transition-delay: 0.15s; }
.grow-section-animate.in-view .grow-your-businesscards:nth-of-type(3) { transition-delay: 0.25s; }
.grow-section-animate.in-view .grow-your-businesscards:nth-of-type(4) { transition-delay: 0.35s; }
.grow-section-animate.in-view .grow-your-businesscards:nth-of-type(5) { transition-delay: 0.45s; }
  /* HERO GRADIENT CARD */
  .hero-panel{
    /* background: linear-gradient(135deg, #4C6EF5 0%, #7B5CF0 38%, #B15CE0 62%, #F0839E 100%); */
    color:#fff;
    border:none;
    justify-content:flex-start;
    gap:110px;
  }
  .hero-panel-top-row{ display:flex; align-items:center; justify-content:space-between; }
  .hero-panel-icon-badge{
    width:52px; height:52px; border-radius:50%;
    border:1.4px solid rgba(255,255,255,0.55);
    display:flex; align-items:center; justify-content:center;
  }
  .hero-panel-icon-badge svg{ width:24px; height:24px; }
  .hero-panel-thread{
    position:relative; width:2px; height:70px;
  }
  .hero-panel-thread::before{
    content:''; position:absolute; left:0; top:0; width:1px; height:100%;
    background: rgba(255,255,255,0.4);
  }
  .hero-panel-thread::after{
    content:''; position:absolute; left:-2px; bottom:-2px; width:6px; height:6px;
    border-radius:50%; background: rgba(255,255,255,0.7);
  }

  .hero-panel-content{ position:relative; z-index:2; }
  .hero-panel-eyebrow{
    font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color: rgba(255,255,255,0.8);
    margin-bottom:12px;
  }
  .hero-panel-heading{
    font-size:27px; font-weight:700; line-height:1.28; letter-spacing:-0.01em;
    max-width:400px; margin-bottom:26px;
    color: white;
  }
  .hero-panel-cta{
    display:inline-flex; align-items:center; gap:8px;
    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(6px);
    color:#fff; font-weight:600; font-size:14px;
    border:none; border-radius:999px; padding:6px 22px;
    cursor:pointer;
    transition: background .2s ease, transform .2s ease;
    width: fit-content;
  }
  .hero-panel-cta:hover{ background: rgba(255,255,255,0.32); transform: translateY(-1px); }

  .hero-panel-decor{
    position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  }

  /* LEAD SCORING CARD */
  .leadscore-panel-icon{
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:auto;
  }
  .leadscore-panel-icon svg{ width:38px; height:38px; }
  .leadscore-panel-bottom{ display:flex; flex-direction:column; gap:14px; }
  .leadscore-panel-badge{
    align-self:flex-start;
    font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    background: var(--badge-bg);
        border: 1px solid var(--tp-theme-1) !important;
    color: #EB4D00;
    border-radius:999px;
    padding:2px 14px;
  }
  .leadscore-panel-title{
    font-size:20px; font-weight:600; line-height:1.32; letter-spacing:-0.01em;
    color: var(--ink);
    
  }
  .leadscore-panel-desc{
    font-size:13.5px; color: var(--sub); line-height:1.55; margin-top:2px;
  }
  .leadscore-panel-subheading{
    max-width: 370px;

  }

  /* MARKETING ANALYTICS CARD */
  .analytics-panel-icon{
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:auto;
  }
  .analytics-panel-icon svg{ width:38px; height:38px; }
  .analytics-panel-bottom{ display:flex; flex-direction:column; gap:14px; }
  .analytics-panel-badge{
    align-self:flex-start;
    font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    background: var(--badge-bg);
    border: 1px solid var(--tp-theme-1) !important;
    color: #EB4D00;
    border-radius:999px;
    padding:2px 14px;
  }
  .analytics-panel-title{
    font-size:20px; font-weight:600; line-height:1.32; letter-spacing:-0.01em;
    color: var(--ink);
    
  }
  .analytics-panel-desc{
    font-size:13.5px; color: var(--sub); line-height:1.55; margin-top:2px;
  }

  /* AI EMAIL SEQUENCES CARD */
  .sequences-panel-icon{
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:auto;
  }
  .sequences-panel-icon svg{ width:38px; height:38px; }
  .sequences-panel-bottom{ display:flex; flex-direction:column; gap:14px; }
  .sequences-panel-badge{
    align-self:flex-start;
    font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
   
    background: var(--badge-bg);
     border: 1px solid var(--tp-theme-1) !important;
    color: #EB4D00;
    border-radius:999px;
    padding:2px 14px;
  }
  .sequences-panel-title{
    font-size:20px; font-weight:600; line-height:1.32; letter-spacing:-0.01em;
    color: var(--ink);
  
  }
  .sequences-panel-desc{
    font-size:13.5px; color: var(--sub); line-height:1.55; margin-top:2px;
  }

  /* PIPELINE VISIBILITY CARD */
  .pipeline-panel-icon{
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:auto;
  }
  .pipeline-panel-icon svg{ width:38px; height:38px; }
  .pipeline-panel-bottom{ display:flex; flex-direction:column; gap:14px; }
  .pipeline-panel-badge{
    align-self:flex-start;
    font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    background: var(--badge-bg);
    border: 1px solid var(--tp-theme-1) !important;
    color: #EB4D00;
    border-radius:999px;
    padding:2px 14px;
  }
  .pipeline-panel-title{
    font-size:20px; font-weight:600; line-height:1.32; letter-spacing:-0.01em;
    color: var(--ink);
    
  }
  .pipeline-panel-desc{
    font-size:13.5px; color: var(--sub); line-height:1.55; margin-top:2px;
  }

  @media (max-width: 980px){
    .innerfeatue-grid{grid-template-columns:1fr;}
    .feature-grid{ grid-template-columns:1fr; }
    .feature-row-2{ grid-template-columns: repeat(2, 1fr); }
    .hero-panel{ gap:60px; }
  }
  .crmft-section *{ margin:0; padding:0; box-sizing:border-box; }
  .crmft-section{
   
    
    padding:64px 60px;
  }

  .crmft-hero{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:70px;
    align-items:center;
  }

  .crmft-heading{
    
        font-size: 50px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing:-0.01em;
    color: var(--crmft-ink);
    max-width:600px;
  }

  .crmft-hero-lead{
    margin-top:22px;
        font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #5f6368;
    
    max-width:460px;
  }

  .crmft-cta-btn{
    margin-top:30px;
    display:inline-flex; align-items:center; gap:10px;
    background: var(--crmft-orange);
    color:#fff;
    font-weight:600; font-size:14.5px;
    border:none; border-radius:10px;
    padding:14px 24px;
    cursor:pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    display: none;
  }
  .crmft-cta-btn:hover{
    background: var(--crmft-orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -10px rgba(255,122,61,.55);
  }
  .crmft-cta-btn svg{ width:15px; height:15px; }

  /* right visual */
  .crmft-visual{
    border-radius:22px;
    overflow:hidden;
    aspect-ratio: 16/10.4;
    position:relative;
    background:
      radial-gradient(circle at 78% 20%, rgba(255,255,255,0.16) 0%, transparent 45%),
      linear-gradient(135deg, #2C3A66 0%, #3B4E8A 45%, #E68A52 100%);
  }
  .crmft-visual-grid{
    position:absolute; inset:0; opacity:.12;
    background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 46px 46px;
  }
  .crmft-visual-panel{
    position:absolute; left:28px; right:28px; bottom:26px;
    background: rgba(255,255,255,0.94);
    border-radius:14px;
    padding:18px 20px;
    display:flex; align-items:center; gap:16px;
    backdrop-filter: blur(6px);
  }
  .crmft-visual-avatars{ display:flex; }
  .crmft-visual-avatars span{
    width:34px; height:34px; border-radius:50%;
    border:2px solid #fff;
    margin-left:-10px;
    display:flex; align-items:center; justify-content:center;
     font-weight:700; font-size:12px; color:#fff;
  }
  .crmft-visual-avatars span:first-child{ margin-left:0; }
  .crmft-visual-panel-text{ flex:1; }
  .crmft-visual-panel-text .crmft-panel-title{ font-size:13.5px; font-weight:700; color:var(--crmft-ink); }
  .crmft-visual-panel-text .crmft-panel-sub{ font-size:12px; color:var(--crmft-sub); margin-top:2px; }
  .crmft-visual-pulse{
    width:10px; height:10px; border-radius:50%;
    background:#3FC97A;
    box-shadow:0 0 0 0 rgba(63,201,122,.6);
    animation: crmft-ring 2s infinite;
  }
  .crmft-visual-avatarsa{
background: #ff7a3d
  }
   .crmft-visual-avatarsp{
    background: #3b4e8a
  }
   .crmft-visual-avatarsr{
    background: #3fc97a
  }
  @keyframes crmft-ring{
    0%{ box-shadow:0 0 0 0 rgba(63,201,122,.5); }
    70%{ box-shadow:0 0 0 9px rgba(63,201,122,0); }
    100%{ box-shadow:0 0 0 0 rgba(63,201,122,0); }
  }
  .crmft-visual-chip{
    position:absolute; top:26px; left:28px;
    background: rgba(255,255,255,0.16);
    border:1px solid rgba(255,255,255,0.3);
    color:#fff; font-size:12px; font-weight:600;
    padding:7px 14px; border-radius:999px;
  }

  /* feature cards */
  .crmft-cards{
    margin-top:52px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  .crmft-card{
        
        border: 1px solid #e5e5e5;
    border-radius: 16px;
    padding: 24px 22px;
    display: flex;
    gap: 16px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .crmft-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -22px rgba(27,29,42,.22);
    border-color: transparent;
  }
  .crmft-card-icon{
    flex-shrink:0;
    width:42px; height:42px;
    border-radius:11px;
    border:1px solid var(--crmft-line);
    display:flex; align-items:center; justify-content:center;
        background: #eb4d001c;
  }
  .crmft-card-icon svg{     width: 20px;
    height: 20px;
    color: #eb4d00;
    stroke: #eb4d00; }
  .crmft-card h3{
   
    font-weight:600; font-size:16.5px;
    color: var(--crmft-ink); margin-bottom:6px; letter-spacing:-0.01em;
  }
  .crmft-card p{
    font-size:13px; color: var(--crmft-sub); line-height:1.55;
  }

  @media (max-width: 900px){
    .crmft-section{ padding:44px 24px; }
    .crmft-hero{ grid-template-columns:1fr; gap:36px; }
    .crmft-heading{ font-size:32px; }
    .crmft-cards{ grid-template-columns:1fr; }
  }
  .crmhero-section{
   

    position:relative;
    min-height:520px;
    padding:60px 40px 80px;
    display:flex;
    align-items:center;
    justify-content:center;
    
    color:var(--crmhero-text);
    overflow:hidden;
    box-sizing:border-box;
  }
  .crmhero-sectiobg{
     --crmhero-bg:#000000;
    --crmhero-panel:#111214;
    --crmhero-panel-border:#2a2b2e;
    --crmhero-blue:#2f6bff;
    --crmhero-text:#ffffff;
    --crmhero-muted:#9a9ba0;
    --crmhero-pill-bg:#141517;
    --crmhero-pill-border:#2c2d30;
    background: #000000;
  }
  .crmhero-sectiobg{
    margin-bottom: 100px;
  }
  .crmhero-section *{
    box-sizing:border-box;
  }

  /* decorative top hairline */
  .crmhero-section::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:340px;
    height:1px;
    background:linear-gradient(90deg, transparent, #555, transparent);
  }

  .crmhero-center-copy{
    text-align:center;
    max-width:640px;
    z-index:2;
  }

  .crmhero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:4px 18px;
    border-radius:999px;
    background:var(--crmhero-pill-bg);
    border:1px solid var(--crmhero-pill-border);
    font-size:13px;
    color:#e8e8ea;
    margin-bottom:28px;
  }

  .crmhero-eyebrow .crmhero-spark{
    color:#fff;
    font-size:14px;
  }

  .crmhero-heading{
    font-size:48.75px;
    line-height:1.15;
    font-weight:700;
    margin:0 0 22px;
    letter-spacing:-0.5px;
    color: #fff;
  }

  .crmhero-subtext{
    color:var(--crmhero-muted);
     font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    margin:0 0 34px;
        max-width: 560px;
  }

  .crmhero-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#EB4D00;
    color:#fff;
    text-decoration:none;
    padding:15px 28px;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    border:none;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(47,107,255,0.35);
  }
  .crmhero-cta:hover{
        color: var(--tp-theme-1);
    background-color: transparent;
    border: 1px solid var(--tp-theme-1);
  }

  .crmhero-cta svg{width:14px;height:14px;}

  /* ---------- floating pills top-right ---------- */
  .crmhero-top-right-pills{
    position:absolute;
    top:38px;
    right:60px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    z-index:2;
  }
  .crmhero-pill-row{
    display:flex;
    gap:10px;
  }
  .crmhero-tag-pill{
    padding:2px 10px;
    border-radius:10px;
    background:var(--crmhero-pill-bg);
    border:1px solid var(--crmhero-pill-border);
    font-size:13px;
    color:#e8e8ea;
    white-space:nowrap;
  }
  .crmhero-tag-pill.crmhero-active{
    background:#1c1d20;
    border-color:#3a3b3e;
  }
  .crmhero-connector-vert{
    width:1px;
    height:34px;
    background:#3a3b3e;
    margin-right:34px;
  }

  /* ---------- Project Progress card (left) ---------- */
  .crmhero-progress-card{
    position:absolute;
    left:60px;
    top:80px;
    width:178px;
    background:var(--crmhero-panel);
    border:1px solid var(--crmhero-panel-border);
    border-radius:14px;
    padding:18px;
    z-index:2;
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
  }
  .crmhero-progress-card .crmhero-title{
    font-size:12px;
    color:#cfcfd2;
    margin-bottom:14px;
  }
  .crmhero-donut-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:14px;
  }
  .crmhero-donut-label{
    text-align:center;
    margin-top:-46px;
    margin-bottom:24px;
  }
  .crmhero-donut-label .crmhero-pct{
    font-size:22px;
    font-weight:700;
  }
  .crmhero-donut-label .crmhero-sub{
    font-size:10px;
    color:var(--crmhero-muted);
    margin-top:2px;
  }
  .crmhero-legend{
    display:flex;
    gap:14px;
    font-size:10px;
    color:var(--crmhero-muted);
  }
  .crmhero-legend span{
    display:inline-flex;
    align-items:center;
    gap:5px;
  }
  .crmhero-dot{
    width:7px;height:7px;border-radius:50%;
    display:inline-block;
  }
  .crmhero-dot.crmhero-blue-dot{background:var(--crmhero-blue);}
  .crmhero-dot.crmhero-grey-dot{background:#4a4b4e;}

  .crmhero-connector-curve-left{
    position:absolute;
    left:143px;
    top:271px;
    width:1px;
    height:36px;
    background:#3a3b3e;
    z-index:1;
  }

  /* ---------- bottom-left tag pills ---------- */
  .crmhero-bottom-left-pills{
    position:absolute;
    left:60px;
    bottom:88px;
    display:flex;
    gap:10px;
    z-index:2;
  }
  .crmhero-bottom-left-curve{
    position:absolute;
    left:60px;
    bottom:14px;
    width:60px;
    height:56px;
    border:1px solid #3a3b3e;
    border-top:none;
    border-right:none;
    border-radius:0 0 0 16px;
    z-index:1;
  }

  /* ---------- Leads card (right) ---------- */
  .crmhero-leads-card{
    position:absolute;
    right:60px;
    top:170px;
    width:225px;
    background:var(--crmhero-panel);
    border:1px solid var(--crmhero-panel-border);
    border-radius:14px;
    padding:14px 16px 16px;
    z-index:2;
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
  }
  .crmhero-leads-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:12px;
    color:#cfcfd2;
    margin-bottom:12px;
  }
  .crmhero-leads-head .crmhero-icons{
    display:flex;
    gap:8px;
    color:var(--crmhero-muted);
  }
  .crmhero-leads-cols{
    display:flex;
    justify-content:space-between;
    font-size:10px;
    color:var(--crmhero-muted);
    padding-bottom:8px;
    border-bottom:1px solid #232427;
    margin-bottom:8px;
  }
  .crmhero-lead-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:7px 0;
    font-size:12px;
  }
  .crmhero-lead-left{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .crmhero-checkbox{
    width:13px;height:13px;
    border-radius:4px;
    border:1px solid #4a4b4e;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .crmhero-checkbox.crmhero-checked{
    background:var(--crmhero-blue);
    border-color:var(--crmhero-blue);
    color:#fff;
    font-size:9px;
  }
  .crmhero-avatar{
    width:18px;height:18px;
    border-radius:50%;
    flex-shrink:0;
  }
  .crmhero-company-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#dcdcde;
  }
  .crmhero-company-dot{
    width:14px;height:14px;
    border-radius:5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:8px;
    color:#fff;
    flex-shrink:0;
  }

  /* orbit circles */
  .crmhero-orbit{
    position:absolute;
    width:14px;height:14px;
    border-radius:50%;
    border:1px solid #4a4b4e;
    z-index:1;
  }
  .crmhero-orbit.crmhero-o1{right:20px; top:230px;}
  .crmhero-orbit.crmhero-o2{right:34px; bottom:60px;}

  @media (max-width:1000px){
    .crmhero-progress-card,
    .crmhero-leads-card,
    .crmhero-top-right-pills,
    .crmhero-bottom-left-pills,
    .crmhero-bottom-left-curve,
    .crmhero-orbit,
    .crmhero-connector-curve-left{
      display:none;
    }
    .crmhero-heading{font-size:34px;}
    .crmhero-section{padding:50px 24px;}
  }


  .uce-section * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .uce-section {
    font-family: 'Poppins', sans-serif;
    background: radial-gradient(circle at 15% 30%, #222222 0%, #171717 45%, #131313 100%);
    border-radius: 28px;
    padding: 64px 48px 72px 48px;
    position: relative;
    overflow: hidden;
  }

  .uce-section::before {
    content: "";
    position: absolute;
    top: -80px;
    left: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
  }

  .uce-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 40px auto;
    position: relative;
    z-index: 1;
  }

  .uce-title {
     font-weight: 800;
    font-size: 48.75px;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 14px;
  }

  .uce-title span {
    color: #f0654a;
  }

  .uce-subtitle {
    font-size: 0.9rem;
    color: #b7b7b7;
    font-weight: 400;
  }

  .uce-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 56px;
    position: relative;
    z-index: 1;
  }

  .uce-tab {
    background: none;
    border: none;
    color: #cfcfcf;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 999px;
    transition: all 0.2s ease;
  }

  .uce-tab:hover {
    color: #ffffff;
  }

  .uce-tab--active {
    background-color: #f0654a;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(240, 101, 74, 0.35);
  }

  .uce-tab--outline {
    border: 1.5px solid #f0654a;
    color: #f0654a;
  }

  .uce-body {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  .uce-info-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
  }

  .uce-info-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 5 Q 12.5 0 25 5 T 50 5 T 75 5 T 100 5' stroke='%23f0654a' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x;
    background-size: 40px 8px;
  }

  .uce-info-text {
    font-size: 0.85rem;
    line-height: 1.7;
    color: #a9a9a9;
    max-width: 320px;
  }

  .uce-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.45);
  }

  .uce-photo-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 220px;
  }

  .uce-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .uce-photo-wrap--tall {
    height: 300px;
  }

  .uce-plain-footer {
    padding: 18px 12px 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .uce-plain-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
  }

  .uce-tab:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }

  .uce-badge {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background-color: #ffffff;
    color: #1a1a1a;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
  }

  .uce-panel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 8px 8px 8px;
  }

  .uce-logo {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9fd8d3 0%, #f2b6a0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: -30px;
    border: 4px solid #ffffff;
  }

  .uce-logo-text {
    text-align: center;
    line-height: 1.1;
  }

  .uce-logo-text .uce-logo-brand {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    display: block;
  }

  .uce-logo-text .uce-logo-sub {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    display: block;
  }

  .uce-logo-text .uce-logo-city {
    font-size: 0.4rem;
    font-weight: 600;
    color: #f0654a;
    display: block;
    margin-top: 1px;
  }

  .uce-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
  }

  .uce-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #555555;
  }

  .uce-detail-row svg {
    width: 13px;
    height: 13px;
    stroke: #f0654a;
    flex-shrink: 0;
  }

  .uce-actions {
    display: flex;
    gap: 10px;
    padding: 4px 8px 8px 8px;
  }

  .uce-btn {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 12px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
  }

  .uce-btn--follow {
    background-color: #f0654a;
    color: #ffffff;
  }

  .uce-btn--muted {
    background-color: #f2f2f2;
    color: #b0b0b0;
  }

  @media (max-width: 800px) {
    .uce-body {
      grid-template-columns: 1fr;
    }
    .uce-info-text {
      max-width: none;
    }
    .uce-tabs {
      gap: 14px;
    }
    .uce-section {
      padding: 48px 20px 56px 20px;
    }
  }

    .gcr-hero {
    margin-top: 15px;
    padding: 0;
    box-sizing: border-box;
  }

  .gcr-hero {
    position: relative;
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    overflow: hidden;
    padding: 135px 24px 120px 24px;
  }

  /* ---------- Decorative background ---------- */

 

  .gcr-bg-waves {
    position: absolute;
    top: 260px;
    left: -40px;
    width: 340px;
    height: 340px;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
  }

  /* ---------- Header content ---------- */

  .gcr-content {
    position: relative;
    z-index: 1;
    
    margin: 0 auto;
    text-align: center;
  }

  .gcr-title {
      font-weight: 900;
    font-size: 64px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #12123a;
  }

  .gcr-title em {
  
    font-style: italic;
    font-weight: 700;
    color: #12123a;
  }

  .gcr-subtitle {
    margin-top: 24px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #6b6f80;
    font-weight: 400;
    max-width: 900px;
  }

  .gcr-cta-row {
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .gcr-btn {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .gcr-btn:hover {
    transform: translateY(-2px);
  }

  .gcr-btn--primary {
    background-color: #5b57ea;
    border: 1.5px solid #5b57ea;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(91, 87, 234, 0.28);
  }

  .gcr-btn--outline {
    background-color: #ffffff;
    border: 1.5px solid #5b57ea;
    color: #5b57ea;
  }

  .gcr-os-row {
    margin-top: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
  }

  .gcr-os-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .gcr-os-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(20,20,50,0.08);
  }

  .gcr-os-icon svg {
    width: 18px;
    height: 18px;
  }

  .gcr-os-label {
    font-size: 0.7rem;
    color: #9497a8;
    font-weight: 500;
  }

  /* ---------- Dashboard mockup ---------- */

  .gcr-mockup-wrap {
    position: relative;
    max-width: 1080px;
    margin: 72px auto 0 auto;
    z-index: 1;
  }

  .gcr-blob {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
  }

  .gcr-blob--pink {
    width: 340px;
    height: 340px;
    background-color: #f2a0b0;
    left: 60px;
    bottom: -60px;
  }

  .gcr-blob--purple {
    width: 260px;
    height: 260px;
    background-color: #7b6bf0;
    left: 300px;
    top: -70px;
  }

  .gcr-blob--green {
    width: 220px;
    height: 220px;
    background-color: #79c76b;
    left: 480px;
    bottom: -50px;
  }

  .gcr-scribble {
    position: absolute;
    top: -30px;
    left: 20px;
    width: 60px;
    height: 60px;
    z-index: 3;
    stroke: #1a1a2e;
  }

  .gcr-scribble-right {
    position: absolute;
    right: -40px;
    top: 130px;
    width: 90px;
    height: 220px;
    z-index: 3;
    stroke: #1a1a2e;
  }

  .gcr-pen {
    position: absolute;
    left: -30px;
    bottom: 60px;
    width: 260px;
    height: 40px;
    z-index: 3;
    transform: rotate(38deg);
    transform-origin: left center;
  }

  .gcr-dashboard {
    position: relative;
    z-index: 2;
    background-color: #f4f4f7;
    border: 2px solid #1c1c2e;
    border-radius: 22px;
    box-shadow: 0 50px 90px rgba(20,20,50,0.28);
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    overflow: hidden;
    transform: perspective(2200px) rotateX(8deg) rotateY(-11deg) rotate(-1.2deg);
    transform-style: preserve-3d;
  }

  /* Left sidebar */

  .gcr-db-left {
    background-color: #f4f4f7;
    border-right: 1px solid #e4e4ec;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
  }

  .gcr-db-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
  }

  .gcr-db-logo-mark {
    width: 22px;
    height: 22px;
    background-color: #1c1c2e;
    color: #ffffff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
  }

  .gcr-db-logo-text {
    font-size: 0.7rem;
    font-weight: 600;
    color: #1c1c2e;
    line-height: 1.2;
  }

  .gcr-db-logo-text span {
    display: block;
    font-size: 0.55rem;
    font-weight: 400;
    color: #9497a8;
  }

  .gcr-db-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 0 24px 0;
    border-bottom: 1px solid #e4e4ec;
    margin-bottom: 20px;
  }

  .gcr-db-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c63d1, #9d8ff0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .gcr-db-profile-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1c1c2e;
  }

  .gcr-db-profile-email {
    font-size: 0.62rem;
    color: #9497a8;
    margin-top: 2px;
  }

  .gcr-db-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
  }

  .gcr-db-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 500;
    color: #6b6f80;
    padding: 9px 10px;
    border-radius: 8px;
  }

  .gcr-db-nav-item svg {
    width: 14px;
    height: 14px;
    stroke: #6b6f80;
  }

  .gcr-db-upgrade {
    background-color: #ffffff;
    border: 1px dashed #d7d9e3;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    margin-top: 12px;
  }

  .gcr-db-upgrade svg {
    width: 20px;
    height: 20px;
    stroke: #1c1c2e;
    margin-bottom: 6px;
  }

  .gcr-db-upgrade-text {
    font-size: 0.62rem;
    color: #6b6f80;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .gcr-db-upgrade-btn {
    font-size: 0.62rem;
    font-weight: 700;
    color: #1c1c2e;
  }

  /* Main content */

  .gcr-db-main {
    padding: 20px 22px;
    background-color: #f4f4f7;
  }

  .gcr-db-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .gcr-db-hello {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1c1c2e;
  }

  .gcr-db-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.68rem;
    color: #9497a8;
  }

  .gcr-db-search svg {
    width: 12px;
    height: 12px;
    stroke: #9497a8;
  }

  .gcr-db-section-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #9497a8;
    margin-bottom: 10px;
  }

  .gcr-db-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }

  .gcr-db-stat {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .gcr-db-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1c1c2e;
  }

  .gcr-db-stat-label {
    font-size: 0.58rem;
    color: #9497a8;
    margin-top: 2px;
  }

  .gcr-db-stat svg {
    width: 16px;
    height: 16px;
    stroke: #9497a8;
  }

  .gcr-db-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }

  .gcr-db-card {
    border-radius: 14px;
    padding: 14px;
    position: relative;
  }

  .gcr-db-card--green {
    background-color: #d4f75e;
  }

  .gcr-db-card--purple {
    background-color: #8a7ff2;
    color: #ffffff;
  }

  .gcr-db-card-title {
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 2px;
  }

  .gcr-db-card--purple .gcr-db-card-title {
    color: #ffffff;
  }

  .gcr-db-card--green .gcr-db-card-title {
    color: #2b2b17;
  }

  .gcr-db-card-sub {
    font-size: 0.55rem;
    opacity: 0.75;
    margin-bottom: 14px;
  }

  .gcr-db-donut {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: conic-gradient(#1c1c2e 0% 65%, rgba(28,28,46,0.15) 65% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .gcr-db-donut-inner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #d4f75e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2b2b17;
  }

  .gcr-db-card-days {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.5rem;
    opacity: 0.8;
  }

  .gcr-db-wave-tooltip {
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    color: #1c1c2e;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
  }

  .gcr-db-chart-block {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 14px;
  }

  .gcr-db-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .gcr-db-chart-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #1c1c2e;
  }

  .gcr-db-chart-filter {
    font-size: 0.58rem;
    color: #9497a8;
  }

  .gcr-db-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 70px;
    position: relative;
  }

  .gcr-db-bar {
    flex: 1;
    background-color: #1c1c2e;
    border-radius: 3px;
  }

  .gcr-db-bar--peak {
    background-color: #d4f75e;
  }

  .gcr-db-bar-callout {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    font-weight: 700;
    color: #1c1c2e;
    background-color: #ffffff;
    padding: 2px 6px;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(20,20,50,0.1);
  }

  .gcr-db-bars-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.5rem;
    color: #c3c5d1;
    margin-right: 6px;
    height: 70px;
  }

  .gcr-db-bars-row {
    display: flex;
  }

  /* Right sidebar */

  .gcr-db-right {
    background-color: #ffffff;
    border-left: 1px solid #e4e4ec;
    padding: 20px 18px;
  }

  .gcr-db-right-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }

  .gcr-db-right-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1c1c2e;
  }

  .gcr-db-right-icons {
    display: flex;
    gap: 8px;
  }

  .gcr-db-right-icons svg {
    width: 13px;
    height: 13px;
    stroke: #9497a8;
  }

  .gcr-db-timer-label {
    font-size: 0.58rem;
    color: #9497a8;
    margin-bottom: 6px;
  }

  .gcr-db-timer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .gcr-db-timer-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1c1c2e;
  }

  .gcr-db-timer-controls {
    display: flex;
    gap: 6px;
  }

  .gcr-db-timer-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gcr-db-timer-btn--dark {
    background-color: #1c1c2e;
  }

  .gcr-db-timer-btn--accent {
    background-color: #8a7ff2;
  }

  .gcr-db-timer-btn svg {
    width: 10px;
    height: 10px;
    stroke: #ffffff;
    fill: #ffffff;
  }

  .gcr-db-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .gcr-db-cal-month {
    font-size: 0.65rem;
    font-weight: 700;
    color: #1c1c2e;
  }

  .gcr-db-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 6px;
    text-align: center;
    font-size: 0.52rem;
    color: #6b6f80;
    margin-bottom: 22px;
  }

  .gcr-db-cal-grid span {
    padding: 3px 0;
    border-radius: 50%;
  }

  .gcr-db-cal-dow {
    color: #b6b8c4;
    font-weight: 600;
  }

  .gcr-db-cal-active {
    background-color: #8a7ff2;
    color: #ffffff;
    font-weight: 700;
  }

  .gcr-db-tasks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .gcr-db-tasks-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #1c1c2e;
  }

  .gcr-db-task {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }

  .gcr-db-task-check {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #c3c5d1;
    flex-shrink: 0;
  }

  .gcr-db-task-check--done {
    background-color: #1c1c2e;
    border-color: #1c1c2e;
  }

  .gcr-db-task-title {
    font-size: 0.68rem;
    font-weight: 600;
    color: #1c1c2e;
  }

  .gcr-db-task-date {
    font-size: 0.55rem;
    color: #9497a8;
  }

  .gcr-db-task-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f2a0b0, #8a7ff2);
    margin-left: auto;
    flex-shrink: 0;
  }

  @media (max-width: 980px) {
    .gcr-dashboard {
      transform: none;
      grid-template-columns: 1fr;
    }
    .gcr-db-left, .gcr-db-right {
      border: none;
      border-top: 1px solid #e4e4ec;
    }
    .gcr-title {
      font-size: 2.1rem;
    }
    .gcr-mockup-wrap {
      margin-top: 48px;
    }
  }
   .customers-herosectin {
    position: relative;
    width: 100%;
    max-width: 1800px;
    border-radius: 32px;
    overflow: hidden;
    background:
      radial-gradient(ellipse 900px 500px at 68% 95%, rgba(60, 90, 255, 0.55), transparent 60%),
      radial-gradient(ellipse 600px 400px at 78% 100%, rgba(40, 60, 220, 0.4), transparent 60%),
      #0d0d10;
    padding: 70px 40px 0;
    color: #fff;
  }

  /* decorative squiggle top right */
  .squiggle {
    position: absolute;
    top: 60px;
    right: 80px;
    width: 90px;
    height: 110px;
    opacity: 0.5;
  }

  .sparkle {
    position: absolute;
    top: 175px;
    left: 165px;
    width: 28px;
    height: 28px;
    color: #fff;
    opacity: 0.9;
  }

  .headline {
    text-align: center;
        font-size: 48.75px;
    line-height: 1.12;
    font-weight: 600;
    max-width: 760px;
    margin: 0 auto 36px;
    color: white;
  }

  .headline em {
    font-style: italic;
    font-weight: 400;
  }

  .cta-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 56px;
  }

  .cta {
    background: #5b5bf5;
    color: #fff;
    border: none;
    padding: 14px 30px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(91, 91, 245, 0.45);
  }

  .reviews {
    display: flex;
    justify-content: center;
    gap: 110px;
    margin-bottom: 56px;
    flex-wrap: wrap;
  }

  .review {
    text-align: center;
  }

  .stars {
    color: #f5a623;
    font-size: 15px;
    letter-spacing: 3px;
    margin-bottom: 10px;
  }

  .quote {
    font-size: 14px;
    color: #e8e8ea;
    margin-bottom: 14px;
  }

  .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    font-size: 17px;
  }

  .brand.capterra { color: #ff9d28; }
  .brand.capterra span:last-child { color: #ff5757; }
  .brand.trustpilot { color: #00b67a; }
  .brand.trustpilot span:last-child { color: #fff; }
  .brand.g2 span:first-child { color: #ff5757; font-size: 20px; }
  .brand.g2 span:last-child { color: #fff; letter-spacing: 1px; }
.cta-footer {
  position: relative;
  z-index: 10;
  transform: translateY(140px); /* 👈 pushes CTA down over footer */
}

.cta-section {
  background: white;
  border-radius: 20px;
  padding: 95px !important;
  position: relative;
  overflow: visible;
  /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); */
  border: 1px solid #ece8f5;
}
.cta-section::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 0px;
  bottom: 75px;
  width: 38%;
  background: url("https://divsly.com/gofox/assets/media/main-page/cta-image.webp") no-repeat bottom
    right;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}
.site-footer:not(.second-footer) {
  padding-top: 120px; /* adjust based on overlap */
}
.cta-btn {
  position: relative;
  color: #501e5e;
  border-radius: 0.55rem !important;
  font-weight: 700;
  font-size: 1.3rem;
  overflow: hidden;
  z-index: 1;
  padding: 20px 28px;
  background: #EB4D00 !important;
  color: #fff !important;
}

.cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #EB4D00;
  z-index: -1;
}
.cta-btn:hover {
  background: #c93700 !important;
}

.cta-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #c93700;
  transition: width 0.4s ease;
  z-index: -1;
}
a:hover {
    transition: color 0.2s ease;
}

.cta-btn:hover::after {
  width: 100%;
}
.footer-sub-titles-includes{
      max-width: 600px !important;
  color: #000 !important;
}
@media (max-width: 900px) {
  .cta-section {
    padding: 32px !important;
    text-align: center;
  }

  .cta-section::after {
    display: none;
  }

  .cta-section .mb-15 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cta-section .sub-titles-includes {
    width: 100% !important;
    text-align: center;
  }

  .cta-section .d-flex {
    justify-content: center;
  }
  .cta-footer {
    position: relative;
    z-index: 10;
    transform: translateY(73px);
  }
}

/* footer section start */

.site-footer {
  font-size: 14px;

  line-height: 20px;
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../media/illustrations/footer.png");
  z-index: -2;
}

.site-footer::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0.9;
  background-repeat: no-repeat;
  background-size: cover;
  /* background-color: #2b1d64; */
  z-index: -1;
}

.site-footer .footer-main-content {
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 48px 0 32px;
  /* border-bottom: 1px solid #7a7a7a; */
}

.footer-cta-input {
  padding-right: 185px !important;
}

.get-started-now {
  border-radius: 0.42rem !important;
}

@media (max-width: 768px) {
  .site-footer .footer-main-content {
    align-items: center;
  }

  .site-footer .divsly-wordmark {
    margin: 0 auto;
    display: block;
  }

  .site-footer .tagline {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .site-footer:not(.second-footer) {
    padding-top: 68px;
  }
}
@media (max-width: 992px) {
  .form-floating #floatingInput {
    border-radius: 0.55rem;
  }

  .site-footer .footer-main-content {
    align-items: center;
  }

  .site-footer .divsly-wordmark {
    margin: 0 auto;
    display: block;
  }

  .site-footer .tagline {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .get-started-now {
    border-radius: 0.55rem !important;
  }

  .footer-cta-input {
    padding-right: 15px !important;
    border-radius: 0.55rem !important;
  }
  .cta-signup {
    padding-bottom: 40px !important;
  }
  .total-shots-container {
    padding-top: 10px;
  }
}

.other-free-tools {
  padding: 48px 0 32px;
  /* border-bottom: 1px solid #e7e7e9; */
  border-bottom: 1px solid #d2d2d2;
}

@media (min-width: 1160px) {
  .site-footer .footer-main-content {
    flex-direction: row;
    padding: 72px 0 50px 0px;
  }
  .other-free-tools {
    padding: 50px 0;
  }
}

.site-footer .divsly-wordmark {
  width: 120px;
  -webkit-transition: fill 200ms ease;
  transition: fill 200ms ease;
  fill: #ea4c89;
     
}

.site-footer .divsly-wordmark:hover {
  fill: #bb3d6e;
}

.site-footer .tagline {
  max-width: 256px;
  margin: 20px 0;
  color: #fff !important;
}

.site-footer .social-links-container a {
  color: #3d3d4e;
}

.site-footer .social-links-container a:hover {
  color: #0d0c22;
}

.site-footer .social-links-container .icon {
  width: 18px;
  height: 18px;
  /* margin-top: 8px; */
  margin-right: 14px;
}

.site-footer .social-links-container a:nth-child(4) svg {
  margin-right: 0px !important;
}

.site-footer .links-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.footer-last {
  color: #000;
  font-size: 14px;
}
.footer-last:hover {
  color: #6f4cff !important;
}
@media (min-width: 768px) {
  .site-footer .links-container {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

@media (min-width: 1160px) {
  .site-footer .links-container > .links-column {
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .site-footer > .links-column {
    margin-right: 36px;
  }

  .site-footer > .links-column:last-of-type {
    margin-right: 0;
  }
}

.site-footer .links-column {
  width: 50%;
  padding: 0px 5px 0px 0px;
}

@media (min-width: 1160px) {
  .site-footer .links-column {
    width: fit-content;
    /* margin-left: 40px; */
  }
}

.site-footer .link-heading,
.footer-contact .link-heading {
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  margin-top: 32px;
  /* color: #0d0c22; */
  color: #fff;
}

.footer-contact div {
  color: #fff;
}

@media (min-width: 1160px) {
  .site-footer .link-heading {
    margin-top: 0;
  }

  .site-footer .link-heading:not(:first-child) {
    margin-top: 24px;
  }
}

.site-footer .link h6 {
  display: block;
  margin-top: 11px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.site-footer .link h6:hover {
  color: #eb4d00ba !important;
  font-weight: 400;
}

.cntry {
  color: var(--bs-dark-footer-heading) !important;
}

.site-footer .link:hover {
  color: #0d0c22;
}

.site-footer .footer-lower-content {
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: center;
  padding: 32px 0;
  /* color: #6e6d7a; */
  color: #fff;
}

@media (min-width: 1160px) {
  .site-footer .footer-lower-content {
    
    padding: 20px 0;
  }
}

@media (max-width: 992px) {
  .site-footer .total-shots-container div:first-child {
    padding-right: 0px;
    padding-top: 5px;
    border-right: 0px;
    margin-right: 0px;
  }

}

.site-footer .total-shots-container {
  display: flex;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  -ms-flex-align: center;
  align-items: center;
}

@media (min-width: 1160px) {
  .site-footer .total-shots-container {
    flex-direction: row;
  }
}

.site-footer .total-shots-container .shots-count {
  color: var(--bs-dark-footer-heading);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.site-footer .total-shots-container .divsly-ball {
  width: 24px;
  height: 24px;
  margin-top: 8px;
  margin-bottom: 8px;
}

@media (max-width: 992px) {
  .footer-lower-content {
    padding: 20px 10px !important;
  }
}

@media (min-width: 1160px) {
  .site-footer .total-shots-container .divsly-ball {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 8px;
  }
}

.footer-cta {
  position: relative;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(224, 218, 255, 1) 100%
  );
}

.footer-floating-form input {
  outline: none;
  border: 2px solid var(--bs-info);
  border-radius: 50px;
  padding-left: 30px !important;
}

.footer-floating-form .get-started-now {
  height: 70px;
  right: 0px;
  border-radius: 50px !important;
  padding: 0px 25px !important;
}

.footer-badge p {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  background: #fff;
  color: #170653;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 45px;
  border: 1px solid #170653;
}

.footer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -27px;
}

.footer-badge::after {
  margin-left: 10px;
}
.social-links-container img {
  width: 26px;
}


.copyright-reserved {
  line-height: 2.4;
      font-size: 13px;
}
@media (max-width: 768px) {
  .copyright-year {
    text-align: center;
    width: fit-content !important;
    margin-top: 0;
    font-size: 16px;
  }
  .footer-content,
  .js-site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.second-footer {
  background-color: #fff;
}
.second-footer-heading {
  color: #000;
  margin-bottom: 17px;
}
.second-footer .link h6 {
  color: #3c3946 !important;
  font-weight: 400 !important;
}
.second-footer .link h6:hover {
  color: #6f4cff !important;
  font-weight: 400 !important;
}
.second-footer .footer-lower-content {
  color: #000 !important;
}
.footer-cta-inner {
  width: 100% !important;
  max-width: 45% !important;
}
.site-footer:not(.second-footer)::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../assets/img/footer.svg");
  z-index: -2;
}
.second-footer::before {
  content: none !important;
  display: none !important;
}
@media (min-width: 1700px) {
  .container-auto {
    max-width: 1350px !important;
    width: 100%;
  }
}
.cta-section::after {
    content: "";
    position: absolute;
    right: 4%;
    top: 0px;
    bottom: 75px;
    width: 38%;
    background: url("https://divsly.com/gofox.io/assets/img/cta-image.png") no-repeat bottom right;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}
.cta-header-text {
    font-size: 48.75px;
    color: #000 !important;
    line-height: 1.2;
    font-weight: 800;
    
}
.footer-header-logocntent{
  padding-right: 20px !important;
    
}
.book-your-demobtn {
    position: relative;
    overflow: hidden;
    z-index: 1;

    color: black !important;
    border: 1px solid black !important;
    background: #fff;
    transform: translate(0px);
    height: 44px !important;
    line-height: 42px !important;
    width: 100% !important;
    box-shadow: none;
    padding: 0 20px !important;
    margin-bottom: -17px !important;
    border-radius: 7px !important;

    transition: color 0.3s ease;
}

.book-your-demobtn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #e5e7eb;
    transition: left 0.35s ease;
    z-index: -1;
}

.book-your-demobtn:hover::before {
    left: 0;
}

.book-your-demobtn:hover {
    color: black !important;
}
  .headline { text-align: center; margin-bottom: 40px; }
  .headline h1 { font-size: 48.75px;
    line-height: 1.12;
    font-weight: 700; }
  .headline h1 span { color: #EB4D00; }

  .tab-row {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-bottom: 30px;
    flex-wrap: wrap;
  }

  .icon-btn {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    background: var(--grey-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  }

  /* the icon is just an <img>, not inline svg/code */
  .icon-btn img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    transition: filter .18s ease;
  }

  .icon-btn:hover { transform: translateY(-3px); background: #e2e4e8; }

  .icon-btn.active {
    background: var(--accent);
    box-shadow: 0 8px 18px rgba(234,76,76,0.35);
    transform: translateY(-3px) scale(1.05);
  }
  .icon-btn.active {
    outline: 3px solid #fff;
    outline-offset: -3px;
  }

  .icon-btn .tip {
    position: absolute;
    bottom: 66px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: #22242a;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .icon-btn.active .tip { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* panel that shows the full image for the selected tab */
  .window {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(20,20,30,0.18);
    border: 1px solid #e7e8ec;
  }
  .window img {
    display: block;
    width: 100%;
    height: auto;
    animation: fadeIn .3s ease;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .payment-methods-head{text-align:center;margin-bottom:6px;}
  .payment-methods-head h1{
        font-weight: 800;
    font-size: 48.75px;
    line-height: 1.2;
    margin:0 0 14px;
  }
  .payment-methods-head p{
   color: var(--tp-text-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
  }

  /* ================= STAGE ================= */
  .stage{
    position:relative;
    width:100%;
    max-width:1060px;
    height:260px;
    margin:20px auto 0;
  }
  .stage svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .stage svg.lines path{
    fill:none;
    stroke:var(--line);
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-dasharray:1 9;
    stroke-dashoffset:0;
    opacity:0;
    transition:opacity .5s ease;
  }
  .stage.ready svg.lines path{opacity:.85;}
  .stage svg.lines path.flow{animation:flowDash 1.4s linear infinite;}
  @keyframes flowDash{ to{ stroke-dashoffset:-40; } }

  /* ---- hub ---- */
  .hub{
    position:absolute;left:47.8%;top:53%;transform:translate(-50%,-50%);
    width:112px;height:112px;border-radius:50%;
    background:#fff;box-shadow:0 12px 34px rgba(17,24,69,.16);
    display:flex;align-items:center;justify-content:center;z-index:3;
    opacity:0;transform:translate(-50%,-50%) scale(.6);
    animation:popIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay:.05s;
  }
  .hub::before{
    content:"";position:absolute;inset:-14px;border-radius:50%;
    border:1.5px solid #ffe1cf;animation:ring 2.6s ease-out infinite;
  }
  .hub-icon{width:56px;height:56px;position:relative;z-index:1;}

  @keyframes ring{
    0%{transform:scale(.85);opacity:.9;}
    100%{transform:scale(1.35);opacity:0;}
  }

  /* ---- nodes ---- */
  .node{
    position:absolute;transform:translate(-50%,-50%) scale(.4);
    display:flex;flex-direction:column;align-items:center;gap:6px;
    z-index:2;opacity:0;
    animation:popIn .45s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  .node .badge{
    width:60px;height:60px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(17,24,69,.14);
    transition:transform .2s ease, box-shadow .2s ease;
    cursor:default;
  }
  .node:hover .badge{transform:translateY(-4px) scale(1.08);box-shadow:0 14px 28px rgba(17,24,69,.22);}
  .node .badge svg,.node .badge span{position:relative;}

  @keyframes popIn{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.4);}
    100%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  }
  @keyframes popInHub{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.6);}
    100%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  }

  /* float bob */
  .bob{animation:bob 3.6s ease-in-out infinite;}
  @keyframes bob{
    0%,100%{margin-top:0;}
    50%{margin-top:-7px;}
  }

  /* badge color variants */
  .bg-sepa{background:#2E7DE1;}
  .bg-discover{background:#F4841F;}
  .bg-paypalsmile{background:#1DBF60;}
  .bg-visa{background:#1A3E8C;}
  .bg-samsung{background:#173E77;}
  .bg-giropay{background:#fff;border:1px solid #eee;}
  .bg-d{background:#3EA1F0;}
  .bg-nicon{background:#83C11F;}
  .bg-share{background:#22C1E0;}
  .bg-tether{background:#3FA98C;}
  .bg-amex{background:#1F72CD;}
  .bg-wechat{background:#3EB93A;}
  .bg-mastercard{background:#111;}
  .bg-gpay{background:#fff;border:1px solid #eee;}
  .bg-paypal{background:#003087;}
  .bg-applepay{background:#000;}

  .txt{font-weight:600;color:#fff;font-size:9.5px;letter-spacing:.01em;text-align:center;line-height:1.15;}
  .txt.dark{color:#1a1a1a;}

  /* ================= responsive fallback grid ================= */
  .fallback{display:none;}
  @media (max-width:760px){
    .stage{display:none;}
    .fallback{
      display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
      max-width:520px;margin:34px auto 0;
    }
    .fallback .badge{
      width:56px;height:56px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 8px 18px rgba(17,24,69,.14);
      opacity:0;animation:popIn .4s ease forwards;
    }
  }
  .feature-card {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.feature-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay per card so they cascade in nicely */
.feature-card:nth-child(1).in-view { transition-delay: 0s; }
.feature-card:nth-child(2).in-view { transition-delay: 0.15s; }
.feature-card:nth-child(3).in-view { transition-delay: 0.3s; }
.feature-card:nth-child(4).in-view { transition-delay: 0.45s; }
    .scrollable-tab-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
}

.scrollable-tab-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 6px;
  scrollbar-width: none;
}

.scrollable-tab-list::-webkit-scrollbar {
  display: none;
}

.scrollable-tab-item {
  min-width: 126px;
  height: 113px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  border: none;
  background: #f8f9fa;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.scrollable-tab-list .scrollable-tab-item{
  background-color: #FFF9F6;
  border: 1px solid #FFE2D2;
}
.scrollable-tab-item.active .tab-label{
color: #EB4D00;
}

/* .scrollable-tab-list .scrollable-tab-item:nth-child(3) {
  background-color: #fff3e0;
}

.scrollable-tab-list .scrollable-tab-item:nth-child(4) {
  background-color: #fce4ec;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(5) {
  background-color: #fff3cf;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(6) {
  background-color: #ffecda;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(7) {
  background-color: #f3e8ff;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(8) {
  background-color: #e6faf3;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(9) {
  background-color: #ffe8d6;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(10) {
  background-color: #eaf2ff;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(11) {
  background-color: #fff9db;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(12) {
  background-color: #fceaf1;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(13) {
  background-color: #e9fbff;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(14) {
  background-color: #f5f1ea;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(15) {
  background-color: #faf3ee;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(16) {
  background-color: #fff9db;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(17) {
  background-color: #f0f7e9;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(18) {
  background-color: #e9fbff;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(19) {
  background-color: #f5f1ea;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(20) {
  background-color: #eef4ff;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(21) {
  background-color: #e8f5e9;
}
.scrollable-tab-list .scrollable-tab-item:nth-child(22) {
  background-color: #ffecda;
} */
.scrollable-tab-item .tab-icon {
  font-size: 18px;
  line-height: 1;
}
.tab-icon img {
  width: 35px;
  height: auto;
}
.scrollable-tab-item.active {
  border: 2px solid #EB4D00;
  border-radius: 8px;
}
.scrollable-tab-item:hover {
  border: 2px solid #EB4D00;
  border-radius: 8px;
}
.scrollable-tab-item .tab-label {
  color: black;
  font-size: 16px;
  font-weight: 600;
}

.scroll-arrow {
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #fff;
  cursor: pointer;
  font-size: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-arrow:hover {
  background-color: #f1f1f1;
}
.scroll-arrow.left {
  left: -8px;
}

.scroll-arrow.right {
  right: -8px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}

.scrollable-tab-content {
  position: relative;
  height: 930px;
  border-radius: 15px;
  margin-top: 5px;
  overflow: visible;
  transition: background 0.4s ease;
  z-index: 1;
  overflow: hidden;
  --tab-bg: linear-gradient(135deg, rgb(127 198 249), rgb(10 39 96));
}

.scrollable-tab-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background:  white !important;
  /* 
   background-image: url(""); */
  z-index: 0;
  border-radius: 15px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.scrollable-tab-content::after {
  content: "";
  position: absolute;
  inset: 0;

  background:  white !important;
  opacity: 0.8; /* 🔥 CONTROL HERE */

  z-index: 1;
  border-radius: 15px;
}
.tab-panel {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 2;
}

.tab-panel.active {
  opacity: 1;
}

.tab-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1000px;
}

.tab-panel img {
  max-width: 100%;
  height: auto;
  width: 820px;
}

.tab-below-text {
  width: 90%;
  max-width: 800px;
  color: #000;
  margin-top: 45px;
}
.tab-below-text h4 {
  font-size: 36.4px !important;
  font-weight: 600;
  color: #000;
  margin-bottom: 14px;
}
.tab-below-text p {
  font-size: 19.5px !important;
  font-weight: 400;
  line-height: 1.6;
  color: #000;
}

.scrollable-tab-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.scrollable-tab-content {
  background: none;
}

.scrollable-tab-list::-webkit-scrollbar {
  display: none;
}
@media (max-width: 1200px) {
  .scrollable-tab-content {
    height: 720px;
  }

  .tab-panel img {
    width: 650px;
  }
}

@media (max-width: 992px) {
  .scrollable-tab-content {
    height: 585px !important;
  }

  .tab-panel img {
    width: 442px;
  }
}
/* qr code steps */
.qr-steps-wrapper {
  position: relative;
}

.qr-image-wrapper {
  position: relative;
  width: 100%;
  align-items: center;
  text-align: center;
  justify-content: center;
  display: flex;
}

.qr-step-image {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.qr-img-step1 {
  animation: qrImg1 12s infinite;
}

.qr-img-step2 {
  animation: qrImg2 12s infinite;
}

.qr-img-step3 {
  animation: qrImg3 12s infinite;
}

/* KEYFRAMES (SYNCED WITH STEPS) */

/* STEP 1 IMAGE */
@keyframes qrImg1 {
  0%,
  30% {
    opacity: 1;
  }
  31%,
  100% {
    opacity: 0;
  }
}

@keyframes qrImg2 {
  0%,
  30% {
    opacity: 0;
  }
  31%,
  60% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0;
  }
}

@keyframes qrImg3 {
  0%,
  60% {
    opacity: 0;
  }
  61%,
  100% {
    opacity: 1;
  }
}
.qr-step-item {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
}

.qr-step-line-segment {
  margin-right: 60px;
}
.qr-step-line-segment::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #dcdcdc;
}

.qr-steps-icon-box {
  width: 60px;
  height: 60px;
  min-width: 60px; /* 🔥 important */
  min-height: 60px; /* 🔥 important */
  flex-shrink: 0; /* 🔥 prevents squishing */
  border-radius: 8px;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-right: 45px;
  transition: 0.4s ease;
}
.qr-steps-icon-box i {
  font-size: 24px !important;
  color: black !important;
}

.qr-step-item:nth-child(1) .qr-steps-icon-box {
  animation: qrIcon1 12s infinite;
}
.qr-step-item:nth-child(2) .qr-steps-icon-box {
  animation: qrIcon2 12s infinite;
}
.qr-step-item:nth-child(3) .qr-steps-icon-box {
  animation: qrIcon3 12s infinite;
}

.qr-seg1::before {
  animation: qrLine1 12s infinite;
}
.qr-seg2::before {
  animation: qrLine2 12s infinite;
}
.qr-seg3::before {
  animation: qrLine3 12s infinite;
}

@keyframes qrIcon1 {
  0%,
  30% {
    background: #e9d8fd;
    color: #7c3aed;
  }
  31%,
  100% {
    background: #ffffff;
    color: #000;
  }
}

@keyframes qrLine1 {
  0%,
  30% {
    background: #7c3aed;
  }
  31%,
  100% {
    background: #dcdcdc;
  }
}

@keyframes qrIcon2 {
  0%,
  30% {
    background: #ffffff;
    color: #000;
  }
  31%,
  60% {
    background: #e9d8fd;
    color: #7c3aed;
  }
  61%,
  100% {
    background: #ffffff;
    color: #000;
  }
}

@keyframes qrLine2 {
  0%,
  30% {
    background: #dcdcdc;
  }
  31%,
  60% {
    background: #7c3aed;
  }
  61%,
  100% {
    background: #dcdcdc;
  }
}

@keyframes qrIcon3 {
  0%,
  60% {
    background: #ffffff;
    color: #000;
  }
  61%,
  100% {
    background: #e9d8fd;
    color: #7c3aed;
  }
}

@keyframes qrLine3 {
  0%,
  60% {
    background: #dcdcdc;
  }
  61%,
  100% {
    background: #7c3aed;
  }
}

@media (max-width: 991px) {
  .qr-step-image {
    position: absolute;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
  }

  .qr-step-line-segment {
    height: 90px;
    margin-right: 25px;
  }

  .qr-steps-icon-box {
    width: 50px;
    height: 50px;
    margin-right: 18px;
  }

  .qr-steps-icon-box i {
    font-size: 20px !important;
  }

  .qr-step-content h5 {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .qr-image-wrapper {
    position: relative;
    min-height: 300px;
    margin-bottom: 40px;
  }

  .qr-step-image {
    width: 85%;
    left: 50%;
    transform: translateX(-50%);
  }

  .qr-step-item {
    align-items: flex-start;
    margin-bottom: 25px;
  }

  .qr-step-line-segment {
    height: 70px;
    margin-right: 15px;
    display: none;
  }

  .qr-steps-icon-box {
    width: 42px;
    height: 42px;
    font-size: 18px;
    margin-right: 12px;
  }

  .qr-steps-icon-box i {
    font-size: 18px !important;
  }

  .qr-step-content h5 {
    font-size: 1.65rem;
  }

  .qr-img-step3 {
    width: 80%;
    max-height: 294px;
    object-fit: contain;
  }
  .qr-img-step2 {
    width: 70%;
    max-height: 294px;
    object-fit: contain;
  }
}
@media (max-width: 1100px) {
  .qr-img-step1,
  .qr-img-step2,
  .qr-img-step3 {
    width: 80%;
    max-height: 294px;
    object-fit: contain;
  }
}

@media (max-width: 480px) {
  .qr-image-wrapper {
    min-height: 260px;
  }

  .qr-step-image {
    width: 90%;
  }

  .qr-step-content p {
    font-size: 16px;
  }

  .qr-step-line-segment {
    height: 60px;
  }
  .qr-img-step3 {
    width: 85%;
    max-height: 294px;
  }
  .tab-panel img {
    width: 350px !important;
  }
}
@media (max-width: 380px) {
  .tab-panel img {
    width: 284px !important;
  }
}


.section-divider-gap{
  margin-bottom: 160px;
}
.tab-text-btn a {
    color: #EB4D00;
    font-size: 14px;
}
 .gofox-head{ text-align:center; max-width:760px; margin:0 auto 40px; margin-bottom: 65px; }
  .gofox-head h1{
       font-size: 48.75px;
    line-height: 1.15;
    font-weight: 700;

    
    color: var(--gofox-ink); letter-spacing:-0.01em;
  }

  /* TABS */
  .gofox-tabs{
    
    display:flex;
    justify-content:center;
    align-items:center;
    gap:36px;
    position:relative;
    max-width:520px;
    width:fit-content;
    margin:0 auto 44px;
    border-bottom:1px solid var(--gofox-line);
  }
  .gofox-tab{
    background:none; border:none; cursor:pointer;
    display:flex; align-items:center; gap:8px;
   font-size:15px; font-weight:700;
    color: var(--gofox-sub);
    padding:0 2px 18px;
    transition: color .25s ease;
  }
  .gofox-tab svg{ width:17px; height:17px; opacity:.7; transition:opacity .25s ease; }
  .gofox-tab.gofox-active{ color: var(--gofox-ink); font-weight:700; }
  .gofox-tab.gofox-active svg{ opacity:1; }
  .gofox-tab-indicator {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    background: #1B1D2A;
    border-radius: 10px;
    transition: transform .35s ease, width .35s ease;
    will-change: transform, width;
}

  /* STAGE */
  .gofox-stage{ overflow:hidden; }
  .gofox-track{
    display:flex; gap:24px;
    transition: transform .55s cubic-bezier(.65,0,.35,1);
    will-change: transform;
  }

  .gofox-slide{
    flex: 0 0 min(880px, 84vw);
  }
  .gofox-panel{
    background:#fff;
    border:1px solid var(--gofox-line);
    border-radius:22px;
    padding:38px;
    display:grid;
    grid-template-columns: 1fr 1.05fr;
    gap:36px;
    align-items:center;
    opacity:.35; filter:blur(1px) saturate(.7);
    transform: scale(.97);
    transition: opacity .5s ease, filter .5s ease, transform .5s ease;
    box-shadow: 0 30px 60px -40px rgba(27,29,42,.25);
  }
  .gofox-slide.gofox-active .gofox-panel{
    opacity:1; filter:none; transform:scale(1);
  }

  .gofox-panel-text .gofox-eyebrow{
     font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color: var(--gofox-orange); margin-bottom:14px;
  }
  .gofox-panel-text h3{
   font-weight:600; font-size:25px; line-height:1.32;
    color: var(--gofox-ink); margin-bottom:14px; letter-spacing:-0.01em;
  }
  .gofox-panel-text p{
    font-size:14px; line-height:1.7; color: var(--gofox-sub); margin-bottom:26px; max-width:380px;
  }
  .gofox-cta{
    display:none; align-items:center; gap:9px;
    background: var(--gofox-orange); color:#fff;
    font-weight:600; font-size:14px;
    border:none; border-radius:10px; padding:13px 22px;
    cursor:pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .gofox-cta:hover{ background: var(--gofox-orange-dark); transform: translateY(-2px); }
  .gofox-cta svg{ width:14px; height:14px; }

  /* mockups */
  .gofox-mock{
    background:#F4F4F8;
    border-radius:16px;
    padding:18px;
    display:flex; gap:12px;
    min-height:280px;
  }
  .gofox-mock .gofox-side-list{
    flex:0 0 128px;
    background:#fff; border:1px solid var(--gofox-line); border-radius:12px;
    padding:14px 12px; display:flex; flex-direction:column; gap:11px;
  }
  .gofox-mock .gofox-side-list .gofox-row{
    display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--gofox-sub); font-weight:500;
  }
  .gofox-mock .gofox-side-list .gofox-row svg{ width:13px; height:13px; opacity:.55; }
  .gofox-mock .gofox-side-list .gofox-row.gofox-hi{ color:var(--gofox-ink); font-weight:700; }

  .gofox-mock .gofox-cardbox{
    flex:1;
    background:#fff; border:1px solid var(--gofox-line); border-radius:12px;
    padding:14px;
    display:flex; flex-direction:column; gap:12px;
  }
  .gofox-cardbox .gofox-cb-head{
    display:flex; align-items:center; justify-content:space-between;
    font-size:12.5px; font-weight:700; color:var(--gofox-ink);
  }
  .gofox-mini-card{
    background:#FCF3F1; border-radius:10px; padding:10px 12px;
    display:flex; flex-direction:column; gap:7px;
  }
  .gofox-mini-bar{ height:6px; border-radius:4px; background: var(--gofox-orange); width:60%; }
  .gofox-mini-track{ height:6px; border-radius:4px; background:#EDE9E6; }
  .gofox-mini-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
  .gofox-mini-foot .gofox-lbl{ font-size:10.5px; color:var(--gofox-sub); }
  .gofox-avatars{ display:flex; }
  .gofox-avatars span{
    width:18px; height:18px; border-radius:50%; border:1.5px solid #fff; margin-left:-6px;
    background: var(--gofox-blue); font-size:8px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;
  }
  .gofox-avatars span:first-child{ margin-left:0; }

  @media (max-width: 760px){
    .gofox-head h1{ font-size:28px; }
    .gofox-tabs{ gap:20px; }
    .gofox-panel{ grid-template-columns:1fr; padding:26px; }
    .gofox-panel-text p{ max-width:none; }
  }
   .carousel-heading {
    max-width: 1200px;
    margin: 0 auto 36px;
    padding: 0 34px;
  }
  .carousel-heading h1 {
        font-size: 48.75px;
    line-height: 1.12;
    font-weight: 600;
    color: #12131a;
    margin: 0;
    line-height: 1.25;
  }

  /* ---- carousel viewport ---- */
  .carousel-viewport {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }

  .carousel-track {
    display: flex;
    gap: 28px;
    width: max-content;
    padding: 10px 34px;
    animation: scroll 34s linear infinite;
  }
  /* pause the whole track only while the mouse is over it */
  .carousel-viewport:hover .carousel-track {
    animation-play-state: paused;
  }

  @keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* track is duplicated, so -50% = one full loop */
  }

  .carouselcard {
    flex: 0 0 auto;
    width: 660px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    box-shadow: 0 20px 40px rgba(20,20,40,0.08);
    overflow: hidden;
    height: 344px;
    height: 344px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .carouselcard-img {
    width: 250px;
    flex-shrink: 0;
    position: relative;
        height: 344px;
  }
  .carouselcard-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .carouselcard-body {
    flex: 1;
    padding: 22px 24px 18px;
    min-width: 0;
  }

  .brand-img {
    height: 28px;
    width: 100px;
        font-weight: 700;
    font-size: 17px;
  }

  .carouselcard-title {
        font-size: 30px;
    font-weight: 700;
    padding-bottom: 5px;
  }

  .carouselcard-desc {
    font-size: 12.5px;
    color: #7d8087;
    line-height: 1.55;
    margin: 0 0 16px;
    margin: 0 0 16px;
    border-bottom: 1px solid rgba(1, 16, 61, .08);
    /* margin-bottom: 38px; */
    padding-bottom: 27px;
  }

  .divider {
    border: none;
    border-top: 1px solid #eceef1;
    margin: 0 0 14px;
  }

  .carouselcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .footer-col { font-size: 11px; }
  .footer-col .label { color: #a3a6ad; margin-bottom: 3px; }
  .footer-col .value { color: #12131a; font-weight: 700; font-size: 12.5px; }

  .arrow-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ece9fb;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6f5bd6;
    cursor: pointer;
    flex-shrink: 0;
  }
  .arrow-btn svg { width: 15px; height: 15px; }

  @media (max-width: 600px) {
    .carouselcard { width: 320px; }
    .carouselcard-img { width: 130px; }
  }
  .why-gofox-theme{
    --gofox-ink:#1B1D2A;
    --gofox-sub:#6E7180;
    --gofox-orange:#FF6A3D;
    --gofox-orange-dark:#E8542A;
    --gofox-line:#E7E6EF;
    --gofox-bg:#F6F5FA;
    --gofox-blue:#3B5BE0;
  }

  .crm-section-animate .hero-panel,
.crm-section-animate .leadscore-panel,
.crm-section-animate .analytics-panel,
.crm-section-animate .sequences-panel,
.crm-section-animate .pipeline-panel {
   opacity: 0;
   transform: translateY(50px);
   transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.crm-section-animate.in-view .hero-panel,
.crm-section-animate.in-view .leadscore-panel,
.crm-section-animate.in-view .analytics-panel,
.crm-section-animate.in-view .sequences-panel,
.crm-section-animate.in-view .pipeline-panel {
   opacity: 1;
   transform: translateY(0);
}

/* Stagger so cards rise up one after another */
.crm-section-animate.in-view .hero-panel       { transition-delay: 0s; }
.crm-section-animate.in-view .leadscore-panel   { transition-delay: 0.12s; }
.crm-section-animate.in-view .analytics-panel   { transition-delay: 0.2s; }
.crm-section-animate.in-view .sequences-panel   { transition-delay: 0.3s; }
.crm-section-animate.in-view .pipeline-panel    { transition-delay: 0.4s; }

.voices-section-animate .quotewall > div {
   opacity: 0;
   transform: translateY(45px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.voices-section-animate.in-view .quotewall > div {
   opacity: 1;
   transform: translateY(0);
}

/* Stagger the tiles so they rise up one after another */
.voices-section-animate.in-view .quotewall > div:nth-child(1) { transition-delay: 0s; }
.voices-section-animate.in-view .quotewall > div:nth-child(2) { transition-delay: 0.08s; }
.voices-section-animate.in-view .quotewall > div:nth-child(3) { transition-delay: 0.16s; }
.voices-section-animate.in-view .quotewall > div:nth-child(4) { transition-delay: 0.24s; }
.voices-section-animate.in-view .quotewall > div:nth-child(5) { transition-delay: 0.32s; }
.voices-section-animate.in-view .quotewall > div:nth-child(6) { transition-delay: 0.4s; }
.voices-section-animate.in-view .quotewall > div:nth-child(7) { transition-delay: 0.48s; }

 .cf-section-animate .cf-header,
.cf-section-animate .cf-card {
   opacity: 0;
   transform: translateY(45px);
   transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}

.cf-section-animate.in-view .cf-header,
.cf-section-animate.in-view .cf-card {
   opacity: 1;
   transform: translateY(0);
}

/* Header rises first, then the cards cascade in */
.cf-section-animate.in-view .cf-header { transition-delay: 0s; }

.cf-section-animate.in-view .cf-card:nth-child(1) { transition-delay: 0.15s; }
.cf-section-animate.in-view .cf-card:nth-child(2) { transition-delay: 0.22s; }
.cf-section-animate.in-view .cf-card:nth-child(3) { transition-delay: 0.29s; }
.cf-section-animate.in-view .cf-card:nth-child(4) { transition-delay: 0.36s; }
.cf-section-animate.in-view .cf-card:nth-child(5) { transition-delay: 0.43s; }
.cf-section-animate.in-view .cf-card:nth-child(6) { transition-delay: 0.5s; }
.crmft-section-animate .crmft-hero > div,
.crmft-section-animate .crmft-visual,
.crmft-section-animate .crmft-card {
   opacity: 0;
   transform: translateY(50px);
   transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.crmft-section-animate.in-view .crmft-hero > div,
.crmft-section-animate.in-view .crmft-visual,
.crmft-section-animate.in-view .crmft-card {
   opacity: 1;
   transform: translateY(0);
}

/* Hero text first, visual panel right after */
.crmft-section-animate.in-view .crmft-hero > div:first-child { transition-delay: 0s; }
.crmft-section-animate.in-view .crmft-visual                 { transition-delay: 0.15s; }

/* Feature cards cascade in below the hero */
.crmft-section-animate.in-view .crmft-card:nth-child(1) { transition-delay: 0.3s; }
.crmft-section-animate.in-view .crmft-card:nth-child(2) { transition-delay: 0.4s; }
.crmft-section-animate.in-view .crmft-card:nth-child(3) { transition-delay: 0.5s; }
.powerful-tools-hero {
  
    --ink:#0b1220;
    --white:#ffffff;
    --gray-text:#8a93a3;
    --gray-line:#e6e9ef;
    --radius-lg:20px;
    --radius-md:14px;
    background: linear-gradient(to bottom, #000000 0%, #1A0700 20%, #4A1700 70%, #8A2D00 100%, #EB4D00 80%);
  }

  .cta-footer {
  position: relative;
  z-index: 10;
  transform: translateY(140px); /* 👈 pushes CTA down over footer */
}

.cta-section {
  background: white;
  border-radius: 20px;
  padding: 60px !important;
  position: relative;
  overflow: visible;
 
  border: 1px solid #ece8f5;
}

.site-footer:not(.second-footer) {
  padding-top: 120px; /* adjust based on overlap */
}
.cta-btn {
  position: relative;
  color: #501e5e;
  border-radius: 0.55rem !important;
  font-weight: 700;
  font-size: 1.3rem;
  overflow: hidden;
  z-index: 1;
  padding: 20px 28px;
  background: #EB4D00 !important;
  color: #fff !important;
}

.cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #EB4D00;
  z-index: -1;
}
.cta-btn:hover {
  background: #c93700 !important;
}

.cta-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #c93700;
  transition: width 0.4s ease;
  z-index: -1;
}
a:hover {
    transition: color 0.2s ease;
}

.cta-btn:hover::after {
  width: 100%;
}
.footer-sub-titles-includes{
  
  color: #000 !important;
}
@media (max-width: 900px) {
  .cta-section {
    padding: 32px !important;
    text-align: center;
  }

  .cta-section::after {
    display: none;
  }

  .cta-section .mb-15 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cta-section .sub-titles-includes {
    width: 100% !important;
    text-align: center;
  }

  .cta-section .d-flex {
    justify-content: center;
  }
  .cta-footer {
    position: relative;
    z-index: 10;
    transform: translateY(73px);
  }
}

/* footer section start */

.site-footer {
  font-size: 14px;

  line-height: 20px;
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../media/illustrations/footer.png");
  z-index: -2;
}

.site-footer::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0.9;
  background-repeat: no-repeat;
  background-size: cover;
  /* background-color: #2b1d64; */
  z-index: -1;
}

.site-footer .footer-main-content {
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 48px 0 32px;
  /* border-bottom: 1px solid #7a7a7a; */
}

.footer-cta-input {
  padding-right: 185px !important;
}

.get-started-now {
  border-radius: 0.42rem !important;
}

@media (max-width: 768px) {
  .site-footer .footer-main-content {
    align-items: center;
  }

  .site-footer .divsly-wordmark {
    margin: 0 auto;
    display: block;
  }

  .site-footer .tagline {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .site-footer:not(.second-footer) {
    padding-top: 68px;
  }
}
@media (max-width: 992px) {
  .form-floating #floatingInput {
    border-radius: 0.55rem;
  }

  .site-footer .footer-main-content {
    align-items: center;
  }

  .site-footer .divsly-wordmark {
    margin: 0 auto;
    display: block;
  }

  .site-footer .tagline {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .get-started-now {
    border-radius: 0.55rem !important;
  }

  .footer-cta-input {
    padding-right: 15px !important;
    border-radius: 0.55rem !important;
  }
  .cta-signup {
    padding-bottom: 40px !important;
  }
  .total-shots-container {
    padding-top: 10px;
  }
}

.other-free-tools {
  padding: 48px 0 32px;
  /* border-bottom: 1px solid #e7e7e9; */
  border-bottom: 1px solid #d2d2d2;
}

@media (min-width: 1160px) {
  .site-footer .footer-main-content {
    flex-direction: row;
    padding: 72px 0 50px 0px;
  }
  .other-free-tools {
    padding: 50px 0;
  }
}

.site-footer .divsly-wordmark {
  width: 120px;
  -webkit-transition: fill 200ms ease;
  transition: fill 200ms ease;
  fill: #ea4c89;
     
}

.site-footer .divsly-wordmark:hover {
  fill: #bb3d6e;
}

.site-footer .tagline {
  max-width: 256px;
  margin: 20px 0;
  color: #fff !important;
}

.site-footer .social-links-container a {
  color: #3d3d4e;
}

.site-footer .social-links-container a:hover {
  color: #0d0c22;
}

.site-footer .social-links-container .icon {
  width: 18px;
  height: 18px;
  /* margin-top: 8px; */
  margin-right: 14px;
}

.site-footer .social-links-container a:nth-child(4) svg {
  margin-right: 0px !important;
}

.site-footer .links-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.footer-last {
  color: #000;
  font-size: 13px;
}
.footer-last:hover {
  color: #eb4d00ba !important;
}
@media (min-width: 768px) {
  .site-footer .links-container {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

@media (min-width: 1160px) {
  .site-footer .links-container > .links-column {
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .site-footer > .links-column {
    margin-right: 36px;
  }

  .site-footer > .links-column:last-of-type {
    margin-right: 0;
  }
}

.site-footer .links-column {
  width: 50%;
  padding: 0px 5px 0px 0px;
}

@media (min-width: 1160px) {
  .site-footer .links-column {
    width: fit-content;
    /* margin-left: 40px; */
  }
}

.site-footer .link-heading,
.footer-contact .link-heading {
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  margin-top: 32px;
  /* color: #0d0c22; */
  color: #fff;
}

.footer-contact div {
  color: #fff;
}

@media (min-width: 1160px) {
  .site-footer .link-heading {
    margin-top: 0;
  }

  .site-footer .link-heading:not(:first-child) {
    margin-top: 24px;
  }
}

.site-footer .link h6 {
  display: block;
  margin-top: 11px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.site-footer .link h6:hover {
  color: #eb4d00ba !important;
  font-weight: 400;
}

.cntry {
  color: var(--bs-dark-footer-heading) !important;
}

.site-footer .link:hover {
  color: #0d0c22;
}

.site-footer .footer-lower-content {
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: center;
  padding: 32px 0;
  /* color: #6e6d7a; */
  color: #fff;
}

@media (min-width: 1160px) {
  .site-footer .footer-lower-content {
    
    padding: 20px 0;
  }
}

@media (max-width: 992px) {
  .site-footer .total-shots-container div:first-child {
    padding-right: 0px;
    padding-top: 5px;
    border-right: 0px;
    margin-right: 0px;
  }
 
}

.site-footer .total-shots-container {
  display: flex;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  -ms-flex-align: center;
  align-items: center;
}

@media (min-width: 1160px) {
  .site-footer .total-shots-container {
    flex-direction: row;
  }
}

.site-footer .total-shots-container .shots-count {
  color: var(--bs-dark-footer-heading);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.site-footer .total-shots-container .divsly-ball {
  width: 24px;
  height: 24px;
  margin-top: 8px;
  margin-bottom: 8px;
}

@media (max-width: 992px) {
  .footer-lower-content {
    padding: 20px 10px !important;
  }
}

@media (min-width: 1160px) {
  .site-footer .total-shots-container .divsly-ball {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 8px;
  }
}

.footer-cta {
  position: relative;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(224, 218, 255, 1) 100%
  );
}

.footer-floating-form input {
  outline: none;
  border: 2px solid var(--bs-info);
  border-radius: 50px;
  padding-left: 30px !important;
}

.footer-floating-form .get-started-now {
  height: 70px;
  right: 0px;
  border-radius: 50px !important;
  padding: 0px 25px !important;
}

.footer-badge p {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  background: #fff;
  color: #170653;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 45px;
  border: 1px solid #170653;
}

.footer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -27px;
}

.footer-badge::after {
  margin-left: 10px;
}
.social-links-container img {
  width: 26px;
}

.copyright-year {
  font-size: 19px;
  margin-top: 4px;
}

.copyright-reserved {
  line-height: 2.4;
}
@media (max-width: 768px) {
  .copyright-year {
    text-align: center;
    width: 100%;
    margin-top: 0;
    font-size: 16px;
  }
  .footer-content,
  .js-site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.second-footer {
  background-color: #fff;
}
.second-footer-heading {
  color: #000;
  margin-bottom: 17px;
}
.second-footer .link h6 {
  color: #3c3946 !important;
  font-weight: 400 !important;
}
.second-footer .link h6:hover {
  color: #6f4cff !important;
  font-weight: 400 !important;
}
.second-footer .footer-lower-content {
  color: #000 !important;
}
.footer-cta-inner {
  width: 100% !important;
  max-width: 45% !important;
}
.site-footer:not(.second-footer)::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../assets/img/footer.svg");
  z-index: -2;
}
.second-footer::before {
  content: none !important;
  display: none !important;
}
@media (min-width: 1700px) {
  .container-auto {
    max-width: 1350px !important;
    width: 100%;
  }
}
.cta-section::after {
    content: "";
    position: absolute;
    right: 4%;
    top: 0px;
    bottom: 75px;
    width: 38%;
    background: url("https://divsly.com/gofox.io/assets/img/cta-image.png") no-repeat bottom right;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}
.cta-header-text {
    font-size: 48.75px;
    color: #000 !important;
    line-height: 1.2;
    font-weight: 800;
}
.footer-header-logocntent{
  padding-right: 20px !important;
    
}
.tp-brand-area-header{
  font-weight: 600;
    color: #C6c6c6;
    margin-bottom: 36px; display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.tp-service-sm-title a {
    font-size: 15px;
    font-family: var(--tp-ff-head);
    font-weight: 400;
    
}
.innerfeatue-heropanel{
      background: linear-gradient(135deg, #4C6EF5 0%, #7B5CF0 38%, #B15CE0 62%, #F0839E 100%);
    color: #fff;
    border: none;
    justify-content: flex-start;
    gap: 110px;
}

.integrations-innerfeatueherocard,
.integrations-innerfeatueleadscore {
  opacity: 0;
  transform: translateX(-80px);
  animation: slideLeftToRight 0.8s ease forwards;
  animation-play-state: paused;
}

/* Slight stagger so the lead-score card follows the hero card */
.integrations-innerfeatueleadscore {
  animation-delay: 0.2s;
}

  @keyframes slideLeftToRight {
    from {
      opacity: 0;
      transform: translateX(-80px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  
  .fc-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
    
    margin:0 auto;
  }
  /* space between the two stacked grids */
  .fc-grid + .fc-grid{
    margin-top:32px;
  }
  @media (max-width: 900px){
    .fc-grid{grid-template-columns:repeat(2, 1fr);}
  }
  .fc-card{
    background:var(--fc-card-bg);
    border-radius:16px;
    padding:24px;
    display:flex;
    flex-direction:column;

    /* bottom-to-top reveal, initial state */
    opacity:0;
    transform:translateY(36px);
    transition:opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
               transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .fc-card.fc-in-view{
    opacity:1;
    transform:translateY(0);
  }
  .fc-visual{
    height:180px;
    border-radius:12px;
    margin-bottom:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .fc-card h3{
    margin:0 0 8px;
    font-size:18px;
    font-weight:600;
    color:#14121f;
  }
  .fc-card p{
       font-size: 0.9rem;
    line-height: 1.55;
    color: var(--dvs-ink-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* --- Card 1: Performance chart --- */
  .fc-chart-panel{
    background:#fff;
    width:88%;
    height:82%;
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
    padding:16px 18px;
    position:relative;
  }
  .fc-chart-panel::before,
  .fc-chart-panel::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:10px;
    background:#fff;
    z-index:-1;
  }
  .fc-chart-panel::before{ transform:translate(6px,6px) scale(0.97); opacity:0.6; }
  .fc-chart-panel::after{ transform:translate(11px,11px) scale(0.94); opacity:0.3; }
  .fc-chart-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:11px;
    font-weight:600;
    color:#3f3f46;
    margin-bottom:14px;
  }
  .fc-chart-badge{
    color:#16a34a;
    background:#dcfce7;
    padding:2px 6px;
    border-radius:6px;
    font-size:10px;
  }
  .fc-bars{
    display:flex;
    align-items:flex-end;
    gap:6px;
    height:78px;
  }
  .fc-bars span{
    flex:1;
    border-radius:3px 3px 0 0;
    background:linear-gradient(180deg, #818cf8, #6366f1);
  }
  .fc-bar-labels{
    display:flex;
    justify-content:space-between;
    margin-top:6px;
    font-size:8px;
    color:#a1a1aa;
  }

  /* --- Card 2: Integrations hub --- */
  .fc-hub-bg{
    background:var(--fc-card-bg);
  }
  .fc-hub{
    position:relative;
    width:180px;
    height:180px;
  }
  .fc-orbit{
    position:absolute;
    border:1px solid #d4d4d8;
    border-radius:50%;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
  }
  .fc-orbit.fc-o1{width:90px;height:90px;}
  .fc-orbit.fc-o2{width:150px;height:150px;}
  .fc-hub-center{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:56px;height:56px;
    background:var(--fc-accent-blue);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(79,91,213,0.4);
    z-index:2;
  }
  .fc-node{
    position:absolute;
    width:34px;height:34px;
    background:#fff;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;
    box-shadow:0 3px 8px rgba(0,0,0,0.08);
  }
  .fc-node.fc-n1{top:-6px; left:50%; transform:translateX(-50%); background:#fef3c7;}
  .fc-node.fc-n2{top:26px; left:-6px; background:#ffedd5;}
  .fc-node.fc-n3{top:26px; right:-6px; background:#dbeafe;}
  .fc-node.fc-n4{bottom:-6px; left:12px; background:#f4f4f5; opacity:0.6;}
  .fc-node.fc-n5{bottom:16px; right:6px; background:#fce7f3; opacity:0.5;}

  /* --- Card 3: Responsive design --- */
  .fc-responsive-scene{
    background:var(--fc-card-bg);
    position:relative;
  }
  .fc-browser{
    position:absolute;
    left:8%;
    top:10%;
    width:76%;
    height:80%;
    background:#fff;
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,0.06);
    padding:14px 16px;
  }
  .fc-browser .fc-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--fc-accent-blue);
    display:inline-block;
    margin-bottom:10px;
  }
  .fc-browser .fc-line{
    height:7px;
    border-radius:4px;
    background:#e4e4e7;
    margin-bottom:8px;
  }
  .fc-browser .fc-line.fc-w60{width:60%;}
  .fc-browser .fc-line.fc-w40{width:40%;}
  .fc-browser .fc-cta{
    width:38%;
    height:9px;
    border-radius:5px;
    background:var(--fc-accent-blue);
    margin:12px 0 10px;
  }
  .fc-browser .fc-block{
    width:100%;
    height:60px;
    border-radius:8px;
    background:#e4e4e7;
    margin-bottom:10px;
  }
  .fc-phone{
    position:absolute;
    right:6%;
    top:26%;
    width:34%;
    height:64%;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,0.1);
    padding:12px 10px;
  }
  .fc-phone .fc-dot{
    width:5px;height:5px;
    background:var(--fc-accent-blue);
    border-radius:50%;
    margin-bottom:8px;
  }
  .fc-phone .fc-line{
    height:5px;
    border-radius:3px;
    background:#e4e4e7;
    margin-bottom:6px;
  }
  .fc-phone .fc-line.fc-w70{width:70%;}
  .fc-phone .fc-line.fc-w50{width:50%;}
  .fc-phone .fc-cta{
    width:60%;
    height:7px;
    border-radius:4px;
    background:var(--fc-accent-blue);
    margin-top:8px;
  }
  .integrations-hero{
    position:relative;
    margin:0 auto;
    /* padding:160px 24px 0px 96px; */
    text-align:center;
  }
  .integrations-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--white);
    border:1px solid var(--purple-100);
    border-radius:999px;
    padding:8px 18px;
    font-size:13px;
    font-weight:600;
    color:#EB4D00;
    box-shadow:0 2px 10px rgba(90,60,200,0.08);
    animation:fadeDown 0.6s ease both;
  }
  .integrations-badge .integrations-dot{
    width:7px;height:7px;border-radius:50%;
  background: #EB4D00;
    box-shadow: 0 0 0 3px #eb4d0033;
  }
 
  .integrations-sub{
    color:var(--muted);
    font-size:16px;
    line-height:1.6;
    max-width:520px;
    margin:0 auto 36px;
    animation:fadeUp 0.7s ease both 0.2s;
  }
  .cta-row{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-bottom:45px;
    
    animation:fadeUp 0.7s ease both 0.3s;
  }
  .btn{
    font-size:15px;
    font-weight:700;
    padding:14px 28px;
    border-radius:10px;
    cursor:pointer;
    border:none;
    transition:transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn:focus-visible{outline:3px solid var(--purple-500); outline-offset:2px;}
  .btn-primary{
    background:linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%);
    color:#fff;
    box-shadow:0 8px 20px rgba(240,140,50,0.35);
  }
  .btn-secondary{
    background:var(--white);
    color:var(--purple-700);
    border:1.5px solid var(--purple-500);
  }
  .btn-secondary:hover{background:var(--purple-100);}

  /* Flow diagram */
  .integrations-flow{
    position:relative;
    height:420px;
    max-width:900px;
    margin:0 auto;
  }
  .integrations-flow svg{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    overflow:visible;
  }
  .flow-line{
    fill:none;
    stroke:var(--line);
    stroke-width:1.4;
    stroke-dasharray:4 5;
    opacity:0.7;
  }
  .flow-line.active{
    stroke:var(--purple-500);
    stroke-dasharray:none;
    opacity:0.9;
    animation:dashMove 3s linear infinite;
  }

  .integrations-hub{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:112px; height:112px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--purple-500), var(--purple-900));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 15px 40px rgba(80,50,200,0.35), inset 0 0 0 6px rgba(255,255,255,0.08);
    z-index:3;
  }
  .integrations-hub::before{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:50%;
    border:1.5px dashed rgba(139,108,240,0.4);
    animation:spin 18s linear infinite;
  }
  .integrations-hub svg{position:static; width:46px; height:46px;}

  .integrations-node{
    position:absolute;
    width:64px; height:64px;
    border-radius:50%;
    background:var(--white);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(90,60,200,0.15);
    z-index:2;
    /* animation:floatY 5s ease-in-out infinite; */
  }
  .integrations-node img{width:40px;height:40px;object-fit:contain;border-radius:6px;}
  .integrations-node.n1{top:4%; left:8%; animation-delay:0s;}
  .integrations-node.n2{top:32%; left:5%; animation-delay:0.6s;}
  .integrations-node.n3{top:63%; left:8%; animation-delay:1.2s;}
  .integrations-node.n4{top:4%; right:6%; animation-delay:0.3s;}
  .integrations-node.n5{top:33%; right:0%; animation-delay:0.9s;}
  .integrations-node.n6{top:64%; right:5%; animation-delay:1.5s;}

 
  .stat-pill .top{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-weight:800; font-size:18px;
  }
  .stat-pill .top .integrations-dot{width:8px;height:8px;border-radius:50%;background:#37c46a;}
  .stat-pill .bottom{font-size:13px; color:var(--muted); margin-top:2px;}

  @keyframes fadeDown{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}
  @keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
  @keyframes floatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
  @keyframes spin{to{transform:rotate(360deg);}}
  @keyframes dashMove{to{stroke-dashoffset:-40;}}

  @media (max-width:720px){
    .flow{height:520px;}
    .integrations-node{width:52px;height:52px;}
    .integrations-node img{width:26px;height:26px;}
    .integrations-hub{width:88px;height:88px;}
    .integrations-hub svg{width:36px;height:36px;}
    .integrations-node.n1{top:2%; left:2%;}
    .integrations-node.n2{top:34%; left:-2%;}
    .integrations-node.n3{top:66%; left:2%;}
    .integrations-node.n4{top:2%; right:2%;}
    .integrations-node.n5{top:34%; right:-2%;}
    .integrations-node.n6{top:66%; right:2%;}
    .stat-pill{padding:10px 18px;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;}
  }
.saleslogin-btn.tp-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;

    height: 61px;
    line-height: 61px;
    width: 100%;
    box-shadow: none;
    padding: 0 20px;
    text-transform: capitalize;
    margin-bottom: -17px;
    border-radius: 10px;

    background: var(--tp-theme-1);
    color: #fff;
    border: 1px solid transparent;
    width: 200px;
}

.saleslogin-btn.tp-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.18); /* Light overlay */
    transition: left 0.4s ease;
    z-index: 0;
}

.saleslogin-btn.tp-btn:hover::before {
    left: 0;
}


.salesdemo-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;

    color: #000 !important;
    border: 1px solid #000 !important;
    background: #fff;
    transform: translate(0px);
    height: 61px !important;
    line-height: 61px !important;
    width: 100% !important;
    box-shadow: none;
    padding: 0 20px !important;
    margin-bottom: -17px !important;
    border-radius: 10px !important;

    transition: color 0.3s ease;
    width: 200px !important;
    font-size: 16px;
    font-weight: 600;
}

.salesdemo-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #e5e7eb;
    transition: left 0.35s ease;
    z-index: -1;
}

.salesdemo-btn:hover::before {
    left: 0;
}

.salesdemo-btn:hover {
    color: #000 !important;
}
.dvs-compare-root {
    --dvs-bg: #ffffff;
    --dvs-ink: #14121f;
    --dvs-ink-soft: #5b596a;
    --dvs-purple: #6d28d9;
    --dvs-card-border: #eceaf1;
    --dvs-card-shadow: 0 1px 2px rgba(20,18,31,0.04), 0 8px 24px -12px rgba(20,18,31,0.08);
  }

  .dvs-compare * { box-sizing: border-box; }

  


  .dvs-section-head {
    text-align: center;
    max-width: 640px;
    
  }

  .dvs-section-head span {
    color: #EB4D00;
    font-weight: 700;
    font-size: 0.95rem;
  }


  .dvs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .dvs-card {
    background: #ffffff;
    border: 1px solid var(--dvs-card-border);
    border-radius: 14px;
    
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .dvs-card:hover {
    transform: translateY(-3px);
    /* box-shadow: 0 4px 8px rgba(20,18,31,0.06), 0 16px 32px -14px rgba(20,18,31,0.14); */
  }

  .dvs-logo-panel {
    height: 88px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    justify-content: start;
    border-bottom: 1px solid #e5e5e5 !important;
  }

  .dvs-logo-text {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
  }
.dvs-logo-text img{
  height: 50px;
}

  .dvs-card-body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
  }

  .dvs-vs-title {
    font-weight: 700;
    font-size: 18px;
    color: var(--dvs-ink);
  }

  .dvs-vs-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--dvs-ink-soft);
    margin: 0;
    /* clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .dvs-read-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #EB4D00;
    text-decoration: none;
    width: fit-content;
    padding-top: 4px;
  }

  .dvs-read-more svg {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
  }

  .dvs-read-more:hover svg { transform: translateX(3px); }
  .dvs-read-more:focus-visible { outline: 2px solid var(--dvs-purple); outline-offset: 3px; border-radius: 4px; }

  /* per-card accent backgrounds, matching the reference tints */
  .dvs-bg-rose   { background: #fdecef; }
  .dvs-bg-blue   { background: #e9f1fd; }
  .dvs-bg-violet { background: #f0edfb; }
  .dvs-bg-yellow { background: #fdf6d8; }
  .dvs-bg-pink   { background: #fdecef; }
  .dvs-bg-mint   { background: #e6f9ee; }

  @media (max-width: 960px) {
    .dvs-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 640px) {
    .dvs-grid { grid-template-columns: 1fr; }
  }
  .sub-title-sm-invisible{
    display: none;
  }
  .footer-section-margin{
        margin-top: -18px !important;
  }

 
   .footer-section-spacing{
         margin-top: 48.75px;
  }

   /* Scroll-triggered bottom-to-top reveal */
  .byt-reveal {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .byt-reveal.byt-in-view {
    opacity: 1;
    transform: translateY(0);
  }
  .byt-reveal[data-delay="1"] { transition-delay: 0.15s; }
 .footer-sectin-margin{
  margin-top: -139px;
 }

 .integrations-banner {
  position: relative;
  overflow: hidden;
  min-height: 980px;
}

.integrations-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(https://divsly.com/gofox/assets/img/integrations-banner.png);
  z-index: -2;
  height: 1030px;
}

.integrations-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.9;
  z-index: -1;
}

.integrations-hero {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 135px;
}

.integrations-hero h1 {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 24px;
  color: #14141f;
    
    margin-bottom: 24px;
    max-width:1000px;
    animation:fadeUp 0.7s ease both 0.1s;
}

.integrations-sub {
  font-size: 17px;
  line-height: 1.6;
  color: #444;
  max-width: 700px;
  margin: 0 auto;
}

/* --- Stat pill --- */
.stat-pill {

  z-index: 2;
  background: #fff;
  border-radius: 10px;
  padding: 10px 25px;
  box-shadow: 0 8px 24px rgba(43, 29, 100, 0.12);
  text-align: center;
  display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
        width: 350px;
    margin: 0 auto;
    margin-top: 40px;
}
.integrationsstat-pill{
    
  transform: translateX(-50%);
      position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.stat-pill .top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #14141f;
}

.stat-pill .bottom {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

.integrations-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}
.integrations-cta-row{
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
    margin-bottom: 20px;
    animation: fadeUp 0.7s ease both 0.3s;
}

/* --- Tablet (≤991px) --- */
@media (max-width: 991px) {
  .integrations-banner {
    min-height: 820px;
  }

  .integrations-hero {
    max-width: 90%;
    padding-top: 100px;
  }

  .integrations-hero h1 {
    font-size: 42px;
  }

  .integrations-sub {
    font-size: 16px;
    max-width: 480px;
  }

  .stat-pill {
    bottom: 70px;
    min-width: 240px;
    padding: 14px 22px;
  }
}

/* --- Mobile landscape / large phones (≤767px) --- */
@media (max-width: 767px) {
  .integrations-banner {
    min-height: 720px;
    padding-bottom: 40px;
  }

  .integrations-hero {
    max-width: 95%;
    padding-top: 80px;
            padding-top: 105px;
        padding-left: 1px;
  }

  .integrations-hero h1 {
    font-size: 32px;
    margin-bottom: 16px;
  }

  .integrations-sub {
    font-size: 15px;
    max-width: 100%;
    padding: 0 12px;
  }

  .integrations-cta-row {
            padding-left: 11px;
        padding-right: 12px;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
  }

  .stat-pill {
    position: relative;
    bottom: -245px;
    left: 0;
    transform: none;
    margin: 40px auto 0;
    width: 90%;
    max-width: 280px;
  }
}

/* --- Small phones (≤480px) --- */
@media (max-width: 480px) {
  .integrations-banner {
    min-height: 800px;
  }

  .integrations-hero {
    padding-top: 106px;
  }

  .integrations-hero h1 {
    font-size: 26px;
  }

  .integrations-sub {
    font-size: 14px;
  }

  .stat-pill .top {
    font-size: 16px;
  }

  .stat-pill .bottom {
    font-size: 13px;
  }
  .comparison-wall{
    grid-template-columns: repeat(1, 1fr) !important;
    padding-left: 12px;
    padding-right: 12px;
  }
  
}

 .dvs-reveal {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  .dvs-reveal.dvs-in-view {
    opacity: 1;
    transform: translateY(0);
  }

  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .dvs-reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
  .faq-item .faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
  max-height: 500px; /* large enough to fit any answer */
  opacity: 1;
}
.faq-question {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-icon {
  transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* ---- Left / right slide-in animation on scroll ---- */
[data-aos="fade-right"] {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-aos="fade-left"] {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-aos].aos-in-view {
  opacity: 1;
  transform: translateX(0);
}

  /* Scroll-triggered bottom-to-top reveal */
  .pmh-reveal {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .pmh-reveal.pmh-in-view {
    opacity: 1;
    transform: translateY(0);
  }
  .pmh-reveal[data-delay="1"] { transition-delay: 0.12s; }
  .pmh-reveal[data-delay="2"] { transition-delay: 0.24s; }


.integrations-buttn-width {
    display: inline-flex;              /* or flex if you want full width */
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;

    height: 54px;
    width: 100%;
    padding: 0 20px;

    color: #fff !important;
    background: #EB4D00;
    border: 1px solid #EB4D00;
    border-radius: 10px;

    text-decoration: none;
    box-shadow: none;
    width: 275px !important;
    z-index: 1;
}

.integrations-buttn-width span {
    position: relative;
    z-index: 2;
    color: inherit;
}

.integrations-buttn-width::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.18); /* Light overlay */
    transform: translateX(-100%);
    transition: transform 0.35s ease;

    z-index: 0;
}

.integrations-buttn-width:hover::before {
    transform: translateX(0);
}



.scroll-animate {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-animate.in-view {
  opacity: 1;
  transform: translateY(0);
}
 .gofox-reveal {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .gofox-reveal.gofox-in-view {
    opacity: 1;
    transform: translateY(0);
  }
  /* stagger children slightly so it doesn't all pop at once */
  .gofox-reveal[data-delay="1"] { transition-delay: 0.12s; }
  .gofox-reveal[data-delay="2"] { transition-delay: 0.24s; }

    .comparison-wall {
    --tile-radius: 14px;
    --tile-border: #e7e7ec;
    --text-title: #3d3d55;
    --page-bg: #ffffff;
  }

  

 

  .comparison-wall {
    display: grid;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1320px;
    grid-template-columns: repeat(3, 1fr);

  }

  .comparison-tile {
   
    background: #fff;
    border: 1px solid var(--tile-border);
    border-radius: var(--tile-radius);
    overflow: hidden;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(20, 20, 43, 0.04);
    transition: box-shadow 0.18s ease, transform 0.18s ease;

    /* bottom-to-top entrance animation */
    opacity: 0;
    transform: translateY(40px);
    animation: riseIn 0.6s ease forwards;
  }

  .comparison-tile:hover {
    box-shadow: 0 8px 20px rgba(20, 20, 43, 0.08);
    transform: translateY(-2px);
  }

  @keyframes riseIn {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* staggered delays so tiles rise in sequence */
  .comparison-tile:nth-child(1) { animation-delay: 0.05s; }
  .comparison-tile:nth-child(2) { animation-delay: 0.12s; }
  .comparison-tile:nth-child(3) { animation-delay: 0.19s; }
  .comparison-tile:nth-child(4) { animation-delay: 0.26s; }
  .comparison-tile:nth-child(5) { animation-delay: 0.33s; }
  .comparison-tile:nth-child(6) { animation-delay: 0.40s; }
  .comparison-tile:nth-child(7) { animation-delay: 0.47s; }
  .comparison-tile:nth-child(8) { animation-delay: 0.54s; }
  .comparison-tile:nth-child(9) { animation-delay: 0.61s; }

  
  @media (max-width: 600px) {
    .comparison-tile { max-width: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .comparison-tile {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  .tile-banner {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0 30px;
        border-bottom: 1px solid #e5e5e5 !important;
  }

  .tile-logo {
    font-weight: 700;
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.3px;
  }

  .tile-caption {
    padding: 20px 30px 24px;
       font-weight: 700;
    font-size: 18px;
    color: var(--text-title);
    gap: 12;
        display: flex;
    flex-direction: column;
  }

 .tp-brand-area-header,
  .tp-brand-area .brand-item {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .tp-brand-area.in-view .tp-brand-area-header {
    opacity: 1;
    transform: translateY(0);
  }

  .tp-brand-area.in-view .brand-item {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger each brand item so they rise one after another */
  .tp-brand-area.in-view .brand-item:nth-child(1) { transition-delay: 0.05s; }
  .tp-brand-area.in-view .brand-item:nth-child(2) { transition-delay: 0.15s; }
  .tp-brand-area.in-view .brand-item:nth-child(3) { transition-delay: 0.25s; }
  .tp-brand-area.in-view .brand-item:nth-child(4) { transition-delay: 0.35s; }
  .tp-brand-area.in-view .brand-item:nth-child(5) { transition-delay: 0.45s; }

  .new-testimonial .header-bottem-spacing,
  .new-testimonial .new-testimonial-slider,
  .new-testimonial .new-testimonial-dots,
  .new-testimonial .new-testimonial-circle {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .new-testimonial.in-view .header-bottem-spacing {
    opacity: 1;
    transform: translateY(0);
  }

  .new-testimonial.in-view .new-testimonial-slider {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
  }

  .new-testimonial.in-view .new-testimonial-dots {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
  }

  .new-testimonial.in-view .new-testimonial-circle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
  }

  .hero-banner-divider{
    width: 40px;
    height: 2px;
    background: #f0592a;
    margin-bottom: 15px;
    margin-top: 15px;
  }
  .hero-banner-divider-title{
    color: #f0592a;
    font-size: 16px !important;
    margin: 0 0 4px;
  }
  .gofox-hero-right{
        background: linear-gradient(135deg, #f8efe8 0%, #ffe5dd 100%);
    /* padding: 25px; */
    border-radius: 15px;
  }
  .menu-separation{
  margin-left: 20px !important;
   color: #d2d2d2
}
.growyour-service-sm-title{
      font-weight: 600;
    font-size: 17px;
    line-height: 22px;
    margin-bottom: 10px;
}
.growyour-service-sm-title:hover{
      color: var(--tp-theme-1);
    transition: all 0.1s linear;
}
.header-separation{
  margin-left: 20px;
   color: #d2d2d2
}
.pricing-headerbannercard{
    --ink:#0f1b2d;
    --orange:#EB4D00;
    
    --border:#e6e8ec;
    --muted:#5b6472;
    --bg:#ffffff;
    --check-bg:#fff2ea;
  }
  *{box-sizing:border-box;}
 .pricing-headerbannercard{
   
    padding:160px 24px 100px;
  }


  .pricing-headerbannercard h1{
    font-family:'Poppins',sans-serif;
    font-weight:800;
    text-align:center;
    font-size:56px;
    line-height:1.15;
   
    letter-spacing:-1px;
  }
  .pricing-subtitle{
    margin-top: 24px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #6b6f80;
    font-weight: 400;
    margin-bottom: 65px;
    text-align: center;
  }

  /* Billing toggle */
  .billing-toggle{
    display:flex;
    justify-content:center;
    margin-bottom:36px;
  }
  .billing-toggle .group{
    display:inline-flex;
    border:1px solid var(--border);
    border-radius:999px;
    padding:6px;
    gap:4px;
    background:#fff;
  }
  .billing-toggle button{
    border:none;
    background:transparent;
    padding:4px 26px;
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:14px;
    color:var(--ink);
    border-radius:999px;
    cursor:pointer;
    transition:all .2s ease;
    white-space:nowrap;
  }
  .billing-toggle button.active{
    background:#EB4D00;
    color:#fff;
  }
  .billing-toggle button:not(.active):hover{
    background:#f5f6f8;
  }

  /* Category tabs */
  .priceing-category-tabs{
    display:flex;
    gap:14px;
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px;
    margin-bottom:44px;
  }
  .priceing-category-tab{
    flex:1;
    text-align:center;
    padding:20px 16px;
    border-radius:12px;
    border:1px solid #e6e8ec;
    cursor:pointer;
    transition:all .2s ease;
    background:#fff;
  }
  .priceing-category-tab:hover{ background:#eb4d0011; border:1px solid #EB4D00; }
  .priceing-category-tab.active{
    border-color:#EB4D00;
    background:#fff;
     border:1px solid #EB4D00;
  }
  .priceing-category-tab .name{
    font-weight:600;
    font-size:17px;
    color:var(--ink);
    display:block;
    margin-bottom:4px;
  }
  .priceing-category-tab.active .name{ color:#EB4D00; }
  .priceing-category-tab .starts{
    font-size:14px;
    color:var(--muted);
  }

  /* Pricing grid */
  .plans{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
    align-items:stretch;
  }
  .plan{
    border:1px solid var(--border);
    border-radius:16px;
    padding:32px 26px;
    display:flex;
    flex-direction:column;
    position:relative;
    transition:box-shadow .2s ease;
  }
  .plan.featured{
    border:2px solid #EB4D00;
    box-shadow:0 12px 30px rgba(255,106,26,.15);
  }
  .best-badge{
   width: 95px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--orange);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 2px 16px;
    border-radius: 999px;
    white-space: nowrap;
    z-index: 5;
    text-align: center;
  }
  .plan-name{
    text-align:center;
    font-weight:700;
    font-size:13px;
    letter-spacing:1.5px;
    color:var(--muted);
    margin-bottom:18px;
  }
  .plan.featured .plan-name{ color:#EB4D00; }
  .price-row{
    text-align:center;
    margin-bottom:4px;
  }
  .price-row .dollar{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:22px;
    vertical-align:top;
    position:relative;
    top:10px;
  }
  .price-row .amount{
    font-family:'Poppins',sans-serif;
    font-weight:800;
    font-size:52px;
    letter-spacing:-1px;
  }
  .plan.featured .dollar,
  .plan.featured .amount{ color:#EB4D00; }
  .per-user{
    text-align:center;
    color:var(--muted);
    font-size:14px;
    margin-bottom:8px;
  }
  .billed-note{
    text-align:center;
    color:var(--muted);
    font-size:12px;
    margin-bottom:24px;
    min-height:16px;
  }
  .pricing-features{
    list-style:none;
    padding:0;
    margin:0 0 28px;
    flex:1;
  }
  .pricing-features li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:15px;
    padding:9px 0;
    color:var(--ink);
  }
  .pricing-features li.disabled{ color:#b7bcc4; }
  .pricing-features li .icon{
    flex-shrink:0;
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--check-bg);
    color:#EB4D00;
    font-size:12px;
    margin-top:2px;
  }
  .pricing-features li.disabled .icon{
    background:transparent;
    color:#d5d8dd;
  }
  .icon-size{
    font-size: 16px;
  }
  .pricing-features li strong{ font-weight:700; }

  /* Sign-up button — default (non-active plans) */
  .priceing-signup{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:15px;
    border-radius:10px !important;
    border:1px solid #000;
    background:#fff;
    font-weight:700;
    font-size:14px;
    letter-spacing:.5px;
    cursor:pointer;
    transition:all .2s ease;
    color:var(--ink);
    height: 53px !important ;
  }
 


  @media (max-width:980px){
    .plans{grid-template-columns:repeat(2,1fr);}
    h1{font-size:38px;}
  }
  @media (max-width:600px){
    .plans{grid-template-columns:1fr;}
    .priceing-category-tabs{flex-direction:column;}
    .billing-toggle .group{flex-direction:column;width:100%;}
  }
    .compare-plans-list{
    --ink:#0f1b2d;
    --orange:#EB4D00;
   --orange-dark:#e85a0c;
    --border:#e6e8ec;
    --muted:#5b6472;
    --bg:#ffffff;
    --check-bg:#fff2ea;
    --row-alt:#fafbfc;
  }
  

  
  .compare-subtitle{
    margin-top: 24px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #6b6f80;
    font-weight: 400;
    margin-bottom: 65px;
  }

  .table-shell{
    border:1px solid var(--border);
    border-radius:16px;
    /* no overflow:hidden here — it would clip the MOST POPULAR badge,
       which is designed to poke above the top edge. Corner rounding is
       instead applied directly to the first/last rows below. */
  }

  /* Grid layout: label col + 4 plan cols */
  .compare-grid-row{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
    align-items:center;
  }
  @keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-bottom-up {
  animation: slideUpFadeIn 0.6s ease-out both;
}

/* Stagger the intro elements a touch so the banner doesn't pop in all at once */
.pricing-headerbannercard h1.anim-bottom-up { animation-delay: 0s; }
.pricing-headerbannercard .pricing-subtitle.anim-bottom-up { animation-delay: 0.08s; }
.pricing-headerbannercard .billing-toggle.anim-bottom-up { animation-delay: 0.16s; }
.pricing-headerbannercard .priceing-category-tabs.anim-bottom-up { animation-delay: 0.24s; }

/* Individual plan cards get their own staggered delay set inline via JS (--delay) */
.plans .plan.anim-bottom-up {
  animation-delay: calc(var(--delay, 0) * 1s);
}

  /* Header */
  .header-row{
    background:#fbfbfc;
    border-bottom:1px solid var(--border);
    border-radius:16px 16px 0 0;
  }
  .header-row .label-cell{
    padding:24px;
    font-weight:700;
    font-size:12px;
    letter-spacing:1.5px;
    color:var(--muted);
    align-self:end;
    padding-bottom:24px;
  }
  .plan-header{
    text-align:center;
    padding:24px 16px 38px;
    position:relative;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  .plan-header .plan-name{
    font-weight:700;
    font-size:13px;
    letter-spacing:1.5px;
    color:var(--muted);
    margin-bottom:12px;
  }
  .plan-header .plan-price{
    font-family:'Poppins',sans-serif;
    font-weight:800;
    font-size:34px;
    color:var(--orange);
    margin-bottom:16px;
    letter-spacing:-0.5px;
  }
  /* Plan CTA button — default (non-active plans) */
  .plan-cta{
    display: inline-block;
    padding: 11px 22px !important;
    border-radius: 10px !important;
    border: 1px solid black;
    background: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .3px;
    color: #000;
    cursor: pointer;
    text-align: center;
    transition: all .2s ease;
    height: 50px !important;
    line-height: 26px !important;
  }
  .plan-cta:hover{ background:#f5f6f8; }

  /* Plan CTA button — active / MOST POPULAR plan (standalone class, not nested) */
  .plan-cta.is-active{
    background:var(--orange);
    color:#fff;
    border-color:var(--orange);
  }
  .plan-cta.is-active:hover{ background:var(--orange-dark); }

  /* --- Unique per-plan header treatments (no shared "featured" modifier) --- */
  .plan-header-growth{
    background:#fff;
    border-left:1px solid #fbe6db;
    border-right:1px solid #fbe6db;
    border-top:2px solid #EB4D00;
    margin-top:-1px;
  }
  .plan-header-growth .plan-name{ color:var(--orange); }

  .most-popular{
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%,-50%);
    background:var(--orange);
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    padding:2px 16px;
    border-radius:999px;
    white-space:nowrap;
    z-index:5;
  }

  /* Section title row */
  .section-row{
    background:#fbfbfc;
    border-bottom:1px solid var(--border);
    border-top:1px solid var(--border);
  }
  .section-row .label-cell{
    padding:18px 24px;
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:19px;
    color:var(--orange);
  }
  .section-row .plan-cell{ padding:18px 0; }

  /* Feature rows */
  .feature-row{
    border-bottom:1px solid var(--border);
  }
  .feature-row:last-child{
    border-bottom:none;
    border-radius:0 0 16px 16px;
  }
  .feature-row:nth-of-type(odd){ background:#fff; }
  .feature-row:nth-of-type(even){ background:var(--row-alt); }
  .feature-row .label-cell{
    padding:20px 24px;
    font-weight:600;
    font-size:14.5px;
  }
  .feature-row .plan-cell{
    text-align:center;
    padding:20px 16px;
    font-size:14.5px;
    color:var(--ink);
  }
  .feature-row .plan-cell.dash{ color:#c7cbd1; }

  .compare-check{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--check-bg);
    color:var(--orange);
    font-size:13px;
  }
  .dash-icon{
    display:inline-block;
    width:16px;
    height:2px;
    background:#d5d8dd;
    border-radius:2px;
  }

  /* --- Unique per-plan column treatments in the body of the table --- */
  .plan-cell-free{ }
  .plan-cell-basic{ }

  .plan-cell-growth{
    background:#fff8f3;
  }
  .plan-cell-growth-last{

    border-radius:0 0 12px 12px;
  }

  .plan-cell-pro{ }

  @media (max-width:900px){
    .compare-grid-row{
      grid-template-columns:1fr;
    }
    .table-shell{ overflow-x:auto; }
    .compare-grid-row{ min-width:900px; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; }
    .table-shell{ display:block; }
  }
  .banner-btn-topspaicng{
    margin-top: 15px;
  }
  .gofox-cb-head{
    color:var(--gofox-sub);font-weight:500;
  }
  .gofox-mini-bar1{
    width:70%;
  }
  .gofox-mini-bar2{
    width:45%;
  }
  .gofox-mini-bar3{
    width:85%;
  }

  .campaign-gofox-cb-head{
    color:var(--gofox-sub);font-weight:500;
  }
  .campaigngofox-mini-bar1{
width:88%; background:var(--gofox-blue);
  }
   .campaigngofox-mini-bar2{
width:62%; background:var(--gofox-blue);
  } .campaigngofox-mini-bar3{
width:95%; background:var(--gofox-blue);

  }
  .accountgofox-mini-bar1{
width:92%; background:#2FAE5D;
  }
   .accountgofox-mini-bar2{
    width:74%; background:#2FAE5D;
  }
   .accountgofox-mini-bar3{
    width:38%; background:#E8542A;
  }
  .accountgofox-mini-heath{
color:var(--gofox-sub);font-weight:500;
  }

 .crmbc-accent{color:#EB4D00;}

.crmbc-visual-1{background:linear-gradient(160deg,#FFD36B,#FF7A45);}
.crmbc-badge-1{color:#E1621B;}

.crmbc-visual-2{background:linear-gradient(160deg,#8FA8FF,#5468E0);}
.crmbc-badge-2{color:#3A4CC9;}

.crmbc-visual-3{background:linear-gradient(160deg,#F6A6E0,#B15CE0);}
.crmbc-badge-3{color:#A238B8;}

.crmbc-visual-4{background:linear-gradient(160deg,#7BE0D0,#2FB6A6);}
.crmbc-badge-4{color:#1F9686;}

.crmbc-visual-5{background:linear-gradient(160deg,#9BE07B,#3FAA4C);}
.crmbc-badge-5{color:#2E8F3B;}

.crmbc-visual-6{background:linear-gradient(160deg,#FFD97B,#FF9F4D);}
.crmbc-badge-6{color:#D97A1F;}


.blog-card-image{
  
              height: 225px;
}
.copyyear{
  margin-top: 4px;
}
.copyright-separation{
  color: #d2d2d2
}
.crmhero-lead-sapn{
  font-size: 9px;
}
.crmhero-company-dotd{
background:#2fbf5f;
}
.crmhero-company-dott{
  background:#ef4444;
}
.crmhero-company-dotg{
  background:#2f6bff;
}
.quotetile-copy-top{
  margin-top: 38px;
}
.footer-contactmargin-top{
  margin-top: 15px;
}
.footer-countrymargin-top{
  margin-top: 11px;
}
.feature-card-image-bottomspace{
  margin-bottom: 60px;
}

.blog-card-image {
    background-image: url("../assets/img/blog/blog-1.webp");
}
 .blog-card-image-2 {
    background-image: url("../assets/img/blog/blog-2.webp");
}
.blog-card-image-3 {
    background-image: url("../assets/img/blog/blog-3.webp");
}
.gcr-hero-leftimg{
  left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}
 .tp-service-content {
    margin-bottom: 50px;
  }
   .integrations-innerfeature-wrapper{
    --fc-bg: #e4e4e7;
    --fc-card-bg: #f6f6f8;
    --fc-text-heading: #18181b;
    --fc-text-body: #6b7280;
    --fc-accent-blue: #4f5bd5;
    --fc-accent-blue-dark: #3d3fa8;
  }
 .fc-bar-mon   { height: 45%; }
.fc-bar-tue   { height: 62%; }
.fc-bar-wed   { height: 50%; }
.fc-bar-thu   { height: 70%; }
.fc-bar-fri   { height: 58%; }
.fc-bar-sat   { height: 90%; }
.fc-bar-sun   { height: 66%; }
.fc-bar-extra { height: 78%; }
 .reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* stagger each tile slightly as they enter */
  .comparison-wall .comparison-tile:nth-child(1) { transition-delay: 0s; }
  .comparison-wall .comparison-tile:nth-child(2) { transition-delay: 0.08s; }
  .comparison-wall .comparison-tile:nth-child(3) { transition-delay: 0.16s; }
  .comparison-wall .comparison-tile:nth-child(4) { transition-delay: 0.24s; }
  .comparison-wall .comparison-tile:nth-child(5) { transition-delay: 0.32s; }
  .comparison-wall .comparison-tile:nth-child(6) { transition-delay: 0.4s; }
  .comparison-wall .comparison-tile:nth-child(7) { transition-delay: 0.48s; }
  .comparison-wall .comparison-tile:nth-child(8) { transition-delay: 0.56s; }
  .comparison-wall .comparison-tile:nth-child(9) { transition-delay: 0.64s; }
  .card-headerfont-style{
    font-style: italic;
  }
 
   .gofox-hero-leftcard{
    border-radius: 20px;
   }

    .integrations-header{
    --pmh-ink:#0b1550;
    --pmh-sub:#5b6178;
    --pmh-line:#8fce6a;
    --pmh-bg:#ffffff;
  }
 
  .pmh-wrap{
    max-width:1500px;

    text-align:center;
    position:relative;
  }
  .pmh-heading{
    font-family:'Baloo 2','Segoe UI',sans-serif;
    font-weight:800;
    font-size:56px;
    line-height:1.05;
    color:var(--pmh-ink);
    margin:0;
    letter-spacing:-1px;
  }
  .pmh-subheading{
    color:var(--pmh-sub);
    font-size:17px;
    margin:18px 0 0;
  }
  .pmh-stage{
    position:relative;
    width:100%;
    height:620px;
    margin-top:40px;
  }
  .pmh-lines-svg{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    overflow:visible;
  }
  .pmh-lines-svg path{
    stroke:var(--pmh-line);
    stroke-width:1.5;
    fill:none;
    opacity:.9;
  }
  .pmh-hub{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:150px;
    height:150px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.03), 0 30px 60px -10px rgba(20,20,80,.18), 0 0 80px 20px rgba(120,180,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
    animation: pmh-hub-pulse 3.2s ease-in-out infinite;
  }
  .pmh-hub img{ width:95px; height:95px; object-fit:contain; }
  @keyframes pmh-hub-pulse{
    0%,100%{ box-shadow:0 0 0 1px rgba(0,0,0,.03), 0 30px 60px -10px rgba(20,20,80,.18), 0 0 60px 10px rgba(120,180,255,.12); }
    50%{ box-shadow:0 0 0 1px rgba(0,0,0,.03), 0 30px 60px -10px rgba(20,20,80,.18), 0 0 100px 30px rgba(120,180,255,.28); }
  }
  .pmh-node--mastercard{
    width: 60px !important;
    height: 60px !important;
  }

  .pmh-node{
    position:absolute;
    width:88px;
    height:88px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    /* background: #fff !important; */
    font-weight:700;
    font-size:12.5px;
    text-align:center;
    line-height:1.15;
    box-shadow:0 10px 25px -6px rgba(0,0,0,.25);
    z-index:4;
    opacity:0;
    transform:translate(-50%,-50%) scale(.4);
    animation: pmh-node-in .6s cubic-bezier(.34,1.56,.64,1) forwards, pmh-node-float 5s ease-in-out infinite;
    animation-delay: var(--pmh-delay), calc(var(--pmh-delay) + .6s);
  }
  .pmh-node:hover{ box-shadow:0 14px 34px -6px rgba(0,0,0,.35); }
  @keyframes pmh-node-in{
    to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  }
  @keyframes pmh-node-float{
    0%,100%{ transform:translate(-50%,-50%) translateY(0); }
    50%{ transform:translate(-50%,-50%) translateY(-7px); }
  }
  .pmh-node--light{ color:#0b1550; background:#fff; box-shadow:0 10px 25px -6px rgba(0,0,0,.15), inset 0 0 0 1px #eee; }

  /* Nodes sit at varying distances from the hub (some closer, some farther)
     to match the staggered look of the reference design, while still
     keeping enough angular separation that nothing overlaps. */
  .pmh-node--samsung{   top:16%;   left:28%;   background:#000;}
  .pmh-node--giropay{   top:24%;   left:45%;   background:#000;}
  .pmh-node--diners{    top:20%;   left:59%;   background:#2796ce;}
  .pmh-node--unionpay{  top:9%;    left:73%;   background:#0067cb;}
  .pmh-node--crypto{    top:6%;    left:90%;   background:#fff;}
  .pmh-node--amex{      top:47%;   left:92%;   background:#0b1550;}
  .pmh-node--tether{    top:33%;   left:80%;   background:#2b9dff;}
  .pmh-node--applepay{  top:79%;   left:87%;   background:#0d0d0d;}
  .pmh-node--paypal{    top:83%;   left:72%;   background:#0b3e91;}
  .pmh-node--mastercard{top:71%;   left:59%;   background:#171a1a;}
  .pmh-node--wechat{    top:71%;   left:41%;   background:#4aab3c;}
  .pmh-node--visa{      top:79%;   left:26%;   background:#232324;}
  .pmh-node--jcb{       top:74%;   left:9%;    background:#fff;}
  .pmh-node--sepa{      top:29%;   left:11%;   background:#96e1be;}
  .pmh-node--discover{  top:47%;   left:21%;   background:#dc3545;}
  .pmh-node--googlepay{ top:56%;   left:73%;   background:#eeeeee; color:#0b1550;}
 
.pmh-node--wechat img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
}
.pmh-node--giropay img,.pmh-node--crypto img,.pmh-node--tether img {
    height: 65px;
}
.pmh-node--amex img{
  height: 60px;
}
.pmh-node img {
    /* width: 65px;
    height: 65px; */
    border-radius: 50%;
}
/* .pmh-node--amex img,.pmh-node--mastercard img {
    width: 40px !important;
    height: 40px !important;
} */

  @media (max-width: 900px){
    .pmh-heading{ font-size:34px; }
    .pmh-stage{ height:640px; }
    .pmh-node{ width:64px; height:64px; font-size:10px; }

    /* Mobile shows only 9 nodes, arranged in a clean, evenly-spaced
       circle (40° apart). Desktop above is untouched. */

    /* Hide 6 of the 15 nodes on mobile only */
    .pmh-node--sepa,
    .pmh-node--wechat,
    .pmh-node--applepay,
    .pmh-node--discover,
    .pmh-node--tether,
    .pmh-node--amex{
      display:none;
    }

    /* Reposition the remaining 9 into an even circle */
    .pmh-node--samsung{   top:14%; left:50%; }
    .pmh-node--giropay{   top:22%; left:74%; }
    .pmh-node--diners{    top:44%; left:87%; }
    .pmh-node--unionpay{  top:68%; left:83%; }
    .pmh-node--crypto{    top:84%; left:63%; }
    .pmh-node--jcb{       top:84%; left:37%; }
    .pmh-node--visa{      top:68%; left:17%; }
    .pmh-node--mastercard{top:44%; left:13%; width:64px; height:64px; }
    .pmh-node--paypal{    top:22%; left:26%; }
  }

        .benfites-root-section{
    --crmb-navy:#171A2E;
    --crmb-sub:#7A7E96;
    --crmb-line:#EBEBF2;
    --crmb-bg:#F3F2F9;
    --crmb-arrow-bg:#ffe2d2;
    --crmb-arrow-ink:#EB4D00
;
  }
  .benfites-root-section {
  width: 100%;
  overflow-x: hidden;
}
      .crmb-body {
        font-family: "Manrope", sans-serif;
        background: var(--crmb-bg);
        padding: 64px 0 76px;
        overflow-x: hidden;
      }

      .crmb-head {
        max-width: 1220px;
        margin: 0 auto 44px;
        padding: 0 64px;
      }
      .crmb-head-title {
        font-size: 44px;
        font-weight: 600;
        color: var(--crmb-navy);
        line-height: 1.15;
        letter-spacing: -0.01em;
        max-width: 640px;
      }
      .crmb-head-subtitle {
        margin-top: 16px;
        font-size: 16px;
        color: var(--crmb-sub);
        max-width: 520px;
        line-height: 1.6;
      }

      .crmb-carousel {
        position: relative;
        width: 100%;
        mask-image: linear-gradient(
          to right,
          transparent 0,
          black 64px,
          black calc(100% - 64px),
          transparent 100%
        );
        -webkit-mask-image: linear-gradient(
          to right,
          transparent 0,
          black 64px,
          black calc(100% - 64px),
          transparent 100%
        );
      }

      .crmb-track {
        display: flex;
        gap: 22px;
        width: max-content;
        padding: 0 64px;
        animation: crmb-scroll-left 34s linear infinite;
      }
      .crmb-carousel:hover .crmb-track {
        animation-play-state: paused;
      }

      @keyframes crmb-scroll-left {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }

      .crmb-card {
  background: #fff;
  border-radius: 24px;
  width: 550px;
  flex: 0 0 auto;
  padding: 24px;
  display: flex;
  gap: 24px;
  box-shadow: 0 4px 24px rgba(23, 26, 46, 0.06);
  border: none;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.crmb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(23, 26, 46, 0.18);
}

/* Left-side image panel */
.crmb-screen {
     flex: 0 0 160px;
    width: 116px;
    height: 276px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 14px;
}
.crmb-screen svg {
  width: 62%;
  height: auto;
  position: relative;
  z-index: 2;
}

.crmb-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 30% 20%,
    rgba(255, 255, 255, 0.35),
    transparent 60%
  );
}

.crmb-grad-sales-a {
  background: linear-gradient(160deg, #ffd7e6 0%, #ffb3cf 100%);
}
.crmb-grad-sales-b {
  background: linear-gradient(160deg, #e6e1ff 0%, #c7bbff 100%);
}
.crmb-grad-marketing-a {
  background: linear-gradient(160deg, #cdf3ea 0%, #a3e8d4 100%);
}
.crmb-grad-marketing-b {
  background: linear-gradient(160deg, #ffe6cf 0%, #ffcf9e 100%);
}
.crmb-grad-service-a {
  background: linear-gradient(160deg, #d6e7ff 0%, #b3d1ff 100%);
}
.crmb-grad-service-b {
  background: linear-gradient(160deg, #f5a623 0%, #ffd98a 100%);
}

      .crmb-card-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        min-width: 0;
      }
      .crmb-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--crmb-arrow-ink);
        margin-bottom: 10px;
      }
      .crmb-tag-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--crmb-arrow-ink);
      }

      .crmb-card-title {
        font-size: 22px;
        font-weight: 600;
        color: #1B1D2A;
        letter-spacing: -0.01em;
        margin-bottom: 8px;
        line-height: 1.32;
      }
      .crmb-card-desc {
        font-size: 13.5px;
        color: var(--crmb-sub);
        line-height: 1.55;
      }

      .crmb-divider {
        border: none;
        border-top: 1px solid #C2C2C2;
        margin: 14px 0 12px;
      }

      .crmb-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .crmb-meta-col span {
        display: block;
      }
      .crmb-meta-label {
        font-size: 11.5px;
        color: var(--crmb-sub);
        margin-bottom: -2px;
      }
      .crmb-meta-value {
        font-size: 14px;
        font-weight: 600;
        color: var(--crmb-navy);
      }

      .crmb-arrow {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--crmb-arrow-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        transition:
          background 0.2s ease,
          transform 0.2s ease;
      }
      .crmb-card:hover .crmb-arrow {
        background: var(--crmb-arrow-ink);
        transform: rotate(45deg);
      }
      .crmb-arrow svg {
        width: 16px;
        height: 16px;
      }
      .crmb-arrow svg path {
        transition: stroke 0.2s ease;
      }
      .crmb-card:hover .crmb-arrow svg path {
        stroke: #fff;
      }

      @media (max-width: 640px) {
        .crmb-head {
          padding: 0 24px;
        }
        .crmb-head-title {
          font-size: 32px;
        }
        .crmb-track {
          padding: 0 24px;
        }
        .crmb-card {
          width: 300px;
        }
        .crmb-screen {
          flex-basis: 126px;
          width: 100%;
          
        }
      }
      @media (max-width: 991px) and (min-width: 641px) {
  .crmb-head {
    padding: 0 32px;
  }
  .crmb-head-title {
    font-size: 34px;
    max-width: 480px;
  }
  .crmb-head-subtitle {
    font-size: 15px;
    max-width: 440px;
  }
  .crmb-track {
    padding: 0 32px;
    gap: 16px;
  }
  .crmb-card {
    width: 320px;
    padding: 16px;
    gap: 14px;
  }
  .crmb-screen {
    flex-basis: 92px;
    width: 92px;
    height: 184px;
  }
  .crmb-carousel {
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black 32px,
      black calc(100% - 32px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black 32px,
      black calc(100% - 32px),
      transparent 100%
    );
  }
}
.crmb-header-text{
  max-width: 600px;
}

/* .qr-icon-bg {
    background: white;
    padding: 8px;
    border-radius: 6px;
} */

  .qr-intro {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px;
    padding: 0 20px;
  }

  .qr-intro-title {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
  }

  .qr-intro-subtitle {
    font-size: 18px;
    color: var(--sub);
    margin: 0;
  }

  .qr-marquee {
    overflow: hidden;
    width: 100%;
    margin-bottom: 10px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  }

  .qr-marquee-strip {
    display: flex;
    
    width: max-content;
    will-change: transform;
  }

  .qr-marquee-strip.qr-dir-left {
    animation: scrollLeft 20s linear infinite;
  }

  .qr-marquee-strip.qr-dir-right {
    animation: scrollRight 20s linear infinite;
  }

  .qr-marquee.qr-is-paused .qr-marquee-strip {
    animation-play-state: paused !important;
  }

  @keyframes scrollLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  @keyframes scrollRight {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
  }

  .qr-tile {
   width: 155px;
    height: 155px;
    margin: 0 7px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    flex-shrink: 0;
    padding: 34px 5px 5px 5px;
  }
img.qr-tile-icon {
    height: 40px;
}
  .qr-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  }

  .qr-tile-icon img {
    font-size: 54px;
    line-height: 1;
    margin-bottom: 10px;
  }

  .qr-tile-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    margin-top: 15px;
    width: 110px;
    line-height: 20px;
  }

  /* color backgrounds, cycling to match the reference */
  .bg-1 { background: #fdeee1; }
  .bg-2 { background: #fdf8df; }
  .bg-3 { background: #e4f6ea; }
  .bg-4 { background: #fbe3c8; }
  .bg-5 { background: #fbe4e4; }
  .bg-6 { background: #f4e9fb; }
  .bg-7 { background: #e7edfc; }
  .bg-8 { background: #fbe6ef; }
  .bg-9 { background: #fdf7cf; }
  .bg-10 { background: #e2f7ef; }
  .bg-11 { background: #e9edfc; }
  .bg-12 { background: #fdefda; }
  .bg-13 { background: #ece5fb; }
  .bg-14 { background: #e7effc; }
  .bg-15 { background: #fdf6de; }
  .bg-16 { background: #fdefdb; }
  .bg-17 { background: #fdf7d9; }
  .bg-18 { background: #e6f6ec; }
  .bg-19 { background: #fdead8; }
  .bg-20 { background: #e2f9fa; }
  .bg-21 { background: #eae9fc; }

  @media (max-width: 640px) {
    .qr-intro-title { font-size: 28px; }
    .qr-intro-subtitle { font-size: 15px; }
    
  }
  .marketing-feature-card-image{
    padding: 16px 16px 0px 16px !important ;
  }

  .feature-card-image-bottomspace img {
    border-radius: 15px;
}
.contact-feature-img img{
  height: 366px;
}

 .illustrationOuterFrame{
    width:625px;
    height:406px;
    overflow:hidden;
    position:relative;
    /* background:#FAFAFC; */
    border-radius:8px;
    /* box-shadow:0 4px 24px rgba(0,0,0,0.12); */
  }

  .illustrationNativeCanvas{
    width:1250px;
    height:812px;
    transform: scale(0.5);
    transform-origin: top left;
    position:relative;
    /* background:#FAFAFC; */
  }

  .lavenderBlobShape{
    position:absolute;
    left:330px; top:110px;
    width:640px; height:640px;
    border-radius:46% 54% 58% 42% / 50% 46% 54% 50%;
    background:#E7E4F7;
    opacity:0.7;
  }

  .peachBlobShape{
    position:absolute;
    left:950px; top:60px;
    width:420px; height:420px;
    border-radius:50%;
    background:#FCE3D3;
    opacity:0.6;
  }

  .purpleDotGrid{
    position:absolute;
    left:1090px; top:55px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  .purpleDotGrid span{
    width:7px;height:7px;border-radius:50%;background:#8B7FE8;display:block;
  }

  .orangeDotGrid{
    position:absolute;
    left:1155px; top:430px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  .orangeDotGrid span{
    width:7px;height:7px;border-radius:50%;background:#F4A876;display:block;
  }

  .plantIllustrationWrap{
    position:absolute;
    left:1120px; top:465px;
    width:180px; height:230px;
  }
  .plantPotShape{
    position:absolute;
    left:35px; top:170px;
    width:110px; height:70px;
    background:#B9BFE0;
    border-radius:0 0 18px 18px;
  }
  .plantPotRim{
    position:absolute;
    left:22px; top:158px;
    width:136px; height:22px;
    background:#CBD0EA;
    border-radius:8px;
  }

  .tabletFrameOuter{
    position:absolute;
    left:221px; top:80px;
    width:890px; height:600px;
    /* background:#241E52; */
    border-radius:30px;
    box-shadow:0 30px 60px rgba(36,30,82,0.25);
  }
  .tabletFrameInner{
    position:absolute;
    left:12px; top:12px;
    right:12px; bottom:12px;
    background:#FBFBFD;
    border-radius:20px;
    padding:30px 34px;
  }
  .tabletBrowserDotsRow{
    display:flex;
    gap:8px;
    margin-bottom:20px;
  }
  .tabletBrowserDotsRow span{
    width:12px;height:12px;border-radius:50%;background:#3B3378;display:block;
  }

  .tabletBodyRow{
    display:flex;
    gap:22px;
  }

  .tabletSidebarCol{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding-top:6px;
  }
  .sidebarHomeButton{
    width:46px;height:46px;
    border-radius:12px;
    background:#4C5CF0;
    display:flex;align-items:center;justify-content:center;
  }
  .sidebarHomeButton svg{width:22px;height:22px;color:#fff;}
  .sidebarIconButton{
    width:46px;height:46px;
    border-radius:12px;
    background:transparent;
    display:flex;align-items:center;justify-content:center;
  }
  .sidebarIconButton svg{width:22px;height:22px;color:#4B4F63;}

  .tabletMainCol{
    flex:1;
  }
  .livePipelineTitle{
    font-size:26px;
    font-weight:800;
    color:#16181C;
    margin-bottom:20px;
  }

  .statCardsRow{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-bottom:20px;
  }
  .statCardBox{
    background:#fff;
    border:1px solid #ECECEC;
    border-radius:16px;
    padding:16px 18px;
  }
  .statCardLabel{
    font-size:14px;
    color:#6B7280;
    font-weight:500;
    margin-bottom:8px;
  }
  .statCardValueRow{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:10px;
  }
  .statCardValue{
    font-size:24px;
    font-weight:800;
    color:#16181C;
  }
  .statCardDelta{
    font-size:13px;
    font-weight:700;
    color:#1E9E52;
  }
  .sparklineBlue{width:100%;height:24px;}
  .sparklineGreen{width:100%;height:24px;}
  .sparklineOrange{width:100%;height:24px;}
  .sparklinePurple{width:100%;height:24px;}

  .panelsRow{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .campaignPerformancePanel{
    background:#fff;
    border:1px solid #ECECEC;
    border-radius:16px;
    padding:18px 20px;
  }
  .audienceGrowthPanel{
    background:#fff;
    border:1px solid #ECECEC;
    border-radius:16px;
    padding:18px 20px;
  }
  .panelTitle{
    font-size:16px;
    font-weight:800;
    color:#16181C;
    margin-bottom:16px;
  }
  .donutChartRow{
    display:flex;
    align-items:center;
    gap:18px;
  }
  .donutChartCircle{
    width:105px;height:105px;
    border-radius:50%;
    background:conic-gradient(#4C6FFF 0% 45%, #F4914B 45% 75%, #8B7FE8 75% 100%);
    position:relative;
  }
  .donutChartHole{
    position:absolute;
    left:22px;top:22px;
    width:61px;height:61px;
    background:#fff;
    border-radius:50%;
  }
  .donutLegendList{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .donutLegendRow{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:#374151;
    font-weight:600;
  }
 
  .donutDotEmail{width:10px;height:10px;border-radius:50%;background:#4C6FFF;display:inline-block;}
  .donutDotSocial{width:10px;height:10px;border-radius:50%;background:#F4914B;display:inline-block;}
  .donutDotAds{width:10px;height:10px;border-radius:50%;background:#8B7FE8;display:inline-block;}

  .barChartRow{
    display:flex;
    align-items:flex-end;
    gap:10px;
    height:110px;
  }
  .barChartBar{
    flex:1;
    background:linear-gradient(180deg,#8B7FE8,#6C63FF);
    border-radius:5px 5px 0 0;
  }

  .notificationCardFloating{
    position:absolute;
    left:340px; top:558px;
    width:723px;
    background:#fff;
    border-radius:22px;
    box-shadow:0 20px 40px rgba(0,0,0,0.14);
    padding:20px 26px;
    display:flex;
    align-items:center;
    gap:18px;
  }
  .avatarStackWrap{
    display:flex;
  }
  .avatarCircleA{
    width:48px;height:48px;border-radius:50%;
    background:#F4914B;color:#fff;font-weight:800;font-size:18px;
    display:flex;align-items:center;justify-content:center;
    border:3px solid #fff;
    margin-right:-14px;
  }
  .avatarCircleP{
    width:48px;height:48px;border-radius:50%;
    background:#4C6FFF;color:#fff;font-weight:800;font-size:18px;
    display:flex;align-items:center;justify-content:center;
    border:3px solid #fff;
    margin-right:-14px;
  }
  .avatarCircleR{
    width:48px;height:48px;border-radius:50%;
    background:#2FB27C;color:#fff;font-weight:800;font-size:18px;
    display:flex;align-items:center;justify-content:center;
    border:3px solid #fff;
  }
  .notificationTextBlock{
    flex:1;
  }
  .notificationTitleText{
    font-size:19px;
    font-weight:800;
    color:#16181C;
    margin-bottom:6px;
  }
  .notificationSubText{
    font-size:16px;
    color:#6B7280;
    font-weight:500;
  }
  .notificationGreenDot{
    width:14px;height:14px;
    border-radius:50%;
    background:#2FB27C;
  }
/* sgd */
   .crm-feature-dashboard{
    width:640px;
    max-width:96vw;
    background:linear-gradient(160deg,#ffffff 0%, #f6f6f6 45%);
    border:1px solid var(--panel-border);
    border-radius:24px;
    padding:32px;
    color:var(--text);
    box-shadow:0 4px 24px rgba(0,0,0,.06);
  }
  .salescrm-feature-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
  }
  .salescrm-feature-header h4{
    font-size:14px;
    margin:0;
    font-weight:600;
    color: var(--text);
  }
  .range-select{
    background:#f2f2f2;
    border:1px solid #ddd;
    color:var(--text);
    padding:10px 16px;
    border-radius:10px;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
  }
  .stats-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:22px;
  }
  .stat-card{
    background:#fbfbfb;
    border:1px solid var(--panel-border);
    border-radius:16px;
    padding:18px 20px;
    display:flex;
    align-items:center;
    gap:14px;
  }
  .icon-box{
    width:44px;
    height:44px;
    border-radius:12px;
    background:radial-gradient(circle at 30% 30%, #ffe6cc, #ffd6a8);
    border:1px solid #ffcb8a;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .icon-box svg{width:22px;height:22px;stroke:#ff7a1a;}
  .stat-label{
    font-size:13px;
    color:#ff7a1a;
    margin-bottom:4px;
  }
  .stat-value{
    font-size:22px;
    font-weight:700;
  }
  .stat-value .delta{
    font-size:13px;
    color:var(--green);
    font-weight:600;
    margin-left:6px;
  }
  .main-row{
    display:grid;
    /* grid-template-columns:1.7fr 1fr; */
    gap:18px;
  }
  .panel{
    background:#fbfbfb;
    border:1px solid var(--panel-border);
    border-radius:16px;
    padding:22px;
    height: 300px;
  }
  .panel h2{
    font-size:13px;
    margin:0 0 18px 0;
    font-weight:600;
    color: var(--text);
  }
  .chart-wrap{
    position:relative;
  }
  .tooltip{
    position:absolute;
    background:#1a1a1a;
    color:#fff;
    border-radius:10px;
    padding:10px 14px;
    font-size:13px;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    pointer-events:none;
    transform:translate(-50%,-115%);
    white-space:nowrap;
  }
  .tooltip .t-title{
    font-weight:700;
    margin-bottom:4px;
  }
  .tooltip .t-val{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .tooltip .dot{
    width:8px;height:8px;border-radius:50%;background:var(--orange);
  }
  .donut-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .legend{
    width:100%;
    margin-top:20px;
  }
  .legend-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:7px 0;
    font-size:14px;
  }
  .legend-left{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .legend-dot{
    width:10px;height:10px;border-radius:50%;
  }
  .legend-pct{
    color:var(--sub);
    font-size:13px;
  }
  .axis-label{
    fill:var(--sub);
    font-size:11px;
  }

  .outerFrame{
    width:430px;
    height:287px;
    overflow:hidden;
    position:relative;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 24px rgba(0,0,0,0.12);
  }

  .nativeCanvas{
    width:1536px;
    height:1024px;
    transform: scale(0.28);
    transform-origin: top left;
    background:#F7F7F8;
    padding:28px;
  }

  .headerRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
  }
  .pageTitle{
    font-size:34px;
    font-weight:800;
    color:#16181C;
    letter-spacing:-0.5px;
  }
  .datePill{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #ECECEC;
    background:#fff;
    padding:14px 20px;
    border-radius:14px;
    font-size:18px;
    font-weight:600;
    color:#16181C;
  }
  .datePill svg{width:20px;height:20px;color:#4B5563;}
  .datePillChevron{width:16px;height:16px;color:#4B5563;}

  .statsGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:24px;
  }

  .contactsTile{
    background:#FCFCFC;
    border:1px solid #ECECEC;
    border-radius:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    padding:22px 24px;
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .emailTile{
    background:#FCFCFC;
    border:1px solid #ECECEC;
    border-radius:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    padding:22px 24px;
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .clicksTile{
    background:#FCFCFC;
    border:1px solid #ECECEC;
    border-radius:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    padding:22px 24px;
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .conversionsTile{
    background:#FCFCFC;
    border:1px solid #ECECEC;
    border-radius:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    padding:22px 24px;
    display:flex;
    gap:16px;
    align-items:flex-start;
  }

  .contactsIconBox{
    width:56px;height:56px;min-width:56px;
    border-radius:14px;
    background:#FDE6D8;
    display:flex;align-items:center;justify-content:center;
  }
  .contactsIconBox svg{width:28px;height:28px;color:#F4611E;}
  .emailIconBox{
    width:56px;height:56px;min-width:56px;
    border-radius:14px;
    background:#FDE6D8;
    display:flex;align-items:center;justify-content:center;
  }
  .emailIconBox svg{width:28px;height:28px;color:#F4611E;}
  .clicksIconBox{
    width:56px;height:56px;min-width:56px;
    border-radius:14px;
    background:#FDE6D8;
    display:flex;align-items:center;justify-content:center;
  }
  .clicksIconBox svg{width:28px;height:28px;color:#F4611E;}
  .conversionsIconBox{
    width:56px;height:56px;min-width:56px;
    border-radius:14px;
    background:#FDE6D8;
    display:flex;align-items:center;justify-content:center;
  }
  .conversionsIconBox svg{width:28px;height:28px;color:#F4611E;}

  .contactsLabel{font-size:17px;color:#4B5563;font-weight:500;margin-bottom:6px;}
  .emailLabel{font-size:17px;color:#4B5563;font-weight:500;margin-bottom:6px;}
  .clicksLabel{font-size:17px;color:#4B5563;font-weight:500;margin-bottom:6px;}
  .conversionsLabel{font-size:17px;color:#4B5563;font-weight:500;margin-bottom:6px;}

  .contactsValue{font-size:30px;font-weight:800;color:#16181C;margin-bottom:6px;}
  .emailValue{font-size:30px;font-weight:800;color:#16181C;margin-bottom:6px;}
  .clicksValue{font-size:30px;font-weight:800;color:#16181C;margin-bottom:6px;}
  .conversionsValue{font-size:30px;font-weight:800;color:#16181C;margin-bottom:6px;}

  .contactsDelta{font-size:15px;font-weight:700;color:#22A559;display:flex;align-items:center;gap:4px;}
  .emailDelta{font-size:15px;font-weight:700;color:#22A559;display:flex;align-items:center;gap:4px;}
  .clicksDelta{font-size:15px;font-weight:700;color:#22A559;display:flex;align-items:center;gap:4px;}
  .conversionsDelta{font-size:15px;font-weight:700;color:#22A559;display:flex;align-items:center;gap:4px;}

  .chartPanel{
    background:#FCFCFC;
    border:1px solid #ECECEC;
    border-radius:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    padding:32px;
  }
  .chartPanelTitle{
    font-size:24px;
    font-weight:800;
    color:#16181C;
    margin-bottom:24px;
  }
  .chartPanelBody{
    position:relative;
    height:420px;
  }
  .chartTooltip{
    position:absolute; left:66%; top:6%;
    background:#fff;
    border:1px solid #ECECEC;
    border-radius:14px;
    padding:14px 20px;
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
  }
  .chartTooltipDate{font-size:17px;color:#374151;font-weight:600;margin-bottom:6px;}
  .chartTooltipValue{font-size:22px;font-weight:800;color:#16181C;display:flex;align-items:center;gap:8px;}
  .chartTooltipDot{width:10px;height:10px;border-radius:50%;background:#F4611E;display:inline-block;}

  .summaryBar{
    margin-top:24px;
    background:#F3F4F6;
    border-radius:16px;
    padding:20px 24px;
    display:flex;
    align-items:center;
    gap:16px;
  }
  .summaryBarIcon{
    width:44px;height:44px;
    border-radius:50%;
    background:#F4611E;
    display:flex;align-items:center;justify-content:center;
  }
  .summaryBarIcon svg{width:22px;height:22px;color:#fff;}
  .summaryBarText{
    font-size:19px;
    color:#16181C;
    font-weight:500;
  }
  .summaryBarText b{color:#F4611E;}

  .outerFrame{
    width:430px;
    height:287px;
    overflow:hidden;
    position:relative;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 24px rgba(0,0,0,0.12);
  }

  .nativeCanvas{
    width:1536px;
    height:1024px;
    transform: scale(0.28);
    transform-origin: top left;
    background:#F7F7F8;
    padding:28px;
  }

  .headerRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
  }
  .pageTitle{
    font-size:34px;
    font-weight:800;
    color:#16181C;
    letter-spacing:-0.5px;
  }
  .aiInsightsPill{
    display:flex;
    align-items:center;
    gap:10px;
    background:#FDE6D8;
    padding:16px 26px;
    border-radius:26px;
    font-size:19px;
    font-weight:700;
    color:#F4611E;
  }
  .aiInsightsPill svg{width:20px;height:20px;color:#F4611E;}

  .accountPanel{
    background:#FCFCFC;
    border:1px solid #ECECEC;
    border-radius:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    padding:26px 32px;
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:24px;
  }
  .accountAvatarBox{
    width:70px;height:70px;min-width:70px;
    border-radius:16px;
    background:#FDE6D8;
    display:flex;align-items:center;justify-content:center;
  }
  .accountAvatarBox svg{width:34px;height:34px;color:#F4611E;}
  .accountNameBlock{margin-right:auto;}
  .accountFrameworkTitle{font-size:25px;font-weight:800;color:#16181C;margin-bottom:8px;}
  .accountRow{display:flex;align-items:center;gap:10px;}
  .accountRowLabel{font-size:19px;color:#6B7280;font-weight:500;}
  .accountRowValue{font-size:19px;color:#16181C;font-weight:700;}
  .dateAddedLabel{font-size:19px;color:#6B7280;font-weight:500;}
  .dateAddedValue{font-size:22px;color:#16181C;font-weight:700;margin-left:10px;}
  .dateAddedBlock{display:flex;align-items:center;margin-right:36px;}
  .activeBadge{
    background:#E8F9EE;
    color:#1E9E52;
    font-size:19px;
    font-weight:700;
    padding:12px 26px;
    border-radius:24px;
  }

  .middleRow{
    display:grid;
    grid-template-columns:1.55fr 1fr;
    gap:20px;
    margin-bottom:24px;
  }

  .engagementPanel{
    background:#FCFCFC;
    border:1px solid #ECECEC;
    border-radius:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    padding:30px 32px;
  }
  .engagementPanelTitle{
    font-size:24px;
    font-weight:800;
    color:#16181C;
    margin-bottom:26px;
  }
  .engagementItemRow{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:22px;
  }
  .engagementIconBox{
    width:56px;height:56px;min-width:56px;
    border-radius:14px;
    background:#FDE6D8;
    display:flex;align-items:center;justify-content:center;
  }
  .engagementIconBox svg{width:26px;height:26px;color:#F4611E;}
  .engagementItemLabel{
    font-size:21px;
    font-weight:600;
    color:#16181C;
    width:210px;
  }
  .engagementBarTrack{
    flex:1;
    height:14px;
    background:#E5E7EB;
    border-radius:7px;
    overflow:hidden;
    margin-right:20px;
  }
  .engagementBarFillOpened{height:100%;width:72%;background:#F4611E;border-radius:7px;}
  .engagementBarFillClicked{height:100%;width:41%;background:#F4611E;border-radius:7px;}
  .engagementBarFillReplied{height:100%;width:28%;background:#F4611E;border-radius:7px;}
  .engagementPercentValue{
    font-size:22px;
    font-weight:800;
    color:#16181C;
    width:70px;
    text-align:right;
  }

  .campaignStatusPanel{
    background:#FCFCFC;
    border:1px solid #ECECEC;
    border-radius:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    padding:30px 32px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .campaignStatusTitle{
    font-size:24px;
    font-weight:800;
    color:#16181C;
    align-self:flex-start;
    margin-bottom:16px;
  }
  .campaignGaugeWrap{
    position:relative;
    width:300px;
    height:170px;
    margin-bottom:8px;
  }
  .campaignGaugePercent{
    font-size:44px;
    font-weight:800;
    color:#16181C;
  }
  .campaignGaugeSubtext{
    font-size:22px;
    font-weight:700;
    color:#16181C;
  }
  .campaignGaugeCenterText{
    position:absolute;
    top:58%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
  }
  .campaignLegendRow{
    display:flex;
    gap:28px;
    margin-top:12px;
  }
  .campaignLegendItem{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:18px;
    color:#374151;
    font-weight:500;
  }
  .campaignLegendDotCompleted{width:14px;height:14px;border-radius:50%;background:#F4611E;display:inline-block;}
  .campaignLegendDotProgress{width:14px;height:14px;border-radius:50%;background:#FBD5B8;display:inline-block;}

  .campaignsTablePanel{
    background:#FCFCFC;
    border:1px solid #ECECEC;
    border-radius:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    padding:30px 32px;
  }
  .campaignsTablePanelTitle{
    font-size:24px;
    font-weight:800;
    color:#16181C;
    margin-bottom:22px;
  }
  .campaignsTableHeaderRow{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
    padding-bottom:16px;
    border-bottom:1px solid #ECECEC;
  }
  .campaignsTableHeaderCell{
    font-size:19px;
    font-weight:600;
    color:#6B7280;
  }
  .campaignsTableHeaderCellRight{
    font-size:19px;
    font-weight:600;
    color:#6B7280;
    text-align:center;
  }
  .campaignsTableDataRow{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
    padding:20px 0;
    border-bottom:1px solid #F3F4F6;
    align-items:center;
  }
  .campaignsTableCampaignName{
    font-size:20px;
    font-weight:600;
    color:#16181C;
  }
  .campaignsTableSentValue{
    font-size:20px;
    font-weight:600;
    color:#16181C;
  }
  .campaignsTableGreenValue{
    font-size:20px;
    font-weight:700;
    color:#1E9E52;
    text-align:center;
  }
  .campaignsTableConversionValue{
    font-size:20px;
    font-weight:700;
    color:#1E9E52;
    text-align:center;
  }
  .viewAllCampaignsWrap{
    display:flex;
    justify-content:center;
    margin-top:26px;
  }
  .viewAllCampaignsButton{
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid #ECECEC;
    background:#fff;
    padding:18px 40px;
    border-radius:30px;
    font-size:21px;
    font-weight:700;
    color:#F4611E;
  }
  .viewAllCampaignsButton svg{width:18px;height:18px;color:#F4611E;}

    .overviewfeature-card{
    padding: 0px !important;
    width: 430px;
  }
  .overviewCardOuterFrame {
    width: 430px;
    height: 287px;
    overflow: hidden;
    position: relative;
    background: #fff;
    border-radius: 16px 16px 0px 0px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  }

  .overviewCardNativeCanvas {
    width: 1536px;
    height: 1024px;
    transform: scale(0.28);
    transform-origin: top left;
    background: #fff;
    padding: 60px 60px 0px 60px
  }

  .overviewHeaderRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
  }
  .overviewHeaderLeft {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .overviewHeaderIconBox {
    width: 66px;
    height: 66px;
    border-radius: 16px;
    background: #fde6d8;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .overviewHeaderIconBox svg {
    width: 32px;
    height: 32px;
    color: #f4611e;
  }
  .overviewHeaderTitle {
    font-size: 30px;
    font-weight: 700;
    color: #16181c;
  }
  .overviewDatePill {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #ececec;
    background: #fff;
    padding: 16px 24px;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 600;
    color: #16181c;
  }
  .overviewDatePill svg {
    width: 18px;
    height: 18px;
    color: #4b5563;
  }

  .overviewStatsRow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 36px;
  }
  .overviewStatCard {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 22px;
  }
  .overviewStatIconCircleTotal {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #dcebff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }
  .overviewStatIconCircleTotal svg {
    width: 24px;
    height: 24px;
    color: #3b6fea;
  }
  .overviewStatIconCircleActive {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #eae3fb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }
  .overviewStatIconCircleActive svg {
    width: 24px;
    height: 24px;
    color: #7c5fe0;
  }
  .overviewStatIconCircleHot {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fde6d8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }
  .overviewStatIconCircleHot svg {
    width: 24px;
    height: 24px;
    color: #f4611e;
  }
  .overviewStatIconCirclePipeline {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #dcebff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }
  .overviewStatIconCirclePipeline svg {
    width: 24px;
    height: 24px;
    color: #3b6fea;
  }

  .overviewStatValue {
    font-size: 34px;
    font-weight: 800;
    color: #16181c;
    margin-bottom: 8px;
  }
  .overviewStatLabel {
    font-size: 19px;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 12px;
  }
  .overviewStatDelta {
    font-size: 18px;
    font-weight: 700;
    color: #1e9e52;
  }

  .overviewDivider {
    border-top: 1px solid #ececec;
    margin-bottom: 30px;
  }

  .overviewTrendTitle {
    font-size: 26px;
    font-weight: 700;
    color: #16181c;
    margin-bottom: 26px;
  }

  .overviewChartBody {
    position: relative;
    height: 480px;
  }

  .overviewChartTooltip {
    position: absolute;
    left: 56%;
    top: 4%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 16px 26px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  }
  .overviewChartTooltipMonth {
    font-size: 20px;
    color: #374151;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .overviewChartTooltipValueRow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 800;
    color: #16181c;
  }
  .overviewChartTooltipDot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #3b6fea;
    display: inline-block;
  }

  .companiesCardOuterFrame {
    width: 430px;
    height: 287px;
    overflow: hidden;
    position: relative;
    background: #fff;
    border-radius: 16px 16px 0px 0px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  }

  .companiesCardNativeCanvas {
    width: 1536px;
    height: 1024px;
    transform: scale(0.28);
    transform-origin: top left;
    background: #fff;
    padding: 60px 60px 0px 60px
  }

  .companiesHeaderRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
  }
  .companiesHeaderLeft {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .companiesHeaderIconBox {
    width: 66px;
    height: 66px;
    border-radius: 16px;
    background: #fde6d8;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .companiesHeaderIconBox svg {
    width: 32px;
    height: 32px;
    color: #f4611e;
  }
  .companiesHeaderTitle {
    font-size: 30px;
    font-weight: 700;
    color: #16181c;
  }
  .companiesHeaderRight {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .companiesSearchBox {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #ececec;
    background: #fff;
    padding: 16px 24px;
    border-radius: 14px;
    width: 340px;
  }
  .companiesSearchBox svg {
    width: 20px;
    height: 20px;
    color: #9ca3af;
  }
  .companiesSearchPlaceholder {
    font-size: 19px;
    color: #9ca3af;
    font-weight: 500;
  }
  .companiesAddButton {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f4611e;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 18px 28px;
    border-radius: 14px;
    white-space: nowrap;
  }
  .companiesAddButton svg {
    width: 18px;
    height: 18px;
    color: #fff;
  }

  .companiesTableHeaderRow {
    display: grid;
    grid-template-columns: 2fr 1.1fr 1.5fr 1fr 1fr 0.3fr;
    padding-bottom: 20px;
    border-bottom: 2px solid #f4611e;
    margin-bottom: 6px;
  }
  .companiesTableHeaderCell {
    font-size: 19px;
    font-weight: 600;
    color: #6b7280;
  }

  .companiesTableDataRow {
    display: grid;
    grid-template-columns: 2fr 1.1fr 1.5fr 1fr 1fr 0.3fr;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid #f3f4f6;
  }

  .companiesNameCell {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .companiesAvatarTC {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 14px;
    background: #e8e1fb;
    color: #7c5fe0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
  }
  .companiesAvatarGI {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 14px;
    background: #d9f5e3;
    color: #1e9e52;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
  }
  .companiesAvatarBS {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 14px;
    background: #fde6d8;
    color: #f4611e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
  }
  .companiesAvatarFP {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 14px;
    background: #dcebff;
    color: #3b6fea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
  }
  .companiesAvatarWH {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 14px;
    background: #fbdce7;
    color: #e0457b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
  }
  .companiesNameTextBlock {
  }
  .companiesNameTitle {
    font-size: 21px;
    font-weight: 700;
    color: #16181c;
    margin-bottom: 4px;
  }
  .companiesNameUrl {
    font-size: 17px;
    color: #9ca3af;
    font-weight: 500;
  }

  .companiesIndustryPillTech {
    background: #dcebff;
    color: #3b6fea;
    font-size: 17px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 16px;
    display: inline-block;
  }
  .companiesIndustryPillManufacturing {
    background: #d9f5e3;
    color: #1e9e52;
    font-size: 17px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 16px;
    display: inline-block;
  }
  .companiesIndustryPillServices {
    background: #fde6d8;
    color: #f4611e;
    font-size: 17px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 16px;
    display: inline-block;
  }
  .companiesIndustryPillConsulting {
    background: #eae3fb;
    color: #7c5fe0;
    font-size: 17px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 16px;
    display: inline-block;
  }
  .companiesIndustryPillFinance {
    background: #fbdce7;
    color: #e0457b;
    font-size: 17px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 16px;
    display: inline-block;
  }

  .companiesOwnerCell {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .companiesOwnerAvatarCircle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #e5e7eb;
  }
  .companiesOwnerName {
    font-size: 19px;
    font-weight: 600;
    color: #16181c;
  }

  .companiesOpenDealsValue {
    font-size: 20px;
    font-weight: 700;
    color: #3b6fea;
  }
  .companiesValueAmount {
    font-size: 20px;
    font-weight: 700;
    color: #16181c;
  }
  .companiesRowMenuDots {
    font-size: 24px;
    color: #9ca3af;
    font-weight: 800;
  }

  .companiesFooterRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }
  .companiesFooterText {
    font-size: 19px;
    color: #6b7280;
    font-weight: 500;
  }
  .companiesPaginationRow {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .companiesPageArrow {
    width: 44px;
    height: 44px;
    border: 1px solid #ececec;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
  }
  .companiesPageArrow svg {
    width: 16px;
    height: 16px;
  }
  .companiesPageActive {
    width: 44px;
    height: 44px;
    border: 2px solid #f4611e;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f4611e;
    font-size: 19px;
    font-weight: 700;
  }
  .companiesPageNumber {
    width: 44px;
    height: 44px;
    border: 1px solid #ececec;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16181c;
    font-size: 19px;
    font-weight: 600;
  }
  .companiesPageEllipsis {
    font-size: 19px;
    color: #9ca3af;
    font-weight: 600;
    padding: 0 4px;
  }

  .feature-calendar-image{
  height: 330px;
}
:root{
  --fcal-bg:#ffffff;
  --fcal-border:#eceff2;
  --fcal-text-dark:#1f2430;
  --fcal-text-mid:#5b6472;
  --fcal-text-light:#9aa2ad;
  --fcal-accent:#f2703b;
  --fcal-accent-bg:#fdece3;
  --fcal-now-line:#ef4444;
}

.fcal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 10px;
  border-bottom:1px solid var(--fcal-border);
  flex-shrink:0;
}
.fcal-header-left{display:flex;align-items:center;gap:5px;}
.fcal-icon{
  width:16px;height:16px;
  background:var(--fcal-accent-bg);
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;
}
.fcal-title{font-size:9px;font-weight:700;color:var(--fcal-text-dark);}
.fcal-header-right{display:flex;align-items:center;gap:3px;}
.fcal-btn{
  font-size:6px;
  padding:2px 5px;
  border:1px solid var(--fcal-border);
  border-radius:5px;
  color:var(--fcal-text-mid);
  background:#fff;
  white-space:nowrap;
}
.fcal-grid-wrap{
  flex:1;
  display:grid;
  grid-template-columns:26px repeat(7,1fr);
  grid-template-rows:16px 14px 1fr;
  font-size:5.5px;
  position:relative;
}
.fcal-daylabel{
  text-align:center;
  padding-top:2px;
  color:var(--fcal-text-mid);
  font-weight:600;
  border-bottom:1px solid var(--fcal-border);
  font-size:5.5px;
  line-height:6px;
}
.fcal-daylabel.fcal-active{color:var(--fcal-accent);}
.fcal-daynum{
  display:inline-block;
  margin-top:1px;
}
.fcal-daynum.fcal-active{
  background:var(--fcal-accent);
  color:#fff;
  border-radius:50%;
  width:9px;height:9px;
  line-height:9px;
  font-size:6px;
}
.fcal-allday-cell{
  border-bottom:1px solid var(--fcal-border);
  border-right:1px solid var(--fcal-border);
  display:flex;align-items:center;justify-content:center;
  padding:1px;
}
.fcal-allday-label{
  font-size:4.5px;color:var(--fcal-text-light);
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--fcal-border);
}
.fcal-allday-chip{
  font-size:4.3px;font-weight:600;
  border-radius:3px;
  padding:1px 3px;
  width:100%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
}
.fcal-timecol{
  grid-column:1;
  grid-row:3;
  position:relative;
  border-right:1px solid var(--fcal-border);
}
.fcal-timelabel{
  position:absolute;
  right:2px;
  transform:translateY(-50%);
  color:var(--fcal-text-light);
  font-size:5px;
}
.fcal-bodygrid{
  grid-column:2/9;
  grid-row:3;
  position:relative;
  display:grid;
  grid-template-columns:repeat(7,1fr);
}
.fcal-daycolumn{
  border-right:1px solid var(--fcal-border);
  position:relative;
  background-image:repeating-linear-gradient(to bottom, transparent, transparent 12.5px, var(--fcal-border) 12.5px, var(--fcal-border) 13px);
}
.fcal-event{
  position:absolute;
  left:1px;right:1px;
  border-radius:3px;
  border-left:2px solid;
  padding:2px 2px;
  overflow:hidden;
  font-size:4.3px;
  line-height:5.2px;
}
.fcal-event .fcal-etime{font-weight:700;color:var(--fcal-text-dark);display:block;}
.fcal-event .fcal-etitle{font-weight:700;color:var(--fcal-text-dark);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fcal-event .fcal-esub{color:var(--fcal-text-mid);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fcal-av{width:6px;height:6px;border-radius:50%;background:#c9ccd3;border:0.5px solid #fff;margin-right:-2px;}
.fcal-nowline{
  position:absolute;
  left:0;right:0;
  height:1px;
  background:var(--fcal-now-line);
  z-index:5;
}
.fcal-nowdot{
  position:absolute;
  width:4px;height:4px;
  background:var(--fcal-now-line);
  border-radius:50%;
  left:-2px;top:-1.5px;
}

.fcal-dots{font-size:9px;color:var(--fcal-text-light);letter-spacing:1px;}

.fcal-list{
  flex:1;
  padding:6px 10px 0 10px;
  position:relative;
  overflow:hidden;
}
.fcal-timeline-line{
  position:absolute;
  left:14.5px;
  top:2px;
  bottom:2px;
  width:1px;
  background:var(--fcal-border);
}
.fcal-item{
  display:flex;
  align-items:flex-start;
  gap:6px;
  position:relative;
  padding-bottom:4px;
  margin-bottom:4px;
}
.fcal-dot{
  width:5px;height:5px;
  border-radius:50%;
  margin-top:2px;
  flex-shrink:0;
  z-index:2;
}
.fcal-info{flex:1;min-width:0;}
.fcal-time{font-size:5.2px;color:var(--fcal-text-mid);font-weight:600;}
.fcal-name{font-size:6.3px;font-weight:700;color:var(--fcal-text-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fcal-sub{font-size:5.2px;color:var(--fcal-text-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fcal-people{
  display:flex;align-items:center;flex-shrink:0;margin-top:3px;
}
.fcal-people .fcal-av{
  width:9px;height:9px;border-radius:50%;
  background:#c9ccd3;
  border:0.5px solid #fff;
  margin-left:-3px;
  margin-right:0;
}
.fcal-people .fcal-av:first-child{margin-left:0;}
.fcal-more{
  font-size:5px;color:var(--fcal-text-mid);font-weight:600;margin-left:2px;
}
.fcal-group-icon{font-size:7px;color:var(--fcal-text-light);margin-right:2px;}

.fcal-footer{
  padding:5px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--fcal-accent);
  font-size:6.5px;
  font-weight:700;
  border-top:1px solid var(--fcal-border);
  flex-shrink:0;
}

.salescrm-feature-img img{
height: 40px;
}
.salescrm-feature-img .byt-tab-header {
    white-space: normal !important;
      font-size: 14px !important;
    font-weight: 500;
    line-height: 18px;
}
.salescrm-feature-img .byt-tab{
  display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: start !important;
    padding: 32px 5px 5px 5px !important;
    min-width: 140px !important;
    height: 140px !important;
}
.preview-image-backgruond{
      padding: 28px 0px;
    background: #FDF3EA;
    /* border: aliceblue; */
    border-radius: 20px;
    margin-top: 44px;
}
.salescta-buttn-spaceing{
  margin-bottom: 140px !important;
}
.All-inOnecta-buttn-spaceing{
 margin-bottom: 90px !important;
}
.explore-products-built {
    position: relative;
    overflow: hidden;
}

.explore-products-built::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("https://divsly.com/gofox/assets/img/explore-productsbuilt.png") center center / cover no-repeat;
    z-index: 0;
}

.explore-products-built > * {
    position: relative;
    z-index: 1;
}
.gofox-sales-height{
  height: 255px;
}
.qr-tile-label:hover{
      color: #EB4D00;
    transition: all 0.1s linear;
}

.fu-trust-badges {
  display: flex;
  align-items: center;
  gap: 28px;
      justify-content: center;
    margin-top: 24px;
}
.fu-trust-badges-footer{
  display: flex;
  align-items: center;
  gap: 28px;
      justify-content: start;
    margin-top: 24px;
}
.integrations-fu-trust-badge{
   display: flex;
  align-items: center;
  gap: 28px;
      justify-content: center;
    
}
.Sales-fu-trust-badgestext{
  color: white;
  font-size: 14px;
  
}
.fu-trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fu-trust-badge__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: white;
}

.fu-trust-badge__text {
  font-size: 14px;

  color: #1a1a1a;
}
.fu-trust-badge__icon circle {
  fill: #7e7b7b !important;
}

/* caendar features */

.calf-root{
    --calf-ink:#17161c;
    --calf-sub:#6f6b7a;
    --calf-line:#eae7e1;
    --calf-paper:#faf9f6;
    --calf-card:#ffffff;
    --calf-indigo:#4b3fe4;
    --calf-indigo-deep:#2c2470;
    --calf-coral:#ff6b4a;
    --calf-mint:#28a06b;
    --calf-tint-peach:#fbeadf;
    --calf-tint-navy:#1a1730;
    --calf-tint-mint:#e6f3ec;
    --calf-tint-lav:#eeeafc;
    --calf-tint-sky:#e7eefc;
    font-family:'Inter',sans-serif;
    color:var(--calf-ink);
   
    box-sizing:border-box;
  }
 


  .calf-head{
    text-align:center;
    max-width:620px;
    margin:0 auto 56px;
  }
  .calf-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--calf-indigo);
    background:#efecfd;
    padding:6px 14px;
    border-radius:100px;
    margin-bottom:18px;
  }
  .calf-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--calf-indigo);animation:calf-blink 1.8s ease-in-out infinite;}
  @keyframes calf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}
  .calf-title{
    font-family:'Sora',sans-serif;
    font-size:38px;
    font-weight:700;
    line-height:1.18;
    letter-spacing:-.01em;
    margin:0 0 14px;
  }
  .calf-title em{font-style:normal;color:var(--calf-indigo);}
  .calf-desc{font-size:16px;line-height:1.6;color:var(--calf-sub);margin:0;}

  
  .calf-card{
    background:var(--calf-card);
    border:1px solid var(--calf-line);
    border-radius:20px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .calf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px -20px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .calf-shot{
    position:relative;
    height:196px;
    padding:16px 18px 0;
    overflow:hidden;
  }
  .calf-tint-peach{background:var(--calf-tint-peach);}
  .calf-tint-navy{background:var(--calf-tint-navy);}
  .calf-tint-mint{background:var(--calf-tint-mint);}
  .calf-tint-lav{background:var(--calf-tint-lav);}
  .calf-tint-sky{background:var(--calf-tint-sky);}

  .calf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .calf-dot{width:8px;height:8px;border-radius:50%;}
  .calf-dot--r{background:#f0665a;}
  .calf-dot--y{background:#f0b64a;}
  .calf-dot--g{background:#57c26a;}
  .calf-chrome-bar{
    height:8px;
    flex:1;
    max-width:130px;
    margin-left:8px;
    border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .calf-tint-navy .calf-chrome-bar{background:rgba(255,255,255,.14);}

  .calf-panel{
    background:#ffffff;
    border-radius:14px 14px 0 0;
    padding:14px 16px;
    box-shadow:0 18px 30px -14px rgba(23,22,28,.28);
    height:158px;
    position:relative;
    overflow:hidden;
  }
  .calf-tint-navy .calf-panel{background:#241f42;box-shadow:0 18px 30px -14px rgba(0,0,0,.5);}

  .calf-body{
    padding:34px;
  }
  .calf-num{
    display:none;
    font-family:'Sora',sans-serif;
    font-size:12.5px;
    font-weight:700;
    color:var(--calf-indigo);
    background:#efecfd;
    border-radius:7px;
    padding:2px 9px;
    margin-bottom:12px;
    letter-spacing:.02em;
  }
  .calf-body h3{
    font-family:'Sora',sans-serif;
    font-size:19px;
    font-weight:700;
    margin:0 0 10px;
    letter-spacing:-.01em;
  }
  .calf-body p{
    font-size:14.5px;
    line-height:1.65;
    color:var(--calf-sub);
    margin:0;
  }

  /* ---------- shared mini UI atoms ---------- */
  .calf-row{display:flex;align-items:center;gap:8px;}
  .calf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .calf-tint-navy .calf-label{color:#a9a4c4;}
  .calf-pill{
    font-size:10.5px;
    font-weight:600;
    padding:3px 9px;
    border-radius:100px;
    display:inline-block;
  }
  .calf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;
  }

  /* 1. Meeting scheduling — calendar grid with pulsing highlighted slot */
  .calf-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:12px;}
  .calf-cal span{
    height:16px;border-radius:4px;background:#f1efe9;
  }
  .calf-cal .calf-hit{
    background:var(--calf-indigo);
    animation:calf-pulse 1.6s ease-in-out infinite;
  }
  @keyframes calf-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.72;transform:scale(1.06);}}
  .calf-meet-card{
    margin-top:12px;
    border:1px solid #eee9ff;
    border-radius:10px;
    padding:8px 10px;
    display:flex;
    align-items:center;
    gap:8px;
    background:#f8f7ff;
  }
  .calf-meet-clock{
    width:20px;height:20px;border-radius:50%;
    border:2px solid var(--calf-indigo);
    position:relative;flex-shrink:0;
  }
  .calf-meet-clock::before{
    content:"";position:absolute;left:50%;top:50%;
    width:5px;height:1.6px;background:var(--calf-indigo);
    transform-origin:left center;
    transform:translate(0,-50%) rotate(0deg);
    animation:calf-tick 3s linear infinite;
  }
  @keyframes calf-tick{to{transform:translate(0,-50%) rotate(360deg);}}

  /* 2. Task & event planning — checklist with checking animation */
  .calf-task{display:flex;align-items:center;gap:9px;margin-top:11px;}
  .calf-check{
    width:15px;height:15px;border-radius:5px;border:2px solid #cfc9f7;
    flex-shrink:0;position:relative;
  }
  .calf-task--done .calf-check{background:var(--calf-mint);border-color:var(--calf-mint);animation:calf-check-pop 2.4s ease-in-out infinite;}
  @keyframes calf-check-pop{0%,15%{transform:scale(0.7);}25%,100%{transform:scale(1);}}
  .calf-task-line{height:8px;border-radius:4px;background:#f1efe9;flex:1;}
  .calf-task--done .calf-task-line{background:#e3f4ea;}

  /* 3. Smart reminders — bell + toast slide-in */
  .calf-bell{
    width:34px;height:34px;border-radius:10px;background:#ffe6dd;
    display:flex;align-items:center;justify-content:center;position:relative;margin-top:6px;
  }
  .calf-bell-badge{
    position:absolute;top:-4px;right:-4px;
    width:15px;height:15px;border-radius:50%;background:var(--calf-coral);
    color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;
    animation:calf-blink 1.8s ease-in-out infinite;
  }
  .calf-toast{
    margin-top:12px;background:#fff;border:1px solid #f2e2da;border-radius:10px;
    padding:8px 10px;display:flex;gap:8px;align-items:flex-start;
    box-shadow:0 6px 14px -8px rgba(23,22,28,.2);
    animation:calf-slide-in 2.6s ease-in-out infinite;
  }
  @keyframes calf-slide-in{0%{transform:translateX(-8px);opacity:0;}18%{transform:translateX(0);opacity:1;}82%{opacity:1;}100%{opacity:0;}}

  /* 4. Shared team calendar — avatars + live pulse */
  .calf-avrow{display:flex;margin-top:10px;}
  .calf-avrow .calf-avatar{margin-left:-6px;}
  .calf-avrow .calf-avatar:first-child{margin-left:0;}
  .calf-live{display:flex;align-items:center;gap:6px;margin-top:12px;}
  .calf-live-dot{width:7px;height:7px;border-radius:50%;background:var(--calf-mint);animation:calf-blink 1.4s ease-in-out infinite;}
  .calf-share-bar{height:8px;border-radius:4px;background:#e9f4ec;margin-top:10px;overflow:hidden;}
  .calf-share-bar i{display:block;height:100%;width:35%;background:var(--calf-mint);border-radius:4px;animation:calf-grow 2.8s ease-in-out infinite;}
  @keyframes calf-grow{0%{width:20%;}50%{width:78%;}100%{width:20%;}}

  /* 5. Track daily activities — vertical timeline */
  .calf-timeline{margin-top:10px;position:relative;padding-left:16px;}
  .calf-timeline::before{content:"";position:absolute;left:4px;top:2px;bottom:2px;width:2px;background:#eee9ff;}
  .calf-tl-item{position:relative;margin-bottom:12px;}
  .calf-tl-item::before{
    content:"";position:absolute;left:-16px;top:2px;width:9px;height:9px;border-radius:50%;
    background:var(--calf-indigo);border:2px solid #fff;box-shadow:0 0 0 2px #eee9ff;
  }
  .calf-tl-item:nth-child(2)::before{animation:calf-blink 1.8s ease-in-out infinite;}
  .calf-tl-line{height:7px;border-radius:4px;background:#f1efe9;}

  /* 6. Recurring events — rotating repeat icon */
  .calf-repeat-wrap{display:flex;align-items:center;gap:12px;margin-top:14px;}
  .calf-repeat-icon{
    width:34px;height:34px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:#eee9ff;border-radius:10px;
  }
  .calf-repeat-icon svg{animation:calf-spin 3.2s linear infinite;}
  @keyframes calf-spin{to{transform:rotate(360deg);}}
  .calf-repeat-chip{display:flex;gap:5px;margin-top:12px;}
  .calf-repeat-chip span{
    font-size:10px;font-weight:600;padding:4px 8px;border-radius:100px;
    background:#f1efe9;color:#8a8696;
  }
  .calf-repeat-chip span.calf-on{background:var(--calf-indigo);color:#fff;}

  /* 7. Sync calendar events — two panels with orbiting sync dot */
  .calf-sync-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
  .calf-sync-box{width:60px;height:60px;border-radius:12px;background:#f4f6ff;border:1px solid #e3e8ff;
    display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--calf-indigo);}
  .calf-sync-path{flex:1;height:2px;background:linear-gradient(90deg,#d8ddff,#d8ddff);margin:0 8px;position:relative;}
  .calf-sync-dot{
    position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;
    background:var(--calf-indigo);transform:translateY(-50%);
    animation:calf-orbit 2.2s ease-in-out infinite;
  }
  @keyframes calf-orbit{0%{left:0;}50%{left:calc(100% - 8px);}100%{left:0;}}

  /* 8. Avoid conflicts — overlapping blocks resolving */
  .calf-conflict{position:relative;height:64px;margin-top:14px;}
  .calf-cblock{
    position:absolute;left:0;top:8px;width:72%;height:22px;border-radius:7px;
    background:#ffe3da;border:1px solid #ffb9a3;font-size:9.5px;color:#c04a2c;font-weight:600;
    display:flex;align-items:center;padding-left:8px;
    animation:calf-settle-a 3s ease-in-out infinite;
  }
  .calf-cblock--b{
    top:26px;background:#e6f3ec;border-color:#b7e2c9;color:#1f7a4c;
    animation:calf-settle-b 3s ease-in-out infinite;
  }
  @keyframes calf-settle-a{0%,20%{top:8px;}55%,100%{top:2px;}}
  @keyframes calf-settle-b{0%,20%{top:26px;}55%,100%{top:36px;}}

  /* 9. Access anywhere — devices with traveling dot */
  .calf-devices{display:flex;align-items:flex-end;gap:16px;margin-top:16px;justify-content:center;}
  .calf-device{background:#f4f2ff;border:1px solid #e3ddff;border-radius:6px;position:relative;}
  .calf-device--phone{width:20px;height:34px;border-radius:5px;}
  .calf-device--laptop{width:44px;height:28px;}
  .calf-device--tablet{width:28px;height:36px;border-radius:5px;}
  .calf-device-dot{
    position:absolute;top:-10px;left:50%;width:7px;height:7px;border-radius:50%;
    background:var(--calf-coral);transform:translateX(-50%);
    animation:calf-hop 2.4s ease-in-out infinite;
  }
  @keyframes calf-hop{
    0%,100%{left:-38px;top:-10px;}
    50%{left:38px;top:-10px;}
  }

  /* 10. Manage deadlines — progress bar with milestone markers */
  .calf-deadline{margin-top:16px;}
  .calf-dl-bar{height:8px;border-radius:5px;background:#f1efe9;position:relative;overflow:visible;}
  .calf-dl-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--calf-indigo),var(--calf-coral));
    animation:calf-grow-fill 3s ease-in-out infinite;}
  @keyframes calf-grow-fill{0%{width:15%;}60%,100%{width:72%;}}
  .calf-dl-marker{
    position:absolute;top:-4px;width:16px;height:16px;border-radius:50%;
    background:#fff;border:3px solid var(--calf-coral);
  }
  .calf-dl-labels{display:flex;justify-content:space-between;margin-top:16px;}

  @media (max-width:760px){
    .calf-grid{grid-template-columns:1fr;}
    .calf-title{font-size:29px;}
  }

  @media (prefers-reduced-motion:reduce){
    .calf-root *{animation:none !important;transition:none !important;}
  }

  .salescrm-feature-headertext{padding:34px;}
  .salescrm-feature-headertext h3{font-size:21px;margin-bottom:18px; font-weight: 500 !important;}
  .salescrm-feature-headertext p{font-size:16px;color:#6B6F76;margin:0; line-height: 1.55;}
  .feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.features360-section-head {
    max-width: 900px;
    margin: 0 auto 75px;
    text-align: center;
}
.features360-section-head .eyebrow {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #EB4D00;
    display: block;
    margin-bottom: 10px;
}
.feat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    opacity: 0;
    animation: fadeUp .55s ease forwards;
    transition: box-shadow .2s ease, transform .2s ease;
}

/* contact-management */

  .ctf-root{
    --ctf-ink:#17161c;
    --ctf-sub:#6f6b7a;
    --ctf-line:#eae7e1;
    --ctf-paper:#faf9f6;
    --ctf-card:#ffffff;
    --ctf-indigo:#4b3fe4;
    --ctf-coral:#ff6b4a;
    --ctf-mint:#28a06b;
    --ctf-amber:#e6a23c;
    --ctf-tint-peach:#fbeadf;
    --ctf-tint-navy:#1a1730;
    --ctf-tint-mint:#e6f3ec;
    --ctf-tint-lav:#eeeafc;
    --ctf-tint-sky:#e7eefc;
    font-family:'Inter',sans-serif;
   
    color:var(--ctf-ink);
   
    box-sizing:border-box;
  }
  .ctf-root *{box-sizing:border-box;}
  
  .ctf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .ctf-card{
    background:var(--ctf-card);
    border:1px solid var(--ctf-line);
    border-radius:20px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .ctf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px -20px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .ctf-shot{
    position:relative;
    height:196px;
    padding:16px 18px 0;
    overflow:hidden;
  }
  .ctf-tint-peach{background:var(--ctf-tint-peach);}
  .ctf-tint-navy{background:var(--ctf-tint-navy);}
  .ctf-tint-mint{background:var(--ctf-tint-mint);}
  .ctf-tint-lav{background:var(--ctf-tint-lav);}
  .ctf-tint-sky{background:var(--ctf-tint-sky);}

  .ctf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .ctf-dot{width:8px;height:8px;border-radius:50%;}
  .ctf-dot--r{background:#f0665a;}
  .ctf-dot--y{background:#f0b64a;}
  .ctf-dot--g{background:#57c26a;}
  .ctf-chrome-bar{
    height:8px;
    flex:1;
    max-width:130px;
    margin-left:8px;
    border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .ctf-tint-navy .ctf-chrome-bar{background:rgba(255,255,255,.14);}

  .ctf-panel{
    background:#ffffff;
    border-radius:14px 14px 0 0;
    padding:14px 16px;
    box-shadow:0 18px 30px -14px rgba(23,22,28,.28);
    height:158px;
    position:relative;
    overflow:hidden;
  }
  .ctf-tint-navy .ctf-panel{background:#241f42;box-shadow:0 18px 30px -14px rgba(0,0,0,.5);}

  .ctf-body{
    padding:26px 26px 28px;
  }
  .ctf-body h3{
    font-family:'Sora',sans-serif;
    font-size:19px;
    font-weight:700;
    margin:0 0 10px;
    letter-spacing:-.01em;
  }
  .ctf-body p{
    font-size:14.5px;
    line-height:1.65;
    color:var(--ctf-sub);
    margin:0;
  }

  .ctf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .ctf-tint-navy .ctf-label{color:#a9a4c4;}
  .ctf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  @keyframes ctf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Centralized Contact Database — cards feeding into a central hub */
  .ctf-hub-wrap{position:relative;height:120px;margin-top:14px;display:flex;align-items:center;justify-content:center;}
  .ctf-hub-core{
    width:44px;height:44px;border-radius:12px;background:var(--ctf-indigo);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;
    box-shadow:0 8px 18px -6px rgba(75,63,228,.55);z-index:2;
  }
  .ctf-hub-node{
    position:absolute;width:26px;height:26px;border-radius:8px;background:#fff;
    border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.2);
    animation:ctf-feed 2.4s ease-in-out infinite;
  }
  .ctf-hub-node:nth-child(2){top:6px;left:24px;animation-delay:0s;}
  .ctf-hub-node:nth-child(3){bottom:6px;left:24px;animation-delay:.4s;}
  .ctf-hub-node:nth-child(4){top:6px;right:24px;animation-delay:.8s;}
  .ctf-hub-node:nth-child(5){bottom:6px;right:24px;animation-delay:1.2s;}
  @keyframes ctf-feed{
    0%{opacity:1;transform:scale(1);}
    60%{opacity:.3;transform:scale(.5) translateY(0);}
    61%{opacity:0;}
    100%{opacity:0;}
  }

  /* 2. Create Contact Profiles — fields filling in one by one */
  .ctf-profile{display:flex;gap:10px;margin-top:14px;align-items:flex-start;}
  .ctf-profile-av{
    width:40px;height:40px;border-radius:50%;background:var(--ctf-indigo);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;flex-shrink:0;
  }
  .ctf-field{height:8px;border-radius:4px;background:#f1efe9;margin-bottom:7px;width:0;
    animation:ctf-typefill 2.8s ease-in-out infinite;}
  .ctf-field:nth-child(1){animation-delay:0s;}
  .ctf-profile .ctf-field:nth-of-type(1){width:0;}
  .ctf-fields{flex:1;padding-top:4px;}
  .ctf-fields .ctf-field:nth-child(1){animation-delay:0s;}
  .ctf-fields .ctf-field:nth-child(2){animation-delay:.3s;}
  .ctf-fields .ctf-field:nth-child(3){animation-delay:.6s;}
  @keyframes ctf-typefill{
    0%{width:0;background:#f1efe9;}
    40%{width:85%;background:#e3ddff;}
    70%,100%{width:85%;background:#e3ddff;}
  }

  /* 3. Organize with Tags — chips popping in */
  .ctf-tagrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
  .ctf-tag{
    font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:100px;
    animation:ctf-pop 2.4s ease-in-out infinite;
  }
  .ctf-tag:nth-child(1){background:#eee9ff;color:var(--ctf-indigo);animation-delay:0s;}
  .ctf-tag:nth-child(2){background:#ffe6dd;color:var(--ctf-coral);animation-delay:.25s;}
  .ctf-tag:nth-child(3){background:#e6f3ec;color:var(--ctf-mint);animation-delay:.5s;}
  .ctf-tag:nth-child(4){background:#fdf1da;color:var(--ctf-amber);animation-delay:.75s;}
  @keyframes ctf-pop{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}

  /* 4. Manage Contact Information — editable row with blinking cursor */
  .ctf-edit-row{
    margin-top:14px;background:#fff;border:1px solid #eee9ff;border-radius:10px;
    padding:10px 12px;
  }
  .ctf-edit-row + .ctf-edit-row{margin-top:8px;}
  .ctf-edit-val{display:flex;align-items:center;gap:2px;}
  .ctf-cursor{width:1.4px;height:12px;background:var(--ctf-indigo);animation:ctf-blink .9s step-end infinite;}

  /* 5. Track Contact Activities — icon timeline */
  .ctf-atl{margin-top:12px;}
  .ctf-atl-item{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
  .ctf-atl-ico{
    width:22px;height:22px;border-radius:7px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:11px;
  }
  .ctf-atl-item:nth-child(1) .ctf-atl-ico{background:#e6f3ec;}
  .ctf-atl-item:nth-child(2) .ctf-atl-ico{background:#eee9ff;}
  .ctf-atl-item:nth-child(3) .ctf-atl-ico{background:#ffe6dd;animation:ctf-blink 1.8s ease-in-out infinite;}
  .ctf-atl-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}

  /* 6. Search Contacts Instantly — search bar filtering results */
  .ctf-search-bar{
    margin-top:14px;background:#fff;border:1px solid #e3ddff;border-radius:9px;
    padding:8px 10px;display:flex;align-items:center;gap:6px;font-size:11px;color:#8a8696;
  }
  .ctf-search-results{margin-top:10px;}
  .ctf-search-row{
    display:flex;align-items:center;gap:8px;padding:5px 0;
    animation:ctf-filter 2.6s ease-in-out infinite;
  }
  .ctf-search-row:nth-child(2){animation-delay:.2s;}
  .ctf-search-row:nth-child(3){animation-delay:.4s;}
  @keyframes ctf-filter{
    0%,100%{opacity:1;transform:translateX(0);}
    45%{opacity:.25;transform:translateX(-4px);}
    55%{opacity:.25;transform:translateX(-4px);}
  }

  /* 7. Eliminate Duplicate Contacts — two cards merging into one */
  .ctf-dup-wrap{position:relative;height:80px;margin-top:16px;}
  .ctf-dup-card{
    position:absolute;width:66%;height:34px;border-radius:9px;background:#fff;
    border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.15);
    display:flex;align-items:center;padding-left:10px;gap:7px;
  }
  .ctf-dup-card--a{top:0;left:0;animation:ctf-merge-a 2.6s ease-in-out infinite;}
  .ctf-dup-card--b{top:16px;left:14px;animation:ctf-merge-b 2.6s ease-in-out infinite;}
  @keyframes ctf-merge-a{0%,25%{top:0;left:0;opacity:1;}70%,100%{top:14px;left:9px;opacity:1;}}
  @keyframes ctf-merge-b{0%,25%{top:16px;left:14px;opacity:1;}70%{top:14px;left:9px;opacity:0;}100%{opacity:0;}}

  /* 8. Customize Contact Fields — toggle switches */
  .ctf-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;}
  .ctf-toggle{
    width:30px;height:16px;border-radius:100px;background:#e3ddff;position:relative;flex-shrink:0;
  }
  .ctf-toggle i{
    position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
  }
  .ctf-toggle--on{background:var(--ctf-indigo);}
  .ctf-toggle--on i{animation:ctf-slide 2.6s ease-in-out infinite;}
  @keyframes ctf-slide{0%,15%{left:2px;}45%,100%{left:16px;}}

  /* 9. Collaborate on Contact Records — shared note typing */
  .ctf-collab-avs{display:flex;margin-top:14px;}
  .ctf-collab-avs .ctf-avatar{margin-left:-6px;}
  .ctf-collab-avs .ctf-avatar:first-child{margin-left:0;}
  .ctf-note{
    margin-top:10px;background:#fff;border:1px solid #eee9ff;border-radius:10px;
    padding:9px 11px;
  }
  .ctf-note-line{height:7px;border-radius:4px;background:#f1efe9;margin-bottom:6px;width:0;
    animation:ctf-typefill 2.8s ease-in-out infinite;}
  .ctf-note-line:nth-child(2){animation-delay:.3s;}

  /* 10. Import & Export Contacts — arrows moving through a file icon */
  .ctf-io-wrap{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px;}
  .ctf-io-file{
    width:46px;height:54px;border-radius:8px;background:#fff;border:1px solid #e3ddff;
    box-shadow:0 6px 14px -6px rgba(23,22,28,.2);position:relative;
  }
  .ctf-io-file::before{
    content:"";position:absolute;top:10px;left:8px;right:8px;height:5px;border-radius:3px;background:#eee9ff;
  }
  .ctf-io-file::after{
    content:"";position:absolute;top:20px;left:8px;width:60%;height:5px;border-radius:3px;background:#eee9ff;
  }
  .ctf-io-arrow{font-size:14px;color:var(--ctf-indigo);animation:ctf-io-move 2.2s ease-in-out infinite;}
  .ctf-io-arrow--down{animation-name:ctf-io-move-down;}
  @keyframes ctf-io-move{0%,100%{transform:translateX(0);opacity:1;}50%{transform:translateX(6px);opacity:.4;}}
  @keyframes ctf-io-move-down{0%,100%{transform:translateX(0);opacity:1;}50%{transform:translateX(-6px);opacity:.4;}}

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

  @media (prefers-reduced-motion:reduce){
    .ctf-root *{animation:none !important;transition:none !important;}
  }

  /* cnatct management */

  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:87 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.contact-card1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius: 20px 20px 0px 0px; }
.c1-head{display:flex;align-items:center;justify-content:space-between;}
.c1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.c1-stats{display:flex;gap:8px;margin-top:11px;}
.c1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.c1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.c1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.c1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.c1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.c1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.c1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-chg-c{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-chg-d{font-size:9.5px;color:#c1861b;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.c1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.c1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.c1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-th-name{flex:1.9;}
.c1-th-company{flex:1.5;}
.c1-th-status{flex:1.1;}
.c1-th-last{flex:1.1;text-align:right;}

.c1-row{display:flex;align-items:center;font-size:10px;padding:5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-row-a{animation-name:slideIn;animation-delay:.9s;}
.c1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.c1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.c1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.c1-name{flex:1.9;font-weight:600;display:flex;align-items:center;gap:6px;}
.c1-avatar-a{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-avatar-b{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-avatar-c{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-avatar-d{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.c1-company{flex:1.5;color:#7a726e;font-size:9.5px;}
.c1-last{flex:1.1;text-align:right;color:#7a726e;font-size:9.5px;}

.c1-badge-customer{flex:1.1;}
.c1-badge-customer-pill{display:inline-block;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-badge-hotlead{flex:1.1;}
.c1-badge-hotlead-pill{display:inline-block;background:#fdece3;color:#c14a1c;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c1-badge-prospect{flex:1.1;}
.c1-badge-prospect-pill{display:inline-block;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.c1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.contact-card2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.c2-head{display:flex;align-items:center;justify-content:space-between;}
.c2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.c2-profile{display:flex;align-items:center;justify-content:space-between;margin-top:11px;border:1px solid #efeae7;padding:8px 10px;}
.c2-profile-left{display:flex;align-items:center;gap:9px;}
.c2-avatar{width:30px;height:30px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c2-name{font-size:12.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c2-role{font-size:9.5px;color:#9a9290;margin-top:1px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c2-badge{display:inline-flex;align-items:center;gap:3px;background:#e9f7ee;color:#1f9d55;font-size:9.5px;font-weight:700;padding:2px 7px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c2-badge-dot{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;animation:pulseLive 1.6s ease-in-out infinite;}

.c2-contactrow{display:flex;gap:8px;margin-top:6px;}
.c2-chip-email{flex:1;border:1px solid #efeae7;padding:5px 8px;font-size:9px;color:#5d5451;font-weight:600;opacity:0;animation:chipPop .4s ease-out .8s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c2-chip-phone{flex:1;border:1px solid #efeae7;padding:5px 8px;font-size:9px;color:#5d5451;font-weight:600;opacity:0;animation:chipPop .4s ease-out .92s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.c2-engagebox{background:#f7f4f1;padding:9px 11px;margin-top:8px;display:flex;align-items:center;gap:11px;}
.c2-donut-wrap{position:relative;width:60px;height:60px;flex-shrink:0;}
.c2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.c2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) 1s forwards;}
.c2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.c2-donut-value{font-size:12.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.c2-engage-info{flex:1;}
.c2-engage-title{font-size:11px;font-weight:700;color:#e0561f;margin-bottom:4px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c2-engage-line{font-size:9px;color:#5d5451;margin-top:3px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c2-engage-line-a{animation-name:slideIn;animation-delay:1.4s;}
.c2-engage-line-b{animation-name:slideIn;animation-delay:1.5s;}
.c2-engage-line-c{animation-name:slideIn;animation-delay:1.6s;}

.c2-activity{margin-top:10px;}
.c2-act-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.c2-act-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c2-act-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.c2-act{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;padding:4px 0;padding-left:8px;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.c2-act-a{border-left:2px solid #e0561f;animation-name:slideIn;animation-delay:1.7s;}
.c2-act-b{border-left:2px solid #f0ac2c;animation-name:slideIn;animation-delay:1.82s;}
.c2-act-c{border-left:2px solid #1f9d55;animation-name:slideIn;animation-delay:1.94s;}
.c2-act-text{color:#181114;font-weight:600;}
.c2-act-time{color:#9a9290;font-weight:600;flex-shrink:0;font-size:9px;}

.c2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

/* Document*/
.dcf-root{
    --dcf-ink:#17161c;
    --dcf-sub:#6f6b7a;
    --dcf-line:#eae7e1;
    --dcf-paper:#faf9f6;
    --dcf-card:#ffffff;
    --dcf-indigo:#4b3fe4;
    --dcf-coral:#ff6b4a;
    --dcf-mint:#28a06b;
    --dcf-amber:#e6a23c;
    --dcf-tint-peach:#fbeadf;
    --dcf-tint-navy:#1a1730;
    --dcf-tint-mint:#e6f3ec;
    --dcf-tint-lav:#eeeafc;
    --dcf-tint-sky:#e7eefc;
    font-family:'Inter',sans-serif;
   
    color:var(--dcf-ink);
   
    box-sizing:border-box;
  }
  .dcf-root *{box-sizing:border-box;}
  .dcf-wrap{max-width:1128px;margin:0 auto;}

  .dcf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .dcf-card{
    background:var(--dcf-card);
    border:1px solid var(--dcf-line);
    border-radius:20px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .dcf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px -20px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .dcf-shot{
    position:relative;
    height:196px;
    padding:16px 18px 0;
    overflow:hidden;
  }
  .dcf-tint-peach{background:var(--dcf-tint-peach);}
  .dcf-tint-navy{background:var(--dcf-tint-navy);}
  .dcf-tint-mint{background:var(--dcf-tint-mint);}
  .dcf-tint-lav{background:var(--dcf-tint-lav);}
  .dcf-tint-sky{background:var(--dcf-tint-sky);}

  .dcf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .dcf-dot{width:8px;height:8px;border-radius:50%;}
  .dcf-dot--r{background:#f0665a;}
  .dcf-dot--y{background:#f0b64a;}
  .dcf-dot--g{background:#57c26a;}
  .dcf-chrome-bar{
    height:8px;
    flex:1;
    max-width:130px;
    margin-left:8px;
    border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .dcf-tint-navy .dcf-chrome-bar{background:rgba(255,255,255,.14);}

  .dcf-panel{
    background:#ffffff;
    border-radius:14px 14px 0 0;
    padding:14px 16px;
    box-shadow:0 18px 30px -14px rgba(23,22,28,.28);
    height:158px;
    position:relative;
    overflow:hidden;
  }
  .dcf-tint-navy .dcf-panel{background:#241f42;box-shadow:0 18px 30px -14px rgba(0,0,0,.5);}

  .dcf-body{
    padding:26px 26px 28px;
  }
  .dcf-body h3{
    font-family:'Sora',sans-serif;
    font-size:19px;
    font-weight:700;
    margin:0 0 10px;
    letter-spacing:-.01em;
  }
  .dcf-body p{
    font-size:14.5px;
    line-height:1.65;
    color:var(--dcf-sub);
    margin:0;
  }

  .dcf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .dcf-tint-navy .dcf-label{color:#a9a4c4;}
  .dcf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  @keyframes dcf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Upload & Store Documents — file rising into tray with progress bar */
  .dcf-upload-wrap{margin-top:14px;text-align:center;}
  .dcf-upload-tray{
    width:56px;height:40px;border:2px dashed #d9d0ff;border-radius:10px;margin:0 auto 10px;
    display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;overflow:hidden;
  }
  .dcf-upload-icon{animation:dcf-rise 2.2s ease-in-out infinite;}
  @keyframes dcf-rise{0%{transform:translateY(10px);opacity:0;}40%{transform:translateY(0);opacity:1;}80%{transform:translateY(-2px);opacity:1;}100%{transform:translateY(-14px);opacity:0;}}
  .dcf-upload-bar{height:7px;border-radius:4px;background:#f1efe9;max-width:150px;margin:0 auto;overflow:hidden;}
  .dcf-upload-bar i{display:block;height:100%;background:var(--dcf-indigo);border-radius:4px;animation:dcf-fillbar 2.2s ease-in-out infinite;}
  @keyframes dcf-fillbar{0%{width:5%;}90%,100%{width:92%;}}

  /* 2. Organize with Folders — folder tree */
  .dcf-tree{margin-top:14px;}
  .dcf-tree-row{display:flex;align-items:center;gap:7px;margin-bottom:9px;}
  .dcf-tree-row.dcf-indent{margin-left:18px;}
  .dcf-folder-ico{font-size:13px;}
  .dcf-tree-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}
  .dcf-tree-row:nth-child(2) .dcf-tree-line{background:#eee9ff;animation:dcf-blink 2.2s ease-in-out infinite;}

  /* 3. Attach Files to Records — file linking to a contact card */
  .dcf-link-wrap{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;}
  .dcf-link-file{
    width:38px;height:46px;border-radius:7px;background:#fff;border:1px solid #e3ddff;
    box-shadow:0 4px 10px -4px rgba(23,22,28,.18);
  }
  .dcf-link-path{width:26px;height:2px;background:#d9d0ff;position:relative;overflow:visible;}
  .dcf-link-path::after{
    content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;
    background:var(--dcf-indigo);animation:dcf-travel 2s ease-in-out infinite;
  }
  @keyframes dcf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .dcf-link-contact{
    width:38px;height:38px;border-radius:50%;background:var(--dcf-indigo);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  }

  /* 4. Share Documents Securely — lock + avatars */
  .dcf-share-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .dcf-lock{
    width:38px;height:38px;border-radius:10px;background:#eee9ff;
    display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
  }
  .dcf-share-avs{display:flex;}
  .dcf-share-avs .dcf-avatar{margin-left:-6px;}
  .dcf-share-avs .dcf-avatar:first-child{margin-left:0;}
  .dcf-share-perm{margin-top:12px;display:flex;gap:6px;}
  .dcf-share-perm span{font-size:10px;font-weight:600;padding:3px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .dcf-share-perm span.dcf-on{background:var(--dcf-mint);color:#fff;}

  /* 5. Search Documents Instantly — search bar + filtering file rows */
  .dcf-search-bar{
    margin-top:14px;background:#fff;border:1px solid #e3ddff;border-radius:9px;
    padding:8px 10px;display:flex;align-items:center;gap:6px;font-size:11px;color:#8a8696;
  }
  .dcf-search-results{margin-top:10px;}
  .dcf-search-row{
    display:flex;align-items:center;gap:8px;padding:5px 0;
    animation:dcf-filter 2.6s ease-in-out infinite;
  }
  .dcf-search-row:nth-child(2){animation-delay:.2s;}
  .dcf-search-row:nth-child(3){animation-delay:.4s;}
  @keyframes dcf-filter{0%,100%{opacity:1;transform:translateX(0);}45%{opacity:.25;transform:translateX(-4px);}55%{opacity:.25;transform:translateX(-4px);}}

  /* 6. Manage File Versions — version stack, latest highlighted */
  .dcf-ver-stack{margin-top:12px;position:relative;}
  .dcf-ver-row{
    display:flex;align-items:center;justify-content:space-between;
    background:#fff;border:1px solid #eee9ff;border-radius:8px;padding:6px 10px;margin-bottom:6px;
  }
  .dcf-ver-row.dcf-current{border-color:var(--dcf-indigo);background:#f5f3ff;animation:dcf-blink 2s ease-in-out infinite;}
  .dcf-ver-tag{font-size:10px;font-weight:700;color:var(--dcf-indigo);}

  /* 7. Access Files Anywhere — devices with a traveling file dot */
  .dcf-devices{display:flex;align-items:flex-end;gap:16px;margin-top:18px;justify-content:center;}
  .dcf-device{background:#f4f2ff;border:1px solid #e3ddff;border-radius:6px;position:relative;}
  .dcf-device--phone{width:20px;height:34px;border-radius:5px;}
  .dcf-device--laptop{width:44px;height:28px;}
  .dcf-device--tablet{width:28px;height:36px;border-radius:5px;}
  .dcf-device-dot{
    position:absolute;top:-10px;left:-38px;width:7px;height:7px;border-radius:50%;
    background:var(--dcf-coral);animation:dcf-hop 2.4s ease-in-out infinite;
  }
  @keyframes dcf-hop{0%,100%{left:-38px;top:-10px;}50%{left:38px;top:-10px;}}

  /* 8. Preview Documents Quickly — doc preview sliding open with eye */
  .dcf-preview-wrap{display:flex;gap:10px;margin-top:14px;align-items:center;}
  .dcf-preview-doc{
    width:40px;height:50px;border-radius:6px;background:#fff;border:1px solid #e3ddff;
    box-shadow:0 4px 10px -4px rgba(23,22,28,.18);flex-shrink:0;
  }
  .dcf-preview-pane{
    flex:1;background:#fff;border:1px solid #eee9ff;border-radius:9px;padding:8px 10px;
    overflow:hidden;position:relative;height:52px;
  }
  .dcf-preview-line{height:6px;border-radius:3px;background:#f1efe9;margin-bottom:5px;width:0;
    animation:dcf-typefill 2.4s ease-in-out infinite;}
  .dcf-preview-line:nth-child(2){animation-delay:.2s;}
  .dcf-preview-line:nth-child(3){animation-delay:.4s;}
  @keyframes dcf-typefill{0%{width:0;}50%,100%{width:85%;}}

  /* 9. Control Document Access — permission levels list */
  .dcf-perm-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .dcf-perm-role{display:flex;align-items:center;gap:7px;}
  .dcf-perm-badge{
    font-size:10px;font-weight:700;padding:3px 9px;border-radius:100px;
  }
  .dcf-perm-badge--full{background:#e6f3ec;color:var(--dcf-mint);}
  .dcf-perm-badge--view{background:#f1efe9;color:#8a8696;}
  .dcf-perm-badge--edit{background:#eee9ff;color:var(--dcf-indigo);animation:dcf-blink 2s ease-in-out infinite;}

  /* 10. Maintain an Organized Library — neat grid of file icons */
  .dcf-lib-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;}
  .dcf-lib-item{
    aspect-ratio:1;border-radius:8px;background:#fff;border:1px solid #eee9ff;
    display:flex;align-items:center;justify-content:center;font-size:13px;
    animation:dcf-settle 2.6s ease-in-out infinite;
  }
  .dcf-lib-item:nth-child(3n){animation-delay:.15s;}
  .dcf-lib-item:nth-child(3n+1){animation-delay:.3s;}
  @keyframes dcf-settle{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

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

  @media (prefers-reduced-motion:reduce){
    .dcf-root *{animation:none !important;transition:none !important;}
  }

  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:68 100}}
@keyframes donutDraw2{0%{stroke-dasharray:0 100}100%{stroke-dasharray:14 100}}
@keyframes donutDraw3{0%{stroke-dasharray:0 100}100%{stroke-dasharray:11 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.document-card1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.dm1-head{display:flex;align-items:center;justify-content:space-between;}
.dm1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-upload{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dm1-stats{display:flex;gap:8px;margin-top:11px;}
.dm1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.dm1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.dm1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.dm1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.dm1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.dm1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dm1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-chg-d{font-size:9.5px;color:#c1861b;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dm1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.dm1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dm1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-th-name{flex:2.1;}
.dm1-th-type{flex:1;}
.dm1-th-owner{flex:1.4;}
.dm1-th-mod{flex:1.2;text-align:right;}

.dm1-row{display:flex;align-items:center;font-size:10px;padding:5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-row-a{animation-name:slideIn;animation-delay:.9s;}
.dm1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.dm1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.dm1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.dm1-name{flex:2.1;font-weight:600;display:flex;align-items:center;gap:6px;}
.dm1-file-pdf{width:16px;height:18px;background:#fdece3;color:#c14a1c;font-size:6px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-file-docx{width:16px;height:18px;background:#e6f1fb;color:#185fa5;font-size:6px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-file-pdf2{width:16px;height:18px;background:#fdece3;color:#c14a1c;font-size:6px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm1-file-zip{width:16px;height:18px;background:#f1ece9;color:#5f5e5a;font-size:6px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dm1-type{flex:1;color:#7a726e;font-size:9.5px;}
.dm1-owner{flex:1.4;color:#5d5451;font-size:9.5px;}
.dm1-mod{flex:1.2;text-align:right;color:#7a726e;font-size:9.5px;}

.dm1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.document-card2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius: 20px 20px 0px 0px;}
.dm2-head{display:flex;align-items:center;justify-content:space-between;}
.dm2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dm2-storagebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.dm2-donut-wrap{position:relative;width:68px;height:68px;flex-shrink:0;}
.dm2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.dm2-donut-fill-a{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.dm2-donut-fill-b{fill:none;stroke:#f0ac2c;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;stroke-dashoffset:-68;animation:donutDraw2 1.1s cubic-bezier(.3,.7,.2,1) 1s forwards;}
.dm2-donut-fill-c{fill:none;stroke:#5f5e5a;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;stroke-dashoffset:-82;animation:donutDraw3 1.1s cubic-bezier(.3,.7,.2,1) 1.3s forwards;}
.dm2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.dm2-donut-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dm2-storage-info{flex:1;}
.dm2-storage-title{font-size:11px;font-weight:700;color:#e0561f;margin-bottom:5px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm2-legend-a{font-size:9.5px;color:#5d5451;margin-top:4px;display:flex;align-items:center;gap:5px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-name:slideIn;animation-delay:1.4s;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm2-legend-b{font-size:9.5px;color:#5d5451;margin-top:4px;display:flex;align-items:center;gap:5px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-name:slideIn;animation-delay:1.5s;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm2-legend-c{font-size:9.5px;color:#5d5451;margin-top:4px;display:flex;align-items:center;gap:5px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-name:slideIn;animation-delay:1.6s;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm2-dot-a{width:6px;height:6px;background:#e0561f;flex-shrink:0;}
.dm2-dot-b{width:6px;height:6px;background:#f0ac2c;flex-shrink:0;}
.dm2-dot-c{width:6px;height:6px;background:#5f5e5a;flex-shrink:0;}

.dm2-reviews{margin-top:12px;}
.dm2-rev-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.dm2-rev-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm2-rev-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dm2-row{display:flex;align-items:center;font-size:10px;padding:5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dm2-row-a{animation-name:slideIn;animation-delay:1.7s;}
.dm2-row-b{animation-name:slideIn;animation-delay:1.82s;border-bottom:none;}

.dm2-row-name{flex:2.2;font-weight:600;display:flex;align-items:center;gap:6px;}
.dm2-row-dot{width:5px;height:5px;background:#e0561f;border-radius:50%;display:inline-block;flex-shrink:0;animation:pulseLive 1.6s ease-in-out infinite;}
.dm2-row-due{flex:1.3;text-align:right;color:#7a726e;font-size:9.5px;}
.dm2-row-status{flex:1.3;text-align:right;}
.dm2-status-pill{display:inline-block;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dm2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}


  .dlf-root{
    --dlf-ink:#17161c;
    --dlf-sub:#6f6b7a;
    --dlf-line:#eae7e1;
    --dlf-paper:#faf9f6;
    --dlf-card:#ffffff;
    --dlf-indigo:#4b3fe4;
    --dlf-coral:#ff6b4a;
    --dlf-mint:#28a06b;
    --dlf-amber:#e6a23c;
    --dlf-tint-peach:#fbeadf;
    --dlf-tint-navy:#1a1730;
    --dlf-tint-mint:#e6f3ec;
    --dlf-tint-lav:#eeeafc;
    --dlf-tint-sky:#e7eefc;
    font-family:'Inter',sans-serif;
    
    color:var(--dlf-ink);
   
    box-sizing:border-box;
  }
  .dlf-root *{box-sizing:border-box;}
  .dlf-wrap{max-width:1128px;margin:0 auto;}

  .dlf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .dlf-card{
    background:var(--dlf-card);
    border:1px solid var(--dlf-line);
    border-radius:20px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .dlf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px -20px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .dlf-shot{
    position:relative;
    height:196px;
    padding:16px 18px 0;
    overflow:hidden;
  }
  .dlf-tint-peach{background:var(--dlf-tint-peach);}
  .dlf-tint-navy{background:var(--dlf-tint-navy);}
  .dlf-tint-mint{background:var(--dlf-tint-mint);}
  .dlf-tint-lav{background:var(--dlf-tint-lav);}
  .dlf-tint-sky{background:var(--dlf-tint-sky);}

  .dlf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .dlf-dot{width:8px;height:8px;border-radius:50%;}
  .dlf-dot--r{background:#f0665a;}
  .dlf-dot--y{background:#f0b64a;}
  .dlf-dot--g{background:#57c26a;}
  .dlf-chrome-bar{
    height:8px;
    flex:1;
    max-width:130px;
    margin-left:8px;
    border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .dlf-tint-navy .dlf-chrome-bar{background:rgba(255,255,255,.14);}

  .dlf-panel{
    background:#ffffff;
    border-radius:14px 14px 0 0;
    padding:14px 16px;
    box-shadow:0 18px 30px -14px rgba(23,22,28,.28);
    height:158px;
    position:relative;
    overflow:hidden;
  }
  .dlf-tint-navy .dlf-panel{background:#241f42;box-shadow:0 18px 30px -14px rgba(0,0,0,.5);}

  .dlf-body{
    padding:26px 26px 28px;
  }
  .dlf-body h3{
    font-family:'Sora',sans-serif;
    font-size:19px;
    font-weight:700;
    margin:0 0 10px;
    letter-spacing:-.01em;
  }
  .dlf-body p{
    font-size:14.5px;
    line-height:1.65;
    color:var(--dlf-sub);
    margin:0;
  }

  .dlf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .dlf-tint-navy .dlf-label{color:#a9a4c4;}
  .dlf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .dlf-ai-badge{
    font-size:9px;font-weight:700;color:var(--dlf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes dlf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Capture Every Opportunity — deal card sliding into pipeline with sparkle */
  .dlf-capture-wrap{position:relative;margin-top:16px;height:70px;}
  .dlf-capture-card{
    position:absolute;left:-60px;top:14px;width:70%;background:#fff;border:1px solid #e3ddff;
    border-radius:10px;padding:8px 10px;box-shadow:0 6px 14px -6px rgba(23,22,28,.2);
    display:flex;align-items:center;gap:7px;
    animation:dlf-slide-capture 2.4s ease-in-out infinite;
  }
  @keyframes dlf-slide-capture{0%{left:-60px;opacity:0;}35%,70%{left:8px;opacity:1;}100%{left:8px;opacity:1;}}
  .dlf-sparkle{
    position:absolute;top:4px;right:16px;font-size:13px;color:var(--dlf-amber);
    animation:dlf-blink 1.6s ease-in-out infinite;
  }

  /* 2. Visual Deal Pipeline — kanban columns */
  .dlf-kanban{display:flex;gap:7px;margin-top:12px;}
  .dlf-kcol{flex:1;background:#f6f4ff;border-radius:8px;padding:6px 5px;min-height:100px;}
  .dlf-kcol-label{font-size:8px;font-weight:700;color:#8a8696;text-align:center;margin-bottom:6px;letter-spacing:.03em;}
  .dlf-kcard{
    background:#fff;border-radius:6px;height:14px;margin-bottom:6px;border:1px solid #eee9ff;
  }
  .dlf-kcol--hit .dlf-kcard{
    border-color:var(--dlf-indigo);box-shadow:0 0 0 1px var(--dlf-indigo);
    animation:dlf-blink 1.8s ease-in-out infinite;
  }

  /* 3. Smart Deal Prioritization — ranked deal cards with score */
  .dlf-rank-row{
    display:flex;align-items:center;justify-content:space-between;
    background:#fff;border:1px solid #eee9ff;border-radius:9px;padding:7px 10px;margin-top:9px;
  }
  .dlf-rank-row:first-of-type{border-color:var(--dlf-indigo);background:#f5f3ff;}
  .dlf-rank-score{
    font-size:10px;font-weight:700;color:var(--dlf-mint);background:#e6f3ec;padding:2px 7px;border-radius:100px;
  }

  /* 4. Custom Sales Stages — editable stage pills with drag handle */
  .dlf-stage-row{display:flex;align-items:center;gap:8px;margin-top:11px;}
  .dlf-stage-pill{
    flex:1;font-size:11px;font-weight:600;padding:7px 10px;border-radius:8px;
    background:#f6f4ff;color:#3a3550;display:flex;align-items:center;justify-content:space-between;
  }
  .dlf-stage-pill.dlf-dragging{
    animation:dlf-jiggle 1.6s ease-in-out infinite;
    border:1px dashed var(--dlf-indigo);
  }
  @keyframes dlf-jiggle{0%,100%{transform:translateX(0) rotate(0deg);}25%{transform:translateX(2px) rotate(.4deg);}75%{transform:translateX(-2px) rotate(-.4deg);}}
  .dlf-drag-handle{color:#c3bdf0;font-size:11px;}

  /* 5. Real-Time Deal Insights — AI insight feed */
  .dlf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .dlf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--dlf-coral);margin-top:4px;flex-shrink:0;}
  .dlf-insight-row:nth-child(3) .dlf-insight-line{background:#3a3450;position:relative;overflow:hidden;}
  .dlf-insight-line{height:7px;border-radius:4px;background:#3a3450;flex:1;}
  .dlf-insight-highlight{
    margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;
    animation:dlf-blink 2s ease-in-out infinite;
  }

  /* 6. Automated Follow-Ups — clock with looping reminder arrow */
  .dlf-auto-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .dlf-auto-clock{
    width:36px;height:36px;border-radius:50%;border:2px solid var(--dlf-indigo);position:relative;flex-shrink:0;
  }
  .dlf-auto-clock::before{
    content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;background:var(--dlf-indigo);
    transform-origin:left center;animation:dlf-tick 3s linear infinite;
  }
  @keyframes dlf-tick{to{transform:translate(0,-50%) rotate(360deg);}}
  .dlf-auto-icon{font-size:16px;animation:dlf-loop-arrow 2.4s ease-in-out infinite;}
  @keyframes dlf-loop-arrow{0%,100%{transform:rotate(0deg);}50%{transform:rotate(180deg);}}

  /* 7. Revenue Forecasting — growing bar chart with trend line */
  .dlf-chart-wrap{display:flex;align-items:flex-end;gap:6px;height:70px;margin-top:16px;}
  .dlf-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:dlf-bar-grow 2.6s ease-in-out infinite;}
  .dlf-bar:nth-child(1){animation-delay:0s;}
  .dlf-bar:nth-child(2){animation-delay:.15s;}
  .dlf-bar:nth-child(3){animation-delay:.3s;}
  .dlf-bar:nth-child(4){animation-delay:.45s;background:var(--dlf-indigo);}
  .dlf-bar:nth-child(5){animation-delay:.6s;background:var(--dlf-mint);}
  @keyframes dlf-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

  /* 8. Activity Tracking — icon timeline */
  .dlf-atl-item{display:flex;align-items:center;gap:9px;margin-top:9px;}
  .dlf-atl-ico{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
  .dlf-atl-item:nth-child(1) .dlf-atl-ico{background:#e6f3ec;}
  .dlf-atl-item:nth-child(2) .dlf-atl-ico{background:#eee9ff;}
  .dlf-atl-item:nth-child(3) .dlf-atl-ico{background:#ffe6dd;animation:dlf-blink 1.8s ease-in-out infinite;}
  .dlf-atl-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}

  /* 9. Team Collaboration — avatars on a shared deal card */
  .dlf-collab-card{
    margin-top:14px;background:#fff;border:1px solid #eee9ff;border-radius:10px;padding:10px 12px;
  }
  .dlf-collab-avs{display:flex;margin-bottom:8px;}
  .dlf-collab-avs .dlf-avatar{margin-left:-6px;}
  .dlf-collab-avs .dlf-avatar:first-child{margin-left:0;}
  .dlf-collab-line{height:7px;border-radius:4px;background:#f1efe9;margin-bottom:6px;}

  /* 10. Advanced Deal Search — search bar with filter chips */
  .dlf-search-bar{
    margin-top:14px;background:#fff;border:1px solid #e3ddff;border-radius:9px;
    padding:8px 10px;display:flex;align-items:center;gap:6px;font-size:11px;color:#8a8696;
  }
  .dlf-filter-chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
  .dlf-filter-chips span{
    font-size:10px;font-weight:600;padding:3px 9px;border-radius:100px;background:#f1efe9;color:#8a8696;
  }
  .dlf-filter-chips span.dlf-active{background:var(--dlf-indigo);color:#fff;animation:dlf-blink 2s ease-in-out infinite;}

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

  @media (prefers-reduced-motion:reduce){
    .dlf-root *{animation:none !important;transition:none !important;}
  }
  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes gaugeSweep{0%{stroke-dasharray:0 100}100%{stroke-dasharray:74 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.Deal-card{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;    border-radius: 20px 20px 0px 0px;}
.dl1-head{display:flex;align-items:center;justify-content:space-between;}
.dl1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dl1-stats{display:flex;gap:8px;margin-top:11px;}
.dl1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.dl1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.dl1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.dl1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.dl1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.dl1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dl1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl1-chg-c{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dl1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.dl1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dl1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl1-th-deal{flex:1.9;}
.dl1-th-value{flex:1.1;text-align:right;}
.dl1-th-stage{flex:1.3;text-align:right;}
.dl1-th-close{flex:1.1;text-align:right;}

.dl1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl1-row-a{animation-name:slideIn;animation-delay:.9s;}
.dl1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.dl1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.dl1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.dl1-name{flex:1.9;font-weight:600;display:flex;align-items:center;gap:6px;}
.dl1-dot-a{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.dl1-dot-b{width:5px;height:5px;background:#f0ac2c;border-radius:50%;display:inline-block;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;}
.dl1-dot-c{width:5px;height:5px;background:#378add;border-radius:50%;display:inline-block;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;}
.dl1-dot-d{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;}

.dl1-value{flex:1.1;text-align:right;color:#3c3532;font-weight:600;font-size:9.5px;}
.dl1-close{flex:1.1;text-align:right;color:#7a726e;font-size:9.5px;}

.dl1-stage{flex:1.3;text-align:right;}
.dl1-stage-neg{display:inline-block;background:#fdece3;color:#c14a1c;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl1-stage-prop{display:inline-block;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl1-stage-qual{display:inline-block;background:#e6f1fb;color:#185fa5;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dl1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.Deal-card2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.dl2-head{display:flex;align-items:center;justify-content:space-between;}
.dl2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dl2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.dl2-gauge-wrap{position:relative;width:68px;height:68px;flex-shrink:0;}
.dl2-gauge-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.dl2-gauge-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:gaugeSweep 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.dl2-gauge-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.dl2-gauge-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl2-gauge-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dl2-score-info{flex:1;}
.dl2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl2-score-sub{font-size:9.5px;color:#8a8280;margin-top:3px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl2-chip{display:inline-flex;align-items:center;gap:5px;background:#ffffff;border:1px solid #e9e4e1;padding:4px 8px;margin-top:7px;font-size:9px;font-weight:700;color:#181114;opacity:0;animation:chipPop .4s ease-out 1.3s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dl2-detailrow{display:flex;gap:8px;margin-top:9px;}
.dl2-detail-value{flex:1;border:1px solid #efeae7;padding:6px 8px;}
.dl2-detail-owner{flex:1;border:1px solid #efeae7;padding:6px 8px;}
.dl2-detail-label{font-size:8.5px;color:#9a9290;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl2-detail-val{font-size:12px;font-weight:800;color:#181114;margin-top:2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dl2-timeline{margin-top:11px;}
.dl2-tl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.dl2-tl-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl2-tl-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.dl2-step{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;padding:4px 0;padding-left:8px;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.dl2-step-a{border-left:2px solid #1f9d55;animation-name:slideIn;animation-delay:1.7s;}
.dl2-step-b{border-left:2px solid #e0561f;animation-name:slideIn;animation-delay:1.82s;}
.dl2-step-c{border-left:2px solid #f0ac2c;animation-name:slideIn;animation-delay:1.94s;}
.dl2-step-text{color:#181114;font-weight:600;}
.dl2-step-status{color:#9a9290;font-weight:600;font-size:9px;flex-shrink:0;}

.dl2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

/* company */



@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:82 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.company-card1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;    border-radius: 20px 20px 0px 0px;}
.co1-head{display:flex;align-items:center;justify-content:space-between;}
.co1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.co1-stats{display:flex;gap:8px;margin-top:11px;}
.co1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.co1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.co1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.co1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.co1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.co1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.co1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-chg-c{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-chg-d{font-size:9.5px;color:#d33434;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.co1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.co1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.co1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-th-company{flex:1.9;}
.co1-th-industry{flex:1.3;}
.co1-th-employees{flex:1.1;text-align:right;}
.co1-th-health{flex:1.1;text-align:right;}

.co1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-row-a{animation-name:slideIn;animation-delay:.9s;}
.co1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.co1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.co1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.co1-name{flex:1.9;font-weight:600;display:flex;align-items:center;gap:6px;}
.co1-logo-a{width:18px;height:18px;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-logo-b{width:18px;height:18px;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-logo-c{width:18px;height:18px;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-logo-d{width:18px;height:18px;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.co1-industry{flex:1.3;color:#7a726e;font-size:9.5px;}
.co1-employees{flex:1.1;text-align:right;color:#7a726e;font-size:9.5px;}

.co1-health{flex:1.1;text-align:right;}
.co1-health-good{display:inline-flex;align-items:center;gap:3px;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-health-risk{display:inline-flex;align-items:center;gap:3px;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co1-health-dot{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;}
.co1-risk-dot{width:5px;height:5px;background:#f0ac2c;border-radius:50%;display:inline-block;}

.co1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none; }

.company-card2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.co2-head{display:flex;align-items:center;justify-content:space-between;}
.co2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.co2-profile{display:flex;align-items:center;justify-content:space-between;margin-top:11px;border:1px solid #efeae7;padding:8px 10px;}
.co2-profile-left{display:flex;align-items:center;gap:9px;}
.co2-logo{width:30px;height:30px;background:#fdece3;color:#c14a1c;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co2-name{font-size:12.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co2-sub{font-size:9.5px;color:#9a9290;margin-top:1px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co2-badge{display:inline-flex;align-items:center;gap:3px;background:#fdece3;color:#c14a1c;font-size:9.5px;font-weight:700;padding:2px 7px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.co2-healthbox{background:#f7f4f1;padding:9px 11px;margin-top:9px;display:flex;align-items:center;gap:11px;}
.co2-donut-wrap{position:relative;width:60px;height:60px;flex-shrink:0;}
.co2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.co2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .8s forwards;}
.co2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.co2-donut-value{font-size:12.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.co2-health-info{flex:1;}
.co2-health-title{font-size:11px;font-weight:700;color:#e0561f;margin-bottom:4px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co2-health-line{font-size:9.5px;color:#5d5451;margin-top:3px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co2-health-line-a{animation-name:slideIn;animation-delay:1.4s;}
.co2-health-line-b{animation-name:slideIn;animation-delay:1.5s;}
.co2-health-line-c{animation-name:slideIn;animation-delay:1.6s;}

.co2-contacts{margin-top:11px;}
.co2-ct-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.co2-ct-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co2-ct-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.co2-row{display:flex;align-items:center;gap:8px;font-size:10px;padding:4.5px 0;color:#3c3532;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co2-row-a{animation-name:slideIn;animation-delay:1.7s;}
.co2-row-b{animation-name:slideIn;animation-delay:1.82s;}
.co2-row-c{animation-name:slideIn;animation-delay:1.94s;}

.co2-avatar{width:16px;height:16px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:7px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.co2-ct-name{font-weight:600;flex:1.6;}
.co2-ct-role{color:#9a9290;font-size:9px;flex:1.4;text-align:right;}

.co2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

.cpf-root{
    --cpf-ink:#17161c;
    --cpf-sub:#6b6878;
    --cpf-line:#eeece7;
    --cpf-paper:#faf9f6;
    --cpf-card:#ffffff;
    --cpf-indigo:#4b3fe4;
    --cpf-coral:#ff6b4a;
    --cpf-mint:#28a06b;
    --cpf-amber:#e6a23c;
    --cpf-tint-peach:#fbeadf;
    --cpf-tint-navy:#1a1730;
    --cpf-tint-mint:#e6f3ec;
    --cpf-tint-lav:#eeeafc;
    --cpf-tint-sky:#eceafc;
    --cpf-tint-grey:#f2f1f6;
    font-family:'Inter',sans-serif;
   
    color:var(--cpf-ink);
    
    box-sizing:border-box;
  }

  .cpf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .cpf-card{
    background:var(--cpf-card);
    border:1px solid var(--cpf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .cpf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  /* tinted shot area — window is inset with a uniform margin on all sides */
  .cpf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .cpf-tint-peach{background:var(--cpf-tint-peach);}
  .cpf-tint-navy{background:var(--cpf-tint-grey);}
  .cpf-tint-mint{background:var(--cpf-tint-mint);}
  .cpf-tint-lav{background:var(--cpf-tint-lav);}
  .cpf-tint-sky{background:var(--cpf-tint-sky);}

  .cpf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .cpf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .cpf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .cpf-dot{width:8px;height:8px;border-radius:50%;}
  .cpf-dot--r{background:#f0665a;}
  .cpf-dot--y{background:#f0b64a;}
  .cpf-dot--g{background:#57c26a;}
  .cpf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .cpf-window--dark .cpf-chrome-bar{background:rgba(255,255,255,.14);}

  .cpf-body{
    padding:32px 28px 34px;
  }
  .cpf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .cpf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--cpf-sub);
    margin:0;
  }

  .cpf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .cpf-window--dark .cpf-label{color:#a9a4c4;}
  .cpf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  @keyframes cpf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Create Company Profiles — replicate the contact-card layout, for a company */
  .cpf-profile-top{display:flex;align-items:center;gap:10px;}
  .cpf-profile-av{
    width:38px;height:38px;border-radius:50%;background:var(--cpf-coral);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;
  }
  .cpf-profile-name{font-size:14px;font-weight:700;color:#241f2e;line-height:1.3;}
  .cpf-profile-sub{font-size:11.5px;color:#8a8696;}
  .cpf-profile-check{
    margin-left:auto;width:22px;height:22px;border-radius:50%;border:1.6px solid var(--cpf-coral);
    color:var(--cpf-coral);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;
  }
  .cpf-profile-tags{display:flex;gap:6px;margin-top:12px;}
  .cpf-profile-tags span{font-size:10px;font-weight:600;padding:4px 9px;border-radius:100px;}
  .cpf-tag-a{background:#ffe6dd;color:var(--cpf-coral);}
  .cpf-tag-b{background:#f1efe9;color:#8a8696;}
  .cpf-profile-fields{display:flex;gap:24px;margin-top:12px;padding-top:10px;border-top:1px solid #f1efe9;}
  .cpf-pf-label{font-size:10px;font-weight:700;color:#241f2e;margin-bottom:2px;}
  .cpf-pf-val{font-size:11px;color:#8a8696;}

  /* 2. Link Contacts to Companies — hub with linked contact avatars */
  .cpf-linkhub{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;}
  .cpf-linkhub-core{
    width:40px;height:40px;border-radius:10px;background:var(--cpf-indigo);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:10px;
    box-shadow:0 8px 18px -6px rgba(75,63,228,.5);
  }
  .cpf-linkhub-avs{display:flex;gap:0;}
  .cpf-linkhub-avs .cpf-avatar{margin-left:-6px;animation:cpf-drop 2.4s ease-in-out infinite;}
  .cpf-linkhub-avs .cpf-avatar:first-child{margin-left:0;}
  .cpf-linkhub-avs .cpf-avatar:nth-child(1){animation-delay:0s;}
  .cpf-linkhub-avs .cpf-avatar:nth-child(2){animation-delay:.2s;}
  .cpf-linkhub-avs .cpf-avatar:nth-child(3){animation-delay:.4s;}
  @keyframes cpf-drop{0%{transform:translateY(-6px);opacity:0;}30%,100%{transform:translateY(0);opacity:1;}}

  /* 3. Manage Business Accounts — dark account list, AI-insights style */
  .cpf-acct-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .cpf-acct-name{font-size:11.5px;color:#e4e1f2;}
  .cpf-acct-badge{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;}
  .cpf-badge-active{background:rgba(40,160,107,.22);color:#57d69a;}
  .cpf-badge-pending{background:rgba(230,162,60,.22);color:#f0c06a;animation:cpf-blink 2s ease-in-out infinite;}

  /* 4. Track Company Activities — icon timeline */
  .cpf-atl-item{display:flex;align-items:center;gap:9px;margin-top:10px;}
  .cpf-atl-ico{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
  .cpf-atl-item:nth-child(1) .cpf-atl-ico{background:#e6f3ec;}
  .cpf-atl-item:nth-child(2) .cpf-atl-ico{background:#eee9ff;}
  .cpf-atl-item:nth-child(3) .cpf-atl-ico{background:#ffe6dd;animation:cpf-blink 1.8s ease-in-out infinite;}
  .cpf-atl-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}

  /* 5. Store Company Documents — files linked to a company card */
  .cpf-docs-row{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .cpf-doc-file{
    width:34px;height:42px;border-radius:6px;background:#fff;border:1px solid #e3ddff;
    box-shadow:0 4px 10px -4px rgba(23,22,28,.18);flex-shrink:0;
    animation:cpf-settle 2.6s ease-in-out infinite;
  }
  .cpf-doc-file:nth-child(2){animation-delay:.2s;}
  .cpf-doc-file:nth-child(3){animation-delay:.4s;}
  @keyframes cpf-settle{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
  .cpf-doc-co{
    width:38px;height:38px;border-radius:9px;background:var(--cpf-indigo);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;
  }

  /* 6. Customize Company Records — toggle fields */
  .cpf-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .cpf-toggle{width:30px;height:16px;border-radius:100px;background:#e3ddff;position:relative;flex-shrink:0;}
  .cpf-toggle i{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);}
  .cpf-toggle--on{background:var(--cpf-indigo);}
  .cpf-toggle--on i{animation:cpf-slide 2.6s ease-in-out infinite;}
  @keyframes cpf-slide{0%,15%{left:2px;}45%,100%{left:16px;}}

  /* 7. Collaborate Across Teams — avatars + shared note */
  .cpf-collab-avs{display:flex;margin-bottom:10px;}
  .cpf-collab-avs .cpf-avatar{margin-left:-6px;}
  .cpf-collab-avs .cpf-avatar:first-child{margin-left:0;}
  .cpf-collab-line{height:7px;border-radius:4px;background:#f1efe9;margin-bottom:7px;width:0;
    animation:cpf-typefill 2.6s ease-in-out infinite;}
  .cpf-collab-line:nth-child(3){animation-delay:.25s;}
  @keyframes cpf-typefill{0%{width:0;}50%,100%{width:85%;}}

  /* 8. Organize Companies with Tags — chips popping */
  .cpf-tagrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;height:100%;align-content:center;}
  .cpf-tag{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:100px;animation:cpf-pop 2.4s ease-in-out infinite;}
  .cpf-tag:nth-child(1){background:#eee9ff;color:var(--cpf-indigo);animation-delay:0s;}
  .cpf-tag:nth-child(2){background:#ffe6dd;color:var(--cpf-coral);animation-delay:.25s;}
  .cpf-tag:nth-child(3){background:#e6f3ec;color:var(--cpf-mint);animation-delay:.5s;}
  .cpf-tag:nth-child(4){background:#fdf1da;color:var(--cpf-amber);animation-delay:.75s;}
  @keyframes cpf-pop{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}

  /* 9. Search Company Records — search bar + filtering rows */
  .cpf-search-bar{
    background:#faf9ff;border:1px solid #e3ddff;border-radius:9px;
    padding:8px 10px;display:flex;align-items:center;gap:6px;font-size:11px;color:#8a8696;
  }
  .cpf-search-results{margin-top:10px;}
  .cpf-search-row{display:flex;align-items:center;gap:8px;padding:4px 0;animation:cpf-filter 2.6s ease-in-out infinite;}
  .cpf-search-row:nth-child(2){animation-delay:.2s;}
  .cpf-search-row:nth-child(3){animation-delay:.4s;}
  @keyframes cpf-filter{0%,100%{opacity:1;transform:translateX(0);}45%{opacity:.25;transform:translateX(-4px);}55%{opacity:.25;transform:translateX(-4px);}}

  /* 10. Maintain Accurate Company Data — verified row with blinking cursor */
  .cpf-edit-row{
    background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:9px 11px;margin-top:8px;
  }
  .cpf-edit-val{display:flex;align-items:center;gap:2px;}
  .cpf-cursor{width:1.4px;height:12px;background:var(--cpf-indigo);animation:cpf-blink .9s step-end infinite;}
  .cpf-verified{font-size:9.5px;font-weight:700;color:var(--cpf-mint);background:#e6f3ec;padding:2px 7px;border-radius:100px;}

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

  @media (prefers-reduced-motion:reduce){
    .cpf-root *{animation:none !important;transition:none !important;}
  }

  /* inbx crm */

  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:94 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.inbox-card1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius: 20px 20px 0px 0px;}
.ib1-head{display:flex;align-items:center;justify-content:space-between;}
.ib1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib1-compose{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ib1-stats{display:flex;gap:8px;margin-top:11px;}
.ib1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.ib1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ib1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ib1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ib1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.ib1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ib1-chg-a{font-size:9.5px;color:#c1861b;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib1-chg-c{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ib1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.ib1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ib1-row{display:flex;align-items:center;gap:8px;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib1-row-a{animation-name:slideIn;animation-delay:.85s;}
.ib1-row-b{animation-name:slideIn;animation-delay:.97s;}
.ib1-row-c{animation-name:slideIn;animation-delay:1.09s;}
.ib1-row-d{animation-name:slideIn;animation-delay:1.21s;border-bottom:none;}

.ib1-avatar-a{width:20px;height:20px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .9s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib1-avatar-b{width:20px;height:20px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.02s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib1-avatar-c{width:20px;height:20px;border-radius:50%;background:#ece6e2;color:#5f5e5a;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.14s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib1-avatar-d{width:20px;height:20px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.26s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ib1-body{flex:1;min-width:0;}
.ib1-toprow{display:flex;align-items:center;justify-content:space-between;}
.ib1-sender{font-weight:700;color:#181114;font-size:10px;display:flex;align-items:center;gap:5px;}
.ib1-time{color:#9a9290;font-size:9px;flex-shrink:0;}
.ib1-subject{color:#7a726e;font-size:9.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.ib1-unread-dot{width:6px;height:6px;background:#e0561f;border-radius:50%;display:inline-block;flex-shrink:0;animation:pulseLive 1.6s ease-in-out infinite;}

.ib1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.inbox-card2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.ib2-head{display:flex;align-items:center;justify-content:space-between;}
.ib2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ib2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.ib2-donut-wrap{position:relative;width:64px;height:64px;flex-shrink:0;}
.ib2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.ib2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .6s forwards;}
.ib2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ib2-donut-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ib2-score-info{flex:1;}
.ib2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib2-score-line{font-size:9.5px;color:#5d5451;margin-top:4px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.ib2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.ib2-needs{margin-top:12px;}
.ib2-nd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.ib2-nd-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib2-nd-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ib2-row{display:flex;align-items:center;gap:8px;font-size:10px;padding:5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib2-row-a{animation-name:slideIn;animation-delay:1.6s;}
.ib2-row-b{animation-name:slideIn;animation-delay:1.72s;}
.ib2-row-c{animation-name:slideIn;animation-delay:1.84s;border-bottom:none;}

.ib2-sender{flex:1.5;font-weight:600;}
.ib2-subject{flex:2;color:#7a726e;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ib2-priority{flex-shrink:0;}
.ib2-pri-urgent{display:inline-block;background:#fbe8e8;color:#c93030;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib2-pri-high{display:inline-block;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ib2-pri-normal{display:inline-block;background:#f1ece9;color:#7a726e;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ib2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

.ibf-root{
    --ibf-ink:#17161c;
    --ibf-sub:#6b6878;
    --ibf-line:#eeece7;
    --ibf-paper:#faf9f6;
    --ibf-card:#ffffff;
    --ibf-indigo:#4b3fe4;
    --ibf-coral:#ff6b4a;
    --ibf-mint:#28a06b;
    --ibf-amber:#e6a23c;
    --ibf-tint-peach:#fbeadf;
    --ibf-tint-navy:#f2f1f6;
    --ibf-tint-mint:#e6f3ec;
    --ibf-tint-lav:#eeeafc;
    --ibf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--ibf-ink);
   
    box-sizing:border-box;
  }
  .ibf-root *{box-sizing:border-box;}
  .ibf-wrap{max-width:1160px;margin:0 auto;}

  .ibf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .ibf-card{
    background:var(--ibf-card);
    border:1px solid var(--ibf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .ibf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .ibf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .ibf-tint-peach{background:var(--ibf-tint-peach);}
  .ibf-tint-navy{background:var(--ibf-tint-navy);}
  .ibf-tint-mint{background:var(--ibf-tint-mint);}
  .ibf-tint-lav{background:var(--ibf-tint-lav);}
  .ibf-tint-sky{background:var(--ibf-tint-sky);}

  .ibf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .ibf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .ibf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .ibf-dot{width:8px;height:8px;border-radius:50%;}
  .ibf-dot--r{background:#f0665a;}
  .ibf-dot--y{background:#f0b64a;}
  .ibf-dot--g{background:#57c26a;}
  .ibf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .ibf-window--dark .ibf-chrome-bar{background:rgba(255,255,255,.14);}

  .ibf-body{
    padding:32px 28px 34px;
  }
  .ibf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .ibf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--ibf-sub);
    margin:0;
  }

  .ibf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .ibf-window--dark .ibf-label{color:#a9a4c4;}
  .ibf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .ibf-ai-badge{
    font-size:9px;font-weight:700;color:var(--ibf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes ibf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Unified Conversation Inbox — multi-channel message list with unread badges */
  .ibf-inbox-row{display:flex;align-items:center;gap:8px;margin-top:11px;}
  .ibf-ch-ico{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
  .ibf-inbox-row:nth-child(2) .ibf-ch-ico{background:#eee9ff;}
  .ibf-inbox-row:nth-child(3) .ibf-ch-ico{background:#e6f3ec;}
  .ibf-inbox-row:nth-child(4) .ibf-ch-ico{background:#ffe6dd;}
  .ibf-inbox-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}
  .ibf-unread{width:7px;height:7px;border-radius:50%;background:var(--ibf-coral);flex-shrink:0;animation:ibf-blink 1.8s ease-in-out infinite;}

  /* 2. Complete Conversation History — vertical timeline */
  .ibf-timeline{position:relative;padding-left:16px;margin-top:8px;}
  .ibf-timeline::before{content:"";position:absolute;left:4px;top:2px;bottom:2px;width:2px;background:#eee9ff;}
  .ibf-tl-item{position:relative;margin-bottom:12px;}
  .ibf-tl-item::before{content:"";position:absolute;left:-16px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--ibf-indigo);border:2px solid #fff;box-shadow:0 0 0 2px #eee9ff;}
  .ibf-tl-item:nth-child(2)::before{animation:ibf-blink 1.8s ease-in-out infinite;}
  .ibf-tl-line{height:7px;border-radius:4px;background:#f1efe9;}

  /* 3. Smart Email Organization — priority buckets */
  .ibf-org-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .ibf-org-bucket{font-size:11px;color:#3a3550;}
  .ibf-org-count{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;}
  .ibf-org-hi{background:#ffe6dd;color:var(--ibf-coral);animation:ibf-blink 2s ease-in-out infinite;}
  .ibf-org-mid{background:#fdf1da;color:var(--ibf-amber);}
  .ibf-org-lo{background:#f1efe9;color:#8a8696;}

  /* 4. Real-Time Email Tracking — engagement stats */
  .ibf-track-wrap{display:flex;justify-content:space-between;margin-top:14px;text-align:center;}
  .ibf-track-stat{flex:1;}
  .ibf-track-num{font-family:'Sora',sans-serif;font-size:17px;font-weight:700;color:#241f2e;}
  .ibf-track-live{display:flex;align-items:center;gap:6px;margin-top:12px;}
  .ibf-track-dot{width:7px;height:7px;border-radius:50%;background:var(--ibf-mint);animation:ibf-blink 1.4s ease-in-out infinite;}

  /* 5. Link Conversations to CRM Records — email linking to a contact */
  .ibf-link-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .ibf-link-mail{width:38px;height:38px;border-radius:9px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
  .ibf-link-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .ibf-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--ibf-indigo);animation:ibf-travel 2s ease-in-out infinite;}
  @keyframes ibf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .ibf-link-contact{width:38px;height:38px;border-radius:50%;background:var(--ibf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 6. Team Inbox Collaboration — assigned conversation row */
  .ibf-assign-row{background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:9px 11px;margin-top:10px;display:flex;align-items:center;justify-content:space-between;}
  .ibf-assign-to{display:flex;align-items:center;gap:6px;}

  /* 7. Automated Follow-Up Reminders — reminder toast */
  .ibf-toast{
    margin-top:14px;background:#fff;border:1px solid #f2e2da;border-radius:10px;
    padding:9px 11px;display:flex;gap:8px;align-items:flex-start;
    box-shadow:0 6px 14px -8px rgba(23,22,28,.2);
    animation:ibf-slide-in 2.6s ease-in-out infinite;
  }
  @keyframes ibf-slide-in{0%{transform:translateX(-8px);opacity:0;}18%{transform:translateX(0);opacity:1;}82%{opacity:1;}100%{opacity:0;}}

  /* 8. Powerful Inbox Search — search bar with filtering rows */
  .ibf-search-bar{background:#faf9ff;border:1px solid #e3ddff;border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:6px;font-size:11px;color:#8a8696;}
  .ibf-search-results{margin-top:10px;}
  .ibf-search-row{display:flex;align-items:center;gap:8px;padding:4px 0;animation:ibf-filter 2.6s ease-in-out infinite;}
  .ibf-search-row:nth-child(2){animation-delay:.2s;}
  .ibf-search-row:nth-child(3){animation-delay:.4s;}
  @keyframes ibf-filter{0%,100%{opacity:1;transform:translateX(0);}45%{opacity:.25;transform:translateX(-4px);}55%{opacity:.25;transform:translateX(-4px);}}

  /* 9. Conversation Insights — dark AI insights panel */
  .ibf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .ibf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--ibf-coral);margin-top:4px;flex-shrink:0;}
  .ibf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:ibf-blink 2s ease-in-out infinite;}

  /* 10. Secure Communication Management — lock + permission badges */
  .ibf-secure-wrap{display:flex;align-items:center;gap:12px;margin-top:14px;}
  .ibf-lock{width:38px;height:38px;border-radius:10px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
  .ibf-secure-perm{margin-top:12px;display:flex;gap:6px;}
  .ibf-secure-perm span{font-size:10px;font-weight:600;padding:3px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .ibf-secure-perm span.ibf-on{background:var(--ibf-mint);color:#fff;}

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

  @media (prefers-reduced-motion:reduce){
    .ibf-root *{animation:none !important;transition:none !important;}
  }

  /* tasks */

  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:88 100}}
@keyframes checkDraw{0%{stroke-dashoffset:16}100%{stroke-dashoffset:0}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.taskcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius: 20px 20px 0px 0px;}
.tk1-head{display:flex;align-items:center;justify-content:space-between;}
.tk1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tk1-stats{display:flex;gap:8px;margin-top:11px;}
.tk1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.tk1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.tk1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.tk1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.tk1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.tk1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tk1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk1-chg-c{font-size:9.5px;color:#d33434;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tk1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.tk1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tk1-row{display:flex;align-items:center;gap:8px;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk1-row-a{animation-name:slideIn;animation-delay:.9s;}
.tk1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.tk1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.tk1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.tk1-check-open{width:15px;height:15px;border:1.6px solid #d8d2ce;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.tk1-check-open2{width:15px;height:15px;border:1.6px solid #d8d2ce;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;}
.tk1-check-open3{width:15px;height:15px;border:1.6px solid #d8d2ce;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;}
.tk1-check-done{width:15px;height:15px;background:#1f9d55;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0;animation:popIn .3s ease-out 1.19s forwards;}

.tk1-taskname{flex:1.9;font-weight:600;}
.tk1-taskname-done{flex:1.9;font-weight:600;color:#9a9290;text-decoration:line-through;}
.tk1-due{flex:1.1;text-align:right;color:#7a726e;font-size:9.5px;}

.tk1-pri{flex:1;text-align:right;}
.tk1-pri-high{display:inline-block;background:#fbe8e8;color:#c93030;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk1-pri-med{display:inline-block;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk1-pri-low{display:inline-block;background:#f1ece9;color:#7a726e;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tk1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.taskcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.tk2-head{display:flex;align-items:center;justify-content:space-between;}
.tk2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tk2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.tk2-donut-wrap{position:relative;width:64px;height:64px;flex-shrink:0;}
.tk2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.tk2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .6s forwards;}
.tk2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.tk2-donut-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tk2-score-info{flex:1;}
.tk2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk2-score-line{font-size:9.5px;color:#5d5451;margin-top:4px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.tk2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.tk2-deadlines{margin-top:12px;}
.tk2-dl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.tk2-dl-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk2-dl-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tk2-row{display:flex;align-items:center;gap:8px;font-size:10px;padding:5px 0;padding-left:8px;color:#3c3532;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tk2-row-a{border-left:2px solid #c93030;animation-name:slideIn;animation-delay:1.6s;}
.tk2-row-b{border-left:2px solid #f0ac2c;animation-name:slideIn;animation-delay:1.72s;}
.tk2-row-c{border-left:2px solid #7a726e;animation-name:slideIn;animation-delay:1.84s;}

.tk2-task{flex:1;font-weight:600;}
.tk2-taskdue{color:#9a9290;font-weight:600;font-size:9px;flex-shrink:0;}

.tk2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}


  .tkf-root{
    --tkf-ink:#17161c;
    --tkf-sub:#6b6878;
    --tkf-line:#eeece7;
    --tkf-paper:#faf9f6;
    --tkf-card:#ffffff;
    --tkf-indigo:#4b3fe4;
    --tkf-coral:#ff6b4a;
    --tkf-mint:#28a06b;
    --tkf-amber:#e6a23c;
    --tkf-tint-peach:#fbeadf;
    --tkf-tint-navy:#f2f1f6;
    --tkf-tint-mint:#e6f3ec;
    --tkf-tint-lav:#eeeafc;
    --tkf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--tkf-ink);
    
    box-sizing:border-box;
  }
  .tkf-root *{box-sizing:border-box;}
  .tkf-wrap{max-width:1160px;margin:0 auto;}

  .tkf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .tkf-card{
    background:var(--tkf-card);
    border:1px solid var(--tkf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .tkf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .tkf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .tkf-tint-peach{background:var(--tkf-tint-peach);}
  .tkf-tint-navy{background:var(--tkf-tint-navy);}
  .tkf-tint-mint{background:var(--tkf-tint-mint);}
  .tkf-tint-lav{background:var(--tkf-tint-lav);}
  .tkf-tint-sky{background:var(--tkf-tint-sky);}

  .tkf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .tkf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .tkf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .tkf-dot{width:8px;height:8px;border-radius:50%;}
  .tkf-dot--r{background:#f0665a;}
  .tkf-dot--y{background:#f0b64a;}
  .tkf-dot--g{background:#57c26a;}
  .tkf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .tkf-window--dark .tkf-chrome-bar{background:rgba(255,255,255,.14);}

  .tkf-body{
    padding:32px 28px 34px;
  }
  .tkf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .tkf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--tkf-sub);
    margin:0;
  }

  .tkf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .tkf-window--dark .tkf-label{color:#a9a4c4;}
  .tkf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .tkf-ai-badge{
    font-size:9px;font-weight:700;color:var(--tkf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes tkf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Task Creation & Assignment — task card with assignee */
  .tkf-task-card{
    margin-top:12px;background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;
    padding:9px 11px;display:flex;align-items:center;justify-content:space-between;
    animation:tkf-pop-in 2.4s ease-in-out infinite;
  }
  @keyframes tkf-pop-in{0%{transform:scale(.94);opacity:.6;}30%,100%{transform:scale(1);opacity:1;}}
  .tkf-check{width:15px;height:15px;border-radius:5px;border:2px solid #cfc9f7;flex-shrink:0;}

  /* 2. Priority Management — ranked task list */
  .tkf-rank-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #eee9ff;border-radius:9px;padding:7px 10px;margin-top:9px;}
  .tkf-rank-row:first-of-type{border-color:var(--tkf-coral);background:#fff6f3;}
  .tkf-rank-flag{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:100px;}
  .tkf-flag-high{background:#ffe6dd;color:var(--tkf-coral);animation:tkf-blink 2s ease-in-out infinite;}
  .tkf-flag-mid{background:#fdf1da;color:var(--tkf-amber);}
  .tkf-flag-low{background:#f1efe9;color:#8a8696;}

  /* 3. Due Date Tracking — deadline card with countdown */
  .tkf-due-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .tkf-due-clock{width:36px;height:36px;border-radius:50%;border:2px solid var(--tkf-indigo);position:relative;flex-shrink:0;}
  .tkf-due-clock::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;background:var(--tkf-indigo);transform-origin:left center;animation:tkf-tick 3s linear infinite;}
  @keyframes tkf-tick{to{transform:translate(0,-50%) rotate(360deg);}}
  .tkf-due-bar{height:7px;border-radius:4px;background:#f1efe9;margin-top:14px;overflow:hidden;}
  .tkf-due-bar i{display:block;height:100%;background:var(--tkf-coral);border-radius:4px;animation:tkf-count 2.6s ease-in-out infinite;}
  @keyframes tkf-count{0%{width:92%;}100%{width:8%;}}

  /* 4. Recurring Tasks — repeat icon + day chips */
  .tkf-repeat-wrap{display:flex;align-items:center;gap:12px;margin-top:14px;}
  .tkf-repeat-icon{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#eee9ff;border-radius:10px;}
  .tkf-repeat-icon svg{animation:tkf-spin 3.2s linear infinite;}
  @keyframes tkf-spin{to{transform:rotate(360deg);}}
  .tkf-repeat-chip{display:flex;gap:5px;margin-top:12px;}
  .tkf-repeat-chip span{font-size:10px;font-weight:600;padding:4px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .tkf-repeat-chip span.tkf-on{background:var(--tkf-indigo);color:#fff;}

  /* 5. Task Status Tracking — status pipeline */
  .tkf-status-row{display:flex;gap:6px;margin-top:16px;}
  .tkf-status-col{flex:1;text-align:center;}
  .tkf-status-dot{width:24px;height:24px;border-radius:50%;background:#f1efe9;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#8a8696;}
  .tkf-status-col.tkf-active .tkf-status-dot{background:var(--tkf-indigo);color:#fff;animation:tkf-blink 1.8s ease-in-out infinite;}
  .tkf-status-col.tkf-done .tkf-status-dot{background:var(--tkf-mint);color:#fff;}

  /* 6. Team Collaboration — comment thread with avatars */
  .tkf-collab-avs{display:flex;margin-bottom:10px;}
  .tkf-collab-avs .tkf-avatar{margin-left:-6px;}
  .tkf-collab-avs .tkf-avatar:first-child{margin-left:0;}
  .tkf-collab-line{height:7px;border-radius:4px;background:#f1efe9;margin-bottom:7px;width:0;animation:tkf-typefill 2.6s ease-in-out infinite;}
  .tkf-collab-line:nth-child(3){animation-delay:.25s;}
  @keyframes tkf-typefill{0%{width:0;}50%,100%{width:85%;}}

  /* 7. Smart Notifications — bell + toast */
  .tkf-bell{width:34px;height:34px;border-radius:10px;background:#ffe6dd;display:flex;align-items:center;justify-content:center;position:relative;margin-top:6px;}
  .tkf-bell-badge{position:absolute;top:-4px;right:-4px;width:15px;height:15px;border-radius:50%;background:var(--tkf-coral);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:tkf-blink 1.8s ease-in-out infinite;}
  .tkf-toast{margin-top:12px;background:#fff;border:1px solid #f2e2da;border-radius:10px;padding:8px 10px;display:flex;gap:8px;align-items:flex-start;box-shadow:0 6px 14px -8px rgba(23,22,28,.2);animation:tkf-slide-in 2.6s ease-in-out infinite;}
  @keyframes tkf-slide-in{0%{transform:translateX(-8px);opacity:0;}18%{transform:translateX(0);opacity:1;}82%{opacity:1;}100%{opacity:0;}}

  /* 8. File & Document Attachments — task card with attached files */
  .tkf-attach-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .tkf-attach-task{width:38px;height:38px;border-radius:9px;background:var(--tkf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
  .tkf-attach-file{width:32px;height:40px;border-radius:6px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.18);flex-shrink:0;animation:tkf-settle 2.6s ease-in-out infinite;}
  .tkf-attach-file:nth-child(3){animation-delay:.2s;}
  .tkf-attach-file:nth-child(4){animation-delay:.4s;}
  @keyframes tkf-settle{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

  /* 9. Custom Task Filters — filter chips + search */
  .tkf-search-bar{background:#faf9ff;border:1px solid #e3ddff;border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:6px;font-size:11px;color:#8a8696;}
  .tkf-filter-chips{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;}
  .tkf-filter-chips span{font-size:10px;font-weight:600;padding:3px 9px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .tkf-filter-chips span.tkf-active{background:var(--tkf-indigo);color:#fff;animation:tkf-blink 2s ease-in-out infinite;}

  /* 10. Performance & Productivity Insights — dark AI panel with bars */
  .tkf-perf-wrap{display:flex;align-items:flex-end;gap:6px;height:60px;margin-top:14px;}
  .tkf-perf-bar{flex:1;background:rgba(75,63,228,.35);border-radius:4px 4px 0 0;animation:tkf-bar-grow 2.6s ease-in-out infinite;}
  .tkf-perf-bar:nth-child(4){background:var(--tkf-indigo);}
  .tkf-perf-bar:nth-child(1){animation-delay:0s;}
  .tkf-perf-bar:nth-child(2){animation-delay:.15s;}
  .tkf-perf-bar:nth-child(3){animation-delay:.3s;}
  .tkf-perf-bar:nth-child(4){animation-delay:.45s;}
  @keyframes tkf-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

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

  @media (prefers-reduced-motion:reduce){
    .tkf-root *{animation:none !important;transition:none !important;}
  }

  /* collaboration */

  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:90 100}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.collaboration-card1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.cl1-head{display:flex;align-items:center;justify-content:space-between;}
.cl1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl1-invite{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cl1-stats{display:flex;gap:8px;margin-top:11px;}
.cl1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.cl1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.cl1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.cl1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.cl1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.cl1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cl1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl1-chg-c{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl1-chg-d{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cl1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.cl1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cl1-row{display:flex;align-items:center;gap:8px;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl1-row-a{animation-name:slideIn;animation-delay:.9s;}
.cl1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.cl1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.cl1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.cl1-hash-a{width:20px;height:20px;background:#fdece3;color:#c14a1c;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl1-hash-b{width:20px;height:20px;background:#fdece3;color:#c14a1c;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl1-hash-c{width:20px;height:20px;background:#fdece3;color:#c14a1c;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl1-hash-d{width:20px;height:20px;background:#fdece3;color:#c14a1c;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cl1-body{flex:1;min-width:0;}
.cl1-toprow{display:flex;align-items:center;justify-content:space-between;}
.cl1-chan{font-weight:700;color:#181114;font-size:10px;}
.cl1-members{color:#9a9290;font-size:9px;flex-shrink:0;}
.cl1-lastmsg{color:#7a726e;font-size:9.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.cl1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.collaboration-card2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.cl2-head{display:flex;align-items:center;justify-content:space-between;}
.cl2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cl2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.cl2-donut-wrap{position:relative;width:64px;height:64px;flex-shrink:0;}
.cl2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.cl2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .6s forwards;}
.cl2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.cl2-donut-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cl2-score-info{flex:1;}
.cl2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl2-score-line{font-size:9.5px;color:#5d5451;margin-top:4px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.cl2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.cl2-online{margin-top:11px;}
.cl2-online-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.cl2-online-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl2-online-count{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl2-avatars{display:flex;align-items:center;}
.cl2-av-a{width:26px;height:26px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff;margin-left:-8px;position:relative;opacity:0;animation:popIn .3s ease-out 1.5s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl2-av-b{width:26px;height:26px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff;margin-left:-8px;position:relative;opacity:0;animation:popIn .3s ease-out 1.6s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl2-av-c{width:26px;height:26px;border-radius:50%;background:#e6f1fb;color:#185fa5;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff;margin-left:-8px;position:relative;opacity:0;animation:popIn .3s ease-out 1.7s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl2-av-d{width:26px;height:26px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff;margin-left:-8px;position:relative;opacity:0;animation:popIn .3s ease-out 1.8s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl2-av-more{width:26px;height:26px;border-radius:50%;background:#181114;color:#ffffff;font-size:8.5px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff;margin-left:-8px;position:relative;opacity:0;animation:popIn .3s ease-out 1.9s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl2-av-dot{position:absolute;bottom:-1px;right:-1px;width:8px;height:8px;background:#1f9d55;border-radius:50%;border:2px solid #ffffff;animation:pulseLive 1.6s ease-in-out infinite;}

.cl2-updates{margin-top:12px;}
.cl2-up-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.cl2-up-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cl2-up-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cl2-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;padding:4.5px 0;color:#3c3532;font-family:'Plus Jakarta Sans',Arial,sans-serif;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;}
.cl2-row-a{animation-name:slideIn;animation-delay:2s;}
.cl2-row-b{animation-name:slideIn;animation-delay:2.1s;}

.cl2-update-text{font-weight:600;}
.cl2-update-time{color:#9a9290;font-size:9px;flex-shrink:0;}

.cl2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

 .clf-root{
    --clf-ink:#17161c;
    --clf-sub:#6b6878;
    --clf-line:#eeece7;
    --clf-paper:#faf9f6;
    --clf-card:#ffffff;
    --clf-indigo:#4b3fe4;
    --clf-coral:#ff6b4a;
    --clf-mint:#28a06b;
    --clf-amber:#e6a23c;
    --clf-tint-peach:#fbeadf;
    --clf-tint-navy:#f2f1f6;
    --clf-tint-mint:#e6f3ec;
    --clf-tint-lav:#eeeafc;
    --clf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--clf-ink);
    
    box-sizing:border-box;
  }
  .clf-root *{box-sizing:border-box;}
  .clf-wrap{max-width:1160px;margin:0 auto;}

  .clf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .clf-card{
    background:var(--clf-card);
    border:1px solid var(--clf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .clf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .clf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .clf-tint-peach{background:var(--clf-tint-peach);}
  .clf-tint-navy{background:var(--clf-tint-navy);}
  .clf-tint-mint{background:var(--clf-tint-mint);}
  .clf-tint-lav{background:var(--clf-tint-lav);}
  .clf-tint-sky{background:var(--clf-tint-sky);}

  .clf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .clf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .clf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .clf-dot{width:8px;height:8px;border-radius:50%;}
  .clf-dot--r{background:#f0665a;}
  .clf-dot--y{background:#f0b64a;}
  .clf-dot--g{background:#57c26a;}
  .clf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .clf-window--dark .clf-chrome-bar{background:rgba(255,255,255,.14);}

  .clf-body{
    padding:32px 28px 34px;
  }
  .clf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .clf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--clf-sub);
    margin:0;
  }

  .clf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .clf-window--dark .clf-label{color:#a9a4c4;}
  .clf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .clf-ai-badge{
    font-size:9px;font-weight:700;color:var(--clf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes clf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Real-Time Team Collaboration — live activity feed */
  .clf-live-feed-item{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .clf-live-feed-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}
  .clf-live{display:flex;align-items:center;gap:6px;margin-top:12px;}
  .clf-live-dot{width:7px;height:7px;border-radius:50%;background:var(--clf-mint);animation:clf-blink 1.4s ease-in-out infinite;}

  /* 2. Shared Workspaces — hub tiles */
  .clf-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
  .clf-hub-tile{
    aspect-ratio:1;border-radius:9px;background:#faf9ff;border:1px solid #eee9ff;
    display:flex;align-items:center;justify-content:center;font-size:14px;
    animation:clf-settle 2.6s ease-in-out infinite;
  }
  .clf-hub-tile:nth-child(2){animation-delay:.15s;}
  .clf-hub-tile:nth-child(3){animation-delay:.3s;}
  @keyframes clf-settle{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

  /* 3. Task Collaboration — task card with avatars */
  .clf-task-card{margin-top:12px;background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:9px 11px;}
  .clf-task-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
  .clf-task-avs{display:flex;}
  .clf-task-avs .clf-avatar{margin-left:-6px;}
  .clf-task-avs .clf-avatar:first-child{margin-left:0;}
  .clf-task-bar{height:6px;border-radius:4px;background:#eee9ff;overflow:hidden;}
  .clf-task-bar i{display:block;height:100%;width:60%;background:var(--clf-indigo);border-radius:4px;animation:clf-grow 2.6s ease-in-out infinite;}
  @keyframes clf-grow{0%{width:20%;}60%,100%{width:72%;}}

  /* 4. Instant Team Notifications — bell + toast */
  .clf-bell{width:34px;height:34px;border-radius:10px;background:#ffe6dd;display:flex;align-items:center;justify-content:center;position:relative;margin-top:6px;}
  .clf-bell-badge{position:absolute;top:-4px;right:-4px;width:15px;height:15px;border-radius:50%;background:var(--clf-coral);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:clf-blink 1.8s ease-in-out infinite;}
  .clf-toast{margin-top:12px;background:#fff;border:1px solid #f2e2da;border-radius:10px;padding:8px 10px;display:flex;gap:8px;align-items:flex-start;box-shadow:0 6px 14px -8px rgba(23,22,28,.2);animation:clf-slide-in 2.6s ease-in-out infinite;}
  @keyframes clf-slide-in{0%{transform:translateX(-8px);opacity:0;}18%{transform:translateX(0);opacity:1;}82%{opacity:1;}100%{opacity:0;}}

  /* 5. Shared Notes & Comments — comment thread */
  .clf-comment{display:flex;gap:8px;margin-top:11px;}
  .clf-comment-bubble{flex:1;background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:7px 10px;}
  .clf-comment-line{height:6px;border-radius:3px;background:#eee9ff;margin-bottom:5px;width:0;animation:clf-typefill 2.6s ease-in-out infinite;}
  @keyframes clf-typefill{0%{width:0;}50%,100%{width:85%;}}

  /* 6. Centralized Communication — channel list */
  .clf-channel-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .clf-ch-ico{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
  .clf-channel-row:nth-child(2) .clf-ch-ico{background:#eee9ff;}
  .clf-channel-row:nth-child(3) .clf-ch-ico{background:#e6f3ec;}
  .clf-channel-row:nth-child(4) .clf-ch-ico{background:#ffe6dd;}
  .clf-channel-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}

  /* 7. Smart Activity Timeline — vertical timeline */
  .clf-timeline{position:relative;padding-left:16px;margin-top:8px;}
  .clf-timeline::before{content:"";position:absolute;left:4px;top:2px;bottom:2px;width:2px;background:#eee9ff;}
  .clf-tl-item{position:relative;margin-bottom:12px;}
  .clf-tl-item::before{content:"";position:absolute;left:-16px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--clf-indigo);border:2px solid #fff;box-shadow:0 0 0 2px #eee9ff;}
  .clf-tl-item:nth-child(2)::before{animation:clf-blink 1.8s ease-in-out infinite;}
  .clf-tl-line{height:7px;border-radius:4px;background:#f1efe9;}

  /* 8. Role-Based Access Control — permission rows */
  .clf-perm-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .clf-perm-role{display:flex;align-items:center;gap:7px;}
  .clf-perm-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:100px;}
  .clf-perm-badge--full{background:#e6f3ec;color:var(--clf-mint);}
  .clf-perm-badge--view{background:#f1efe9;color:#8a8696;}
  .clf-perm-badge--edit{background:#eee9ff;color:var(--clf-indigo);animation:clf-blink 2s ease-in-out infinite;}

  /* 9. Cross-Team Coordination — connected department icons */
  .clf-dept-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .clf-dept{width:36px;height:36px;border-radius:10px;background:#faf9ff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .clf-dept-path{width:20px;height:2px;background:#d9d0ff;position:relative;}
  .clf-dept-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--clf-indigo);animation:clf-travel 2s ease-in-out infinite;}
  @keyframes clf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}

  /* 10. Collaboration Insights — dark AI panel with bars */
  .clf-perf-wrap{display:flex;align-items:flex-end;gap:6px;height:60px;margin-top:14px;}
  .clf-perf-bar{flex:1;background:rgba(75,63,228,.35);border-radius:4px 4px 0 0;animation:clf-bar-grow 2.6s ease-in-out infinite;}
  .clf-perf-bar:nth-child(4){background:var(--clf-indigo);}
  .clf-perf-bar:nth-child(1){animation-delay:0s;}
  .clf-perf-bar:nth-child(2){animation-delay:.15s;}
  .clf-perf-bar:nth-child(3){animation-delay:.3s;}
  .clf-perf-bar:nth-child(4){animation-delay:.45s;}
  @keyframes clf-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

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

  @media (prefers-reduced-motion:reduce){
    .clf-root *{animation:none !important;transition:none !important;}
  }

  /* team management */

  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:92 100}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.teamcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.tm1-head{display:flex;align-items:center;justify-content:space-between;}
.tm1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tm1-stats{display:flex;gap:8px;margin-top:11px;}
.tm1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.tm1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.tm1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.tm1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.tm1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.tm1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tm1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-chg-c{font-size:9.5px;color:#c1861b;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tm1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.tm1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tm1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-th-name{flex:1.9;}
.tm1-th-role{flex:1.6;}
.tm1-th-dept{flex:1.2;}
.tm1-th-status{flex:1.1;text-align:right;}

.tm1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-row-a{animation-name:slideIn;animation-delay:.9s;}
.tm1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.tm1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.tm1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.tm1-name{flex:1.9;font-weight:600;display:flex;align-items:center;gap:6px;}
.tm1-avatar-a{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-avatar-b{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-avatar-c{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-avatar-d{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tm1-role{flex:1.6;color:#7a726e;font-size:9.5px;}
.tm1-dept{flex:1.2;color:#7a726e;font-size:9.5px;}

.tm1-status{flex:1.1;text-align:right;}
.tm1-status-active{display:inline-flex;align-items:center;gap:3px;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-status-leave{display:inline-flex;align-items:center;gap:3px;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm1-status-dot{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;}
.tm1-leave-dot{width:5px;height:5px;background:#f0ac2c;border-radius:50%;display:inline-block;}

.tm1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.teamcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius: 20px 20px 0px 0px;}
.tm2-head{display:flex;align-items:center;justify-content:space-between;}
.tm2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tm2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.tm2-donut-wrap{position:relative;width:64px;height:64px;flex-shrink:0;}
.tm2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.tm2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .6s forwards;}
.tm2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.tm2-donut-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tm2-score-info{flex:1;}
.tm2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm2-score-line{font-size:9.5px;color:#5d5451;margin-top:4px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.tm2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.tm2-reviews{margin-top:12px;}
.tm2-rv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.tm2-rv-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm2-rv-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.tm2-row{display:flex;align-items:center;gap:8px;font-size:10px;padding:5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm2-row-a{animation-name:slideIn;animation-delay:1.6s;}
.tm2-row-b{animation-name:slideIn;animation-delay:1.72s;}
.tm2-row-c{animation-name:slideIn;animation-delay:1.84s;border-bottom:none;}

.tm2-avatar{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.tm2-rv-name{font-weight:600;flex:1.5;}
.tm2-rv-role{color:#9a9290;font-size:9px;flex:1.3;}
.tm2-rv-date{color:#7a726e;font-weight:600;font-size:9.5px;flex-shrink:0;text-align:right;flex:1;}

.tm2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}
 .tmf-root{
    --tmf-ink:#17161c;
    --tmf-sub:#6b6878;
    --tmf-line:#eeece7;
    --tmf-paper:#faf9f6;
    --tmf-card:#ffffff;
    --tmf-indigo:#4b3fe4;
    --tmf-coral:#ff6b4a;
    --tmf-mint:#28a06b;
    --tmf-amber:#e6a23c;
    --tmf-tint-peach:#fbeadf;
    --tmf-tint-navy:#f2f1f6;
    --tmf-tint-mint:#e6f3ec;
    --tmf-tint-lav:#eeeafc;
    --tmf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    color:var(--tmf-ink);
    box-sizing:border-box;
  }
  .tmf-root *{box-sizing:border-box;}
  .tmf-wrap{max-width:1160px;margin:0 auto;}

  .tmf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .tmf-card{
    background:var(--tmf-card);
    border:1px solid var(--tmf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .tmf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .tmf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .tmf-tint-peach{background:var(--tmf-tint-peach);}
  .tmf-tint-navy{background:var(--tmf-tint-navy);}
  .tmf-tint-mint{background:var(--tmf-tint-mint);}
  .tmf-tint-lav{background:var(--tmf-tint-lav);}
  .tmf-tint-sky{background:var(--tmf-tint-sky);}

  .tmf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .tmf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .tmf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .tmf-dot{width:8px;height:8px;border-radius:50%;}
  .tmf-dot--r{background:#f0665a;}
  .tmf-dot--y{background:#f0b64a;}
  .tmf-dot--g{background:#57c26a;}
  .tmf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .tmf-window--dark .tmf-chrome-bar{background:rgba(255,255,255,.14);}

  .tmf-body{
    padding:32px 28px 34px;
  }
  .tmf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .tmf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--tmf-sub);
    margin:0;
  }

  .tmf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .tmf-window--dark .tmf-label{color:#a9a4c4;}
  .tmf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .tmf-ai-badge{
    font-size:9px;font-weight:700;color:var(--tmf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes tmf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Centralized Team Directory — directory rows with role */
  .tmf-dir-row{display:flex;align-items:center;gap:9px;margin-top:11px;}
  .tmf-dir-name{font-size:11.5px;font-weight:600;color:#3a3550;}
  .tmf-dir-role{font-size:10px;color:#8a8696;}

  /* 2. Role & Permission Management — permission rows */
  .tmf-perm-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .tmf-perm-role{display:flex;align-items:center;gap:7px;}
  .tmf-perm-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:100px;}
  .tmf-perm-badge--full{background:#e6f3ec;color:var(--tmf-mint);}
  .tmf-perm-badge--view{background:#f1efe9;color:#8a8696;}
  .tmf-perm-badge--edit{background:#eee9ff;color:var(--tmf-indigo);animation:tmf-blink 2s ease-in-out infinite;}

  /* 3. Smart Task Assignment — task assigning to a person */
  .tmf-assign-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .tmf-assign-task{width:38px;height:38px;border-radius:9px;background:var(--tmf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
  .tmf-assign-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .tmf-assign-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--tmf-indigo);animation:tmf-travel 2s ease-in-out infinite;}
  @keyframes tmf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .tmf-assign-person{width:38px;height:38px;border-radius:50%;background:#4b3fe4;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 4. Real-Time Team Activity — live feed */
  .tmf-live-feed-item{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .tmf-live-feed-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}
  .tmf-live{display:flex;align-items:center;gap:6px;margin-top:12px;}
  .tmf-live-dot{width:7px;height:7px;border-radius:50%;background:var(--tmf-mint);animation:tmf-blink 1.4s ease-in-out infinite;}

  /* 5. Workload Management — capacity bars per person */
  .tmf-load-row{display:flex;align-items:center;gap:9px;margin-top:11px;}
  .tmf-load-bar{flex:1;height:7px;border-radius:4px;background:#f1efe9;overflow:hidden;}
  .tmf-load-bar i{display:block;height:100%;border-radius:4px;}
  .tmf-load-bar.tmf-high i{background:var(--tmf-coral);animation:tmf-load-grow 2.6s ease-in-out infinite;}
  .tmf-load-bar.tmf-mid i{background:var(--tmf-amber);width:58%;}
  .tmf-load-bar.tmf-low i{background:var(--tmf-mint);width:32%;}
  @keyframes tmf-load-grow{0%{width:60%;}50%{width:92%;}100%{width:60%;}}

  /* 6. Performance Tracking — dark AI panel with bars */
  .tmf-perf-wrap{display:flex;align-items:flex-end;gap:6px;height:60px;margin-top:14px;}
  .tmf-perf-bar{flex:1;background:rgba(75,63,228,.35);border-radius:4px 4px 0 0;animation:tmf-bar-grow 2.6s ease-in-out infinite;}
  .tmf-perf-bar:nth-child(4){background:var(--tmf-indigo);}
  .tmf-perf-bar:nth-child(1){animation-delay:0s;}
  .tmf-perf-bar:nth-child(2){animation-delay:.15s;}
  .tmf-perf-bar:nth-child(3){animation-delay:.3s;}
  .tmf-perf-bar:nth-child(4){animation-delay:.45s;}
  @keyframes tmf-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

  /* 7. Cross-Team Collaboration — connected department icons */
  .tmf-dept-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .tmf-dept{width:36px;height:36px;border-radius:10px;background:#faf9ff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .tmf-dept-path{width:20px;height:2px;background:#d9d0ff;position:relative;}
  .tmf-dept-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--tmf-indigo);animation:tmf-travel 2s ease-in-out infinite;}

  /* 8. Attendance & Availability — status list */
  .tmf-status-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .tmf-status-who{display:flex;align-items:center;gap:8px;}
  .tmf-status-chip{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;display:flex;align-items:center;gap:5px;}
  .tmf-status-chip i{width:6px;height:6px;border-radius:50%;display:inline-block;}
  .tmf-status-online{background:#e6f3ec;color:var(--tmf-mint);}
  .tmf-status-online i{background:var(--tmf-mint);animation:tmf-blink 1.6s ease-in-out infinite;}
  .tmf-status-away{background:#fdf1da;color:var(--tmf-amber);}
  .tmf-status-away i{background:var(--tmf-amber);}
  .tmf-status-offline{background:#f1efe9;color:#8a8696;}
  .tmf-status-offline i{background:#c3bfc9;}

  /* 9. Goal & Milestone Tracking — progress bar with marker */
  .tmf-goal-bar{height:8px;border-radius:5px;background:#f1efe9;position:relative;margin-top:20px;}
  .tmf-goal-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--tmf-indigo),var(--tmf-coral));animation:tmf-goal-grow 3s ease-in-out infinite;}
  @keyframes tmf-goal-grow{0%{width:15%;}60%,100%{width:72%;}}
  .tmf-goal-marker{position:absolute;top:-4px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--tmf-coral);}
  .tmf-goal-labels{display:flex;justify-content:space-between;margin-top:16px;}

  /* 10. Team Performance Insights — dark AI panel with stats */
  .tmf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .tmf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--tmf-coral);margin-top:4px;flex-shrink:0;}
  .tmf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:tmf-blink 2s ease-in-out infinite;}

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

  @media (prefers-reduced-motion:reduce){
    .tmf-root *{animation:none !important;transition:none !important;}
  }

  @keyframes cardRise1{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRise2{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cellIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}
@keyframes dotIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes todayPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,86,31,.35)}50%{box-shadow:0 0 0 4px rgba(224,86,31,0)}}
@keyframes rowIn1{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes rowIn2{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes rowIn3{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes gaugeSweep{0%{stroke-dasharray:0 100}100%{stroke-dasharray:92 100}}
@keyframes chipIn{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.calendarcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRise1 .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.c1-head{display:flex;align-items:center;justify-content:space-between;}
.c1-title{font-size:13px;font-weight:700;color:#181114;letter-spacing:-.2px;}
.c1-period{display:flex;align-items:center;gap:4px;border:1px solid #e9e4e1;padding:3px 8px;font-size:9px;color:#7a726e;font-weight:600;}
.c1-period-arrow{font-size:7px;}

.c1-weekgrid{display:grid;grid-template-columns:repeat(7,1fr);margin-top:12px;}
.c1-wd{text-align:center;font-size:7.5px;font-weight:700;color:#a49c98;padding-bottom:4px;}

.c1-daygrid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:3px;}
.c1-cell{text-align:center;font-size:9px;color:#181114;padding:3px 0;opacity:0;animation-name:cellIn;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:forwards;position:relative;}
.c1-cell-prev{color:#cdc6c2;}
.c1-cell-d01{animation-delay:.05s;}
.c1-cell-d02{animation-delay:.07s;}
.c1-cell-d03{animation-delay:.09s;}
.c1-cell-d04{animation-delay:.11s;}
.c1-cell-d05{animation-delay:.13s;}
.c1-cell-d06{animation-delay:.15s;}
.c1-cell-d07{animation-delay:.17s;}
.c1-cell-d08{animation-delay:.19s;}
.c1-cell-d09{animation-delay:.21s;}
.c1-cell-d10{animation-delay:.23s;}
.c1-cell-d11{animation-delay:.25s;}
.c1-cell-d12{animation-delay:.27s;}
.c1-cell-d13{animation-delay:.29s;}
.c1-cell-d14{animation-delay:.31s;}
.c1-cell-d15{animation-delay:.33s;}
.c1-cell-d16{animation-delay:.35s;}
.c1-cell-d17{animation-delay:.37s;}
.c1-cell-d18{animation-delay:.39s;}
.c1-cell-d19{animation-delay:.41s;}
.c1-cell-d20{animation-delay:.43s;}
.c1-cell-d21{animation-delay:.45s;}
.c1-cell-d22{animation-delay:.47s;}
.c1-cell-d23{animation-delay:.49s;}
.c1-cell-d24{animation-delay:.51s;}
.c1-cell-d25{animation-delay:.53s;}
.c1-cell-d26{animation-delay:.55s;}
.c1-cell-d27{animation-delay:.57s;}
.c1-cell-d28{animation-delay:.59s;}
.c1-cell-d29{animation-delay:.61s;}
.c1-cell-d30{animation-delay:.63s;}
.c1-cell-d31{animation-delay:.65s;}
.c1-cell-d32{animation-delay:.67s;}
.c1-cell-d33{animation-delay:.69s;}
.c1-cell-d34{animation-delay:.71s;}

.c1-dot{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:3px;height:3px;background:#e0561f;border-radius:50%;opacity:0;animation-name:dotIn;animation-duration:.25s;animation-timing-function:ease-out;animation-fill-mode:forwards;}
.c1-dot-a{animation-delay:1.1s;}
.c1-dot-b{animation-delay:1.15s;}
.c1-dot-c{animation-delay:1.2s;}
.c1-dot-d{animation-delay:1.3s;}
.c1-dot-e{animation-delay:1.35s;}
.c1-dot-f{animation-delay:1.4s;}

.c1-today-wrap{display:flex;align-items:center;justify-content:center;opacity:0;animation-name:cellIn;animation-duration:.3s;animation-timing-function:ease-out;animation-delay:.41s;animation-fill-mode:forwards;padding:1px 0;}
.c1-today{width:16px;height:16px;border-radius:50%;background:#e0561f;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;animation-name:todayPulse;animation-duration:2s;animation-timing-function:ease-in-out;animation-delay:1s;animation-iteration-count:infinite;}

.c1-sched{margin-top:10px;}
.c1-sched-title{font-size:9.5px;font-weight:700;color:#181114;margin-bottom:6px;}
.c1-ev{display:flex;align-items:center;gap:8px;font-size:8px;padding:5px 0;padding-left:8px;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;}
.c1-ev1{border-left:2px solid #e0561f;animation-name:rowIn1;animation-delay:1.55s;}
.c1-ev2{border-left:2px solid #f0ac2c;animation-name:rowIn2;animation-delay:1.67s;}
.c1-ev3{border-left:2px solid #1f9d55;animation-name:rowIn3;animation-delay:1.79s;}
.c1-ev-time{color:#7a726e;font-weight:600;width:52px;flex-shrink:0;}
.c1-ev-text{color:#181114;font-weight:600;}

.c1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.calendarcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRise2 .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.c2-head{display:flex;align-items:center;justify-content:space-between;}
.c2-title{font-size:13px;font-weight:700;color:#181114;letter-spacing:-.2px;}
.c2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:9px;font-weight:700;}

.c2-gaugebox{background:#f7f4f1;padding:11px 14px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.c2-gauge-wrap{position:relative;width:74px;height:74px;flex-shrink:0;}
.c2-gauge-track{fill:none;stroke:#ece6e2;stroke-width:3.4;}
.c2-gauge-fill{fill:none;stroke:#e0561f;stroke-width:3.4;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:gaugeSweep 1.2s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.c2-gauge-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.c2-gauge-value{font-size:13px;font-weight:800;color:#181114;}

.c2-gauge-info{flex:1;}
.c2-gauge-title{font-size:9.5px;font-weight:700;color:#e0561f;}
.c2-gauge-sub{font-size:8px;color:#8a8280;margin-top:2px;}
.c2-chip{display:inline-flex;align-items:center;gap:5px;background:#ffffff;border:1px solid #e9e4e1;padding:4px 8px;margin-top:7px;font-size:8px;font-weight:700;color:#181114;opacity:0;animation:chipIn .4s ease-out 1.3s forwards;}

.c2-upcoming{margin-top:12px;}
.c2-up-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.c2-up-title{font-size:9.5px;font-weight:700;color:#181114;}
.c2-up-viewall{font-size:7px;color:#e0561f;font-weight:700;}

.c2-thead{display:flex;font-size:7px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;}
.c2-th-meeting{flex:1.8;}
.c2-th-type{flex:1.1;text-align:right;}
.c2-th-time{flex:1.2;text-align:right;}
.c2-th-guests{flex:1;text-align:right;}

.c2-row{display:flex;align-items:center;font-size:8px;padding:5.5px 0;color:#3c3532;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;}
.c2-row1{border-bottom:1px solid #f7f4f2;animation-name:rowIn1;animation-delay:1.5s;}
.c2-row2{border-bottom:1px solid #f7f4f2;animation-name:rowIn2;animation-delay:1.62s;}
.c2-row3{animation-name:rowIn3;animation-delay:1.74s;}

.c2-row-name{flex:1.8;font-weight:600;display:flex;align-items:center;gap:5px;}
.c2-row-type{flex:1.1;text-align:right;color:#7a726e;}
.c2-row-time{flex:1.2;text-align:right;}
.c2-row-guests{flex:1;text-align:right;}

.c2-dot-live{width:5px;height:5px;background:#e0561f;border-radius:50%;display:inline-block;animation:pulseDot 1.6s ease-in-out infinite;}
.c2-dot-amber{width:5px;height:5px;background:#f0ac2c;border-radius:50%;display:inline-block;}
.c2-dot-green{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;}

.c2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

/* email client banner */


@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes typeIn{0%{width:0}100%{width:100%}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.card1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;}
.ec1-head{display:flex;align-items:center;justify-content:space-between;}
.ec1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec1-compose{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ec1-tabs{display:flex;gap:16px;margin-top:12px;border-bottom:1px solid #f1ece9;}
.ec1-tab-active{font-size:10.5px;font-weight:700;color:#e0561f;padding-bottom:7px;border-bottom:2px solid #e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec1-tab-b{font-size:10.5px;font-weight:600;color:#9a9290;padding-bottom:7px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec1-tab-c{font-size:10.5px;font-weight:600;color:#9a9290;padding-bottom:7px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec1-tab-d{font-size:10.5px;font-weight:600;color:#9a9290;padding-bottom:7px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ec1-row{display:flex;align-items:center;gap:9px;font-size:10px;padding:7px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec1-row-a{animation-name:slideIn;animation-delay:.7s;}
.ec1-row-b{animation-name:slideIn;animation-delay:.85s;}
.ec1-row-c{animation-name:slideIn;animation-delay:1s;}
.ec1-row-d{animation-name:slideIn;animation-delay:1.15s;border-bottom:none;}

.ec1-star-on{flex-shrink:0;opacity:0;animation:popIn .3s ease-out .8s forwards;}
.ec1-star-off{flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.ec1-star-on2{flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.1s forwards;}
.ec1-star-off2{flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.25s forwards;}

.ec1-body{flex:1;min-width:0;}
.ec1-toprow{display:flex;align-items:center;justify-content:space-between;}
.ec1-sender{font-weight:700;color:#181114;font-size:10px;display:flex;align-items:center;gap:5px;}
.ec1-time{color:#9a9290;font-size:9px;flex-shrink:0;}
.ec1-subject{color:#7a726e;font-size:9.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ec1-unread-dot{width:6px;height:6px;background:#e0561f;border-radius:50%;display:inline-block;flex-shrink:0;animation:pulseLive 1.6s ease-in-out infinite;}

.ec1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.card2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;}
.ec2-head{display:flex;align-items:center;justify-content:space-between;}
.ec2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ec2-composebox{background:#f7f4f1;padding:11px 12px;margin-top:12px;}
.ec2-compose-label{font-size:10.5px;font-weight:700;color:#e0561f;margin-bottom:6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec2-compose-text{font-size:10px;color:#3c3532;line-height:1.5;font-family:'Plus Jakarta Sans',Arial,sans-serif;opacity:0;animation:slideIn .5s ease-out .8s forwards;}
.ec2-compose-btns{display:flex;gap:8px;margin-top:9px;}
.ec2-btn-use{background:#e0561f;color:#ffffff;font-size:9.5px;font-weight:700;padding:5px 11px;opacity:0;animation:chipPop .4s ease-out 1.3s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec2-btn-edit{background:#ffffff;border:1px solid #e0dbd7;color:#3c3532;font-size:9.5px;font-weight:700;padding:5px 11px;opacity:0;animation:chipPop .4s ease-out 1.4s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ec2-scheduled{margin-top:12px;}
.ec2-sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.ec2-sc-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec2-sc-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ec2-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;padding:5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec2-row-a{animation-name:slideIn;animation-delay:1.7s;}
.ec2-row-b{animation-name:slideIn;animation-delay:1.82s;}
.ec2-row-c{animation-name:slideIn;animation-delay:1.94s;border-bottom:none;}

.ec2-sc-subject{font-weight:600;flex:1.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ec2-sc-to{color:#9a9290;font-size:9px;flex:1.3;}
.ec2-sc-time{color:#7a726e;font-weight:600;font-size:9.5px;flex-shrink:0;text-align:right;}

.ec2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes typeIn{0%{width:0}100%{width:100%}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.emailcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.ec1-head{display:flex;align-items:center;justify-content:space-between;}
.ec1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec1-compose{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ec1-tabs{display:flex;gap:16px;margin-top:12px;border-bottom:1px solid #f1ece9;}
.ec1-tab-active{font-size:10.5px;font-weight:700;color:#e0561f;padding-bottom:7px;border-bottom:2px solid #e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec1-tab-b{font-size:10.5px;font-weight:600;color:#9a9290;padding-bottom:7px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec1-tab-c{font-size:10.5px;font-weight:600;color:#9a9290;padding-bottom:7px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec1-tab-d{font-size:10.5px;font-weight:600;color:#9a9290;padding-bottom:7px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ec1-row{display:flex;align-items:center;gap:9px;font-size:10px;padding:7px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec1-row-a{animation-name:slideIn;animation-delay:.7s;}
.ec1-row-b{animation-name:slideIn;animation-delay:.85s;}
.ec1-row-c{animation-name:slideIn;animation-delay:1s;}
.ec1-row-d{animation-name:slideIn;animation-delay:1.15s;border-bottom:none;}

.ec1-star-on{flex-shrink:0;opacity:0;animation:popIn .3s ease-out .8s forwards;}
.ec1-star-off{flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.ec1-star-on2{flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.1s forwards;}
.ec1-star-off2{flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.25s forwards;}

.ec1-body{flex:1;min-width:0;}
.ec1-toprow{display:flex;align-items:center;justify-content:space-between;}
.ec1-sender{font-weight:700;color:#181114;font-size:10px;display:flex;align-items:center;gap:5px;}
.ec1-time{color:#9a9290;font-size:9px;flex-shrink:0;}
.ec1-subject{color:#7a726e;font-size:9.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ec1-unread-dot{width:6px;height:6px;background:#e0561f;border-radius:50%;display:inline-block;flex-shrink:0;animation:pulseLive 1.6s ease-in-out infinite;}

.ec1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.emailcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden; border-radius: 20px 20px 0px 0px;}
.ec2-head{display:flex;align-items:center;justify-content:space-between;}
.ec2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ec2-composebox{background:#f7f4f1;padding:11px 12px;margin-top:12px;}
.ec2-compose-label{font-size:10.5px;font-weight:700;color:#e0561f;margin-bottom:6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec2-compose-text{font-size:10px;color:#3c3532;line-height:1.5;font-family:'Plus Jakarta Sans',Arial,sans-serif;opacity:0;animation:slideIn .5s ease-out .8s forwards;}
.ec2-compose-btns{display:flex;gap:8px;margin-top:9px;}
.ec2-btn-use{background:#e0561f;color:#ffffff;font-size:9.5px;font-weight:700;padding:5px 11px;opacity:0;animation:chipPop .4s ease-out 1.3s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec2-btn-edit{background:#ffffff;border:1px solid #e0dbd7;color:#3c3532;font-size:9.5px;font-weight:700;padding:5px 11px;opacity:0;animation:chipPop .4s ease-out 1.4s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ec2-scheduled{margin-top:12px;}
.ec2-sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.ec2-sc-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec2-sc-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ec2-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;padding:5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ec2-row-a{animation-name:slideIn;animation-delay:1.7s;}
.ec2-row-b{animation-name:slideIn;animation-delay:1.82s;}
.ec2-row-c{animation-name:slideIn;animation-delay:1.94s;border-bottom:none;}

.ec2-sc-subject{font-weight:600;flex:1.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ec2-sc-to{color:#9a9290;font-size:9px;flex:1.3;}
.ec2-sc-time{color:#7a726e;font-weight:600;font-size:9.5px;flex-shrink:0;text-align:right;}

.ec2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

.emf-root{
    --emf-ink:#17161c;
    --emf-sub:#6b6878;
    --emf-line:#eeece7;
    --emf-paper:#faf9f6;
    --emf-card:#ffffff;
    --emf-indigo:#4b3fe4;
    --emf-coral:#ff6b4a;
    --emf-mint:#28a06b;
    --emf-amber:#e6a23c;
    --emf-tint-peach:#fbeadf;
    --emf-tint-navy:#f2f1f6;
    --emf-tint-mint:#e6f3ec;
    --emf-tint-lav:#eeeafc;
    --emf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--emf-ink);
    
    box-sizing:border-box;
  }
  .emf-root *{box-sizing:border-box;}
  .emf-wrap{max-width:1160px;margin:0 auto;}

  .emf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .emf-card{
    background:var(--emf-card);
    border:1px solid var(--emf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .emf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .emf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .emf-tint-peach{background:var(--emf-tint-peach);}
  .emf-tint-navy{background:var(--emf-tint-navy);}
  .emf-tint-mint{background:var(--emf-tint-mint);}
  .emf-tint-lav{background:var(--emf-tint-lav);}
  .emf-tint-sky{background:var(--emf-tint-sky);}

  .emf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .emf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .emf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .emf-dot{width:8px;height:8px;border-radius:50%;}
  .emf-dot--r{background:#f0665a;}
  .emf-dot--y{background:#f0b64a;}
  .emf-dot--g{background:#57c26a;}
  .emf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .emf-window--dark .emf-chrome-bar{background:rgba(255,255,255,.14);}

  .emf-body{
    padding:32px 28px 34px;
  }
  .emf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .emf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--emf-sub);
    margin:0;
  }

  .emf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .emf-window--dark .emf-label{color:#a9a4c4;}
  .emf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .emf-ai-badge{
    font-size:9px;font-weight:700;color:var(--emf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes emf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Email Inbox — unified email list with unread badges */
  .emf-mail-row{display:flex;align-items:center;gap:8px;margin-top:11px;}
  .emf-mail-avatar-sm{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;}
  .emf-mail-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}
  .emf-unread{width:7px;height:7px;border-radius:50%;background:var(--emf-coral);flex-shrink:0;animation:emf-blink 1.8s ease-in-out infinite;}

  /* 2. Conversation History — vertical timeline */
  .emf-timeline{position:relative;padding-left:16px;margin-top:8px;}
  .emf-timeline::before{content:"";position:absolute;left:4px;top:2px;bottom:2px;width:2px;background:#eee9ff;}
  .emf-tl-item{position:relative;margin-bottom:12px;}
  .emf-tl-item::before{content:"";position:absolute;left:-16px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--emf-indigo);border:2px solid #fff;box-shadow:0 0 0 2px #eee9ff;}
  .emf-tl-item:nth-child(2)::before{animation:emf-blink 1.8s ease-in-out infinite;}
  .emf-tl-line{height:7px;border-radius:4px;background:#f1efe9;}

  /* 3. Smart Email Organization — priority buckets */
  .emf-org-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .emf-org-bucket{font-size:11px;color:#3a3550;}
  .emf-org-count{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;}
  .emf-org-hi{background:#ffe6dd;color:var(--emf-coral);animation:emf-blink 2s ease-in-out infinite;}
  .emf-org-mid{background:#fdf1da;color:var(--emf-amber);}
  .emf-org-lo{background:#f1efe9;color:#8a8696;}

  /* 4. Email Tracking — engagement stats */
  .emf-track-wrap{display:flex;justify-content:space-between;margin-top:14px;text-align:center;}
  .emf-track-stat{flex:1;}
  .emf-track-num{font-family:'Sora',sans-serif;font-size:17px;font-weight:700;color:#241f2e;}
  .emf-track-live{display:flex;align-items:center;gap:6px;margin-top:12px;}
  .emf-track-dot{width:7px;height:7px;border-radius:50%;background:var(--emf-mint);animation:emf-blink 1.4s ease-in-out infinite;}

  /* 5. CRM Email Integration — email linking to a contact record */
  .emf-link-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .emf-link-mail{width:38px;height:38px;border-radius:9px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
  .emf-link-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .emf-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--emf-indigo);animation:emf-travel 2s ease-in-out infinite;}
  @keyframes emf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .emf-link-contact{width:38px;height:38px;border-radius:50%;background:var(--emf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 6. Shared Team Inbox — assigned conversation rows */
  .emf-assign-row{background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:9px 11px;margin-top:10px;display:flex;align-items:center;justify-content:space-between;}
  .emf-assign-to{display:flex;align-items:center;gap:6px;}

  /* 7. Intelligent Follow-Up Reminders — reminder toast */
  .emf-toast{margin-top:14px;background:#fff;border:1px solid #f2e2da;border-radius:10px;padding:9px 11px;display:flex;gap:8px;align-items:flex-start;box-shadow:0 6px 14px -8px rgba(23,22,28,.2);animation:emf-slide-in 2.6s ease-in-out infinite;}
  @keyframes emf-slide-in{0%{transform:translateX(-8px);opacity:0;}18%{transform:translateX(0);opacity:1;}82%{opacity:1;}100%{opacity:0;}}

  /* 8. Advanced Email Search — search bar with filtering rows */
  .emf-search-bar{background:#faf9ff;border:1px solid #e3ddff;border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:6px;font-size:11px;color:#8a8696;}
  .emf-search-results{margin-top:10px;}
  .emf-search-row{display:flex;align-items:center;gap:8px;padding:4px 0;animation:emf-filter 2.6s ease-in-out infinite;}
  .emf-search-row:nth-child(2){animation-delay:.2s;}
  .emf-search-row:nth-child(3){animation-delay:.4s;}
  @keyframes emf-filter{0%,100%{opacity:1;transform:translateX(0);}45%{opacity:.25;transform:translateX(-4px);}55%{opacity:.25;transform:translateX(-4px);}}

  /* 9. Secure Email Management — lock + permission chips */
  .emf-secure-wrap{display:flex;align-items:center;gap:12px;margin-top:14px;}
  .emf-lock{width:38px;height:38px;border-radius:10px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
  .emf-secure-perm{margin-top:12px;display:flex;gap:6px;}
  .emf-secure-perm span{font-size:10px;font-weight:600;padding:3px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .emf-secure-perm span.emf-on{background:var(--emf-mint);color:#fff;}

  /* 10. Communication Insights — dark AI panel */
  .emf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .emf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--emf-coral);margin-top:4px;flex-shrink:0;}
  .emf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:emf-blink 2s ease-in-out infinite;}

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

  @media (prefers-reduced-motion:reduce){
    .emf-root *{animation:none !important;transition:none !important;}
  }
  .pipeline-feature-headertext{
    padding: 18px;
  }

    .feature-salescard1-image,.feature-salescard2-image{
    
    background: transparent !important;
    border-radius: var(--radius-lg);
    box-shadow: none !important;
    padding: 0px !important;
  }
  .feature-salescard1-image  {
    --so-accent: #ff6a1a;
    --so-accent-light: #ffe4d6;
    --so-text-primary: #1a1a1a;
    --so-text-secondary: #6b6b6b;
    --so-success: #17a35a;
    --so-border: #eceae6;
    --so-card-bg: #ffffff;
  }
  /* * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(circle at 50% 100%, #ff6a1a 0%, #1a0e08 55%, #000 100%);
  } */
  .so-dashboard-card {
        background: var(--crm-card-bg);
    border-radius: 20px 20px 0px 0px;
    padding: 28px;
    width: 100%;
    max-width: 620px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  }
  .so-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .so-dashboard-header h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #1a1a1a;
  }
  .so-range-select {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #eceae6;
    border-radius: 10px;
    padding: 4px 14px;
    font-size: 14px;
    color: #1a1a1a;
    background: #fff;
  }
 
  .so-stat-delta {
    font-size: 13px;
    font-weight: 600;
    color: #17a35a;
    margin-left: 4px;
  }
  .so-chart-container {
    position: relative;
    height: 185px;
    /* margin-bottom: 34px; */
  }
  .so-insight-banner {
    display: none !important;
    align-items: center;
    gap: 10px;
    background: #f7f6f3;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    color: var(--so-text-secondary);
  }
  .so-insight-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ff6a1a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
  }
  .so-insight-banner strong { color: #ff6a1a; font-weight: 700; }


  .feature-salescard2-image {
    --crm-accent: #ff6a1a;
    --crm-accent-light: #ffe4d6;
    --crm-text-primary: #1a1a1a;
    --crm-text-secondary: #6b6b6b;
    --crm-text-muted: #9b9b9b;
    --crm-success: #17a35a;
    --crm-success-light: #e8f7ee;
    --crm-warning: #e0a527;
    --crm-danger: #d9432e;
    --crm-border: #eceae6;
    --crm-card-bg: #ffffff;
    --crm-tile-bg: #f7f6f3;
  }
  /* * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
  } */
  .crm-dashboard-card {
    background: var(--crm-card-bg);
    border-radius: 20px 20px 0px 0px;
    padding: 28px 28px 5px 28px;
    width: 100%;
    max-width: 780px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  }
  .crm-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .crm-dashboard-header h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #1a1a1a;
  }
.crm-ai-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--crm-accent-light);
    color: var(--crm-accent);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 10px;
}
  .crm-meta-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .crm-pipeline-select {
    background: #ffe4d6;
    color: #ff6a1a;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 10px;
  }
  .crm-meta-item {
    padding: 10px 4px;
  }
  .crm-meta-label {
    font-size: 12px;
    color: var(--crm-text-muted);
    margin-bottom: 2px;
  }
  .crm-meta-value {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
  }
  .crm-stage-grid {
    display: none !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
  }
  .crm-stage-tile {
    background: var(--crm-tile-bg);
    border-radius: 12px;
    padding: 14px 12px;
  }
  .crm-stage-tile.crm-stage-won {
    background: var(--crm-success-light);
  }
  .crm-stage-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
  }
  .crm-stage-tile.crm-stage-won .crm-stage-name,
  .crm-stage-tile.crm-stage-won .crm-stage-count { color: var(--crm-success); }
  .crm-stage-count {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
  }
  .crm-stage-value {
    font-size: 12px;
    color: #6b6b6b;
  }
  .crm-stage-tile.crm-stage-won .crm-stage-value { color: var(--crm-success); }
  .crm-bottom-row {
    display: grid;
    gap: 16px;
  }
  .crm-panel {
    background: var(--crm-tile-bg);
    border-radius: 14px;
    padding: 18px;
  }
  .crm-panel-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1a1a1a;
  }
  .crm-panel-title.crm-danger-text { color: var(--crm-danger); }
  .crm-gauge-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
        height: 202px;
  }
  .crm-gauge-canvas-wrap {
    position: relative;
    width: 180px;
    height: 100px;
  }
  .crm-gauge-value {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: #1a1a1a;
  }
  .crm-gauge-caption {
    font-size: 13px;
    color: #6b6b6b;
    margin-top: 6px;
    font-weight: 600;
  }
  .crm-legend {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    font-size: 11px;
    color: #6b6b6b;
    flex-wrap: wrap;
    justify-content: center;
  }
  .crm-legend-item { display: flex; align-items: center; gap: 4px; }
  .crm-legend-dot { width: 8px; height: 8px; border-radius: 2px; }
  .crm-deals-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .crm-deals-table td { padding: 8px 0; color: #1a1a1a; }
  .crm-deals-table td.crm-deal-value { text-align: right; color: #6b6b6b; }
  .crm-deals-table td.crm-deal-prob { text-align: right; font-weight: 700; width: 44px; }
  .crm-deals-table tr + tr td { border-top: 1px solid var(--crm-border); }

  @media (max-width: 640px) {
    .crm-stage-grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* lead management */


@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:92 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.lead-managementcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.lm1-head{display:flex;align-items:center;justify-content:space-between;}
.lm1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.lm1-stats{display:flex;gap:8px;margin-top:11px;}
.lm1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.lm1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.lm1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.lm1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.lm1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.lm1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.lm1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-chg-d{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.lm1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.lm1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.lm1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-th-name{flex:1.9;}
.lm1-th-source{flex:1.3;}
.lm1-th-score{flex:1;text-align:right;}
.lm1-th-status{flex:1.1;text-align:right;}

.lm1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-row-a{animation-name:slideIn;animation-delay:.9s;}
.lm1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.lm1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.lm1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.lm1-name{flex:1.9;font-weight:600;display:flex;align-items:center;gap:6px;}
.lm1-avatar-a{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-avatar-b{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-avatar-c{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-avatar-d{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.lm1-source{flex:1.3;color:#7a726e;font-size:9.5px;}
.lm1-score{flex:1;text-align:right;font-weight:700;color:#181114;font-size:9.5px;}

.lm1-status{flex:1.1;text-align:right;}
.lm1-status-hot{display:inline-block;background:#fbe8e8;color:#c93030;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-status-warm{display:inline-block;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm1-status-cold{display:inline-block;background:#f1ece9;color:#7a726e;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.lm1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.lead-managementcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.lm2-head{display:flex;align-items:center;justify-content:space-between;}
.lm2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.lm2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.lm2-donut-wrap{position:relative;width:64px;height:64px;flex-shrink:0;}
.lm2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.lm2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.lm2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.lm2-donut-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.lm2-score-info{flex:1;}
.lm2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm2-score-sub{font-size:9.5px;color:#8a8280;margin-top:2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm2-chip{display:inline-flex;align-items:center;gap:5px;background:#ffffff;border:1px solid #e9e4e1;padding:4px 8px;margin-top:7px;font-size:9px;font-weight:700;color:#181114;opacity:0;animation:chipPop .4s ease-out 1.3s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.lm2-detailrow{display:flex;gap:8px;margin-top:9px;}
.lm2-detail-source{flex:1;border:1px solid #efeae7;padding:6px 8px;}
.lm2-detail-company{flex:1;border:1px solid #efeae7;padding:6px 8px;}
.lm2-detail-label{font-size:8.5px;color:#9a9290;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm2-detail-val{font-size:12px;font-weight:800;color:#181114;margin-top:2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.lm2-actions{margin-top:11px;}
.lm2-ac-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.lm2-ac-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm2-ac-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.lm2-step{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;padding:4.5px 0;padding-left:8px;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.lm2-step-a{border-left:2px solid #e0561f;animation-name:slideIn;animation-delay:1.6s;}
.lm2-step-b{border-left:2px solid #f0ac2c;animation-name:slideIn;animation-delay:1.72s;}
.lm2-step-c{border-left:2px solid #7a726e;animation-name:slideIn;animation-delay:1.84s;}
.lm2-step-text{color:#181114;font-weight:600;}
.lm2-step-status{color:#9a9290;font-weight:600;font-size:9px;flex-shrink:0;}

.lm2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}


  .lcf-root{
    --lcf-ink:#17161c;
    --lcf-sub:#6b6878;
    --lcf-line:#eeece7;
    --lcf-paper:#faf9f6;
    --lcf-card:#ffffff;
    --lcf-indigo:#4b3fe4;
    --lcf-coral:#ff6b4a;
    --lcf-mint:#28a06b;
    --lcf-amber:#e6a23c;
    --lcf-tint-peach:#fbeadf;
    --lcf-tint-navy:#f2f1f6;
    --lcf-tint-mint:#e6f3ec;
    --lcf-tint-lav:#eeeafc;
    --lcf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--lcf-ink);
    
    box-sizing:border-box;
  }
  .lcf-root *{box-sizing:border-box;}
  .lcf-wrap{max-width:1160px;margin:0 auto;}

  .lcf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .lcf-card{
    background:var(--lcf-card);
    border:1px solid var(--lcf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .lcf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .lcf-shot{
    height: 238px;
    padding: 18px;
    display: flex;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lcf-tint-peach{background:var(--lcf-tint-peach);}
  .lcf-tint-navy{background:var(--lcf-tint-navy);}
  .lcf-tint-mint{background:var(--lcf-tint-mint);}
  .lcf-tint-lav{background:var(--lcf-tint-lav);}
  .lcf-tint-sky{background:var(--lcf-tint-sky);}

  .lcf-window{
        max-width: 272px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 22px 40px -16px rgba(23, 22, 28, .22);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .lcf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .lcf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .lcf-dot{width:8px;height:8px;border-radius:50%;}
  .lcf-dot--r{background:#f0665a;}
  .lcf-dot--y{background:#f0b64a;}
  .lcf-dot--g{background:#57c26a;}
  .lcf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .lcf-window--dark .lcf-chrome-bar{background:rgba(255,255,255,.14);}

  .lcf-body{
    padding:32px 28px 34px;
  }
  .lcf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .lcf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--lcf-sub);
    margin:0;
  }

  .lcf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .lcf-window--dark .lcf-label{color:#a9a4c4;}
  .lcf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .lcf-ai-badge{
    font-size:9px;font-weight:700;color:var(--lcf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes lcf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Centralized Lead Capture — sources feeding into a hub */
  .lcf-hub-wrap{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
  .lcf-hub-core{width:42px;height:42px;border-radius:12px;background:var(--lcf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2;box-shadow:0 8px 18px -6px rgba(75,63,228,.5);}
  .lcf-hub-node{position:absolute;width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.2);display:flex;align-items:center;justify-content:center;font-size:11px;animation:lcf-feed 2.4s ease-in-out infinite;}
  .lcf-hub-node:nth-child(2){top:8px;left:20px;animation-delay:0s;}
  .lcf-hub-node:nth-child(3){bottom:8px;left:20px;animation-delay:.4s;}
  .lcf-hub-node:nth-child(4){top:8px;right:20px;animation-delay:.8s;}
  .lcf-hub-node:nth-child(5){bottom:8px;right:20px;animation-delay:1.2s;}
  @keyframes lcf-feed{0%{opacity:1;transform:scale(1);}60%{opacity:.3;transform:scale(.5);}61%,100%{opacity:0;}}

  /* 2. Smart Lead Qualification — ranked leads with score */
  .lcf-rank-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #eee9ff;border-radius:9px;padding:7px 10px;margin-top:9px;}
  .lcf-rank-row:first-of-type{border-color:var(--lcf-indigo);background:#f5f3ff;}
  .lcf-rank-score{font-size:10px;font-weight:700;color:var(--lcf-mint);background:#e6f3ec;padding:2px 7px;border-radius:100px;}

  /* 3. Automated Lead Assignment — routing to a rep */
  .lcf-route-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .lcf-route-lead{width:38px;height:38px;border-radius:9px;background:var(--lcf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .lcf-route-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .lcf-route-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--lcf-indigo);animation:lcf-travel 2s ease-in-out infinite;}
  @keyframes lcf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .lcf-route-person{width:38px;height:38px;border-radius:50%;background:#4b3fe4;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 4. Lead Tracking & Monitoring — vertical timeline */
  .lcf-timeline{position:relative;padding-left:16px;margin-top:8px;}
  .lcf-timeline::before{content:"";position:absolute;left:4px;top:2px;bottom:2px;width:2px;background:#eee9ff;}
  .lcf-tl-item{position:relative;margin-bottom:12px;}
  .lcf-tl-item::before{content:"";position:absolute;left:-16px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--lcf-indigo);border:2px solid #fff;box-shadow:0 0 0 2px #eee9ff;}
  .lcf-tl-item:nth-child(2)::before{animation:lcf-blink 1.8s ease-in-out infinite;}
  .lcf-tl-line{height:7px;border-radius:4px;background:#f1efe9;}

  /* 5. Intelligent Follow-Up Reminders — toast */
  .lcf-toast{margin-top:12px;background:#fff;border:1px solid #f2e2da;border-radius:10px;padding:9px 11px;display:flex;gap:8px;align-items:flex-start;box-shadow:0 6px 14px -8px rgba(23,22,28,.2);animation:lcf-slide-in 2.6s ease-in-out infinite;}
  @keyframes lcf-slide-in{0%{transform:translateX(-8px);opacity:0;}18%{transform:translateX(0);opacity:1;}82%{opacity:1;}100%{opacity:0;}}

  /* 6. Complete Lead Context — profile-style card */
  .lcf-profile-top{display:flex;align-items:center;gap:10px;}
  .lcf-profile-av{width:38px;height:38px;border-radius:50%;background:var(--lcf-coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
  .lcf-profile-name{font-size:14px;font-weight:700;color:#241f2e;line-height:1.3;}
  .lcf-profile-sub{font-size:11.5px;color:#8a8696;}
  .lcf-profile-fields{display:flex;gap:24px;margin-top:12px;padding-top:10px;border-top:1px solid #f1efe9;}
  .lcf-pf-label{font-size:10px;font-weight:700;color:#241f2e;margin-bottom:2px;}
  .lcf-pf-val{font-size:11px;color:#8a8696;}

  /* 7. Conversion Performance Analytics — bar chart */
  .lcf-chart-wrap{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:16px;}
  .lcf-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:lcf-bar-grow 2.6s ease-in-out infinite;}
  .lcf-bar:nth-child(4){background:var(--lcf-indigo);}
  .lcf-bar:nth-child(5){background:var(--lcf-mint);}
  .lcf-bar:nth-child(1){animation-delay:0s;}
  .lcf-bar:nth-child(2){animation-delay:.15s;}
  .lcf-bar:nth-child(3){animation-delay:.3s;}
  .lcf-bar:nth-child(4){animation-delay:.45s;}
  .lcf-bar:nth-child(5){animation-delay:.6s;}
  @keyframes lcf-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

  /* 8. Duplicate Lead Detection — two cards merging */
  .lcf-dup-wrap{position:relative;height:80px;margin-top:16px;}
  .lcf-dup-card{position:absolute;width:66%;height:34px;border-radius:9px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.15);display:flex;align-items:center;padding-left:10px;gap:7px;}
  .lcf-dup-card--a{top:0;left:0;animation:lcf-merge-a 2.6s ease-in-out infinite;}
  .lcf-dup-card--b{top:16px;left:14px;animation:lcf-merge-b 2.6s ease-in-out infinite;}
  @keyframes lcf-merge-a{0%,25%{top:0;left:0;opacity:1;}70%,100%{top:14px;left:9px;opacity:1;}}
  @keyframes lcf-merge-b{0%,25%{top:16px;left:14px;opacity:1;}70%{top:14px;left:9px;opacity:0;}100%{opacity:0;}}

  /* 9. Lead Segmentation — tag chips */
  .lcf-tagrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;height:100%;align-content:center;}
  .lcf-tag{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:100px;animation:lcf-pop 2.4s ease-in-out infinite;}
  .lcf-tag:nth-child(1){background:#eee9ff;color:var(--lcf-indigo);animation-delay:0s;}
  .lcf-tag:nth-child(2){background:#ffe6dd;color:var(--lcf-coral);animation-delay:.25s;}
  .lcf-tag:nth-child(3){background:#e6f3ec;color:var(--lcf-mint);animation-delay:.5s;}
  .lcf-tag:nth-child(4){background:#fdf1da;color:var(--lcf-amber);animation-delay:.75s;}
  @keyframes lcf-pop{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}

  /* 10. Custom Lead Pipelines — kanban stages */
  .lcf-kanban{display:flex;gap:7px;margin-top:12px;}
  .lcf-kcol{flex:1;background:#f6f4ff;border-radius:8px;padding:6px 5px;min-height:90px;}
  .lcf-kcol-label{font-size:8px;font-weight:700;color:#8a8696;text-align:center;margin-bottom:6px;letter-spacing:.03em;}
  .lcf-kcard{background:#fff;border-radius:6px;height:14px;margin-bottom:6px;border:1px solid #eee9ff;}
  .lcf-kcol--hit .lcf-kcard{border-color:var(--lcf-indigo);box-shadow:0 0 0 1px var(--lcf-indigo);animation:lcf-blink 1.8s ease-in-out infinite;}

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

  @media (prefers-reduced-motion:reduce){
    .lcf-root *{animation:none !important;transition:none !important;}
  }

  /* lead scring */

  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:92 100}}
@keyframes growBarA{0%{width:0%}100%{width:88%}}
@keyframes growBarB{0%{width:0%}100%{width:95%}}
@keyframes growBarC{0%{width:0%}100%{width:90%}}
@keyframes growBarD{0%{width:0%}100%{width:82%}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.lead-scoringcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.ls1-head{display:flex;align-items:center;justify-content:space-between;}
.ls1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ls1-stats{display:flex;gap:8px;margin-top:11px;}
.ls1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.ls1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ls1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ls1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ls1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.ls1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ls1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ls1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.ls1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ls1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-th-name{flex:1.9;}
.ls1-th-score{flex:1.4;}
.ls1-th-grade{flex:1;text-align:right;}
.ls1-th-trend{flex:1;text-align:right;}

.ls1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-row-a{animation-name:slideIn;animation-delay:.9s;}
.ls1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.ls1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.ls1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.ls1-name{flex:1.9;font-weight:600;display:flex;align-items:center;gap:6px;}
.ls1-avatar-a{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-avatar-b{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-avatar-c{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-avatar-d{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ls1-scorebar-wrap{flex:1.4;display:flex;align-items:center;gap:6px;}
.ls1-scorebar-track{flex:1;height:5px;background:#f1ece9;}
.ls1-scorebar-fill-a{height:5px;background:#e0561f;width:0%;animation:growBarA 1s cubic-bezier(.3,.7,.2,1) 1.1s forwards;}
.ls1-scorebar-fill-b{height:5px;background:#e0561f;width:0%;animation:growBarC 1s cubic-bezier(.3,.7,.2,1) 1.22s forwards;}
.ls1-scorebar-fill-c{height:5px;background:#f0ac2c;width:0%;animation:growBarD 1s cubic-bezier(.3,.7,.2,1) 1.34s forwards;}
.ls1-scorebar-fill-d{height:5px;background:#c93030;width:0%;animation:growBarB 1s cubic-bezier(.3,.7,.2,1) 1.46s forwards;}
.ls1-scorenum{font-size:9.5px;font-weight:700;color:#181114;width:16px;text-align:right;}

.ls1-grade{flex:1;text-align:right;}
.ls1-grade-a{display:inline-block;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-grade-b{display:inline-block;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls1-grade-c{display:inline-block;background:#fbe8e8;color:#c93030;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ls1-trend{flex:1;text-align:right;font-weight:700;font-size:10px;}
.ls1-trend-up{color:#1f9d55;}
.ls1-trend-flat{color:#9a9290;}
.ls1-trend-down{color:#c93030;}

.ls1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.lead-scoringcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.ls2-head{display:flex;align-items:center;justify-content:space-between;}
.ls2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ls2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.ls2-donut-wrap{position:relative;width:62px;height:62px;flex-shrink:0;}
.ls2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.ls2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.ls2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ls2-donut-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ls2-score-info{flex:1;}
.ls2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls2-score-sub{font-size:9.5px;color:#8a8280;margin-top:3px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ls2-breakdown{margin-top:12px;}
.ls2-bd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;}
.ls2-bd-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ls2-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.ls2-bar-label{font-size:9.5px;color:#5d5451;width:96px;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ls2-bar-track{flex:1;height:6px;background:#f1ece9;position:relative;}
.ls2-bar-fill-a{height:6px;background:#e0561f;width:0%;animation:growBarA 1s cubic-bezier(.3,.7,.2,1) .9s forwards;}
.ls2-bar-fill-b{height:6px;background:#e0561f;width:0%;animation:growBarB 1s cubic-bezier(.3,.7,.2,1) 1.05s forwards;}
.ls2-bar-fill-c{height:6px;background:#e0561f;width:0%;animation:growBarC 1s cubic-bezier(.3,.7,.2,1) 1.2s forwards;}
.ls2-bar-fill-d{height:6px;background:#e0561f;width:0%;animation:growBarD 1s cubic-bezier(.3,.7,.2,1) 1.35s forwards;}
.ls2-bar-pct{font-size:9.5px;font-weight:700;color:#181114;width:26px;text-align:right;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ls2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

 .lsc-root{
    --lsc-ink:#17161c;
    --lsc-sub:#6b6878;
    --lsc-line:#eeece7;
    --lsc-paper:#faf9f6;
    --lsc-card:#ffffff;
    --lsc-indigo:#4b3fe4;
    --lsc-coral:#ff6b4a;
    --lsc-mint:#28a06b;
    --lsc-amber:#e6a23c;
    --lsc-tint-peach:#fbeadf;
    --lsc-tint-navy:#f2f1f6;
    --lsc-tint-mint:#e6f3ec;
    --lsc-tint-lav:#eeeafc;
    --lsc-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--lsc-ink);
    
    box-sizing:border-box;
  }
  .lsc-root *{box-sizing:border-box;}
  .lsc-wrap{max-width:1160px;margin:0 auto;}

  .lsc-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .lsc-card{
    background:var(--lsc-card);
    border:1px solid var(--lsc-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .lsc-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .lsc-shot{
       height: 238px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
  }
  .lsc-tint-peach{background:var(--lsc-tint-peach);}
  .lsc-tint-navy{background:var(--lsc-tint-navy);}
  .lsc-tint-mint{background:var(--lsc-tint-mint);}
  .lsc-tint-lav{background:var(--lsc-tint-lav);}
  .lsc-tint-sky{background:var(--lsc-tint-sky);}

  .lsc-window{
      max-width: 272px;
    box-shadow: rgba(23, 22, 28, 0.22) 0px 22px 40px -16px;
    position: relative;
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    border-radius: 14px;
    padding: 16px 18px;
    overflow: hidden;
  }
  .lsc-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .lsc-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .lsc-dot{width:8px;height:8px;border-radius:50%;}
  .lsc-dot--r{background:#f0665a;}
  .lsc-dot--y{background:#f0b64a;}
  .lsc-dot--g{background:#57c26a;}
  .lsc-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .lsc-window--dark .lsc-chrome-bar{background:rgba(255,255,255,.14);}

  .lsc-body{
    padding:32px 28px 34px;
  }
  .lsc-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .lsc-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--lsc-sub);
    margin:0;
  }

  .lsc-label{font-size:11px;font-weight:600;color:#8a8696;}
  .lsc-window--dark .lsc-label{color:#a9a4c4;}
  .lsc-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .lsc-ai-badge{
    font-size:9px;font-weight:700;color:var(--lsc-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes lsc-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Intelligent Lead Scoring — profile card with a live score */
  .lsc-profile-top{display:flex;align-items:center;gap:10px;}
  .lsc-profile-av{width:38px;height:38px;border-radius:50%;background:var(--lsc-coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
  .lsc-profile-name{font-size:14px;font-weight:700;color:#241f2e;line-height:1.3;}
  .lsc-profile-sub{font-size:11.5px;color:#8a8696;}
  .lsc-score-badge{margin-left:auto;font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:var(--lsc-indigo);animation:lsc-blink 2.2s ease-in-out infinite;}
  .lsc-profile-fields{display:flex;gap:24px;margin-top:12px;padding-top:10px;border-top:1px solid #f1efe9;}
  .lsc-pf-label{font-size:10px;font-weight:700;color:#241f2e;margin-bottom:2px;}
  .lsc-pf-val{font-size:11px;color:#8a8696;}

  /* 2. Behavior-Based Lead Scoring — action timeline with point values */
  .lsc-act-item{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .lsc-act-who{display:flex;align-items:center;gap:8px;font-size:11px;color:#3a3550;}
  .lsc-act-ico{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
  .lsc-act-item:nth-child(1) .lsc-act-ico{background:#e6f3ec;}
  .lsc-act-item:nth-child(2) .lsc-act-ico{background:#eee9ff;}
  .lsc-act-item:nth-child(3) .lsc-act-ico{background:#ffe6dd;}
  .lsc-act-pts{font-size:10px;font-weight:700;color:var(--lsc-mint);}

  /* 3. Custom Scoring Rules — draggable rule rows */
  .lsc-build-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .lsc-build-handle{color:#c3bdf0;font-size:11px;}
  .lsc-build-pill{flex:1;font-size:11px;font-weight:600;padding:6px 10px;border-radius:8px;background:#f6f4ff;color:#3a3550;display:flex;justify-content:space-between;}
  .lsc-build-pill.lsc-dragging{border:1px dashed var(--lsc-indigo);animation:lsc-jiggle 1.6s ease-in-out infinite;}
  @keyframes lsc-jiggle{0%,100%{transform:translateX(0);}25%{transform:translateX(2px);}75%{transform:translateX(-2px);}}

  /* 4. Automatic Score Updates — refresh + live pulse */
  .lsc-refresh-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .lsc-refresh-icon{width:36px;height:36px;border-radius:10px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;animation:lsc-spin 3s linear infinite;}
  @keyframes lsc-spin{to{transform:rotate(360deg);}}
  .lsc-live{display:flex;align-items:center;gap:6px;margin-top:14px;}
  .lsc-live-dot{width:7px;height:7px;border-radius:50%;background:var(--lsc-mint);animation:lsc-blink 1.4s ease-in-out infinite;}

  /* 5. High-Priority Lead Identification — ranked list, top highlighted */
  .lsc-rank-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #eee9ff;border-radius:9px;padding:7px 10px;margin-top:9px;}
  .lsc-rank-row:first-of-type{border-color:var(--lsc-coral);background:#fff6f3;}
  .lsc-rank-flag{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:100px;}
  .lsc-flag-high{background:#ffe6dd;color:var(--lsc-coral);animation:lsc-blink 2s ease-in-out infinite;}
  .lsc-flag-mid{background:#fdf1da;color:var(--lsc-amber);}
  .lsc-flag-low{background:#f1efe9;color:#8a8696;}

  /* 6. Lead Engagement Insights — dark AI panel */
  .lsc-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .lsc-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--lsc-coral);margin-top:4px;flex-shrink:0;}
  .lsc-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:lsc-blink 2s ease-in-out infinite;}

  /* 7. Sales-Ready Lead Alerts — bell + toast */
  .lsc-bell{width:34px;height:34px;border-radius:10px;background:#ffe6dd;display:flex;align-items:center;justify-content:center;position:relative;margin-top:6px;}
  .lsc-bell-badge{position:absolute;top:-4px;right:-4px;width:15px;height:15px;border-radius:50%;background:var(--lsc-coral);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:lsc-blink 1.8s ease-in-out infinite;}
  .lsc-toast{margin-top:12px;background:#fff;border:1px solid #f2e2da;border-radius:10px;padding:8px 10px;display:flex;gap:8px;align-items:flex-start;box-shadow:0 6px 14px -8px rgba(23,22,28,.2);animation:lsc-slide-in 2.6s ease-in-out infinite;}
  @keyframes lsc-slide-in{0%{transform:translateX(-8px);opacity:0;}18%{transform:translateX(0);opacity:1;}82%{opacity:1;}100%{opacity:0;}}

  /* 8. Scoring Performance Analytics — bar chart */
  .lsc-chart-wrap{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:16px;}
  .lsc-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:lsc-bar-grow 2.6s ease-in-out infinite;}
  .lsc-bar:nth-child(4){background:var(--lsc-indigo);}
  .lsc-bar:nth-child(5){background:var(--lsc-mint);}
  .lsc-bar:nth-child(1){animation-delay:0s;}
  .lsc-bar:nth-child(2){animation-delay:.15s;}
  .lsc-bar:nth-child(3){animation-delay:.3s;}
  .lsc-bar:nth-child(4){animation-delay:.45s;}
  .lsc-bar:nth-child(5){animation-delay:.6s;}
  @keyframes lsc-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

  /* 9. Unified Lead Score Visibility — linked records */
  .lsc-link-wrap{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;}
  .lsc-link-node{width:36px;height:36px;border-radius:10px;background:#faf9ff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
  .lsc-link-path{width:16px;height:2px;background:#d9d0ff;position:relative;}
  .lsc-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--lsc-indigo);animation:lsc-travel 2s ease-in-out infinite;}
  @keyframes lsc-travel{0%{left:0;}100%{left:calc(100% - 8px);}}

  /* 10. Smarter Sales Prioritization — ranked list with trophy */
  .lsc-top-row{display:flex;align-items:center;gap:10px;margin-top:12px;}
  .lsc-trophy{width:34px;height:34px;border-radius:10px;background:#fdf1da;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}

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

  @media (prefers-reduced-motion:reduce){
    .lsc-root *{animation:none !important;transition:none !important;}
  }

  /* appointment-scheduling */

  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:96 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.appointment-schedulingcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.as1-head{display:flex;align-items:center;justify-content:space-between;}
.as1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.as1-stats{display:flex;gap:8px;margin-top:11px;}
.as1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.as1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.as1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.as1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.as1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.as1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.as1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-chg-c{font-size:9.5px;color:#c93030;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.as1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.as1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.as1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-th-client{flex:1.9;}
.as1-th-type{flex:1.3;}
.as1-th-time{flex:1.1;text-align:right;}
.as1-th-status{flex:1.1;text-align:right;}

.as1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-row-a{animation-name:slideIn;animation-delay:.9s;}
.as1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.as1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.as1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.as1-client{flex:1.9;font-weight:600;display:flex;align-items:center;gap:6px;}
.as1-avatar-a{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-avatar-b{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-avatar-c{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-avatar-d{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.as1-type{flex:1.3;color:#7a726e;font-size:9.5px;}
.as1-time{flex:1.1;text-align:right;color:#7a726e;font-size:9.5px;}

.as1-status{flex:1.1;text-align:right;}
.as1-status-conf{display:inline-flex;align-items:center;gap:3px;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-status-pend{display:inline-flex;align-items:center;gap:3px;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as1-status-dot{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;}
.as1-pend-dot{width:5px;height:5px;background:#f0ac2c;border-radius:50%;display:inline-block;}

.as1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.appointment-schedulingcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.as2-head{display:flex;align-items:center;justify-content:space-between;}
.as2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.as2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.as2-donut-wrap{position:relative;width:64px;height:64px;flex-shrink:0;}
.as2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.as2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .6s forwards;}
.as2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.as2-donut-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.as2-score-info{flex:1;}
.as2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as2-score-line{font-size:9.5px;color:#5d5451;margin-top:4px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.as2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.as2-slots{margin-top:12px;}
.as2-sl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.as2-sl-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as2-sl-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.as2-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.as2-row-a{animation-name:slideIn;animation-delay:1.6s;}
.as2-row-b{animation-name:slideIn;animation-delay:1.72s;}
.as2-row-c{animation-name:slideIn;animation-delay:1.84s;border-bottom:none;}

.as2-slot-time{font-weight:700;color:#181114;}
.as2-book-btn{background:#ffffff;border:1px solid #e0dbd7;color:#e0561f;font-size:8.5px;font-weight:700;padding:3px 9px;opacity:0;animation:chipPop .4s ease-out .4s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.as2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

.apf-root{
    --apf-ink:#17161c;
    --apf-sub:#6b6878;
    --apf-line:#eeece7;
    --apf-paper:#faf9f6;
    --apf-card:#ffffff;
    --apf-indigo:#4b3fe4;
    --apf-coral:#ff6b4a;
    --apf-mint:#28a06b;
    --apf-amber:#e6a23c;
    --apf-tint-peach:#fbeadf;
    --apf-tint-navy:#f2f1f6;
    --apf-tint-mint:#e6f3ec;
    --apf-tint-lav:#eeeafc;
    --apf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--apf-ink);
    
    box-sizing:border-box;
  }
  .apf-root *{box-sizing:border-box;}
  .apf-wrap{max-width:1160px;margin:0 auto;}

  .apf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .apf-card{
    background:var(--apf-card);
    border:1px solid var(--apf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .apf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .apf-shot{
       height: 238px;
    padding: 18px;
    display: flex;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .apf-tint-peach{background:var(--apf-tint-peach);}
  .apf-tint-navy{background:var(--apf-tint-navy);}
  .apf-tint-mint{background:var(--apf-tint-mint);}
  .apf-tint-lav{background:var(--apf-tint-lav);}
  .apf-tint-sky{background:var(--apf-tint-sky);}

  .apf-window{
       max-width: 272px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 22px 40px -16px rgba(23, 22, 28, .22);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    width: 100%;
        height: 100%;
  }
  .apf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .apf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .apf-dot{width:8px;height:8px;border-radius:50%;}
  .apf-dot--r{background:#f0665a;}
  .apf-dot--y{background:#f0b64a;}
  .apf-dot--g{background:#57c26a;}
  .apf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .apf-window--dark .apf-chrome-bar{background:rgba(255,255,255,.14);}

  .apf-body{
    padding:32px 28px 34px;
  }
  .apf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .apf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--apf-sub);
    margin:0;
  }

  .apf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .apf-window--dark .apf-label{color:#a9a4c4;}
  .apf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .apf-ai-badge{
    font-size:9px;font-weight:700;color:var(--apf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes apf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. AI-Powered Appointment Booking — profile-style booking card like the reference */
  .apf-book-top{display:flex;align-items:center;gap:10px;}
  .apf-book-av{width:38px;height:38px;border-radius:50%;background:var(--apf-coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
  .apf-book-name{font-size:14px;font-weight:700;color:#241f2e;line-height:1.3;}
  .apf-book-sub{font-size:11.5px;color:#8a8696;}
  .apf-book-check{margin-left:auto;width:22px;height:22px;border-radius:50%;border:1.6px solid var(--apf-coral);color:var(--apf-coral);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;}
  .apf-slot-row{display:flex;gap:6px;margin-top:12px;}
  .apf-slot{font-size:10px;font-weight:600;padding:5px 10px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .apf-slot.apf-picked{background:var(--apf-indigo);color:#fff;animation:apf-blink 2s ease-in-out infinite;}

  /* 2. Smart Calendar Synchronization — two calendars syncing */
  .apf-sync-row{display:flex;align-items:center;justify-content:space-between;height:100%;}
  .apf-sync-box{width:56px;height:56px;border-radius:12px;background:#faf9ff;border:1px solid #e3e8ff;display:flex;align-items:center;justify-content:center;font-size:18px;}
  .apf-sync-path{flex:1;height:2px;background:#d8ddff;margin:0 10px;position:relative;}
  .apf-sync-dot{position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;background:var(--apf-indigo);transform:translateY(-50%);animation:apf-orbit 2.2s ease-in-out infinite;}
  @keyframes apf-orbit{0%{left:0;}50%{left:calc(100% - 8px);}100%{left:0;}}

  /* 3. Automated Appointment Reminders — toast */
  .apf-toast{margin-top:12px;background:#fff;border:1px solid #f2e2da;border-radius:10px;padding:9px 11px;display:flex;gap:8px;align-items:flex-start;box-shadow:0 6px 14px -8px rgba(23,22,28,.2);animation:apf-slide-in 2.6s ease-in-out infinite;}
  @keyframes apf-slide-in{0%{transform:translateX(-8px);opacity:0;}18%{transform:translateX(0);opacity:1;}82%{opacity:1;}100%{opacity:0;}}

  /* 4. Flexible Booking Availability — toggle rows */
  .apf-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .apf-toggle{width:30px;height:16px;border-radius:100px;background:#e3ddff;position:relative;flex-shrink:0;}
  .apf-toggle i{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);}
  .apf-toggle--on{background:var(--apf-indigo);}
  .apf-toggle--on i{animation:apf-slide 2.6s ease-in-out infinite;}
  @keyframes apf-slide{0%,15%{left:2px;}45%,100%{left:16px;}}

  /* 5. Instant Meeting Confirmations — confirmation card */
  .apf-confirm-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;}
  .apf-confirm-check{width:40px;height:40px;border-radius:50%;background:#e6f3ec;color:var(--apf-mint);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:8px;animation:apf-pop 2.2s ease-in-out infinite;}
  @keyframes apf-pop{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}

  /* 6. Intelligent Appointment Routing — routing to team member */
  .apf-route-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .apf-route-appt{width:38px;height:38px;border-radius:9px;background:var(--apf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .apf-route-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .apf-route-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--apf-indigo);animation:apf-travel 2s ease-in-out infinite;}
  @keyframes apf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .apf-route-person{width:38px;height:38px;border-radius:50%;background:#4b3fe4;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 7. Centralized Appointment Dashboard — appointment list */
  .apf-dash-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .apf-dash-time{font-size:10.5px;font-weight:700;color:var(--apf-indigo);}
  .apf-dash-name{font-size:11.5px;color:#3a3550;}

  /* 8. AI Scheduling Insights — dark AI insights panel matching the reference */
  .apf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .apf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--apf-coral);margin-top:4px;flex-shrink:0;}
  .apf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:apf-blink 2s ease-in-out infinite;}

  /* 9. Multi-Channel Appointment Scheduling — channel list */
  .apf-channel-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .apf-ch-ico{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
  .apf-channel-row:nth-child(2) .apf-ch-ico{background:#eee9ff;}
  .apf-channel-row:nth-child(3) .apf-ch-ico{background:#e6f3ec;}
  .apf-channel-row:nth-child(4) .apf-ch-ico{background:#ffe6dd;}
  .apf-channel-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}

  /* 10. Appointment History & Tracking — timeline */
  .apf-timeline{position:relative;padding-left:16px;margin-top:8px;}
  .apf-timeline::before{content:"";position:absolute;left:4px;top:2px;bottom:2px;width:2px;background:#eee9ff;}
  .apf-tl-item{position:relative;margin-bottom:12px;}
  .apf-tl-item::before{content:"";position:absolute;left:-16px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--apf-indigo);border:2px solid #fff;box-shadow:0 0 0 2px #eee9ff;}
  .apf-tl-item:nth-child(2)::before{animation:apf-blink 1.8s ease-in-out infinite;}
  .apf-tl-line{height:7px;border-radius:4px;background:#f1efe9;}

  .apf-footer{
    text-align:center;
    margin-top:44px;
    font-size:15px;
    color:var(--apf-sub);
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
  }

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

  @media (prefers-reduced-motion:reduce){
    .apf-root *{animation:none !important;transition:none !important;}
  }



@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes growBar1{0%{height:0%}100%{height:46%}}
@keyframes growBar2{0%{height:0%}100%{height:64%}}
@keyframes growBar3{0%{height:0%}100%{height:52%}}
@keyframes growBar4{0%{height:0%}100%{height:80%}}
@keyframes growBar5{0%{height:0%}100%{height:70%}}
@keyframes growBar6{0%{height:0%}100%{height:95%}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.crm-reportingcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.rp1-head{display:flex;align-items:center;justify-content:space-between;}
.rp1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.rp1-stats{display:flex;gap:8px;margin-top:11px;}
.rp1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.rp1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.rp1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.rp1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.rp1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.rp1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.rp1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-chg-d{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.rp1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.rp1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.rp1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-th-report{flex:2.1;}
.rp1-th-type{flex:1.2;}
.rp1-th-gen{flex:1.2;}
.rp1-th-format{flex:1;text-align:right;}

.rp1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-row-a{animation-name:slideIn;animation-delay:.9s;}
.rp1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.rp1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.rp1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.rp1-report{flex:2.1;font-weight:600;display:flex;align-items:center;gap:6px;}
.rp1-icon-doc-a{width:16px;height:18px;background:#fdece3;color:#c14a1c;font-size:6px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-icon-doc-b{width:16px;height:18px;background:#e6f1fb;color:#185fa5;font-size:6px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-icon-doc-c{width:16px;height:18px;background:#fdece3;color:#c14a1c;font-size:6px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp1-icon-doc-d{width:16px;height:18px;background:#f1ece9;color:#5f5e5a;font-size:6px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.rp1-type{flex:1.2;color:#7a726e;font-size:9.5px;}
.rp1-gen{flex:1.2;color:#7a726e;font-size:9.5px;}
.rp1-format{flex:1;text-align:right;color:#3c3532;font-weight:700;font-size:9.5px;}

.rp1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.crm-reportingcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.rp2-head{display:flex;align-items:center;justify-content:space-between;}
.rp2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.rp2-chartbox{background:#f7f4f1;padding:11px 14px 9px;margin-top:12px;}
.rp2-chart-toprow{display:flex;align-items:center;justify-content:space-between;}
.rp2-chart-title{font-size:10.5px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp2-chart-value{font-size:10px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.rp2-bars{display:flex;align-items:flex-end;justify-content:space-between;height:74px;margin-top:8px;gap:8px;}
.rp2-barcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.rp2-bar-1{width:100%;background:#e8c9b8;height:0%;animation:growBar1 1s cubic-bezier(.3,.7,.2,1) .6s forwards;}
.rp2-bar-2{width:100%;background:#e8c9b8;height:0%;animation:growBar2 1s cubic-bezier(.3,.7,.2,1) .72s forwards;}
.rp2-bar-3{width:100%;background:#e8c9b8;height:0%;animation:growBar3 1s cubic-bezier(.3,.7,.2,1) .84s forwards;}
.rp2-bar-4{width:100%;background:#e8c9b8;height:0%;animation:growBar4 1s cubic-bezier(.3,.7,.2,1) .96s forwards;}
.rp2-bar-5{width:100%;background:#e8c9b8;height:0%;animation:growBar5 1s cubic-bezier(.3,.7,.2,1) 1.08s forwards;}
.rp2-bar-6{width:100%;background:#e0561f;height:0%;animation:growBar6 1s cubic-bezier(.3,.7,.2,1) 1.2s forwards;}
.rp2-barlabel{font-size:8px;color:#9a9290;margin-top:5px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.rp2-deliveries{margin-top:12px;}
.rp2-dl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.rp2-dl-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp2-dl-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.rp2-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;padding:5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.rp2-row-a{animation-name:slideIn;animation-delay:1.7s;}
.rp2-row-b{animation-name:slideIn;animation-delay:1.82s;border-bottom:none;}

.rp2-dl-name{font-weight:600;flex:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rp2-dl-recipient{color:#9a9290;font-size:9px;flex:1.3;}
.rp2-dl-date{color:#7a726e;font-weight:600;font-size:9.5px;flex-shrink:0;text-align:right;}

.rp2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

.rpf-root{
    --rpf-ink:#17161c;
    --rpf-sub:#6b6878;
    --rpf-line:#eeece7;
    --rpf-paper:#faf9f6;
    --rpf-card:#ffffff;
    --rpf-indigo:#4b3fe4;
    --rpf-coral:#ff6b4a;
    --rpf-mint:#28a06b;
    --rpf-amber:#e6a23c;
    --rpf-tint-peach:#fbeadf;
    --rpf-tint-navy:#f2f1f6;
    --rpf-tint-mint:#e6f3ec;
    --rpf-tint-lav:#eeeafc;
    --rpf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
   
    color:var(--rpf-ink);
  
    box-sizing:border-box;
  }
  .rpf-root *{box-sizing:border-box;}
  .rpf-wrap{max-width:1160px;margin:0 auto;}

  .rpf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .rpf-card{
    background:var(--rpf-card);
    border:1px solid var(--rpf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .rpf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .rpf-shot{
    height:238px;
        position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 18px;
  }
  .rpf-tint-peach{background:var(--rpf-tint-peach);}
  .rpf-tint-navy{background:var(--rpf-tint-navy);}
  .rpf-tint-mint{background:var(--rpf-tint-mint);}
  .rpf-tint-lav{background:var(--rpf-tint-lav);}
  .rpf-tint-sky{background:var(--rpf-tint-sky);}

  .rpf-window{
        max-width: 272px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 22px 40px -16px rgba(23, 22, 28, .22);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
  .rpf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .rpf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .rpf-dot{width:8px;height:8px;border-radius:50%;}
  .rpf-dot--r{background:#f0665a;}
  .rpf-dot--y{background:#f0b64a;}
  .rpf-dot--g{background:#57c26a;}
  .rpf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .rpf-window--dark .rpf-chrome-bar{background:rgba(255,255,255,.14);}

  .rpf-body{
    padding:32px 28px 34px;
  }
  .rpf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .rpf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--rpf-sub);
    margin:0;
  }

  .rpf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .rpf-window--dark .rpf-label{color:#a9a4c4;}
  .rpf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .rpf-ai-badge{
    font-size:9px;font-weight:700;color:var(--rpf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes rpf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Real-Time Performance Dashboards — KPI tile grid */
  .rpf-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
  .rpf-kpi-tile{background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:8px 10px;}
  .rpf-kpi-num{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:#241f2e;}
  .rpf-kpi-tile:nth-child(1) .rpf-kpi-num{animation:rpf-blink 2.2s ease-in-out infinite;}

  /* 2. AI-Driven Business Insights — dark AI panel */
  .rpf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .rpf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--rpf-coral);margin-top:4px;flex-shrink:0;}
  .rpf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:rpf-blink 2s ease-in-out infinite;}

  /* 3. Custom Report Builder — draggable field rows */
  .rpf-build-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .rpf-build-handle{color:#c3bdf0;font-size:11px;}
  .rpf-build-pill{flex:1;font-size:11px;font-weight:600;padding:6px 10px;border-radius:8px;background:#f6f4ff;color:#3a3550;}
  .rpf-build-pill.rpf-dragging{border:1px dashed var(--rpf-indigo);animation:rpf-jiggle 1.6s ease-in-out infinite;}
  @keyframes rpf-jiggle{0%,100%{transform:translateX(0);}25%{transform:translateX(2px);}75%{transform:translateX(-2px);}}

  /* 4. Sales Performance Reports — bar chart */
  .rpf-chart-wrap{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:16px;}
  .rpf-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:rpf-bar-grow 2.6s ease-in-out infinite;}
  .rpf-bar:nth-child(4){background:var(--rpf-indigo);}
  .rpf-bar:nth-child(5){background:var(--rpf-mint);}
  .rpf-bar:nth-child(1){animation-delay:0s;}
  .rpf-bar:nth-child(2){animation-delay:.15s;}
  .rpf-bar:nth-child(3){animation-delay:.3s;}
  .rpf-bar:nth-child(4){animation-delay:.45s;}
  .rpf-bar:nth-child(5){animation-delay:.6s;}
  @keyframes rpf-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

  /* 5. Customer Activity Analytics — icon timeline */
  .rpf-atl-item{display:flex;align-items:center;gap:9px;margin-top:9px;}
  .rpf-atl-ico{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
  .rpf-atl-item:nth-child(1) .rpf-atl-ico{background:#e6f3ec;}
  .rpf-atl-item:nth-child(2) .rpf-atl-ico{background:#eee9ff;}
  .rpf-atl-item:nth-child(3) .rpf-atl-ico{background:#ffe6dd;animation:rpf-blink 1.8s ease-in-out infinite;}
  .rpf-atl-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}

  /* 6. Automated Report Scheduling — clock + repeat chips */
  .rpf-sched-wrap{display:flex;align-items:center;gap:12px;margin-top:14px;}
  .rpf-sched-clock{width:36px;height:36px;border-radius:50%;border:2px solid var(--rpf-indigo);position:relative;flex-shrink:0;}
  .rpf-sched-clock::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;background:var(--rpf-indigo);transform-origin:left center;animation:rpf-tick 3s linear infinite;}
  @keyframes rpf-tick{to{transform:translate(0,-50%) rotate(360deg);}}
  .rpf-sched-chip{display:flex;gap:5px;margin-top:12px;}
  .rpf-sched-chip span{font-size:10px;font-weight:600;padding:4px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .rpf-sched-chip span.rpf-on{background:var(--rpf-indigo);color:#fff;}

  /* 7. Interactive Data Visualization — bars + trend line */
  .rpf-viz-wrap{position:relative;height:70px;margin-top:14px;}
  .rpf-viz-bars{display:flex;align-items:flex-end;gap:6px;height:100%;}
  .rpf-viz-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:rpf-bar-grow 2.6s ease-in-out infinite;}
  .rpf-viz-bar:nth-child(2){animation-delay:.15s;}
  .rpf-viz-bar:nth-child(3){animation-delay:.3s;background:var(--rpf-indigo);}
  .rpf-viz-bar:nth-child(4){animation-delay:.45s;}
  .rpf-viz-line{position:absolute;left:0;right:0;top:8px;height:2px;background:var(--rpf-coral);opacity:.6;}

  /* 8. Forecasting & Trend Analysis — forecast bars with dashed target */
  .rpf-fc-wrap{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:16px;position:relative;}
  .rpf-fc-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:rpf-bar-grow 2.6s ease-in-out infinite;}
  .rpf-fc-bar:nth-child(4),.rpf-fc-bar:nth-child(5){background:var(--rpf-indigo);opacity:.55;border:1px dashed var(--rpf-indigo);}
  .rpf-fc-bar:nth-child(1){animation-delay:0s;}
  .rpf-fc-bar:nth-child(2){animation-delay:.15s;}
  .rpf-fc-bar:nth-child(3){animation-delay:.3s;}

  /* 9. Cross-Department Reporting — department icons feeding a report hub */
  .rpf-hub-wrap{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
  .rpf-hub-core{width:42px;height:42px;border-radius:12px;background:var(--rpf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2;box-shadow:0 8px 18px -6px rgba(75,63,228,.5);}
  .rpf-hub-node{position:absolute;width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.2);display:flex;align-items:center;justify-content:center;font-size:11px;animation:rpf-feed 2.4s ease-in-out infinite;}
  .rpf-hub-node:nth-child(2){top:8px;left:20px;animation-delay:0s;}
  .rpf-hub-node:nth-child(3){bottom:8px;left:20px;animation-delay:.4s;}
  .rpf-hub-node:nth-child(4){top:8px;right:20px;animation-delay:.8s;}
  .rpf-hub-node:nth-child(5){bottom:8px;right:20px;animation-delay:1.2s;}
  @keyframes rpf-feed{0%{opacity:1;transform:scale(1);}60%{opacity:.3;transform:scale(.5);}61%,100%{opacity:0;}}

  /* 10. Secure Report Sharing — lock + permission chips */
  .rpf-secure-wrap{display:flex;align-items:center;gap:12px;margin-top:14px;}
  .rpf-lock{width:38px;height:38px;border-radius:10px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
  .rpf-secure-perm{margin-top:12px;display:flex;gap:6px;}
  .rpf-secure-perm span{font-size:10px;font-weight:600;padding:3px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .rpf-secure-perm span.rpf-on{background:var(--rpf-mint);color:#fff;}

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

  @media (prefers-reduced-motion:reduce){
    .rpf-root *{animation:none !important;transition:none !important;}
  }

@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes areaFade{0%{opacity:0}100%{opacity:1}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.crm-dashboardscard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.db1-head{display:flex;align-items:center;justify-content:space-between;}
.db1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.db1-stats{display:flex;gap:8px;margin-top:11px;}
.db1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.db1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.db1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.db1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.db1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.db1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.db1-chg-a{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db1-chg-d{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.db1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.db1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.db1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db1-th-name{flex:2;}
.db1-th-widgets{flex:1.2;text-align:right;}
.db1-th-viewed{flex:1.3;text-align:right;}
.db1-th-shared{flex:1.1;text-align:right;}

.db1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db1-row-a{animation-name:slideIn;animation-delay:.9s;}
.db1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.db1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.db1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.db1-name{flex:2;font-weight:600;display:flex;align-items:center;gap:6px;}
.db1-icon-grid-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.db1-icon-grid-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;}
.db1-icon-grid-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;}
.db1-icon-grid-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;}

.db1-widgets{flex:1.2;text-align:right;color:#7a726e;font-size:9.5px;}
.db1-viewed{flex:1.3;text-align:right;color:#7a726e;font-size:9.5px;}

.db1-shared{flex:1.1;text-align:right;}
.db1-shared-yes{display:inline-block;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db1-shared-no{display:inline-block;background:#f1ece9;color:#7a726e;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.db1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.crm-dashboardscard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.db2-head{display:flex;align-items:center;justify-content:space-between;}
.db2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.db2-suggestbox{background:#f7f4f1;padding:10px 12px;margin-top:12px;}
.db2-suggest-label{font-size:10.5px;font-weight:700;color:#e0561f;margin-bottom:6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db2-suggest-preview{background:#ffffff;border:1px solid #efeae7;padding:8px 10px;}
.db2-suggest-title{font-size:9.5px;font-weight:700;color:#181114;margin-bottom:4px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db2-suggest-chart{position:relative;height:38px;}
.db2-suggest-btns{display:flex;gap:8px;margin-top:9px;}
.db2-btn-add{background:#e0561f;color:#ffffff;font-size:9.5px;font-weight:700;padding:5px 11px;opacity:0;animation:chipPop .4s ease-out 1.3s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db2-btn-dismiss{background:#ffffff;border:1px solid #e0dbd7;color:#3c3532;font-size:9.5px;font-weight:700;padding:5px 11px;opacity:0;animation:chipPop .4s ease-out 1.4s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.db2-widgets{margin-top:12px;}
.db2-wg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.db2-wg-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db2-wg-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.db2-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;padding:5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.db2-row-a{animation-name:slideIn;animation-delay:1.7s;}
.db2-row-b{animation-name:slideIn;animation-delay:1.82s;border-bottom:none;}

.db2-wg-name{font-weight:600;}
.db2-wg-usage{color:#7a726e;font-size:9.5px;}

.db2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}
  .dbf-root{
    --dbf-ink:#17161c;
    --dbf-sub:#6b6878;
    --dbf-line:#eeece7;
    --dbf-paper:#faf9f6;
    --dbf-card:#ffffff;
    --dbf-indigo:#4b3fe4;
    --dbf-coral:#ff6b4a;
    --dbf-mint:#28a06b;
    --dbf-amber:#e6a23c;
    --dbf-tint-peach:#fbeadf;
    --dbf-tint-navy:#f2f1f6;
    --dbf-tint-mint:#e6f3ec;
    --dbf-tint-lav:#eeeafc;
    --dbf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--dbf-ink);
   
    box-sizing:border-box;
  }
  .dbf-root *{box-sizing:border-box;}
  .dbf-wrap{max-width:1160px;margin:0 auto;}

  .dbf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .dbf-card{
    background:var(--dbf-card);
    border:1px solid var(--dbf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .dbf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .dbf-shot{
        height: 238px;
    padding: 18px;
    display: flex;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dbf-tint-peach{background:var(--dbf-tint-peach);}
  .dbf-tint-navy{background:var(--dbf-tint-navy);}
  .dbf-tint-mint{background:var(--dbf-tint-mint);}
  .dbf-tint-lav{background:var(--dbf-tint-lav);}
  .dbf-tint-sky{background:var(--dbf-tint-sky);}

  .dbf-window{
     max-width: 272px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 22px 40px -16px rgba(23, 22, 28, .22);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .dbf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .dbf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .dbf-dot{width:8px;height:8px;border-radius:50%;}
  .dbf-dot--r{background:#f0665a;}
  .dbf-dot--y{background:#f0b64a;}
  .dbf-dot--g{background:#57c26a;}
  .dbf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .dbf-window--dark .dbf-chrome-bar{background:rgba(255,255,255,.14);}

  .dbf-body{
    padding:32px 28px 34px;
  }
  .dbf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .dbf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--dbf-sub);
    margin:0;
  }

  .dbf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .dbf-window--dark .dbf-label{color:#a9a4c4;}
  .dbf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .dbf-ai-badge{
    font-size:9px;font-weight:700;color:var(--dbf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes dbf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Real-Time Business Dashboard — KPI tile grid */
  .dbf-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
  .dbf-kpi-tile{background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:8px 10px;}
  .dbf-kpi-num{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:#241f2e;}
  .dbf-kpi-tile:nth-child(1) .dbf-kpi-num{animation:dbf-blink 2.2s ease-in-out infinite;}

  /* 2. AI-Powered Performance Insights — dark AI panel */
  .dbf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .dbf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--dbf-coral);margin-top:4px;flex-shrink:0;}
  .dbf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:dbf-blink 2s ease-in-out infinite;}

  /* 3. Custom Dashboard Builder — draggable widget rows */
  .dbf-build-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .dbf-build-handle{color:#c3bdf0;font-size:11px;}
  .dbf-build-pill{flex:1;font-size:11px;font-weight:600;padding:6px 10px;border-radius:8px;background:#f6f4ff;color:#3a3550;}
  .dbf-build-pill.dbf-dragging{border:1px dashed var(--dbf-indigo);animation:dbf-jiggle 1.6s ease-in-out infinite;}
  @keyframes dbf-jiggle{0%,100%{transform:translateX(0);}25%{transform:translateX(2px);}75%{transform:translateX(-2px);}}

  /* 4. Interactive KPI Tracking — 4 live KPI tiles */
  .dbf-kpi4-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
  .dbf-kpi4-tile{background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:7px 9px;}
  .dbf-kpi4-num{font-family:'Sora',sans-serif;font-size:13px;font-weight:700;color:#241f2e;}
  .dbf-kpi4-live{width:6px;height:6px;border-radius:50%;background:var(--dbf-mint);display:inline-block;margin-left:4px;animation:dbf-blink 1.6s ease-in-out infinite;}

  /* 5. Sales Pipeline Visualization — kanban columns */
  .dbf-kanban{display:flex;gap:7px;margin-top:12px;}
  .dbf-kcol{flex:1;background:#f6f4ff;border-radius:8px;padding:6px 5px;min-height:90px;}
  .dbf-kcol-label{font-size:8px;font-weight:700;color:#8a8696;text-align:center;margin-bottom:6px;letter-spacing:.03em;}
  .dbf-kcard{background:#fff;border-radius:6px;height:14px;margin-bottom:6px;border:1px solid #eee9ff;}
  .dbf-kcol--hit .dbf-kcard{border-color:var(--dbf-indigo);box-shadow:0 0 0 1px var(--dbf-indigo);animation:dbf-blink 1.8s ease-in-out infinite;}

  /* 6. Customer Activity Dashboard — icon timeline */
  .dbf-atl-item{display:flex;align-items:center;gap:9px;margin-top:9px;}
  .dbf-atl-ico{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
  .dbf-atl-item:nth-child(1) .dbf-atl-ico{background:#e6f3ec;}
  .dbf-atl-item:nth-child(2) .dbf-atl-ico{background:#eee9ff;}
  .dbf-atl-item:nth-child(3) .dbf-atl-ico{background:#ffe6dd;animation:dbf-blink 1.8s ease-in-out infinite;}
  .dbf-atl-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}

  /* 7. Role-Based Dashboard Access — role rows */
  .dbf-role-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .dbf-role-who{display:flex;align-items:center;gap:7px;}
  .dbf-role-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:100px;}
  .dbf-role-exec{background:#eee9ff;color:var(--dbf-indigo);}
  .dbf-role-sales{background:#e6f3ec;color:var(--dbf-mint);}
  .dbf-role-support{background:#f1efe9;color:#8a8696;}

  /* 8. Advanced Data Visualization — chart + trend line */
  .dbf-viz-wrap{position:relative;height:70px;margin-top:14px;}
  .dbf-viz-bars{display:flex;align-items:flex-end;gap:6px;height:100%;}
  .dbf-viz-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:dbf-bar-grow 2.6s ease-in-out infinite;}
  .dbf-viz-bar:nth-child(2){animation-delay:.15s;}
  .dbf-viz-bar:nth-child(3){animation-delay:.3s;background:var(--dbf-indigo);}
  .dbf-viz-bar:nth-child(4){animation-delay:.45s;}
  .dbf-viz-line{position:absolute;left:0;right:0;top:8px;height:2px;background:var(--dbf-coral);opacity:.6;}
  @keyframes dbf-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

  /* 9. Automated Dashboard Updates — refresh + live dot */
  .dbf-refresh-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .dbf-refresh-icon{width:36px;height:36px;border-radius:10px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;animation:dbf-spin 3s linear infinite;}
  @keyframes dbf-spin{to{transform:rotate(360deg);}}
  .dbf-live{display:flex;align-items:center;gap:6px;margin-top:14px;}
  .dbf-live-dot{width:7px;height:7px;border-radius:50%;background:var(--dbf-mint);animation:dbf-blink 1.4s ease-in-out infinite;}

  /* 10. Cross-Department Business Overview — hub */
  .dbf-hub-wrap{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
  .dbf-hub-core{width:42px;height:42px;border-radius:12px;background:var(--dbf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2;box-shadow:0 8px 18px -6px rgba(75,63,228,.5);}
  .dbf-hub-node{position:absolute;width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.2);display:flex;align-items:center;justify-content:center;font-size:11px;animation:dbf-feed 2.4s ease-in-out infinite;}
  .dbf-hub-node:nth-child(2){top:8px;left:20px;animation-delay:0s;}
  .dbf-hub-node:nth-child(3){bottom:8px;left:20px;animation-delay:.4s;}
  .dbf-hub-node:nth-child(4){top:8px;right:20px;animation-delay:.8s;}
  .dbf-hub-node:nth-child(5){bottom:8px;right:20px;animation-delay:1.2s;}
  @keyframes dbf-feed{0%{opacity:1;transform:scale(1);}60%{opacity:.3;transform:scale(.5);}61%,100%{opacity:0;}}

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

  @media (prefers-reduced-motion:reduce){
    .dbf-root *{animation:none !important;transition:none !important;}
  }

  /* edocs-&-proposals */
  .epf-root{
    --epf-ink:#17161c;
    --epf-sub:#6b6878;
    --epf-line:#eeece7;
    --epf-paper:#faf9f6;
    --epf-card:#ffffff;
    --epf-indigo:#4b3fe4;
    --epf-coral:#ff6b4a;
    --epf-mint:#28a06b;
    --epf-amber:#e6a23c;
    --epf-tint-peach:#fbeadf;
    --epf-tint-navy:#f2f1f6;
    --epf-tint-mint:#e6f3ec;
    --epf-tint-lav:#eeeafc;
    --epf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--epf-ink);
   
    box-sizing:border-box;
  }
  .epf-root *{box-sizing:border-box;}
  .epf-wrap{max-width:1160px;margin:0 auto;}

  .epf-head{text-align:center;max-width:680px;margin:0 auto 52px;}
  .epf-title{
    font-family:'Sora',sans-serif;
    font-size:36px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.01em;
    margin:0 0 14px;
  }
  .epf-desc{font-size:16px;line-height:1.6;color:var(--epf-sub);margin:0;}

  .epf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .epf-card{
    background:var(--epf-card);
    border:1px solid var(--epf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .epf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .epf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .epf-tint-peach{background:var(--epf-tint-peach);}
  .epf-tint-navy{background:var(--epf-tint-navy);}
  .epf-tint-mint{background:var(--epf-tint-mint);}
  .epf-tint-lav{background:var(--epf-tint-lav);}
  .epf-tint-sky{background:var(--epf-tint-sky);}

  .epf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .epf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .epf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .epf-dot{width:8px;height:8px;border-radius:50%;}
  .epf-dot--r{background:#f0665a;}
  .epf-dot--y{background:#f0b64a;}
  .epf-dot--g{background:#57c26a;}
  .epf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .epf-window--dark .epf-chrome-bar{background:rgba(255,255,255,.14);}

  .epf-body{
    padding:32px 28px 34px;
  }
  .epf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .epf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--epf-sub);
    margin:0;
  }

  .epf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .epf-window--dark .epf-label{color:#a9a4c4;}
  .epf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .epf-ai-badge{
    font-size:9px;font-weight:700;color:var(--epf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes epf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. AI Proposal Generator — lines typing in with a sparkle */
  .epf-gen-wrap{display:flex;gap:10px;margin-top:12px;}
  .epf-gen-doc{width:38px;height:48px;border-radius:6px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.18);flex-shrink:0;position:relative;}
  .epf-gen-doc::after{content:"✨";position:absolute;top:-8px;right:-8px;font-size:12px;animation:epf-blink 1.6s ease-in-out infinite;}
  .epf-gen-lines{flex:1;padding-top:4px;}
  .epf-gen-line{height:7px;border-radius:4px;background:#f1efe9;margin-bottom:7px;width:0;animation:epf-typefill 2.6s ease-in-out infinite;}
  .epf-gen-line:nth-child(2){animation-delay:.3s;}
  .epf-gen-line:nth-child(3){animation-delay:.6s;}
  @keyframes epf-typefill{0%{width:0;background:#f1efe9;}45%{width:85%;background:#e3ddff;}70%,100%{width:85%;background:#e3ddff;}}

  /* 2. Custom Proposal Templates — template gallery */
  .epf-tmpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
  .epf-tmpl-tile{aspect-ratio:3/4;border-radius:8px;background:#faf9ff;border:1px solid #eee9ff;position:relative;animation:epf-settle 2.6s ease-in-out infinite;}
  .epf-tmpl-tile::before{content:"";position:absolute;top:8px;left:6px;right:6px;height:4px;border-radius:2px;background:#e3ddff;}
  .epf-tmpl-tile::after{content:"";position:absolute;top:16px;left:6px;width:60%;height:3px;border-radius:2px;background:#eee9ff;}
  .epf-tmpl-tile:nth-child(2){animation-delay:.15s;}
  .epf-tmpl-tile:nth-child(3){animation-delay:.3s;}
  @keyframes epf-settle{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

  /* 3. Centralized Document Library — file grid */
  .epf-lib-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;}
  .epf-lib-item{aspect-ratio:1;border-radius:8px;background:#fff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:13px;animation:epf-settle 2.6s ease-in-out infinite;}
  .epf-lib-item:nth-child(3n){animation-delay:.15s;}
  .epf-lib-item:nth-child(3n+1){animation-delay:.3s;}

  /* 4. Real-Time Team Collaboration — avatars editing a doc */
  .epf-collab-doc{margin-top:12px;background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:10px 12px;}
  .epf-collab-avs{display:flex;margin-bottom:8px;}
  .epf-collab-avs .epf-avatar{margin-left:-6px;}
  .epf-collab-avs .epf-avatar:first-child{margin-left:0;}
  .epf-collab-line{height:7px;border-radius:4px;background:#eee9ff;margin-bottom:6px;}

  /* 5. Secure Document Sharing — lock + link */
  .epf-share-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .epf-lock{width:38px;height:38px;border-radius:10px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
  .epf-share-perm{margin-top:12px;display:flex;gap:6px;}
  .epf-share-perm span{font-size:10px;font-weight:600;padding:3px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .epf-share-perm span.epf-on{background:var(--epf-mint);color:#fff;}

  /* 6. Version History & Tracking — version stack */
  .epf-ver-stack{margin-top:12px;position:relative;}
  .epf-ver-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #eee9ff;border-radius:8px;padding:6px 10px;margin-bottom:6px;}
  .epf-ver-row.epf-current{border-color:var(--epf-indigo);background:#f5f3ff;animation:epf-blink 2s ease-in-out infinite;}
  .epf-ver-tag{font-size:10px;font-weight:700;color:var(--epf-indigo);}

  /* 7. Digital Approval Workflow — routing steps */
  .epf-flow-row{display:flex;align-items:center;gap:6px;margin-top:16px;}
  .epf-flow-step{width:28px;height:28px;border-radius:50%;background:#f1efe9;display:flex;align-items:center;justify-content:center;font-size:11px;color:#8a8696;flex-shrink:0;}
  .epf-flow-step.epf-done{background:var(--epf-mint);color:#fff;}
  .epf-flow-step.epf-active{background:var(--epf-indigo);color:#fff;animation:epf-blink 1.8s ease-in-out infinite;}
  .epf-flow-line{flex:1;height:2px;background:#eee9ff;}

  /* 8. eSignature Integration — signature line */
  .epf-sig-wrap{margin-top:16px;}
  .epf-sig-box{border:1px solid #eee9ff;border-radius:10px;padding:14px 12px 10px;background:#faf9ff;}
  .epf-sig-script{font-family:'Sora',sans-serif;font-style:italic;font-size:18px;color:var(--epf-indigo);border-bottom:1.5px solid #d9d0ff;padding-bottom:6px;animation:epf-typefill 2.6s ease-in-out infinite;overflow:hidden;white-space:nowrap;}

  /* 9. Proposal Engagement Insights — dark AI panel */
  .epf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .epf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--epf-coral);margin-top:4px;flex-shrink:0;}
  .epf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:epf-blink 2s ease-in-out infinite;}

  /* 10. AI Document Analytics — dark AI panel with bars */
  .epf-perf-wrap{display:flex;align-items:flex-end;gap:6px;height:60px;margin-top:14px;}
  .epf-perf-bar{flex:1;background:rgba(75,63,228,.35);border-radius:4px 4px 0 0;animation:epf-bar-grow 2.6s ease-in-out infinite;}
  .epf-perf-bar:nth-child(4){background:var(--epf-indigo);}
  .epf-perf-bar:nth-child(1){animation-delay:0s;}
  .epf-perf-bar:nth-child(2){animation-delay:.15s;}
  .epf-perf-bar:nth-child(3){animation-delay:.3s;}
  .epf-perf-bar:nth-child(4){animation-delay:.45s;}
  @keyframes epf-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

  @media (max-width:760px){
    .epf-grid{grid-template-columns:1fr;}
    .epf-title{font-size:29px;}
  }

  @media (prefers-reduced-motion:reduce){
    .epf-root *{animation:none !important;transition:none !important;}
  }

@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:88 100}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.edocs-proposalscard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.ep1-head{display:flex;align-items:center;justify-content:space-between;}
.ep1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ep1-stats{display:flex;gap:8px;margin-top:11px;}
.ep1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.ep1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ep1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ep1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ep1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.ep1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ep1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ep1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.ep1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ep1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-th-proposal{flex:2.1;}
.ep1-th-client{flex:1.5;}
.ep1-th-value{flex:1.1;text-align:right;}
.ep1-th-status{flex:1.2;text-align:right;}

.ep1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-row-a{animation-name:slideIn;animation-delay:.9s;}
.ep1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.ep1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.ep1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.ep1-proposal{flex:2.1;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ep1-doc-a{width:16px;height:18px;background:#fdece3;color:#c14a1c;font-size:6px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-doc-b{width:16px;height:18px;background:#fdece3;color:#c14a1c;font-size:6px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-doc-c{width:16px;height:18px;background:#fdece3;color:#c14a1c;font-size:6px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-doc-d{width:16px;height:18px;background:#f1ece9;color:#5f5e5a;font-size:6px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ep1-client{flex:1.5;color:#7a726e;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ep1-value{flex:1.1;text-align:right;color:#3c3532;font-weight:600;font-size:9.5px;}

.ep1-status{flex:1.2;text-align:right;}
.ep1-status-signed{display:inline-block;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-status-sent{display:inline-block;background:#e6f1fb;color:#185fa5;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-status-viewed{display:inline-block;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep1-status-draft{display:inline-block;background:#f1ece9;color:#7a726e;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ep1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.edocs-proposalscard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.ep2-head{display:flex;align-items:center;justify-content:space-between;}
.ep2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ep2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.ep2-donut-wrap{position:relative;width:64px;height:64px;flex-shrink:0;}
.ep2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.ep2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.ep2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ep2-donut-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ep2-score-info{flex:1;}
.ep2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep2-score-line{font-size:9.5px;color:#5d5451;margin-top:4px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.ep2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.ep2-awaiting{margin-top:12px;}
.ep2-aw-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.ep2-aw-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep2-aw-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ep2-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;padding:5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ep2-row-a{animation-name:slideIn;animation-delay:1.7s;}
.ep2-row-b{animation-name:slideIn;animation-delay:1.82s;}
.ep2-row-c{animation-name:slideIn;animation-delay:1.94s;border-bottom:none;}

.ep2-client-name{font-weight:600;flex:1.7;}
.ep2-sent-date{color:#9a9290;font-size:9px;flex:1.3;}
.ep2-days{color:#7a726e;font-weight:600;font-size:9.5px;flex-shrink:0;text-align:right;}

.ep2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

/* quotes */
.qtf-root{
    --qtf-ink:#17161c;
    --qtf-sub:#6b6878;
    --qtf-line:#eeece7;
    --qtf-paper:#faf9f6;
    --qtf-card:#ffffff;
    --qtf-indigo:#4b3fe4;
    --qtf-coral:#ff6b4a;
    --qtf-mint:#28a06b;
    --qtf-amber:#e6a23c;
    --qtf-tint-peach:#fbeadf;
    --qtf-tint-navy:#f2f1f6;
    --qtf-tint-mint:#e6f3ec;
    --qtf-tint-lav:#eeeafc;
    --qtf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
   
    color:var(--qtf-ink);
    
    box-sizing:border-box;
  }
  .qtf-root *{box-sizing:border-box;}
  .qtf-wrap{max-width:1160px;margin:0 auto;}

  .qtf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .qtf-card{
    background:var(--qtf-card);
    border:1px solid var(--qtf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .qtf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .qtf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .qtf-tint-peach{background:var(--qtf-tint-peach);}
  .qtf-tint-navy{background:var(--qtf-tint-navy);}
  .qtf-tint-mint{background:var(--qtf-tint-mint);}
  .qtf-tint-lav{background:var(--qtf-tint-lav);}
  .qtf-tint-sky{background:var(--qtf-tint-sky);}

  .qtf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .qtf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .qtf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .qtf-dot{width:8px;height:8px;border-radius:50%;}
  .qtf-dot--r{background:#f0665a;}
  .qtf-dot--y{background:#f0b64a;}
  .qtf-dot--g{background:#57c26a;}
  .qtf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .qtf-window--dark .qtf-chrome-bar{background:rgba(255,255,255,.14);}

  .qtf-body{
    padding:32px 28px 34px;
  }
  .qtf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .qtf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--qtf-sub);
    margin:0;
  }

  .qtf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .qtf-window--dark .qtf-label{color:#a9a4c4;}
  .qtf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .qtf-ai-badge{
    font-size:9px;font-weight:700;color:var(--qtf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes qtf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Smart Quote Builder — line items building with a total */
  .qtf-quote-row{display:flex;align-items:center;justify-content:space-between;margin-top:9px;}
  .qtf-quote-item{font-size:11px;color:#3a3550;}
  .qtf-quote-price{font-size:11px;font-weight:700;color:#241f2e;}
  .qtf-quote-total{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid #f1efe9;}
  .qtf-quote-total-num{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:var(--qtf-indigo);animation:qtf-blink 2.2s ease-in-out infinite;}

  /* 2. Custom Quote Templates — template gallery */
  .qtf-tmpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
  .qtf-tmpl-tile{aspect-ratio:3/4;border-radius:8px;background:#faf9ff;border:1px solid #eee9ff;position:relative;animation:qtf-settle 2.6s ease-in-out infinite;}
  .qtf-tmpl-tile::before{content:"";position:absolute;top:8px;left:6px;right:6px;height:4px;border-radius:2px;background:#e3ddff;}
  .qtf-tmpl-tile::after{content:"";position:absolute;top:16px;left:6px;width:60%;height:3px;border-radius:2px;background:#eee9ff;}
  .qtf-tmpl-tile:nth-child(2){animation-delay:.15s;}
  .qtf-tmpl-tile:nth-child(3){animation-delay:.3s;}
  @keyframes qtf-settle{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

  /* 3. Flexible Pricing Management — pricing rows with discount/tax */
  .qtf-price-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .qtf-price-tag{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:100px;}
  .qtf-price-disc{background:#ffe6dd;color:var(--qtf-coral);}
  .qtf-price-tax{background:#fdf1da;color:var(--qtf-amber);}

  /* 4. Instant Quote Sharing — sharing via email/link */
  .qtf-share-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .qtf-share-doc{width:38px;height:46px;border-radius:7px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.18);flex-shrink:0;}
  .qtf-share-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .qtf-share-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--qtf-indigo);animation:qtf-travel 2s ease-in-out infinite;}
  @keyframes qtf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .qtf-share-icon{width:38px;height:38px;border-radius:50%;background:var(--qtf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}

  /* 5. Real-Time Quote Tracking — toast */
  .qtf-toast{margin-top:12px;background:#fff;border:1px solid #f2e2da;border-radius:10px;padding:9px 11px;display:flex;gap:8px;align-items:flex-start;box-shadow:0 6px 14px -8px rgba(23,22,28,.2);animation:qtf-slide-in 2.6s ease-in-out infinite;}
  @keyframes qtf-slide-in{0%{transform:translateX(-8px);opacity:0;}18%{transform:translateX(0);opacity:1;}82%{opacity:1;}100%{opacity:0;}}
  .qtf-live{display:flex;align-items:center;gap:6px;margin-top:12px;}
  .qtf-live-dot{width:7px;height:7px;border-radius:50%;background:var(--qtf-mint);animation:qtf-blink 1.4s ease-in-out infinite;}

  /* 6. Automated Quote Approvals — approval flow steps */
  .qtf-flow-row{display:flex;align-items:center;gap:6px;margin-top:16px;}
  .qtf-flow-step{width:28px;height:28px;border-radius:50%;background:#f1efe9;display:flex;align-items:center;justify-content:center;font-size:11px;color:#8a8696;flex-shrink:0;}
  .qtf-flow-step.qtf-done{background:var(--qtf-mint);color:#fff;}
  .qtf-flow-step.qtf-active{background:var(--qtf-indigo);color:#fff;animation:qtf-blink 1.8s ease-in-out infinite;}
  .qtf-flow-line{flex:1;height:2px;background:#eee9ff;}

  /* 7. Quote Version Management — version stack */
  .qtf-ver-stack{margin-top:12px;position:relative;}
  .qtf-ver-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #eee9ff;border-radius:8px;padding:6px 10px;margin-bottom:6px;}
  .qtf-ver-row.qtf-current{border-color:var(--qtf-indigo);background:#f5f3ff;animation:qtf-blink 2s ease-in-out infinite;}
  .qtf-ver-tag{font-size:10px;font-weight:700;color:var(--qtf-indigo);}

  /* 8. eSignature Integration — signature line */
  .qtf-sig-wrap{margin-top:16px;}
  .qtf-sig-box{border:1px solid #eee9ff;border-radius:10px;padding:14px 12px 10px;background:#faf9ff;}
  .qtf-sig-script{font-family:'Sora',sans-serif;font-style:italic;font-size:18px;color:var(--qtf-indigo);border-bottom:1.5px solid #d9d0ff;padding-bottom:6px;}

  /* 9. AI Sales Insights — dark AI panel */
  .qtf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .qtf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--qtf-coral);margin-top:4px;flex-shrink:0;}
  .qtf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:qtf-blink 2s ease-in-out infinite;}

  /* 10. CRM Quote Integration — linked records */
  .qtf-link-wrap{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;}
  .qtf-link-node{width:36px;height:36px;border-radius:10px;background:#faf9ff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
  .qtf-link-path{width:16px;height:2px;background:#d9d0ff;position:relative;}
  .qtf-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--qtf-indigo);animation:qtf-travel 2s ease-in-out infinite;}

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

  @media (prefers-reduced-motion:reduce){
    .qtf-root *{animation:none !important;transition:none !important;}
  }


/* product-catalog */
   .pcf-root{
    --pcf-ink:#17161c;
    --pcf-sub:#6b6878;
    --pcf-line:#eeece7;
    --pcf-paper:#faf9f6;
    --pcf-card:#ffffff;
    --pcf-indigo:#4b3fe4;
    --pcf-coral:#ff6b4a;
    --pcf-mint:#28a06b;
    --pcf-amber:#e6a23c;
    --pcf-tint-peach:#fbeadf;
    --pcf-tint-navy:#f2f1f6;
    --pcf-tint-mint:#e6f3ec;
    --pcf-tint-lav:#eeeafc;
    --pcf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--pcf-ink);
    
    box-sizing:border-box;
  }
  .pcf-root *{box-sizing:border-box;}
  .pcf-wrap{max-width:1160px;margin:0 auto;}

  .pcf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .pcf-card{
    background:var(--pcf-card);
    border:1px solid var(--pcf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .pcf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .pcf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .pcf-tint-peach{background:var(--pcf-tint-peach);}
  .pcf-tint-navy{background:var(--pcf-tint-navy);}
  .pcf-tint-mint{background:var(--pcf-tint-mint);}
  .pcf-tint-lav{background:var(--pcf-tint-lav);}
  .pcf-tint-sky{background:var(--pcf-tint-sky);}

  .pcf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .pcf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .pcf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .pcf-dot{width:8px;height:8px;border-radius:50%;}
  .pcf-dot--r{background:#f0665a;}
  .pcf-dot--y{background:#f0b64a;}
  .pcf-dot--g{background:#57c26a;}
  .pcf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .pcf-window--dark .pcf-chrome-bar{background:rgba(255,255,255,.14);}

  .pcf-body{
    padding:32px 28px 34px;
  }
  .pcf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .pcf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--pcf-sub);
    margin:0;
  }

  .pcf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .pcf-window--dark .pcf-label{color:#a9a4c4;}
  .pcf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .pcf-ai-badge{
    font-size:9px;font-weight:700;color:var(--pcf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes pcf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Centralized Product Catalog — product tile grid */
  .pcf-lib-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;}
  .pcf-lib-item{aspect-ratio:1;border-radius:8px;background:#fff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:13px;animation:pcf-settle 2.6s ease-in-out infinite;}
  .pcf-lib-item:nth-child(3n){animation-delay:.15s;}
  .pcf-lib-item:nth-child(3n+1){animation-delay:.3s;}
  @keyframes pcf-settle{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

  /* 2. Product Category Management — category tree */
  .pcf-tree{margin-top:14px;}
  .pcf-tree-row{display:flex;align-items:center;gap:7px;margin-bottom:9px;}
  .pcf-tree-row.pcf-indent{margin-left:18px;}
  .pcf-tree-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}
  .pcf-tree-row:nth-child(2) .pcf-tree-line{background:#eee9ff;animation:pcf-blink 2.2s ease-in-out infinite;}

  /* 3. Flexible Pricing Management — pricing rows */
  .pcf-price-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .pcf-price-tag{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:100px;}
  .pcf-price-disc{background:#ffe6dd;color:var(--pcf-coral);}
  .pcf-price-tax{background:#fdf1da;color:var(--pcf-amber);}

  /* 4. Product Variants & Options — variant chips */
  .pcf-variant-wrap{margin-top:14px;}
  .pcf-variant-group{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
  .pcf-variant-chip{font-size:10px;font-weight:600;padding:4px 9px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .pcf-variant-chip.pcf-on{background:var(--pcf-indigo);color:#fff;}

  /* 5. Inventory Status Tracking — stock status rows */
  .pcf-stock-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .pcf-stock-chip{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;display:flex;align-items:center;gap:5px;}
  .pcf-stock-chip i{width:6px;height:6px;border-radius:50%;display:inline-block;}
  .pcf-stock-in{background:#e6f3ec;color:var(--pcf-mint);}
  .pcf-stock-in i{background:var(--pcf-mint);animation:pcf-blink 1.6s ease-in-out infinite;}
  .pcf-stock-low{background:#fdf1da;color:var(--pcf-amber);}
  .pcf-stock-low i{background:var(--pcf-amber);}
  .pcf-stock-out{background:#f1efe9;color:#8a8696;}
  .pcf-stock-out i{background:#c3bfc9;}

  /* 6. Bulk Product Updates — checklist multi-select */
  .pcf-bulk-row{display:flex;align-items:center;gap:9px;margin-top:10px;}
  .pcf-bulk-check{width:15px;height:15px;border-radius:5px;border:2px solid #cfc9f7;flex-shrink:0;background:var(--pcf-indigo);border-color:var(--pcf-indigo);position:relative;}
  .pcf-bulk-check::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;}
  .pcf-bulk-line{height:8px;border-radius:4px;background:#eee9ff;flex:1;}
  .pcf-bulk-row:nth-child(3) .pcf-bulk-check{background:#fff;border-color:#cfc9f7;}
  .pcf-bulk-row:nth-child(3) .pcf-bulk-check::after{content:"";}
  .pcf-bulk-row:nth-child(3) .pcf-bulk-line{background:#f1efe9;}

  /* 7. AI Product Recommendations — dark AI panel */
  .pcf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .pcf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--pcf-coral);margin-top:4px;flex-shrink:0;}
  .pcf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:pcf-blink 2s ease-in-out infinite;}

  /* 8. Product Search & Filters — search bar with filtering rows */
  .pcf-search-bar{background:#faf9ff;border:1px solid #e3ddff;border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:6px;font-size:11px;color:#8a8696;}
  .pcf-filter-chips{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;}
  .pcf-filter-chips span{font-size:10px;font-weight:600;padding:3px 9px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .pcf-filter-chips span.pcf-active{background:var(--pcf-indigo);color:#fff;animation:pcf-blink 2s ease-in-out infinite;}

  /* 9. Product Image & Document Management — image/file grid */
  .pcf-media-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .pcf-media-item{width:34px;height:42px;border-radius:6px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.18);flex-shrink:0;animation:pcf-settle 2.6s ease-in-out infinite;}
  .pcf-media-item:nth-child(2){animation-delay:.2s;}
  .pcf-media-item:nth-child(3){animation-delay:.4s;}

  /* 10. CRM Product Integration — linked records */
  .pcf-link-wrap{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;}
  .pcf-link-node{width:36px;height:36px;border-radius:10px;background:#faf9ff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
  .pcf-link-path{width:16px;height:2px;background:#d9d0ff;position:relative;}
  .pcf-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--pcf-indigo);animation:pcf-travel 2s ease-in-out infinite;}
  @keyframes pcf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}

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

  @media (prefers-reduced-motion:reduce){
    .pcf-root *{animation:none !important;transition:none !important;}
  }


@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:90 100}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.product-catalogcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.pc1-head{display:flex;align-items:center;justify-content:space-between;}
.pc1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pc1-stats{display:flex;gap:8px;margin-top:11px;}
.pc1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.pc1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.pc1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.pc1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.pc1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.pc1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pc1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-chg-c{font-size:9.5px;color:#c1861b;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pc1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.pc1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pc1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-th-product{flex:2.2;}
.pc1-th-category{flex:1.3;}
.pc1-th-price{flex:1;text-align:right;}
.pc1-th-stock{flex:1.2;text-align:right;}

.pc1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-row-a{animation-name:slideIn;animation-delay:.9s;}
.pc1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.pc1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.pc1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.pc1-product{flex:2.2;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pc1-thumb-a{width:18px;height:18px;background:#fdece3;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.pc1-thumb-b{width:18px;height:18px;background:#fdece3;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;}
.pc1-thumb-c{width:18px;height:18px;background:#fdece3;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;}
.pc1-thumb-d{width:18px;height:18px;background:#fdece3;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;}

.pc1-category{flex:1.3;color:#7a726e;font-size:9.5px;}
.pc1-price{flex:1;text-align:right;color:#3c3532;font-weight:600;font-size:9.5px;}

.pc1-stock{flex:1.2;text-align:right;}
.pc1-stock-in{display:inline-flex;align-items:center;gap:3px;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-stock-low{display:inline-flex;align-items:center;gap:3px;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-stock-out{display:inline-flex;align-items:center;gap:3px;background:#fbe8e8;color:#c93030;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc1-dot-green{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;}
.pc1-dot-amber{width:5px;height:5px;background:#f0ac2c;border-radius:50%;display:inline-block;}
.pc1-dot-red{width:5px;height:5px;background:#c93030;border-radius:50%;display:inline-block;}

.pc1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.product-catalogcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.pc2-head{display:flex;align-items:center;justify-content:space-between;}
.pc2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pc2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.pc2-donut-wrap{position:relative;width:64px;height:64px;flex-shrink:0;}
.pc2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.pc2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .6s forwards;}
.pc2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.pc2-donut-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pc2-score-info{flex:1;}
.pc2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc2-score-line{font-size:9.5px;color:#5d5451;margin-top:4px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.pc2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.pc2-best{margin-top:12px;}
.pc2-bs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.pc2-bs-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc2-bs-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pc2-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;padding:5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pc2-row-a{animation-name:slideIn;animation-delay:1.7s;}
.pc2-row-b{animation-name:slideIn;animation-delay:1.82s;}
.pc2-row-c{animation-name:slideIn;animation-delay:1.94s;border-bottom:none;}

.pc2-prod-name{font-weight:600;flex:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pc2-units{color:#7a726e;font-size:9.5px;flex:1.2;text-align:right;}
.pc2-trend{font-weight:700;color:#1f9d55;flex-shrink:0;text-align:right;width:16px;}

.pc2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

/* csv-import */

 .civ-root{
    --civ-ink:#17161c;
    --civ-sub:#6b6878;
    --civ-line:#eeece7;
    --civ-paper:#faf9f6;
    --civ-card:#ffffff;
    --civ-indigo:#4b3fe4;
    --civ-coral:#ff6b4a;
    --civ-mint:#28a06b;
    --civ-amber:#e6a23c;
    --civ-tint-peach:#fbeadf;
    --civ-tint-navy:#f2f1f6;
    --civ-tint-mint:#e6f3ec;
    --civ-tint-lav:#eeeafc;
    --civ-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--civ-ink);
    
    box-sizing:border-box;
  }
  .civ-root *{box-sizing:border-box;}
  .civ-wrap{max-width:1160px;margin:0 auto;}

  .civ-head{text-align:center;max-width:680px;margin:0 auto 52px;}
  .civ-title{
    font-family:'Sora',sans-serif;
    font-size:36px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.01em;
    margin:0 0 14px;
  }
  .civ-desc{font-size:16px;line-height:1.6;color:var(--civ-sub);margin:0;}

  .civ-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .civ-card{
    background:var(--civ-card);
    border:1px solid var(--civ-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .civ-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .civ-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .civ-tint-peach{background:var(--civ-tint-peach);}
  .civ-tint-navy{background:var(--civ-tint-navy);}
  .civ-tint-mint{background:var(--civ-tint-mint);}
  .civ-tint-lav{background:var(--civ-tint-lav);}
  .civ-tint-sky{background:var(--civ-tint-sky);}

  .civ-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .civ-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .civ-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .civ-dot{width:8px;height:8px;border-radius:50%;}
  .civ-dot--r{background:#f0665a;}
  .civ-dot--y{background:#f0b64a;}
  .civ-dot--g{background:#57c26a;}
  .civ-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .civ-window--dark .civ-chrome-bar{background:rgba(255,255,255,.14);}

  .civ-body{
    padding:32px 28px 34px;
  }
  .civ-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .civ-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--civ-sub);
    margin:0;
  }

  .civ-label{font-size:11px;font-weight:600;color:#8a8696;}
  .civ-window--dark .civ-label{color:#a9a4c4;}
  .civ-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .civ-ai-badge{
    font-size:9px;font-weight:700;color:var(--civ-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes civ-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Bulk Data Import — file uploading with progress and count */
  .civ-upload-wrap{margin-top:14px;text-align:center;}
  .civ-upload-tray{width:56px;height:40px;border:2px dashed #d9d0ff;border-radius:10px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;overflow:hidden;}
  .civ-upload-icon{animation:civ-rise 2.2s ease-in-out infinite;}
  @keyframes civ-rise{0%{transform:translateY(10px);opacity:0;}40%{transform:translateY(0);opacity:1;}80%{transform:translateY(-2px);opacity:1;}100%{transform:translateY(-14px);opacity:0;}}
  .civ-upload-bar{height:7px;border-radius:4px;background:#f1efe9;max-width:150px;margin:0 auto;overflow:hidden;}
  .civ-upload-bar i{display:block;height:100%;background:var(--civ-indigo);border-radius:4px;animation:civ-fillbar 2.2s ease-in-out infinite;}
  @keyframes civ-fillbar{0%{width:5%;}90%,100%{width:92%;}}
  .civ-upload-count{margin-top:8px;font-size:10.5px;color:#8a8696;}

  /* 2. Smart Field Mapping — CSV column to CRM field rows */
  .civ-map-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .civ-map-col{flex:1;font-size:10.5px;font-weight:600;padding:6px 9px;border-radius:7px;background:#f1efe9;color:#8a8696;}
  .civ-map-arrow{color:var(--civ-indigo);font-size:11px;}
  .civ-map-field{flex:1;font-size:10.5px;font-weight:600;padding:6px 9px;border-radius:7px;background:#eee9ff;color:var(--civ-indigo);}

  /* 3. Duplicate Record Detection — two cards merging */
  .civ-dup-wrap{position:relative;height:80px;margin-top:16px;}
  .civ-dup-card{position:absolute;width:66%;height:34px;border-radius:9px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.15);display:flex;align-items:center;padding-left:10px;gap:7px;}
  .civ-dup-card--a{top:0;left:0;animation:civ-merge-a 2.6s ease-in-out infinite;}
  .civ-dup-card--b{top:16px;left:14px;animation:civ-merge-b 2.6s ease-in-out infinite;}
  @keyframes civ-merge-a{0%,25%{top:0;left:0;opacity:1;}70%,100%{top:14px;left:9px;opacity:1;}}
  @keyframes civ-merge-b{0%,25%{top:16px;left:14px;opacity:1;}70%{top:14px;left:9px;opacity:0;}100%{opacity:0;}}

  /* 4. Error Validation & Preview — validation rows */
  .civ-val-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .civ-val-status{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;display:flex;align-items:center;gap:5px;}
  .civ-val-ok{background:#e6f3ec;color:var(--civ-mint);}
  .civ-val-err{background:#ffe6dd;color:var(--civ-coral);animation:civ-blink 2s ease-in-out infinite;}

  /* 5. Flexible Data Updates — old to new value diff */
  .civ-update-row{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:10.5px;}
  .civ-old-val{color:#c3bfc9;text-decoration:line-through;}
  .civ-new-val{color:var(--civ-mint);font-weight:700;}

  /* 6. Multi-Module Import — module icons feeding a hub */
  .civ-hub-wrap{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
  .civ-hub-core{width:42px;height:42px;border-radius:12px;background:var(--civ-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2;box-shadow:0 8px 18px -6px rgba(75,63,228,.5);}
  .civ-hub-node{position:absolute;width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.2);display:flex;align-items:center;justify-content:center;font-size:11px;animation:civ-feed 2.4s ease-in-out infinite;}
  .civ-hub-node:nth-child(2){top:8px;left:20px;animation-delay:0s;}
  .civ-hub-node:nth-child(3){bottom:8px;left:20px;animation-delay:.4s;}
  .civ-hub-node:nth-child(4){top:8px;right:20px;animation-delay:.8s;}
  .civ-hub-node:nth-child(5){bottom:8px;right:20px;animation-delay:1.2s;}
  @keyframes civ-feed{0%{opacity:1;transform:scale(1);}60%{opacity:.3;transform:scale(.5);}61%,100%{opacity:0;}}

  /* 7. Secure Data Import — lock + progress */
  .civ-secure-wrap{display:flex;align-items:center;gap:12px;margin-top:14px;}
  .civ-lock{width:38px;height:38px;border-radius:10px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
  .civ-secure-bar{height:7px;border-radius:4px;background:#f1efe9;margin-top:14px;overflow:hidden;}
  .civ-secure-bar i{display:block;height:100%;background:var(--civ-mint);border-radius:4px;animation:civ-fillbar 2.4s ease-in-out infinite;}

  /* 8. Import History Tracking — history rows with status */
  .civ-hist-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .civ-hist-status{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;}
  .civ-hist-done{background:#e6f3ec;color:var(--civ-mint);}
  .civ-hist-fail{background:#ffe6dd;color:var(--civ-coral);}

  /* 9. Automatic Data Formatting — before/after rows */
  .civ-fmt-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:10.5px;}
  .civ-fmt-raw{color:#8a8696;flex:1;background:#f1efe9;padding:5px 8px;border-radius:6px;}
  .civ-fmt-clean{color:var(--civ-indigo);flex:1;background:#eee9ff;padding:5px 8px;border-radius:6px;font-weight:600;}

  /* 10. AI Import Suggestions — dark AI panel */
  .civ-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .civ-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--civ-coral);margin-top:4px;flex-shrink:0;}
  .civ-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:civ-blink 2s ease-in-out infinite;}

  @media (max-width:760px){
    .civ-grid{grid-template-columns:1fr;}
    .civ-title{font-size:29px;}
  }

  @media (prefers-reduced-motion:reduce){
    .civ-root *{animation:none !important;transition:none !important;}
  }

  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes growUpload{0%{width:0%}100%{width:100%}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.csv-importcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.ci1-head{display:flex;align-items:center;justify-content:space-between;}
.ci1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci1-upload{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ci1-filebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;}
.ci1-file-toprow{display:flex;align-items:center;gap:9px;}
.ci1-file-icon{width:26px;height:30px;background:#fdece3;color:#c14a1c;font-size:7px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci1-file-name{font-size:10.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci1-file-size{font-size:8.5px;color:#9a9290;margin-top:1px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci1-file-status{margin-left:auto;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.3s forwards;}

.ci1-progress-track{height:6px;background:#e9e3df;margin-top:9px;}
.ci1-progress-fill{height:6px;background:#e0561f;width:0%;animation:growUpload 1.2s cubic-bezier(.3,.7,.2,1) .4s forwards;}
.ci1-progress-label{font-size:8.5px;color:#7a726e;margin-top:5px;font-weight:600;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ci1-stats{display:flex;gap:8px;margin-top:12px;}
.ci1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}
.ci1-stat-label{font-size:8.5px;color:#9a9290;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci1-val-a{font-size:15px;font-weight:800;color:#181114;margin-top:2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci1-val-b{font-size:15px;font-weight:800;color:#181114;margin-top:2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci1-val-c{font-size:15px;font-weight:800;color:#b5810f;margin-top:2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci1-val-d{font-size:15px;font-weight:800;color:#c93030;margin-top:2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ci1-note{display:flex;align-items:center;gap:6px;background:#e9f7ee;padding:8px 10px;margin-top:12px;font-size:9.5px;color:#1f6b3a;font-weight:600;opacity:0;animation:slideIn .5s ease-out 1.6s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ci1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.csv-importcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.ci2-head{display:flex;align-items:center;justify-content:space-between;}
.ci2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ci2-maphead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:6px;}
.ci2-maptitle{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci2-mapsub{font-size:9px;color:#9a9290;font-weight:600;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ci2-maprow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;}
.ci2-maprow-a{animation-name:slideIn;animation-delay:.8s;}
.ci2-maprow-b{animation-name:slideIn;animation-delay:.94s;}
.ci2-maprow-c{animation-name:slideIn;animation-delay:1.08s;}
.ci2-maprow-d{animation-name:slideIn;animation-delay:1.22s;}

.ci2-csvcol{flex:1.2;font-size:9.5px;color:#7a726e;background:#f1ece9;padding:3px 7px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci2-arrow{color:#d8d2ce;font-size:11px;flex-shrink:0;}
.ci2-crmfield{flex:1.2;font-size:9.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci2-matched{flex-shrink:0;margin-left:auto;opacity:0;animation:popIn .3s ease-out forwards;}
.ci2-matched-a{animation-delay:1.15s;}
.ci2-matched-b{animation-delay:1.29s;}
.ci2-matched-c{animation-delay:1.43s;}
.ci2-matched-d{animation-delay:1.57s;}

.ci2-summarybox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;}
.ci2-summary-text{}
.ci2-summary-count{font-size:15px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci2-summary-sub{font-size:8.5px;color:#9a9290;margin-top:1px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ci2-start-btn{background:#e0561f;color:#ffffff;font-size:10px;font-weight:700;padding:7px 14px;opacity:0;animation:chipPop .4s ease-out 1.9s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ci2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

/* api-lead-ingest */

  .alf-root{
    --alf-ink:#17161c;
    --alf-sub:#6b6878;
    --alf-line:#eeece7;
    --alf-paper:#faf9f6;
    --alf-card:#ffffff;
    --alf-indigo:#4b3fe4;
    --alf-coral:#ff6b4a;
    --alf-mint:#28a06b;
    --alf-amber:#e6a23c;
    --alf-tint-peach:#fbeadf;
    --alf-tint-navy:#f2f1f6;
    --alf-tint-mint:#e6f3ec;
    --alf-tint-lav:#eeeafc;
    --alf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--alf-ink);
    
    box-sizing:border-box;
  }
  .alf-root *{box-sizing:border-box;}
  .alf-wrap{max-width:1160px;margin:0 auto;}

  .feat-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .alf-card{
    background:var(--alf-card);
    border:1px solid var(--alf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .alf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .alf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .alf-tint-peach{background:var(--alf-tint-peach);}
  .alf-tint-navy{background:var(--alf-tint-navy);}
  .alf-tint-mint{background:var(--alf-tint-mint);}
  .alf-tint-lav{background:var(--alf-tint-lav);}
  .alf-tint-sky{background:var(--alf-tint-sky);}

  .alf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .alf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .alf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .alf-dot{width:8px;height:8px;border-radius:50%;}
  .alf-dot--r{background:#f0665a;}
  .alf-dot--y{background:#f0b64a;}
  .alf-dot--g{background:#57c26a;}
  .alf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .alf-window--dark .alf-chrome-bar{background:rgba(255,255,255,.14);}

  .alf-body{
    padding:32px 28px 34px;
  }
  .alf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .alf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--alf-sub);
    margin:0;
  }

  .alf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .alf-window--dark .alf-label{color:#a9a4c4;}
  .alf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .alf-ai-badge{
    font-size:9px;font-weight:700;color:var(--alf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes alf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Real-Time Lead Capture — lead card sliding in live */
  .alf-capture-wrap{position:relative;margin-top:16px;height:70px;}
  .alf-capture-card{position:absolute;left:-60px;top:14px;width:70%;background:#fff;border:1px solid #e3ddff;border-radius:10px;padding:8px 10px;box-shadow:0 6px 14px -6px rgba(23,22,28,.2);display:flex;align-items:center;gap:7px;animation:alf-slide-capture 2.4s ease-in-out infinite;}
  @keyframes alf-slide-capture{0%{left:-60px;opacity:0;}35%,70%{left:8px;opacity:1;}100%{left:8px;opacity:1;}}
  .alf-live-badge{position:absolute;top:2px;right:14px;font-size:9px;font-weight:700;color:var(--alf-mint);display:flex;align-items:center;gap:4px;}
  .alf-live-badge i{width:6px;height:6px;border-radius:50%;background:var(--alf-mint);animation:alf-blink 1.4s ease-in-out infinite;}

  /* 2. Seamless API Integration — two systems syncing */
  .alf-sync-row{display:flex;align-items:center;justify-content:space-between;height:100%;}
  .alf-sync-box{width:56px;height:56px;border-radius:12px;background:#faf9ff;border:1px solid #e3e8ff;display:flex;align-items:center;justify-content:center;font-size:18px;}
  .alf-sync-path{flex:1;height:2px;background:#d8ddff;margin:0 10px;position:relative;}
  .alf-sync-dot{position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;background:var(--alf-indigo);transform:translateY(-50%);animation:alf-orbit 2.2s ease-in-out infinite;}
  @keyframes alf-orbit{0%{left:0;}50%{left:calc(100% - 8px);}100%{left:0;}}

  /* 3. Automatic Lead Mapping — field mapping rows */
  .alf-map-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .alf-map-col{flex:1;font-size:10.5px;font-weight:600;padding:6px 9px;border-radius:7px;background:#f1efe9;color:#8a8696;}
  .alf-map-arrow{color:var(--alf-indigo);font-size:11px;}
  .alf-map-field{flex:1;font-size:10.5px;font-weight:600;padding:6px 9px;border-radius:7px;background:#eee9ff;color:var(--alf-indigo);}

  /* 4. Duplicate Lead Prevention — two cards merging */
  .alf-dup-wrap{position:relative;height:80px;margin-top:16px;}
  .alf-dup-card{position:absolute;width:66%;height:34px;border-radius:9px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.15);display:flex;align-items:center;padding-left:10px;gap:7px;}
  .alf-dup-card--a{top:0;left:0;animation:alf-merge-a 2.6s ease-in-out infinite;}
  .alf-dup-card--b{top:16px;left:14px;animation:alf-merge-b 2.6s ease-in-out infinite;}
  @keyframes alf-merge-a{0%,25%{top:0;left:0;opacity:1;}70%,100%{top:14px;left:9px;opacity:1;}}
  @keyframes alf-merge-b{0%,25%{top:16px;left:14px;opacity:1;}70%{top:14px;left:9px;opacity:0;}100%{opacity:0;}}

  /* 5. Instant Lead Assignment — routing to a rep */
  .alf-route-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .alf-route-lead{width:38px;height:38px;border-radius:9px;background:var(--alf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .alf-route-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .alf-route-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--alf-indigo);animation:alf-travel 2s ease-in-out infinite;}
  @keyframes alf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .alf-route-person{width:38px;height:38px;border-radius:50%;background:#4b3fe4;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 6. Secure API Authentication — lock + key */
  .alf-secure-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .alf-lock{width:38px;height:38px;border-radius:10px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
  .alf-token-row{margin-top:14px;background:#faf9ff;border:1px solid #eee9ff;border-radius:8px;padding:7px 10px;font-size:10px;color:#8a8696;font-family:monospace;}

  /* 7. Multi-Source Lead Collection — sources feeding hub */
  .alf-hub-wrap{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
  .alf-hub-core{width:42px;height:42px;border-radius:12px;background:var(--alf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2;box-shadow:0 8px 18px -6px rgba(75,63,228,.5);}
  .alf-hub-node{position:absolute;width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.2);display:flex;align-items:center;justify-content:center;font-size:11px;animation:alf-feed 2.4s ease-in-out infinite;}
  .alf-hub-node:nth-child(2){top:8px;left:20px;animation-delay:0s;}
  .alf-hub-node:nth-child(3){bottom:8px;left:20px;animation-delay:.4s;}
  .alf-hub-node:nth-child(4){top:8px;right:20px;animation-delay:.8s;}
  .alf-hub-node:nth-child(5){bottom:8px;right:20px;animation-delay:1.2s;}
  @keyframes alf-feed{0%{opacity:1;transform:scale(1);}60%{opacity:.3;transform:scale(.5);}61%,100%{opacity:0;}}

  /* 8. Real-Time Data Validation — validation rows */
  .alf-val-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .alf-val-status{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;display:flex;align-items:center;gap:5px;}
  .alf-val-ok{background:#e6f3ec;color:var(--alf-mint);}
  .alf-val-err{background:#ffe6dd;color:var(--alf-coral);animation:alf-blink 2s ease-in-out infinite;}

  /* 9. API Activity Monitoring — log rows */
  .alf-log-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .alf-log-code{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:6px;font-family:monospace;}
  .alf-log-200{background:#e6f3ec;color:var(--alf-mint);}
  .alf-log-500{background:#ffe6dd;color:var(--alf-coral);}

  /* 10. AI Lead Enrichment — dark AI panel */
  .alf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .alf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--alf-coral);margin-top:4px;flex-shrink:0;}
  .alf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:alf-blink 2s ease-in-out infinite;}

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

  @media (prefers-reduced-motion:reduce){
    .alf-root *{animation:none !important;transition:none !important;}
  }

  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:97 100}}
@keyframes typeLine{0%{opacity:0}100%{opacity:1}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.api-lead-ingestcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.al1-head{display:flex;align-items:center;justify-content:space-between;}
.al1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al1-live{display:flex;align-items:center;gap:5px;background:#e9f7ee;color:#1f9d55;font-size:10px;font-weight:700;padding:4px 9px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al1-live-dot{width:6px;height:6px;background:#1f9d55;border-radius:50%;display:inline-block;animation:pulseLive 1.6s ease-in-out infinite;}

.al1-stats{display:flex;gap:8px;margin-top:11px;}
.al1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.al1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.al1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.al1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.al1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.al1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.al1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.al1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.al1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.al1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al1-th-source{flex:1.6;}
.al1-th-endpoint{flex:1.9;}
.al1-th-time{flex:1;text-align:right;}
.al1-th-status{flex:1;text-align:right;}

.al1-row{display:flex;align-items:center;font-size:9.5px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al1-row-a{animation-name:slideIn;animation-delay:.9s;}
.al1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.al1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.al1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.al1-source{flex:1.6;font-weight:600;display:flex;align-items:center;gap:6px;}
.al1-dot-a{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.al1-dot-b{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;}
.al1-dot-c{width:5px;height:5px;background:#c93030;border-radius:50%;display:inline-block;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;}
.al1-dot-d{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;}

.al1-endpoint{flex:1.9;color:#7a726e;font-size:8.5px;font-family:'JetBrains Mono',monospace;}
.al1-time{flex:1;text-align:right;color:#9a9290;font-size:9px;}

.al1-status{flex:1;text-align:right;}
.al1-status-ok{display:inline-block;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al1-status-fail{display:inline-block;background:#fbe8e8;color:#c93030;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.al1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.api-lead-ingestcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.al2-head{display:flex;align-items:center;justify-content:space-between;}
.al2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.al2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.al2-donut-wrap{position:relative;width:60px;height:60px;flex-shrink:0;}
.al2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.al2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .6s forwards;}
.al2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.al2-donut-value{font-size:12.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.al2-score-info{flex:1;}
.al2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al2-score-line{font-size:9.5px;color:#5d5451;margin-top:4px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.al2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.al2-codebox{background:#181114;padding:10px 12px;margin-top:12px;}
.al2-code-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;}
.al2-code-label{font-size:9px;color:#a8a19d;font-weight:700;font-family:'JetBrains Mono',monospace;}
.al2-code-badge{background:#1f9d55;color:#ffffff;font-size:8px;font-weight:700;padding:2px 7px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.al2-code-line{font-size:9.5px;color:#e8e3df;font-family:'JetBrains Mono',monospace;line-height:1.6;opacity:0;animation:typeLine .3s ease-out forwards;}
.al2-code-line-a{animation-delay:1.6s;}
.al2-code-line-b{animation-delay:1.7s;}
.al2-code-line-c{animation-delay:1.8s;}
.al2-code-line-d{animation-delay:1.9s;}
.al2-code-line-e{animation-delay:2s;}
.al2-code-key{color:#f0ac2c;}
.al2-code-str{color:#a8d8a8;}
.al2-code-punc{color:#7a726e;}

.al2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

 .alf-root{
    --alf-ink:#17161c;
    --alf-sub:#6b6878;
    --alf-line:#eeece7;
    --alf-paper:#faf9f6;
    --alf-card:#ffffff;
    --alf-indigo:#4b3fe4;
    --alf-coral:#ff6b4a;
    --alf-mint:#28a06b;
    --alf-amber:#e6a23c;
    --alf-tint-peach:#fbeadf;
    --alf-tint-navy:#f2f1f6;
    --alf-tint-mint:#e6f3ec;
    --alf-tint-lav:#eeeafc;
    --alf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--alf-ink);
    
    box-sizing:border-box;
  }
  .alf-root *{box-sizing:border-box;}
  .alf-wrap{max-width:1160px;margin:0 auto;}

  .alf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .alf-card{
    background:var(--alf-card);
    border:1px solid var(--alf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .alf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .alf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .alf-tint-peach{background:var(--alf-tint-peach);}
  .alf-tint-navy{background:var(--alf-tint-navy);}
  .alf-tint-mint{background:var(--alf-tint-mint);}
  .alf-tint-lav{background:var(--alf-tint-lav);}
  .alf-tint-sky{background:var(--alf-tint-sky);}

  .alf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .alf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .alf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .alf-dot{width:8px;height:8px;border-radius:50%;}
  .alf-dot--r{background:#f0665a;}
  .alf-dot--y{background:#f0b64a;}
  .alf-dot--g{background:#57c26a;}
  .alf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .alf-window--dark .alf-chrome-bar{background:rgba(255,255,255,.14);}

  .alf-body{
    padding:32px 28px 34px;
  }
  .alf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .alf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--alf-sub);
    margin:0;
  }

  .alf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .alf-window--dark .alf-label{color:#a9a4c4;}
  .alf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .alf-ai-badge{
    font-size:9px;font-weight:700;color:var(--alf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes alf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Real-Time Lead Capture — lead card sliding in live */
  .alf-capture-wrap{position:relative;margin-top:16px;height:70px;}
  .alf-capture-card{position:absolute;left:-60px;top:14px;width:70%;background:#fff;border:1px solid #e3ddff;border-radius:10px;padding:8px 10px;box-shadow:0 6px 14px -6px rgba(23,22,28,.2);display:flex;align-items:center;gap:7px;animation:alf-slide-capture 2.4s ease-in-out infinite;}
  @keyframes alf-slide-capture{0%{left:-60px;opacity:0;}35%,70%{left:8px;opacity:1;}100%{left:8px;opacity:1;}}
  .alf-live-badge{position:absolute;top:2px;right:14px;font-size:9px;font-weight:700;color:var(--alf-mint);display:flex;align-items:center;gap:4px;}
  .alf-live-badge i{width:6px;height:6px;border-radius:50%;background:var(--alf-mint);animation:alf-blink 1.4s ease-in-out infinite;}

  /* 2. Seamless API Integration — two systems syncing */
  .alf-sync-row{display:flex;align-items:center;justify-content:space-between;height:100%;}
  .alf-sync-box{width:56px;height:56px;border-radius:12px;background:#faf9ff;border:1px solid #e3e8ff;display:flex;align-items:center;justify-content:center;font-size:18px;}
  .alf-sync-path{flex:1;height:2px;background:#d8ddff;margin:0 10px;position:relative;}
  .alf-sync-dot{position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;background:var(--alf-indigo);transform:translateY(-50%);animation:alf-orbit 2.2s ease-in-out infinite;}
  @keyframes alf-orbit{0%{left:0;}50%{left:calc(100% - 8px);}100%{left:0;}}

  /* 3. Automatic Lead Mapping — field mapping rows */
  .alf-map-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .alf-map-col{flex:1;font-size:10.5px;font-weight:600;padding:6px 9px;border-radius:7px;background:#f1efe9;color:#8a8696;}
  .alf-map-arrow{color:var(--alf-indigo);font-size:11px;}
  .alf-map-field{flex:1;font-size:10.5px;font-weight:600;padding:6px 9px;border-radius:7px;background:#eee9ff;color:var(--alf-indigo);}

  /* 4. Duplicate Lead Prevention — two cards merging */
  .alf-dup-wrap{position:relative;height:80px;margin-top:16px;}
  .alf-dup-card{position:absolute;width:66%;height:34px;border-radius:9px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.15);display:flex;align-items:center;padding-left:10px;gap:7px;}
  .alf-dup-card--a{top:0;left:0;animation:alf-merge-a 2.6s ease-in-out infinite;}
  .alf-dup-card--b{top:16px;left:14px;animation:alf-merge-b 2.6s ease-in-out infinite;}
  @keyframes alf-merge-a{0%,25%{top:0;left:0;opacity:1;}70%,100%{top:14px;left:9px;opacity:1;}}
  @keyframes alf-merge-b{0%,25%{top:16px;left:14px;opacity:1;}70%{top:14px;left:9px;opacity:0;}100%{opacity:0;}}

  /* 5. Instant Lead Assignment — routing to a rep */
  .alf-route-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .alf-route-lead{width:38px;height:38px;border-radius:9px;background:var(--alf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .alf-route-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .alf-route-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--alf-indigo);animation:alf-travel 2s ease-in-out infinite;}
  @keyframes alf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .alf-route-person{width:38px;height:38px;border-radius:50%;background:#4b3fe4;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 6. Secure API Authentication — lock + key */
  .alf-secure-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .alf-lock{width:38px;height:38px;border-radius:10px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
  .alf-token-row{margin-top:14px;background:#faf9ff;border:1px solid #eee9ff;border-radius:8px;padding:7px 10px;font-size:10px;color:#8a8696;font-family:monospace;}

  /* 7. Multi-Source Lead Collection — sources feeding hub */
  .alf-hub-wrap{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
  .alf-hub-core{width:42px;height:42px;border-radius:12px;background:var(--alf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2;box-shadow:0 8px 18px -6px rgba(75,63,228,.5);}
  .alf-hub-node{position:absolute;width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.2);display:flex;align-items:center;justify-content:center;font-size:11px;animation:alf-feed 2.4s ease-in-out infinite;}
  .alf-hub-node:nth-child(2){top:8px;left:20px;animation-delay:0s;}
  .alf-hub-node:nth-child(3){bottom:8px;left:20px;animation-delay:.4s;}
  .alf-hub-node:nth-child(4){top:8px;right:20px;animation-delay:.8s;}
  .alf-hub-node:nth-child(5){bottom:8px;right:20px;animation-delay:1.2s;}
  @keyframes alf-feed{0%{opacity:1;transform:scale(1);}60%{opacity:.3;transform:scale(.5);}61%,100%{opacity:0;}}

  /* 8. Real-Time Data Validation — validation rows */
  .alf-val-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .alf-val-status{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;display:flex;align-items:center;gap:5px;}
  .alf-val-ok{background:#e6f3ec;color:var(--alf-mint);}
  .alf-val-err{background:#ffe6dd;color:var(--alf-coral);animation:alf-blink 2s ease-in-out infinite;}

  /* 9. API Activity Monitoring — log rows */
  .alf-log-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .alf-log-code{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:6px;font-family:monospace;}
  .alf-log-200{background:#e6f3ec;color:var(--alf-mint);}
  .alf-log-500{background:#ffe6dd;color:var(--alf-coral);}

  /* 10. AI Lead Enrichment — dark AI panel */
  .alf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .alf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--alf-coral);margin-top:4px;flex-shrink:0;}
  .alf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:alf-blink 2s ease-in-out infinite;}

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

  @media (prefers-reduced-motion:reduce){
    .alf-root *{animation:none !important;transition:none !important;}
  }

  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:82 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.quotescard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.qt1-head{display:flex;align-items:center;justify-content:space-between;}
.qt1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.qt1-stats{display:flex;gap:8px;margin-top:11px;}
.qt1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.qt1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.qt1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.qt1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.qt1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.qt1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.qt1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.qt1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.qt1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.qt1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt1-th-quote{flex:1.1;}
.qt1-th-client{flex:1.9;}
.qt1-th-amount{flex:1.2;text-align:right;}
.qt1-th-status{flex:1.2;text-align:right;}

.qt1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt1-row-a{animation-name:slideIn;animation-delay:.9s;}
.qt1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.qt1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.qt1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.qt1-quote{flex:1.1;font-weight:700;color:#181114;display:flex;align-items:center;gap:5px;}
.qt1-dot-a{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.qt1-dot-b{width:5px;height:5px;background:#378add;border-radius:50%;display:inline-block;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;}
.qt1-dot-c{width:5px;height:5px;background:#9a9290;border-radius:50%;display:inline-block;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;}
.qt1-dot-d{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;}

.qt1-client{flex:1.9;color:#7a726e;font-size:9.5px;}
.qt1-amount{flex:1.2;text-align:right;color:#3c3532;font-weight:600;font-size:9.5px;}

.qt1-status{flex:1.2;text-align:right;}
.qt1-status-approved{display:inline-block;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt1-status-sent{display:inline-block;background:#e6f1fb;color:#185fa5;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt1-status-expired{display:inline-block;background:#f1ece9;color:#7a726e;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.qt1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.quotescard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.qt2-head{display:flex;align-items:center;justify-content:space-between;}
.qt2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.qt2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.qt2-donut-wrap{position:relative;width:64px;height:64px;flex-shrink:0;}
.qt2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.qt2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.qt2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.qt2-donut-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.qt2-score-info{flex:1;}
.qt2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt2-score-sub{font-size:9.5px;color:#8a8280;margin-top:2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt2-chip{display:inline-flex;align-items:center;gap:5px;background:#ffffff;border:1px solid #e9e4e1;padding:4px 8px;margin-top:7px;font-size:9px;font-weight:700;color:#181114;opacity:0;animation:chipPop .4s ease-out 1.3s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.qt2-expiring{margin-top:12px;}
.qt2-ex-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.qt2-ex-title{font-size:11px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt2-ex-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.qt2-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;padding:5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.qt2-row-a{animation-name:slideIn;animation-delay:1.7s;}
.qt2-row-b{animation-name:slideIn;animation-delay:1.82s;}
.qt2-row-c{animation-name:slideIn;animation-delay:1.94s;border-bottom:none;}

.qt2-quote-id{font-weight:700;color:#181114;flex:1;}
.qt2-quote-client{color:#9a9290;font-size:9px;flex:1.5;}
.qt2-expiry{color:#c93030;font-weight:600;font-size:9.5px;flex-shrink:0;text-align:right;}

.qt2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

/* inbound-cti-software-cards */


@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(224,86,31,.4)}70%{box-shadow:0 0 0 8px rgba(224,86,31,0)}100%{box-shadow:0 0 0 0 rgba(224,86,31,0)}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:94 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.inbound-cti-softwarecard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.ct1-head{display:flex;align-items:center;justify-content:space-between;}
.ct1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-live{display:flex;align-items:center;gap:5px;background:#e9f7ee;color:#1f9d55;font-size:10px;font-weight:700;padding:4px 9px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-live-dot{width:6px;height:6px;background:#1f9d55;border-radius:50%;display:inline-block;animation:pulseLive 1.6s ease-in-out infinite;}

.ct1-stats{display:flex;gap:8px;margin-top:11px;}
.ct1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.ct1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ct1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ct1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ct1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.ct1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ct1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-chg-d{font-size:9.5px;color:#c93030;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ct1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.ct1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ct1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-th-caller{flex:1.9;}
.ct1-th-number{flex:1.4;}
.ct1-th-duration{flex:1;text-align:right;}
.ct1-th-status{flex:1.1;text-align:right;}

.ct1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-row-a{animation-name:slideIn;animation-delay:.9s;}
.ct1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.ct1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.ct1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.ct1-caller{flex:1.9;font-weight:600;display:flex;align-items:center;gap:6px;}
.ct1-avatar-a{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-avatar-b{width:18px;height:18px;border-radius:50%;background:#f1ece9;color:#7a726e;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-avatar-c{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-avatar-d{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ct1-number{flex:1.4;color:#7a726e;font-size:9.5px;}
.ct1-duration{flex:1;text-align:right;color:#7a726e;font-size:9.5px;}

.ct1-status{flex:1.1;text-align:right;}
.ct1-status-answered{display:inline-block;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-status-missed{display:inline-block;background:#fbe8e8;color:#c93030;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct1-status-vm{display:inline-block;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ct1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.inbound-cti-softwarecard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.ct2-head{display:flex;align-items:center;justify-content:space-between;}
.ct2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ct2-scorebox{background:#f7f4f1;padding:9px 11px;margin-top:12px;display:flex;align-items:center;gap:12px;}
.ct2-donut-wrap{position:relative;width:56px;height:56px;flex-shrink:0;}
.ct2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.ct2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.ct2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ct2-donut-value{font-size:11.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct2-donut-label{font-size:7.5px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ct2-score-info{flex:1;}
.ct2-score-title{font-size:10.5px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct2-score-sub{font-size:9px;color:#8a8280;margin-top:2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ct2-callbox{background:#181114;padding:12px 14px;margin-top:12px;}
.ct2-call-toprow{display:flex;align-items:center;justify-content:space-between;}
.ct2-call-label{display:flex;align-items:center;gap:6px;font-size:9.5px;color:#ff9a63;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct2-call-dot{width:6px;height:6px;background:#e0561f;border-radius:50%;display:inline-block;animation:pulseLive 1.3s ease-in-out infinite;}
.ct2-call-timer{font-size:9px;color:#8a8280;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ct2-caller-row{display:flex;align-items:center;gap:10px;margin-top:10px;}
.ct2-caller-avatar{width:34px;height:34px;border-radius:50%;background:#e0561f;color:#ffffff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:ringPulse 1.8s ease-out infinite;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct2-caller-name{font-size:12px;font-weight:700;color:#ffffff;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct2-caller-sub{font-size:9px;color:#a8a19d;margin-top:1px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ct2-call-btns{display:flex;gap:8px;margin-top:11px;}
.ct2-btn-decline{flex:1;background:#3c2a24;color:#ff9a9a;font-size:9.5px;font-weight:700;text-align:center;padding:7px 0;opacity:0;animation:chipPop .4s ease-out 1.3s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ct2-btn-answer{flex:1;background:#1f9d55;color:#ffffff;font-size:9.5px;font-weight:700;text-align:center;padding:7px 0;opacity:0;animation:chipPop .4s ease-out 1.4s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ct2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

  .cnf-root{
    --cnf-ink:#17161c;
    --cnf-sub:#6b6878;
    --cnf-line:#eeece7;
    --cnf-paper:#faf9f6;
    --cnf-card:#ffffff;
    --cnf-indigo:#4b3fe4;
    --cnf-coral:#ff6b4a;
    --cnf-mint:#28a06b;
    --cnf-amber:#e6a23c;
    --cnf-tint-peach:#fbeadf;
    --cnf-tint-navy:#f2f1f6;
    --cnf-tint-mint:#e6f3ec;
    --cnf-tint-lav:#eeeafc;
    --cnf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;

    color:var(--cnf-ink);
   
    box-sizing:border-box;
  }
  .cnf-root *{box-sizing:border-box;}
  .cnf-wrap{max-width:1160px;margin:0 auto;}

  .cnf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .cnf-card{
    background:var(--cnf-card);
    border:1px solid var(--cnf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .cnf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .cnf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .cnf-tint-peach{background:var(--cnf-tint-peach);}
  .cnf-tint-navy{background:var(--cnf-tint-navy);}
  .cnf-tint-mint{background:var(--cnf-tint-mint);}
  .cnf-tint-lav{background:var(--cnf-tint-lav);}
  .cnf-tint-sky{background:var(--cnf-tint-sky);}

  .cnf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .cnf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .cnf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .cnf-dot{width:8px;height:8px;border-radius:50%;}
  .cnf-dot--r{background:#f0665a;}
  .cnf-dot--y{background:#f0b64a;}
  .cnf-dot--g{background:#57c26a;}
  .cnf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .cnf-window--dark .cnf-chrome-bar{background:rgba(255,255,255,.14);}

  .cnf-body{
    padding:32px 28px 34px;
  }
  .cnf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .cnf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--cnf-sub);
    margin:0;
  }

  .cnf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .cnf-window--dark .cnf-label{color:#a9a4c4;}
  .cnf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .cnf-ai-badge{
    font-size:9px;font-weight:700;color:var(--cnf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes cnf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Customer Support Call Center — active call card */
  .cnf-call-card{margin-top:12px;background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:9px;}
  .cnf-call-pulse{width:10px;height:10px;border-radius:50%;background:var(--cnf-mint);animation:cnf-blink 1.4s ease-in-out infinite;flex-shrink:0;}
  .cnf-call-fields{display:flex;gap:20px;margin-top:11px;}
  .cnf-cf-label{font-size:10px;font-weight:700;color:#241f2e;margin-bottom:2px;}
  .cnf-cf-val{font-size:10.5px;color:#8a8696;}

  /* 2. Call Scripts — script lines with highlighted prompt */
  .cnf-script-line{height:7px;border-radius:4px;background:#f1efe9;margin-top:9px;}
  .cnf-script-highlight{margin-top:10px;background:#eee9ff;border-radius:8px;padding:8px 10px;font-size:10.5px;color:var(--cnf-indigo);font-weight:600;animation:cnf-blink 2.2s ease-in-out infinite;}

  /* 3. Call Notes & Histories — notes timeline */
  .cnf-timeline{position:relative;padding-left:16px;margin-top:8px;}
  .cnf-timeline::before{content:"";position:absolute;left:4px;top:2px;bottom:2px;width:2px;background:#eee9ff;}
  .cnf-tl-item{position:relative;margin-bottom:12px;}
  .cnf-tl-item::before{content:"";position:absolute;left:-16px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--cnf-indigo);border:2px solid #fff;box-shadow:0 0 0 2px #eee9ff;}
  .cnf-tl-item:nth-child(2)::before{animation:cnf-blink 1.8s ease-in-out infinite;}
  .cnf-tl-line{height:7px;border-radius:4px;background:#f1efe9;}

  /* 4. Inbound Prospects — new prospect capturing */
  .cnf-capture-wrap{position:relative;margin-top:16px;height:70px;}
  .cnf-capture-card{position:absolute;left:-60px;top:14px;width:70%;background:#fff;border:1px solid #e3ddff;border-radius:10px;padding:8px 10px;box-shadow:0 6px 14px -6px rgba(23,22,28,.2);display:flex;align-items:center;gap:7px;animation:cnf-slide-capture 2.4s ease-in-out infinite;}
  @keyframes cnf-slide-capture{0%{left:-60px;opacity:0;}35%,70%{left:8px;opacity:1;}100%{left:8px;opacity:1;}}

  /* 5. Call Recording — waveform + rec dot */
  .cnf-rec-wrap{display:flex;align-items:center;gap:10px;margin-top:16px;}
  .cnf-rec-dot{width:10px;height:10px;border-radius:50%;background:var(--cnf-coral);animation:cnf-blink 1.2s ease-in-out infinite;flex-shrink:0;}
  .cnf-wave{display:flex;align-items:center;gap:3px;height:26px;flex:1;}
  .cnf-wave span{width:3px;background:var(--cnf-indigo);border-radius:2px;animation:cnf-wave-move 1.4s ease-in-out infinite;}
  .cnf-wave span:nth-child(odd){animation-delay:.15s;}
  .cnf-wave span:nth-child(1){height:40%;}
  .cnf-wave span:nth-child(2){height:80%;}
  .cnf-wave span:nth-child(3){height:55%;}
  .cnf-wave span:nth-child(4){height:100%;}
  .cnf-wave span:nth-child(5){height:60%;}
  .cnf-wave span:nth-child(6){height:35%;}
  .cnf-wave span:nth-child(7){height:70%;}
  @keyframes cnf-wave-move{0%,100%{transform:scaleY(.6);}50%{transform:scaleY(1);}}

  /* 6. Caller Identification — incoming call matched to contact */
  .cnf-caller-wrap{display:flex;align-items:center;gap:10px;margin-top:16px;}
  .cnf-caller-ico{width:38px;height:38px;border-radius:50%;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;animation:cnf-blink 1.4s ease-in-out infinite;}

  /* 7. Intelligent Call Routing — routing path */
  .cnf-route-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .cnf-route-call{width:38px;height:38px;border-radius:9px;background:var(--cnf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .cnf-route-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .cnf-route-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--cnf-indigo);animation:cnf-travel 2s ease-in-out infinite;}
  @keyframes cnf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .cnf-route-person{width:38px;height:38px;border-radius:50%;background:#4b3fe4;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 8. CRM Screen Pop — profile card popping up */
  .cnf-pop-top{display:flex;align-items:center;gap:10px;animation:cnf-pop-in 2.2s ease-in-out infinite;}
  @keyframes cnf-pop-in{0%{transform:scale(.94);opacity:.7;}30%,100%{transform:scale(1);opacity:1;}}
  .cnf-pop-av{width:38px;height:38px;border-radius:50%;background:var(--cnf-coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
  .cnf-pop-fields{display:flex;gap:20px;margin-top:12px;padding-top:10px;border-top:1px solid #f1efe9;}

  /* 9. Missed Call Tracking — missed calls with follow-up */
  .cnf-missed-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .cnf-missed-badge{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;background:#ffe6dd;color:var(--cnf-coral);}
  .cnf-missed-followup{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;background:#e6f3ec;color:var(--cnf-mint);}

  /* 10. Live Call Analytics — dark AI panel with stats */
  .cnf-track-wrap{display:flex;justify-content:space-between;margin-top:14px;text-align:center;}
  .cnf-track-stat{flex:1;}
  .cnf-track-num{font-family:'Sora',sans-serif;font-size:17px;font-weight:700;color:#e4e1f2;}
  .cnf-track-live{display:flex;align-items:center;gap:6px;margin-top:12px;}
  .cnf-track-dot{width:7px;height:7px;border-radius:50%;background:var(--cnf-mint);animation:cnf-blink 1.4s ease-in-out infinite;}

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

  @media (prefers-reduced-motion:reduce){
    .cnf-root *{animation:none !important;transition:none !important;}
  }

  /* auto-dialer */

@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:78 100}}
@keyframes growProgress{0%{width:0%}100%{width:57%}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.auto-dialercard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.ad1-head{display:flex;align-items:center;justify-content:space-between;}
.ad1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-start{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ad1-stats{display:flex;gap:8px;margin-top:11px;}
.ad1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.ad1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ad1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ad1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ad1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.ad1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ad1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ad1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.ad1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ad1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-th-contact{flex:1.7;}
.ad1-th-number{flex:1.5;}
.ad1-th-attempt{flex:1.1;}
.ad1-th-status{flex:1.1;text-align:right;}

.ad1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-row-a{animation-name:slideIn;animation-delay:.9s;}
.ad1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.ad1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.ad1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.ad1-contact{flex:1.7;font-weight:600;display:flex;align-items:center;gap:6px;}
.ad1-avatar-a{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-avatar-b{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-avatar-c{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-avatar-d{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ad1-number{flex:1.5;color:#7a726e;font-size:9.5px;}
.ad1-attempt{flex:1.1;color:#7a726e;font-size:9.5px;}

.ad1-status{flex:1.1;text-align:right;}
.ad1-status-queued{display:inline-block;background:#f1ece9;color:#7a726e;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-status-dialing{display:inline-flex;align-items:center;gap:3px;background:#fdece3;color:#c14a1c;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-status-connected{display:inline-block;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-status-noanswer{display:inline-block;background:#f1ece9;color:#7a726e;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad1-dialing-dot{width:5px;height:5px;background:#e0561f;border-radius:50%;display:inline-block;animation:pulseLive 1s ease-in-out infinite;}

.ad1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.auto-dialercard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.ad2-head{display:flex;align-items:center;justify-content:space-between;}
.ad2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ad2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.ad2-donut-wrap{position:relative;width:62px;height:62px;flex-shrink:0;}
.ad2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.ad2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.ad2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ad2-donut-value{font-size:13px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ad2-score-info{flex:1;}
.ad2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad2-score-line{font-size:9.5px;color:#5d5451;margin-top:4px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.ad2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.ad2-campaignbox{background:#181114;padding:12px 14px;margin-top:12px;}
.ad2-campaign-toprow{display:flex;align-items:center;justify-content:space-between;}
.ad2-campaign-name{font-size:10.5px;font-weight:700;color:#ffffff;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad2-campaign-count{font-size:9px;color:#a8a19d;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ad2-progress-track{height:6px;background:#3c332e;margin-top:9px;}
.ad2-progress-fill{height:6px;background:#e0561f;width:0%;animation:growProgress 1.2s cubic-bezier(.3,.7,.2,1) .6s forwards;}
.ad2-progress-label{display:flex;align-items:center;justify-content:space-between;margin-top:7px;}
.ad2-progress-pct{font-size:9.5px;color:#ff9a63;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ad2-pause-btn{background:#2a231f;color:#e8e3df;font-size:8.5px;font-weight:700;padding:4px 10px;opacity:0;animation:chipPop .4s ease-out 1.5s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ad2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

.ocf-root{
    --ocf-ink:#17161c;
    --ocf-sub:#6b6878;
    --ocf-line:#eeece7;
    --ocf-paper:#faf9f6;
    --ocf-card:#ffffff;
    --ocf-indigo:#4b3fe4;
    --ocf-coral:#ff6b4a;
    --ocf-mint:#28a06b;
    --ocf-amber:#e6a23c;
    --ocf-tint-peach:#fbeadf;
    --ocf-tint-navy:#f2f1f6;
    --ocf-tint-mint:#e6f3ec;
    --ocf-tint-lav:#eeeafc;
    --ocf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
   
    color:var(--ocf-ink);
    p
    box-sizing:border-box;
  }
  .ocf-root *{box-sizing:border-box;}
  .ocf-wrap{max-width:1160px;margin:0 auto;}

  .ocf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:start;
  }
  .ocf-card{
    background:var(--ocf-card);
    border:1px solid var(--ocf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .ocf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .ocf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .ocf-tint-peach{background:var(--ocf-tint-peach);}
  .ocf-tint-navy{background:var(--ocf-tint-navy);}
  .ocf-tint-mint{background:var(--ocf-tint-mint);}
  .ocf-tint-lav{background:var(--ocf-tint-lav);}
  .ocf-tint-sky{background:var(--ocf-tint-sky);}

  .ocf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .ocf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .ocf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .ocf-dot{width:8px;height:8px;border-radius:50%;}
  .ocf-dot--r{background:#f0665a;}
  .ocf-dot--y{background:#f0b64a;}
  .ocf-dot--g{background:#57c26a;}
  .ocf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .ocf-window--dark .ocf-chrome-bar{background:rgba(255,255,255,.14);}

  .ocf-body{
    padding:32px 28px 34px;
  }
  .ocf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .ocf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--ocf-sub);
    margin:0;
  }

  .ocf-benefits-label{
     font-size: 16px !important;
    font-weight: 700;
    color: #eb4d00 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 25px 0 25px !important;
    padding-top: 30px !important;
    border-top: 1px solid #eee9f3;
  }
  .ocf-benefits{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 18px;
  }
  .ocf-benefits li{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    line-height:1.35;
    color:#332f45;
    font-weight:500;
  }
  .ocf-benefits li::before{
    content:"✓";
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#eee9ff;
    color:var(--ocf-indigo);
    font-weight:700;
    font-size:9px;
    flex-shrink:0;
  }

  .ocf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .ocf-window--dark .ocf-label{color:#a9a4c4;}
  .ocf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .ocf-ai-badge{
    font-size:9px;font-weight:700;color:var(--ocf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes ocf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Smart Outbound Calling — auto-dialer cycling numbers */
  .ocf-dial-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .ocf-dial-ico{width:38px;height:38px;border-radius:50%;background:var(--ocf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;animation:ocf-blink 1.4s ease-in-out infinite;}
  .ocf-dial-num{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#241f2e;}
  .ocf-dial-queue{margin-top:14px;display:flex;gap:6px;}
  .ocf-dial-queue span{font-size:9.5px;font-weight:600;padding:3px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .ocf-dial-queue span.ocf-next{background:var(--ocf-indigo);color:#fff;}

  /* 2. Intelligent Inbound Call Handling — incoming call with customer info */
  .ocf-call-card{margin-top:12px;background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:9px;}
  .ocf-call-pulse{width:10px;height:10px;border-radius:50%;background:var(--ocf-mint);animation:ocf-blink 1.4s ease-in-out infinite;flex-shrink:0;}

  /* 3. Missed Call Notifications — bell + toast */
  .ocf-bell{width:34px;height:34px;border-radius:10px;background:#ffe6dd;display:flex;align-items:center;justify-content:center;position:relative;margin-top:6px;}
  .ocf-bell-badge{position:absolute;top:-4px;right:-4px;width:15px;height:15px;border-radius:50%;background:var(--ocf-coral);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:ocf-blink 1.8s ease-in-out infinite;}
  .ocf-toast{margin-top:12px;background:#fff;border:1px solid #f2e2da;border-radius:10px;padding:8px 10px;display:flex;gap:8px;align-items:flex-start;box-shadow:0 6px 14px -8px rgba(23,22,28,.2);animation:ocf-slide-in 2.6s ease-in-out infinite;}
  @keyframes ocf-slide-in{0%{transform:translateX(-8px);opacity:0;}18%{transform:translateX(0);opacity:1;}82%{opacity:1;}100%{opacity:0;}}

  /* 4. Smart Call Tagging — tag chips */
  .ocf-tagrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;height:100%;align-content:center;}
  .ocf-tag{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:100px;animation:ocf-pop 2.4s ease-in-out infinite;}
  .ocf-tag:nth-child(1){background:#eee9ff;color:var(--ocf-indigo);animation-delay:0s;}
  .ocf-tag:nth-child(2){background:#ffe6dd;color:var(--ocf-coral);animation-delay:.25s;}
  .ocf-tag:nth-child(3){background:#e6f3ec;color:var(--ocf-mint);animation-delay:.5s;}
  .ocf-tag:nth-child(4){background:#fdf1da;color:var(--ocf-amber);animation-delay:.75s;}
  @keyframes ocf-pop{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}

  /* 5. Call Control & Muting — mute toggle */
  .ocf-mute-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;}
  .ocf-mute-btn{width:48px;height:48px;border-radius:50%;background:var(--ocf-coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;animation:ocf-pop2 2.2s ease-in-out infinite;}
  @keyframes ocf-pop2{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}

  /* 6. Call Recording & Playback — waveform + play */
  .ocf-rec-wrap{display:flex;align-items:center;gap:10px;margin-top:16px;}
  .ocf-play-btn{width:32px;height:32px;border-radius:50%;background:var(--ocf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
  .ocf-wave{display:flex;align-items:center;gap:3px;height:26px;flex:1;}
  .ocf-wave span{width:3px;background:var(--ocf-indigo);border-radius:2px;animation:ocf-wave-move 1.4s ease-in-out infinite;}
  .ocf-wave span:nth-child(odd){animation-delay:.15s;}
  .ocf-wave span:nth-child(1){height:40%;}
  .ocf-wave span:nth-child(2){height:80%;}
  .ocf-wave span:nth-child(3){height:55%;}
  .ocf-wave span:nth-child(4){height:100%;}
  .ocf-wave span:nth-child(5){height:60%;}
  .ocf-wave span:nth-child(6){height:35%;}
  .ocf-wave span:nth-child(7){height:70%;}
  @keyframes ocf-wave-move{0%,100%{transform:scaleY(.6);}50%{transform:scaleY(1);}}

  /* 7. Detailed Call Logs — log rows */
  .ocf-log-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .ocf-log-code{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:6px;}
  .ocf-log-in{background:#e6f3ec;color:var(--ocf-mint);}
  .ocf-log-out{background:#eee9ff;color:var(--ocf-indigo);}

  /* 8. Quick Call Wrap-Up — notes form */
  .ocf-wrap-box{margin-top:12px;background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:10px 12px;}
  .ocf-wrap-line{height:7px;border-radius:4px;background:#eee9ff;margin-bottom:6px;width:0;animation:ocf-typefill 2.6s ease-in-out infinite;}
  .ocf-wrap-line:nth-child(2){animation-delay:.25s;}
  @keyframes ocf-typefill{0%{width:0;}50%,100%{width:85%;}}
  .ocf-wrap-save{margin-top:8px;font-size:10px;font-weight:700;padding:5px 11px;border-radius:100px;background:var(--ocf-indigo);color:#fff;display:inline-block;}

  /* 9. Real-Time Call Reporting — dark panel with stats */
  .ocf-track-wrap{display:flex;justify-content:space-between;margin-top:14px;text-align:center;}
  .ocf-track-stat{flex:1;}
  .ocf-track-num{font-family:'Sora',sans-serif;font-size:17px;font-weight:700;color:#e4e1f2;}
  .ocf-track-live{display:flex;align-items:center;gap:6px;margin-top:12px;}
  .ocf-track-dot{width:7px;height:7px;border-radius:50%;background:var(--ocf-mint);animation:ocf-blink 1.4s ease-in-out infinite;}

  /* 10. Automatic Call Queue Management — queue list */
  .ocf-queue-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .ocf-queue-pos{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:100px;background:#eee9ff;color:var(--ocf-indigo);}
  .ocf-queue-pos.ocf-next2{background:var(--ocf-mint);color:#fff;animation:ocf-blink 1.8s ease-in-out infinite;}

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

  @media (prefers-reduced-motion:reduce){
    .ocf-root *{animation:none !important;transition:none !important;}
  }

  /* voicemail-drops */

    .vmf-root{
    --vmf-ink:#17161c;
    --vmf-sub:#6b6878;
    --vmf-line:#eeece7;
    --vmf-paper:#faf9f6;
    --vmf-card:#ffffff;
    --vmf-indigo:#4b3fe4;
    --vmf-coral:#ff6b4a;
    --vmf-mint:#28a06b;
    --vmf-amber:#e6a23c;
    --vmf-tint-peach:#fbeadf;
    --vmf-tint-navy:#f2f1f6;
    --vmf-tint-mint:#e6f3ec;
    --vmf-tint-lav:#eeeafc;
    --vmf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
   
    color:var(--vmf-ink);
   
    box-sizing:border-box;
  }
  .vmf-root *{box-sizing:border-box;}
  .vmf-wrap{max-width:1160px;margin:0 auto;}

  .vmf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:start;
  }
  .vmf-card{
    background:var(--vmf-card);
    border:1px solid var(--vmf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .vmf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .vmf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .vmf-tint-peach{background:var(--vmf-tint-peach);}
  .vmf-tint-navy{background:var(--vmf-tint-navy);}
  .vmf-tint-mint{background:var(--vmf-tint-mint);}
  .vmf-tint-lav{background:var(--vmf-tint-lav);}
  .vmf-tint-sky{background:var(--vmf-tint-sky);}

  .vmf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .vmf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .vmf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .vmf-dot{width:8px;height:8px;border-radius:50%;}
  .vmf-dot--r{background:#f0665a;}
  .vmf-dot--y{background:#f0b64a;}
  .vmf-dot--g{background:#57c26a;}
  .vmf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .vmf-window--dark .vmf-chrome-bar{background:rgba(255,255,255,.14);}

  .vmf-body{
    padding:32px 28px 34px;
  }
  .vmf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .vmf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--vmf-sub);
    margin:0;
  }

  .vmf-benefits-label{
    font-size:10.5px;
    font-weight:700;
    color:#a39ecf;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:20px 0 20px !important;
    padding-top:12px;
    border-top:1px solid #eee9f3;
  }
  .vmf-benefits{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 18px;
  }
  .vmf-benefits li{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    line-height:1.35;
    color:#332f45;
    font-weight:500;
  }
  .vmf-benefits li::before{
    content:"✓";
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#eee9ff;
    color:var(--vmf-indigo);
    font-weight:700;
    font-size:9px;
    flex-shrink:0;
  }

  .vmf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .vmf-window--dark .vmf-label{color:#a9a4c4;}
  .vmf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .vmf-ai-badge{
    font-size:9px;font-weight:700;color:var(--vmf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes vmf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Automated Voicemail Delivery — voicemail dropping into unanswered call */
  .vmf-drop-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .vmf-drop-ico{width:38px;height:38px;border-radius:50%;background:var(--vmf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;animation:vmf-drop-bounce 2s ease-in-out infinite;}
  @keyframes vmf-drop-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

  /* 2. Personalized Voice Messages — message variant chips */
  .vmf-msg-list{margin-top:14px;}
  .vmf-msg-row{display:flex;align-items:center;justify-content:space-between;background:#faf9ff;border:1px solid #eee9ff;border-radius:8px;padding:6px 10px;margin-bottom:7px;}
  .vmf-msg-row.vmf-active{border-color:var(--vmf-indigo);background:#f5f3ff;animation:vmf-blink 2.2s ease-in-out infinite;}

  /* 3. One-Click Voicemail Drop — button click animation */
  .vmf-click-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;}
  .vmf-click-btn{width:48px;height:48px;border-radius:50%;background:var(--vmf-mint);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;animation:vmf-pop 2.2s ease-in-out infinite;}
  @keyframes vmf-pop{0%,100%{transform:scale(1);}40%{transform:scale(1.15);}}

  /* 4. Campaign-Based Voicemail Drops — campaign assigning message */
  .vmf-camp-row{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
  .vmf-camp-tag{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;background:#eee9ff;color:var(--vmf-indigo);}

  /* 5. Voicemail Scheduling — clock + schedule chips */
  .vmf-sched-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .vmf-sched-clock{width:36px;height:36px;border-radius:50%;border:2px solid var(--vmf-indigo);position:relative;flex-shrink:0;}
  .vmf-sched-clock::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;background:var(--vmf-indigo);transform-origin:left center;animation:vmf-tick 3s linear infinite;}
  @keyframes vmf-tick{to{transform:translate(0,-50%) rotate(360deg);}}
  .vmf-sched-chip{display:flex;gap:5px;margin-top:12px;}
  .vmf-sched-chip span{font-size:10px;font-weight:600;padding:4px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .vmf-sched-chip span.vmf-on{background:var(--vmf-indigo);color:#fff;}

  /* 6. CRM Contact Integration — linked contact node */
  .vmf-link-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .vmf-link-mail{width:38px;height:38px;border-radius:9px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
  .vmf-link-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .vmf-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--vmf-indigo);animation:vmf-travel 2s ease-in-out infinite;}
  @keyframes vmf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .vmf-link-contact{width:38px;height:38px;border-radius:50%;background:var(--vmf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 7. Message Performance Tracking — bar chart */
  .vmf-chart-wrap{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:16px;}
  .vmf-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:vmf-bar-grow 2.6s ease-in-out infinite;}
  .vmf-bar:nth-child(4){background:var(--vmf-indigo);}
  .vmf-bar:nth-child(5){background:var(--vmf-mint);}
  .vmf-bar:nth-child(1){animation-delay:0s;}
  .vmf-bar:nth-child(2){animation-delay:.15s;}
  .vmf-bar:nth-child(3){animation-delay:.3s;}
  .vmf-bar:nth-child(4){animation-delay:.45s;}
  .vmf-bar:nth-child(5){animation-delay:.6s;}
  @keyframes vmf-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

  /* 8. AI Message Suggestions — dark AI panel */
  .vmf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .vmf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--vmf-coral);margin-top:4px;flex-shrink:0;}
  .vmf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:vmf-blink 2s ease-in-out infinite;}

  /* 9. Voicemail History — timeline */
  .vmf-timeline{position:relative;padding-left:16px;margin-top:8px;}
  .vmf-timeline::before{content:"";position:absolute;left:4px;top:2px;bottom:2px;width:2px;background:#eee9ff;}
  .vmf-tl-item{position:relative;margin-bottom:12px;}
  .vmf-tl-item::before{content:"";position:absolute;left:-16px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--vmf-indigo);border:2px solid #fff;box-shadow:0 0 0 2px #eee9ff;}
  .vmf-tl-item:nth-child(2)::before{animation:vmf-blink 1.8s ease-in-out infinite;}
  .vmf-tl-line{height:7px;border-radius:4px;background:#f1efe9;}

  /* 10. Secure Voicemail Management — lock + permission chips */
  .vmf-secure-wrap{display:flex;align-items:center;gap:12px;margin-top:14px;}
  .vmf-lock{width:38px;height:38px;border-radius:10px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
  .vmf-secure-perm{margin-top:12px;display:flex;gap:6px;}
  .vmf-secure-perm span{font-size:10px;font-weight:600;padding:3px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .vmf-secure-perm span.vmf-on{background:var(--vmf-mint);color:#fff;}

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

  @media (prefers-reduced-motion:reduce){
    .vmf-root *{animation:none !important;transition:none !important;}
  }

  /* call-recording */


@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:22 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes waveBar1{0%,100%{height:6px}50%{height:18px}}
@keyframes waveBar2{0%,100%{height:14px}50%{height:24px}}
@keyframes waveBar3{0%,100%{height:9px}50%{height:20px}}
@keyframes waveBar4{0%,100%{height:20px}50%{height:10px}}
@keyframes waveBar5{0%,100%{height:12px}50%{height:22px}}
@keyframes waveBar6{0%,100%{height:17px}50%{height:8px}}
@keyframes waveBar7{0%,100%{height:8px}50%{height:19px}}
@keyframes waveBar8{0%,100%{height:15px}50%{height:6px}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.voicemail-dropscard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.vd1-head{display:flex;align-items:center;justify-content:space-between;}
.vd1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vd1-stats{display:flex;gap:8px;margin-top:11px;}
.vd1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.vd1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.vd1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.vd1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.vd1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.vd1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vd1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vd1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.vd1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vd1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-th-contact{flex:1.7;}
.vd1-th-template{flex:1.7;}
.vd1-th-time{flex:1;text-align:right;}
.vd1-th-status{flex:1.3;text-align:right;}

.vd1-row{display:flex;align-items:center;font-size:9.5px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-row-a{animation-name:slideIn;animation-delay:.9s;}
.vd1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.vd1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.vd1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.vd1-contact{flex:1.7;font-weight:600;display:flex;align-items:center;gap:6px;}
.vd1-avatar-a{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-avatar-b{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-avatar-c{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-avatar-d{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vd1-template{flex:1.7;color:#7a726e;font-size:9px;}
.vd1-time{flex:1;text-align:right;color:#7a726e;font-size:9px;}

.vd1-status{flex:1.3;text-align:right;}
.vd1-status-delivered{display:inline-block;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd1-status-callback{display:inline-block;background:#fdece3;color:#c14a1c;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vd1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.voicemail-dropscard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.vd2-head{display:flex;align-items:center;justify-content:space-between;}
.vd2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vd2-scorebox{background:#f7f4f1;padding:10px 12px;margin-top:12px;display:flex;align-items:center;gap:14px;}
.vd2-donut-wrap{position:relative;width:60px;height:60px;flex-shrink:0;}
.vd2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.vd2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.vd2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.vd2-donut-value{font-size:12.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd2-donut-label{font-size:8px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vd2-score-info{flex:1;}
.vd2-score-title{font-size:11px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd2-score-line{font-size:9.5px;color:#5d5451;margin-top:4px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.vd2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.vd2-playerbox{background:#181114;padding:12px 14px;margin-top:12px;}
.vd2-player-toprow{display:flex;align-items:center;justify-content:space-between;}
.vd2-player-name{font-size:10.5px;font-weight:700;color:#ffffff;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vd2-player-dur{font-size:9px;color:#a8a19d;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vd2-player-row{display:flex;align-items:center;gap:10px;margin-top:10px;}
.vd2-play-btn{width:28px;height:28px;border-radius:50%;background:#e0561f;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.vd2-wave{display:flex;align-items:center;gap:3px;height:24px;flex:1;}
.vd2-wave span{width:3px;background:#e0561f;display:inline-block;border-radius:1px;}
.vd2-w1{animation:waveBar1 1.1s ease-in-out infinite;}
.vd2-w2{animation:waveBar2 1.3s ease-in-out infinite;}
.vd2-w3{animation:waveBar3 .9s ease-in-out infinite;}
.vd2-w4{animation:waveBar4 1.2s ease-in-out infinite;}
.vd2-w5{animation:waveBar5 1s ease-in-out infinite;}
.vd2-w6{animation:waveBar6 1.4s ease-in-out infinite;}
.vd2-w7{animation:waveBar7 1.05s ease-in-out infinite;}
.vd2-w8{animation:waveBar8 1.25s ease-in-out infinite;}

.vd2-use-btn{background:#ffffff;color:#181114;font-size:9px;font-weight:700;padding:5px 11px;flex-shrink:0;opacity:0;animation:chipPop .4s ease-out 1.4s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vd2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

/* call-recording */

  .crf-root{
    --crf-ink:#17161c;
    --crf-sub:#6b6878;
    --crf-line:#eeece7;
    --crf-paper:#faf9f6;
    --crf-card:#ffffff;
    --crf-indigo:#4b3fe4;
    --crf-coral:#ff6b4a;
    --crf-mint:#28a06b;
    --crf-amber:#e6a23c;
    --crf-tint-peach:#fbeadf;
    --crf-tint-navy:#f2f1f6;
    --crf-tint-mint:#e6f3ec;
    --crf-tint-lav:#eeeafc;
    --crf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--crf-ink);
    
    box-sizing:border-box;
  }
  .crf-root *{box-sizing:border-box;}
  .crf-wrap{max-width:1160px;margin:0 auto;}

  .crf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .crf-card{
    background:var(--crf-card);
    border:1px solid var(--crf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .crf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .crf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .crf-tint-peach{background:var(--crf-tint-peach);}
  .crf-tint-navy{background:var(--crf-tint-navy);}
  .crf-tint-mint{background:var(--crf-tint-mint);}
  .crf-tint-lav{background:var(--crf-tint-lav);}
  .crf-tint-sky{background:var(--crf-tint-sky);}

  .crf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .crf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .crf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .crf-dot{width:8px;height:8px;border-radius:50%;}
  .crf-dot--r{background:#f0665a;}
  .crf-dot--y{background:#f0b64a;}
  .crf-dot--g{background:#57c26a;}
  .crf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .crf-window--dark .crf-chrome-bar{background:rgba(255,255,255,.14);}

  .crf-body{
    padding:32px 28px 34px;
  }
  .crf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .crf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--crf-sub);
    margin:0;
  }

  .crf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .crf-window--dark .crf-label{color:#a9a4c4;}
  .crf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .crf-ai-badge{
    font-size:9px;font-weight:700;color:var(--crf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes crf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Smart Call Recording — waveform with rec dot */
  .crf-rec-wrap{display:flex;align-items:center;gap:10px;margin-top:16px;}
  .crf-rec-dot{width:10px;height:10px;border-radius:50%;background:var(--crf-coral);animation:crf-blink 1.2s ease-in-out infinite;flex-shrink:0;}
  .crf-wave{display:flex;align-items:center;gap:3px;height:26px;flex:1;}
  .crf-wave span{width:3px;background:var(--crf-indigo);border-radius:2px;animation:crf-wave-move 1.4s ease-in-out infinite;}
  .crf-wave span:nth-child(odd){animation-delay:.15s;}
  .crf-wave span:nth-child(1){height:40%;}
  .crf-wave span:nth-child(2){height:80%;}
  .crf-wave span:nth-child(3){height:55%;}
  .crf-wave span:nth-child(4){height:100%;}
  .crf-wave span:nth-child(5){height:60%;}
  .crf-wave span:nth-child(6){height:35%;}
  .crf-wave span:nth-child(7){height:70%;}
  @keyframes crf-wave-move{0%,100%{transform:scaleY(.6);}50%{transform:scaleY(1);}}

  /* 2. Call Quality Monitoring — score card */
  .crf-score-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .crf-score-ring{width:44px;height:44px;border-radius:50%;background:conic-gradient(var(--crf-indigo) 0% 88%, #eee9ff 88% 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .crf-score-ring span{width:34px;height:34px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#241f2e;}
  .crf-stars{margin-top:4px;color:var(--crf-amber);font-size:12px;letter-spacing:1px;}

  /* 3. Dispute Resolution — playback with timestamp marker */
  .crf-dispute-wrap{margin-top:16px;}
  .crf-dispute-bar{height:6px;border-radius:3px;background:#f1efe9;position:relative;}
  .crf-dispute-fill{height:100%;width:45%;background:var(--crf-indigo);border-radius:3px;}
  .crf-dispute-marker{position:absolute;top:-4px;left:45%;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--crf-coral);animation:crf-blink 2s ease-in-out infinite;}
  .crf-dispute-time{display:flex;justify-content:space-between;margin-top:14px;}

  /* 4. Automatic Call Transcription — transcript lines typing in */
  .crf-trans-line{height:7px;border-radius:4px;background:#f1efe9;margin-top:10px;width:0;animation:crf-typefill 2.6s ease-in-out infinite;}
  .crf-trans-line:nth-child(2){animation-delay:.3s;}
  .crf-trans-line:nth-child(3){animation-delay:.6s;}
  @keyframes crf-typefill{0%{width:0;background:#f1efe9;}45%{width:88%;background:#e3ddff;}70%,100%{width:88%;background:#e3ddff;}}

  /* 5. Secure Cloud Storage — lock + cloud */
  .crf-cloud-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;}
  .crf-cloud-ico{width:44px;height:44px;border-radius:12px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:20px;animation:crf-float 2.6s ease-in-out infinite;}
  @keyframes crf-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

  /* 6. Advanced Recording Search — search + filter chips */
  .crf-search-bar{background:#faf9ff;border:1px solid #e3ddff;border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:6px;font-size:11px;color:#8a8696;}
  .crf-filter-chips{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;}
  .crf-filter-chips span{font-size:10px;font-weight:600;padding:3px 9px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .crf-filter-chips span.crf-active{background:var(--crf-indigo);color:#fff;animation:crf-blink 2s ease-in-out infinite;}

  /* 7. CRM Recording Integration — recording linked to contact */
  .crf-link-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .crf-link-rec{width:38px;height:38px;border-radius:9px;background:var(--crf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .crf-link-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .crf-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--crf-indigo);animation:crf-travel 2s ease-in-out infinite;}
  @keyframes crf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .crf-link-contact{width:38px;height:38px;border-radius:50%;background:var(--crf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 8. AI Conversation Insights — dark AI panel */
  .crf-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .crf-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--crf-coral);margin-top:4px;flex-shrink:0;}
  .crf-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:crf-blink 2s ease-in-out infinite;}

  /* 9. Recording Sharing & Collaboration — avatars sharing */
  .crf-share-avs{display:flex;margin-top:14px;}
  .crf-share-avs .crf-avatar{margin-left:-6px;}
  .crf-share-avs .crf-avatar:first-child{margin-left:0;}
  .crf-share-note{margin-top:12px;background:#faf9ff;border:1px solid #eee9ff;border-radius:8px;padding:8px 10px;font-size:10.5px;color:#3a3550;}

  /* 10. Recording Analytics & Reports — bar chart */
  .crf-chart-wrap{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:16px;}
  .crf-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:crf-bar-grow 2.6s ease-in-out infinite;}
  .crf-bar:nth-child(4){background:var(--crf-indigo);}
  .crf-bar:nth-child(5){background:var(--crf-mint);}
  .crf-bar:nth-child(1){animation-delay:0s;}
  .crf-bar:nth-child(2){animation-delay:.15s;}
  .crf-bar:nth-child(3){animation-delay:.3s;}
  .crf-bar:nth-child(4){animation-delay:.45s;}
  .crf-bar:nth-child(5){animation-delay:.6s;}
  @keyframes crf-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

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

  @media (prefers-reduced-motion:reduce){
    .crf-root *{animation:none !important;transition:none !important;}
  }


@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:84 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes waveBar1{0%,100%{height:6px}50%{height:18px}}
@keyframes waveBar2{0%,100%{height:14px}50%{height:24px}}
@keyframes waveBar3{0%,100%{height:9px}50%{height:20px}}
@keyframes waveBar4{0%,100%{height:20px}50%{height:10px}}
@keyframes waveBar5{0%,100%{height:12px}50%{height:22px}}
@keyframes waveBar6{0%,100%{height:17px}50%{height:8px}}
@keyframes waveBar7{0%,100%{height:8px}50%{height:19px}}
@keyframes waveBar8{0%,100%{height:15px}50%{height:6px}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.call-recordingcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.cr1-head{display:flex;align-items:center;justify-content:space-between;}
.cr1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr1-rec{display:flex;align-items:center;gap:5px;background:#fbe8e8;color:#c93030;font-size:10px;font-weight:700;padding:4px 9px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr1-rec-dot{width:6px;height:6px;background:#c93030;border-radius:50%;display:inline-block;animation:pulseLive 1.4s ease-in-out infinite;}

.cr1-stats{display:flex;gap:8px;margin-top:11px;}
.cr1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.cr1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.cr1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.cr1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.cr1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.cr1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cr1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cr1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.cr1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cr1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr1-th-contact{flex:1.9;}
.cr1-th-duration{flex:1.1;text-align:right;}
.cr1-th-date{flex:1.1;text-align:right;}
.cr1-th-status{flex:1.3;text-align:right;}

.cr1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr1-row-a{animation-name:slideIn;animation-delay:.9s;}
.cr1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.cr1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.cr1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.cr1-contact{flex:1.9;font-weight:600;display:flex;align-items:center;gap:6px;}
.cr1-play-a{width:17px;height:17px;border-radius:50%;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.cr1-play-b{width:17px;height:17px;border-radius:50%;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;}
.cr1-play-c{width:17px;height:17px;border-radius:50%;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;}
.cr1-play-d{width:17px;height:17px;border-radius:50%;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;}

.cr1-duration{flex:1.1;text-align:right;color:#7a726e;font-size:9.5px;}
.cr1-date{flex:1.1;text-align:right;color:#7a726e;font-size:9.5px;}

.cr1-status{flex:1.3;text-align:right;}
.cr1-status-transcribed{display:inline-block;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr1-status-processing{display:inline-block;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cr1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.call-recordingcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.cr2-head{display:flex;align-items:center;justify-content:space-between;}
.cr2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cr2-scorebox{background:#f7f4f1;padding:9px 11px;margin-top:12px;display:flex;align-items:center;gap:12px;}
.cr2-donut-wrap{position:relative;width:56px;height:56px;flex-shrink:0;}
.cr2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.cr2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.cr2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.cr2-donut-value{font-size:11.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr2-donut-label{font-size:7.5px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cr2-score-info{flex:1;}
.cr2-score-title{font-size:10.5px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr2-score-line{font-size:9px;color:#5d5451;margin-top:3px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.cr2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.cr2-playerbox{background:#181114;padding:11px 13px;margin-top:12px;}
.cr2-player-toprow{display:flex;align-items:center;justify-content:space-between;}
.cr2-player-name{font-size:10px;font-weight:700;color:#ffffff;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cr2-player-dur{font-size:9px;color:#a8a19d;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cr2-player-row{display:flex;align-items:center;gap:9px;margin-top:8px;}
.cr2-play-btn{width:26px;height:26px;border-radius:50%;background:#e0561f;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cr2-wave{display:flex;align-items:center;gap:3px;height:22px;flex:1;}
.cr2-wave span{width:3px;background:#e0561f;display:inline-block;border-radius:1px;}
.cr2-w1{animation:waveBar1 1.1s ease-in-out infinite;}
.cr2-w2{animation:waveBar2 1.3s ease-in-out infinite;}
.cr2-w3{animation:waveBar3 .9s ease-in-out infinite;}
.cr2-w4{animation:waveBar4 1.2s ease-in-out infinite;}
.cr2-w5{animation:waveBar5 1s ease-in-out infinite;}
.cr2-w6{animation:waveBar6 1.4s ease-in-out infinite;}
.cr2-w7{animation:waveBar7 1.05s ease-in-out infinite;}
.cr2-w8{animation:waveBar8 1.25s ease-in-out infinite;}

.cr2-transcript{background:#241d19;padding:7px 9px;margin-top:9px;font-size:9px;color:#c9c2be;line-height:1.5;font-style:italic;opacity:0;animation:slideIn .5s ease-out 1.6s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cr2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

/* call-scripts */

 .scf-root{
    --scf-ink:#17161c;
    --scf-sub:#6b6878;
    --scf-line:#eeece7;
    --scf-paper:#faf9f6;
    --scf-card:#ffffff;
    --scf-indigo:#4b3fe4;
    --scf-coral:#ff6b4a;
    --scf-mint:#28a06b;
    --scf-amber:#e6a23c;
    --scf-tint-peach:#fbeadf;
    --scf-tint-navy:#f2f1f6;
    --scf-tint-mint:#e6f3ec;
    --scf-tint-lav:#eeeafc;
    --scf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
   
    color:var(--scf-ink);
   
    box-sizing:border-box;
  }
  .scf-root *{box-sizing:border-box;}
  .scf-wrap{max-width:1160px;margin:0 auto;}

  .scf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:start;
  }
  .scf-card{
    background:var(--scf-card);
    border:1px solid var(--scf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .scf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .scf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .scf-tint-peach{background:var(--scf-tint-peach);}
  .scf-tint-navy{background:var(--scf-tint-navy);}
  .scf-tint-mint{background:var(--scf-tint-mint);}
  .scf-tint-lav{background:var(--scf-tint-lav);}
  .scf-tint-sky{background:var(--scf-tint-sky);}

  .scf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .scf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .scf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .scf-dot{width:8px;height:8px;border-radius:50%;}
  .scf-dot--r{background:#f0665a;}
  .scf-dot--y{background:#f0b64a;}
  .scf-dot--g{background:#57c26a;}
  .scf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .scf-window--dark .scf-chrome-bar{background:rgba(255,255,255,.14);}

  .scf-body{
    padding:32px 28px 34px;
  }
  .scf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .scf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--scf-sub);
    margin:0;
  }

  .scf-benefits-label{
    font-size:10.5px;
    font-weight:700;
    color:#a39ecf;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:20px 0 20px !important;
    padding-top:12px;
    border-top:1px solid #eee9f3;
  }
  .scf-benefits{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 18px;
  }
  .scf-benefits li{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    line-height:1.35;
    color:#332f45;
    font-weight:500;
  }
  .scf-benefits li::before{
    content:"✓";
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#eee9ff;
    color:var(--scf-indigo);
    font-weight:700;
    font-size:9px;
    flex-shrink:0;
  }

  .scf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .scf-window--dark .scf-label{color:#a9a4c4;}
  .scf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .scf-ai-badge{
    font-size:9px;font-weight:700;color:var(--scf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes scf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Smart Script Builder — draggable script blocks */
  .scf-build-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .scf-build-handle{color:#c3bdf0;font-size:11px;}
  .scf-build-pill{flex:1;font-size:11px;font-weight:600;padding:6px 10px;border-radius:8px;background:#f6f4ff;color:#3a3550;}
  .scf-build-pill.scf-dragging{border:1px dashed var(--scf-indigo);animation:scf-jiggle 1.6s ease-in-out infinite;}
  @keyframes scf-jiggle{0%,100%{transform:translateX(0);}25%{transform:translateX(2px);}75%{transform:translateX(-2px);}}

  /* 2. Custom Script Builder — section list editor */
  .scf-sec-row{display:flex;align-items:center;justify-content:space-between;background:#faf9ff;border:1px solid #eee9ff;border-radius:8px;padding:6px 10px;margin-top:8px;}

  /* 3. Dynamic Script Guidance — branching flow */
  .scf-flow-wrap{margin-top:14px;position:relative;}
  .scf-flow-node{background:#eee9ff;color:var(--scf-indigo);font-size:10.5px;font-weight:600;padding:6px 10px;border-radius:8px;display:inline-block;}
  .scf-flow-branch{display:flex;gap:8px;margin-top:8px;padding-left:14px;}
  .scf-flow-leaf{font-size:10px;padding:5px 9px;border-radius:8px;background:#f1efe9;color:#8a8696;}
  .scf-flow-leaf.scf-hit{background:var(--scf-mint);color:#fff;animation:scf-blink 1.8s ease-in-out infinite;}

  /* 4. Multi-Scenario Call Scripts — scenario tabs */
  .scf-tabs{display:flex;gap:6px;margin-top:14px;}
  .scf-tab{font-size:10px;font-weight:600;padding:5px 10px;border-radius:8px 8px 0 0;background:#f1efe9;color:#8a8696;}
  .scf-tab.scf-active{background:var(--scf-indigo);color:#fff;}
  .scf-tab-panel{background:#faf9ff;border:1px solid #eee9ff;border-radius:0 8px 8px 8px;padding:10px 12px;height:52px;}

  /* 5. Real-Time Script Suggestions — live suggestion toast */
  .scf-toast{margin-top:14px;background:#fff;border:1px solid #f2e2da;border-radius:10px;padding:9px 11px;display:flex;gap:8px;align-items:flex-start;box-shadow:0 6px 14px -8px rgba(23,22,28,.2);animation:scf-slide-in 2.6s ease-in-out infinite;}
  @keyframes scf-slide-in{0%{transform:translateX(-8px);opacity:0;}18%{transform:translateX(0);opacity:1;}82%{opacity:1;}100%{opacity:0;}}

  /* 6. Script Version Management — version stack */
  .scf-ver-stack{margin-top:12px;position:relative;}
  .scf-ver-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #eee9ff;border-radius:8px;padding:6px 10px;margin-bottom:6px;}
  .scf-ver-row.scf-current{border-color:var(--scf-indigo);background:#f5f3ff;animation:scf-blink 2s ease-in-out infinite;}
  .scf-ver-tag{font-size:10px;font-weight:700;color:var(--scf-indigo);}

  /* 7. CRM-Based Script Personalization — personalized fields */
  .scf-personal-line{font-size:11px;color:#3a3550;margin-top:10px;line-height:1.6;}
  .scf-token{background:#eee9ff;color:var(--scf-indigo);font-weight:600;padding:1px 6px;border-radius:5px;}

  /* 8. Call Outcome Prompts — outcome buttons */
  .scf-outcome-row{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap;}
  .scf-outcome-btn{font-size:10px;font-weight:600;padding:6px 11px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .scf-outcome-btn.scf-selected{background:var(--scf-mint);color:#fff;animation:scf-blink 2s ease-in-out infinite;}

  /* 9. Team Script Sharing — avatars + shared note */
  .scf-share-avs{display:flex;margin-top:14px;}
  .scf-share-avs .scf-avatar{margin-left:-6px;}
  .scf-share-avs .scf-avatar:first-child{margin-left:0;}
  .scf-share-note{margin-top:12px;background:#faf9ff;border:1px solid #eee9ff;border-radius:8px;padding:8px 10px;font-size:10.5px;color:#3a3550;}

  /* 10. Script Performance Analytics — bar chart */
  .scf-chart-wrap{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:16px;}
  .scf-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:scf-bar-grow 2.6s ease-in-out infinite;}
  .scf-bar:nth-child(4){background:var(--scf-indigo);}
  .scf-bar:nth-child(5){background:var(--scf-mint);}
  .scf-bar:nth-child(1){animation-delay:0s;}
  .scf-bar:nth-child(2){animation-delay:.15s;}
  .scf-bar:nth-child(3){animation-delay:.3s;}
  .scf-bar:nth-child(4){animation-delay:.45s;}
  .scf-bar:nth-child(5){animation-delay:.6s;}
  @keyframes scf-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

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

  @media (prefers-reduced-motion:reduce){
    .scf-root *{animation:none !important;transition:none !important;}
  }


@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:91 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes growStep{0%{width:0%}100%{width:60%}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.call-scriptscard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.cs1-head{display:flex;align-items:center;justify-content:space-between;}
.cs1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cs1-stats{display:flex;gap:8px;margin-top:11px;}
.cs1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.cs1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.cs1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.cs1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.cs1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.cs1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs1-val-b{font-size:14px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cs1-chg-a{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs1-chg-d{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cs1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.cs1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cs1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs1-th-script{flex:2;}
.cs1-th-category{flex:1.3;}
.cs1-th-uses{flex:1;text-align:right;}
.cs1-th-rate{flex:1.1;text-align:right;}

.cs1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs1-row-a{animation-name:slideIn;animation-delay:.9s;}
.cs1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.cs1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.cs1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.cs1-script{flex:2;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cs1-icon-doc-a{width:16px;height:18px;background:#fdece3;color:#c14a1c;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.cs1-icon-doc-b{width:16px;height:18px;background:#fdece3;color:#c14a1c;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0;animation:popIn .3s ease-out 1.07s forwards;}
.cs1-icon-doc-c{width:16px;height:18px;background:#fdece3;color:#c14a1c;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0;animation:popIn .3s ease-out 1.19s forwards;}
.cs1-icon-doc-d{width:16px;height:18px;background:#fdece3;color:#c14a1c;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0;animation:popIn .3s ease-out 1.31s forwards;}

.cs1-category{flex:1.3;color:#7a726e;font-size:9.5px;}
.cs1-uses{flex:1;text-align:right;color:#7a726e;font-size:9.5px;}

.cs1-rate{flex:1.1;text-align:right;font-weight:700;font-size:9.5px;}
.cs1-rate-high{color:#1f9d55;}
.cs1-rate-mid{color:#b5810f;}
.cs1-rate-low{color:#7a726e;}

.cs1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.call-scriptscard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.cs2-head{display:flex;align-items:center;justify-content:space-between;}
.cs2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cs2-scorebox{background:#f7f4f1;padding:9px 11px;margin-top:12px;display:flex;align-items:center;gap:12px;}
.cs2-donut-wrap{position:relative;width:56px;height:56px;flex-shrink:0;}
.cs2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.cs2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.cs2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.cs2-donut-value{font-size:11.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs2-donut-label{font-size:7.5px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cs2-score-info{flex:1;}
.cs2-score-title{font-size:10.5px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs2-score-sub{font-size:9px;color:#8a8280;margin-top:2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cs2-scriptbox{background:#181114;padding:12px 14px;margin-top:12px;}
.cs2-step-toprow{display:flex;align-items:center;justify-content:space-between;}
.cs2-step-label{font-size:9px;color:#a8a19d;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs2-progress-track{height:5px;background:#3c332e;flex:1;margin:0 10px;}
.cs2-progress-fill{height:5px;background:#e0561f;width:0%;animation:growStep 1.1s cubic-bezier(.3,.7,.2,1) .6s forwards;}

.cs2-step-title{font-size:12px;font-weight:700;color:#ffffff;margin-top:9px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs2-step-line{font-size:9.5px;color:#c9c2be;line-height:1.5;font-style:italic;margin-top:6px;opacity:0;animation:slideIn .5s ease-out 1.3s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cs2-nav-row{display:flex;gap:8px;margin-top:11px;}
.cs2-btn-prev{flex:1;background:#2a231f;color:#e8e3df;font-size:9.5px;font-weight:700;text-align:center;padding:6px 0;opacity:0;animation:chipPop .4s ease-out 1.6s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.cs2-btn-next{flex:1;background:#e0561f;color:#ffffff;font-size:9.5px;font-weight:700;text-align:center;padding:6px 0;opacity:0;animation:chipPop .4s ease-out 1.7s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.cs2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

/* post-call-automation */


  .poc-root{
    --poc-ink:#17161c;
    --poc-sub:#6b6878;
    --poc-line:#eeece7;
    --poc-paper:#faf9f6;
    --poc-card:#ffffff;
    --poc-indigo:#4b3fe4;
    --poc-coral:#ff6b4a;
    --poc-mint:#28a06b;
    --poc-amber:#e6a23c;
    --poc-tint-peach:#fbeadf;
    --poc-tint-navy:#f2f1f6;
    --poc-tint-mint:#e6f3ec;
    --poc-tint-lav:#eeeafc;
    --poc-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
   
    color:var(--poc-ink);
    
    box-sizing:border-box;
  }
  .poc-root *{box-sizing:border-box;}
  .poc-wrap{max-width:1160px;margin:0 auto;}

  .poc-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .poc-card{
    background:var(--poc-card);
    border:1px solid var(--poc-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .poc-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .poc-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .poc-tint-peach{background:var(--poc-tint-peach);}
  .poc-tint-navy{background:var(--poc-tint-navy);}
  .poc-tint-mint{background:var(--poc-tint-mint);}
  .poc-tint-lav{background:var(--poc-tint-lav);}
  .poc-tint-sky{background:var(--poc-tint-sky);}

  .poc-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .poc-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .poc-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .poc-dot{width:8px;height:8px;border-radius:50%;}
  .poc-dot--r{background:#f0665a;}
  .poc-dot--y{background:#f0b64a;}
  .poc-dot--g{background:#57c26a;}
  .poc-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .poc-window--dark .poc-chrome-bar{background:rgba(255,255,255,.14);}

  .poc-body{
    padding:32px 28px 34px;
  }
  .poc-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .poc-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--poc-sub);
    margin:0;
  }

  .poc-label{font-size:11px;font-weight:600;color:#8a8696;}
  .poc-window--dark .poc-label{color:#a9a4c4;}
  .poc-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .poc-ai-badge{
    font-size:9px;font-weight:700;color:var(--poc-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes poc-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Automatic Call Summaries — lines typing in with a sparkle */
  .poc-gen-wrap{display:flex;gap:10px;margin-top:12px;}
  .poc-gen-doc{width:38px;height:48px;border-radius:6px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.18);flex-shrink:0;position:relative;}
  .poc-gen-doc::after{content:"✨";position:absolute;top:-8px;right:-8px;font-size:12px;animation:poc-blink 1.6s ease-in-out infinite;}
  .poc-gen-lines{flex:1;padding-top:4px;}
  .poc-gen-line{height:7px;border-radius:4px;background:#f1efe9;margin-bottom:7px;width:0;animation:poc-typefill 2.6s ease-in-out infinite;}
  .poc-gen-line:nth-child(2){animation-delay:.3s;}
  .poc-gen-line:nth-child(3){animation-delay:.6s;}
  @keyframes poc-typefill{0%{width:0;background:#f1efe9;}45%{width:85%;background:#e3ddff;}70%,100%{width:85%;background:#e3ddff;}}

  /* 2. AI Call Notes — structured bullet notes */
  .poc-note-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .poc-note-dot{width:6px;height:6px;border-radius:50%;background:var(--poc-indigo);flex-shrink:0;}
  .poc-note-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}

  /* 3. Automatic CRM Updates — old to new value diff */
  .poc-update-row{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:10.5px;}
  .poc-old-val{color:#c3bfc9;text-decoration:line-through;}
  .poc-new-val{color:var(--poc-mint);font-weight:700;}
  .poc-map-arrow{color:var(--poc-indigo);font-size:11px;}

  /* 4. Smart Follow-Up Creation — task card appearing */
  .poc-task-card{margin-top:12px;background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:9px 11px;display:flex;align-items:center;justify-content:space-between;animation:poc-pop-in 2.4s ease-in-out infinite;}
  @keyframes poc-pop-in{0%{transform:scale(.94);opacity:.6;}30%,100%{transform:scale(1);opacity:1;}}
  .poc-check{width:15px;height:15px;border-radius:5px;border:2px solid #cfc9f7;flex-shrink:0;}

  /* 5. Call Outcome Logging — outcome rows with status */
  .poc-log-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .poc-log-code{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:6px;}
  .poc-log-done{background:#e6f3ec;color:var(--poc-mint);}
  .poc-log-cb{background:#fdf1da;color:var(--poc-amber);}

  /* 6. Automated Task Assignment — routing to a rep */
  .poc-route-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .poc-route-task{width:38px;height:38px;border-radius:9px;background:var(--poc-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .poc-route-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .poc-route-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--poc-indigo);animation:poc-travel 2s ease-in-out infinite;}
  @keyframes poc-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .poc-route-person{width:38px;height:38px;border-radius:50%;background:#4b3fe4;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 7. AI Action Recommendations — dark AI panel */
  .poc-insight-row{display:flex;align-items:flex-start;gap:7px;margin-top:10px;}
  .poc-insight-dot{width:6px;height:6px;border-radius:50%;background:var(--poc-coral);margin-top:4px;flex-shrink:0;}
  .poc-insight-highlight{margin-top:10px;background:rgba(75,63,228,.25);border-radius:6px;height:20px;animation:poc-blink 2s ease-in-out infinite;}

  /* 8. Email & SMS Follow-Ups — two channels sending */
  .poc-channels-wrap{display:flex;align-items:center;justify-content:center;gap:14px;height:100%;}
  .poc-ch-ico{width:38px;height:38px;border-radius:10px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;animation:poc-drop-bounce 2s ease-in-out infinite;}
  .poc-ch-ico:nth-child(2){animation-delay:.5s;}
  @keyframes poc-drop-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

  /* 9. Workflow Automation — chained workflow steps */
  .poc-flow-row{display:flex;align-items:center;gap:6px;margin-top:16px;}
  .poc-flow-step{width:28px;height:28px;border-radius:50%;background:#f1efe9;display:flex;align-items:center;justify-content:center;font-size:11px;color:#8a8696;flex-shrink:0;}
  .poc-flow-step.poc-done{background:var(--poc-mint);color:#fff;}
  .poc-flow-step.poc-active{background:var(--poc-indigo);color:#fff;animation:poc-blink 1.8s ease-in-out infinite;}
  .poc-flow-line{flex:1;height:2px;background:#eee9ff;}

  /* 10. Post-Call Analytics — bar chart */
  .poc-chart-wrap{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:16px;}
  .poc-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:poc-bar-grow 2.6s ease-in-out infinite;}
  .poc-bar:nth-child(4){background:var(--poc-indigo);}
  .poc-bar:nth-child(5){background:var(--poc-mint);}
  .poc-bar:nth-child(1){animation-delay:0s;}
  .poc-bar:nth-child(2){animation-delay:.15s;}
  .poc-bar:nth-child(3){animation-delay:.3s;}
  .poc-bar:nth-child(4){animation-delay:.45s;}
  .poc-bar:nth-child(5){animation-delay:.6s;}
  @keyframes poc-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

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

  @media (prefers-reduced-motion:reduce){
    .poc-root *{animation:none !important;transition:none !important;}
  }
  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:98 100}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.post-call-automationcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.pa1-head{display:flex;align-items:center;justify-content:space-between;}
.pa1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pa1-stats{display:flex;gap:8px;margin-top:11px;}
.pa1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.pa1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.pa1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.pa1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.pa1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.pa1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pa1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa1-chg-d{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pa1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.pa1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pa1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa1-th-trigger{flex:1.5;}
.pa1-th-action{flex:1.9;}
.pa1-th-contact{flex:1.5;}
.pa1-th-status{flex:1.1;text-align:right;}

.pa1-row{display:flex;align-items:center;font-size:9.5px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa1-row-a{animation-name:slideIn;animation-delay:.9s;}
.pa1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.pa1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.pa1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.pa1-trigger{flex:1.5;color:#7a726e;font-size:9px;}
.pa1-action{flex:1.9;font-weight:600;display:flex;align-items:center;gap:5px;}
.pa1-icon-bolt-a{flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.pa1-icon-bolt-b{flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;}
.pa1-icon-bolt-c{flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;}
.pa1-icon-bolt-d{flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;}

.pa1-contact{flex:1.5;color:#7a726e;font-size:9px;}

.pa1-status{flex:1.1;text-align:right;}
.pa1-status-done{display:inline-block;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa1-status-failed{display:inline-block;background:#fbe8e8;color:#c93030;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pa1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.post-call-automationcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.pa2-head{display:flex;align-items:center;justify-content:space-between;}
.pa2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pa2-scorebox{background:#f7f4f1;padding:9px 11px;margin-top:12px;display:flex;align-items:center;gap:12px;}
.pa2-donut-wrap{position:relative;width:52px;height:52px;flex-shrink:0;}
.pa2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.pa2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.pa2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.pa2-donut-value{font-size:10.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pa2-score-info{flex:1;}
.pa2-score-title{font-size:10.5px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa2-score-sub{font-size:9px;color:#8a8280;margin-top:2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pa2-summarybox{background:#181114;padding:11px 13px;margin-top:12px;}
.pa2-summary-label{font-size:9px;color:#a8a19d;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa2-summary-text{font-size:10px;color:#e8e3df;line-height:1.5;margin-top:5px;opacity:0;animation:slideIn .5s ease-out .8s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pa2-action-list{margin-top:10px;}
.pa2-action-row{display:flex;align-items:center;gap:7px;font-size:9.5px;color:#c9c2be;padding:3px 0;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pa2-action-row-a{animation-name:slideIn;animation-delay:1.5s;}
.pa2-action-row-b{animation-name:slideIn;animation-delay:1.65s;}
.pa2-action-row-c{animation-name:slideIn;animation-delay:1.8s;}
.pa2-check{flex-shrink:0;opacity:0;animation:popIn .3s ease-out forwards;}
.pa2-check-a{animation-delay:1.55s;}
.pa2-check-b{animation-delay:1.7s;}
.pa2-check-c{animation-delay:1.85s;}

.pa2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}


/* vidio-conference */


@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.video-conferencecard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.vc1-head{display:flex;align-items:center;justify-content:space-between;}
.vc1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vc1-stats{display:flex;gap:8px;margin-top:11px;}
.vc1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.vc1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.vc1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.vc1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.vc1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.vc1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vc1-chg-a{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vc1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.vc1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vc1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc1-th-meeting{flex:2;}
.vc1-th-attendees{flex:1.2;text-align:right;}
.vc1-th-time{flex:1.1;text-align:right;}
.vc1-th-platform{flex:1.1;text-align:right;}

.vc1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc1-row-a{animation-name:slideIn;animation-delay:.9s;}
.vc1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.vc1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.vc1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.vc1-meeting{flex:2;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vc1-cam-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.vc1-cam-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;}
.vc1-cam-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;}
.vc1-cam-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;}

.vc1-attendees{flex:1.2;text-align:right;color:#7a726e;font-size:9.5px;}
.vc1-time{flex:1.1;text-align:right;color:#7a726e;font-size:9.5px;}
.vc1-platform{flex:1.1;text-align:right;color:#3c3532;font-weight:600;font-size:9px;}

.vc1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.video-conferencecard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.vc2-head{display:flex;align-items:center;justify-content:space-between;}
.vc2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vc2-callbox{background:#181114;padding:11px 13px;margin-top:12px;}
.vc2-call-toprow{display:flex;align-items:center;justify-content:space-between;}
.vc2-call-label{display:flex;align-items:center;gap:6px;font-size:9.5px;color:#ff9a63;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc2-call-dot{width:6px;height:6px;background:#e0561f;border-radius:50%;display:inline-block;animation:pulseLive 1.3s ease-in-out infinite;}
.vc2-call-timer{font-size:9px;color:#a8a19d;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vc2-call-title{font-size:11.5px;font-weight:700;color:#ffffff;margin-top:8px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vc2-tiles{display:flex;gap:6px;margin-top:9px;}
.vc2-tile-a{flex:1;height:38px;background:#2a231f;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:9px;font-weight:800;opacity:0;animation:popIn .3s ease-out 1.1s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc2-tile-b{flex:1;height:38px;background:#2a231f;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:9px;font-weight:800;opacity:0;animation:popIn .3s ease-out 1.22s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc2-tile-c{flex:1;height:38px;background:#2a231f;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:9px;font-weight:800;opacity:0;animation:popIn .3s ease-out 1.34s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc2-tile-d{flex:1;height:38px;background:#2a231f;display:flex;align-items:center;justify-content:center;color:#a8a19d;font-size:9px;font-weight:800;opacity:0;animation:popIn .3s ease-out 1.46s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vc2-join-btn{background:#e0561f;color:#ffffff;font-size:9.5px;font-weight:700;text-align:center;padding:6px 0;margin-top:9px;opacity:0;animation:chipPop .4s ease-out 1.6s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.vc2-notes{margin-top:12px;}
.vc2-notes-head{font-size:11px;font-weight:700;color:#181114;margin-bottom:6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc2-note-row{display:flex;align-items:center;gap:7px;font-size:9.5px;color:#3c3532;padding:3px 0;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.vc2-note-row-a{animation-name:slideIn;animation-delay:1.9s;}
.vc2-note-row-b{animation-name:slideIn;animation-delay:2.02s;}
.vc2-check{flex-shrink:0;opacity:0;animation:popIn .3s ease-out forwards;}
.vc2-check-a{animation-delay:1.95s;}
.vc2-check-b{animation-delay:2.07s;}

.vc2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

.vcf-root{
    --vcf-ink:#17161c;
    --vcf-sub:#6b6878;
    --vcf-line:#eeece7;
    --vcf-paper:#faf9f6;
    --vcf-card:#ffffff;
    --vcf-indigo:#4b3fe4;
    --vcf-coral:#ff6b4a;
    --vcf-mint:#28a06b;
    --vcf-amber:#e6a23c;
    --vcf-tint-peach:#fbeadf;
    --vcf-tint-navy:#f2f1f6;
    --vcf-tint-mint:#e6f3ec;
    --vcf-tint-lav:#eeeafc;
    --vcf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
   
    color:var(--vcf-ink);
   
    box-sizing:border-box;
  }
  .vcf-root *{box-sizing:border-box;}
  .vcf-wrap{max-width:1160px;margin:0 auto;}

  .vcf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .vcf-card{
    background:var(--vcf-card);
    border:1px solid var(--vcf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .vcf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .vcf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .vcf-tint-peach{background:var(--vcf-tint-peach);}
  .vcf-tint-navy{background:var(--vcf-tint-navy);}
  .vcf-tint-mint{background:var(--vcf-tint-mint);}
  .vcf-tint-lav{background:var(--vcf-tint-lav);}
  .vcf-tint-sky{background:var(--vcf-tint-sky);}

  .vcf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .vcf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .vcf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .vcf-dot{width:8px;height:8px;border-radius:50%;}
  .vcf-dot--r{background:#f0665a;}
  .vcf-dot--y{background:#f0b64a;}
  .vcf-dot--g{background:#57c26a;}
  .vcf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .vcf-window--dark .vcf-chrome-bar{background:rgba(255,255,255,.14);}

  .vcf-body{
    padding:32px 28px 34px;
  }
  .vcf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .vcf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--vcf-sub);
    margin:0;
  }

  .vcf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .vcf-window--dark .vcf-label{color:#a9a4c4;}
  .vcf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .vcf-ai-badge{
    font-size:9px;font-weight:700;color:var(--vcf-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes vcf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. HD Video Meetings — video tile grid */
  .vcf-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
  .vcf-tile{aspect-ratio:16/10;border-radius:9px;background:#1c1832;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;position:relative;}
  .vcf-tile:nth-child(1){background:linear-gradient(135deg,#4b3fe4,#6a5cf0);}
  .vcf-tile-live{position:absolute;top:5px;left:5px;width:6px;height:6px;border-radius:50%;background:var(--vcf-coral);animation:vcf-blink 1.4s ease-in-out infinite;}

  /* 2. One-Click Meeting Join — join button clicking */
  .vcf-join-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;}
  .vcf-join-btn{font-size:12px;font-weight:700;padding:9px 20px;border-radius:100px;background:var(--vcf-indigo);color:#fff;animation:vcf-pop 2.2s ease-in-out infinite;}
  @keyframes vcf-pop{0%,100%{transform:scale(1);}40%{transform:scale(1.08);}}

  /* 3. Screen Sharing — screen preview with cursor */
  .vcf-share-screen{margin-top:14px;background:#1c1832;border-radius:10px;padding:10px;position:relative;height:120px;}
  .vcf-share-line{height:6px;border-radius:3px;background:rgba(255,255,255,.15);margin-bottom:6px;}
  .vcf-share-cursor{position:absolute;bottom:16px;right:20px;font-size:14px;animation:vcf-cursor-move 2.4s ease-in-out infinite;}
  @keyframes vcf-cursor-move{0%,100%{transform:translate(0,0);}50%{transform:translate(-10px,-8px);}}

  /* 4. Meeting Scheduling — calendar invite card */
  .vcf-invite-card{margin-top:14px;background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:10px 12px;}
  .vcf-invite-time{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:var(--vcf-indigo);}

  /* 5. Meeting Recording — waveform + rec dot */
  .vcf-rec-wrap{display:flex;align-items:center;gap:10px;margin-top:16px;}
  .vcf-rec-dot{width:10px;height:10px;border-radius:50%;background:var(--vcf-coral);animation:vcf-blink 1.2s ease-in-out infinite;flex-shrink:0;}
  .vcf-wave{display:flex;align-items:center;gap:3px;height:26px;flex:1;}
  .vcf-wave span{width:3px;background:var(--vcf-indigo);border-radius:2px;animation:vcf-wave-move 1.4s ease-in-out infinite;}
  .vcf-wave span:nth-child(odd){animation-delay:.15s;}
  .vcf-wave span:nth-child(1){height:40%;}
  .vcf-wave span:nth-child(2){height:80%;}
  .vcf-wave span:nth-child(3){height:55%;}
  .vcf-wave span:nth-child(4){height:100%;}
  .vcf-wave span:nth-child(5){height:60%;}
  .vcf-wave span:nth-child(6){height:35%;}
  .vcf-wave span:nth-child(7){height:70%;}
  @keyframes vcf-wave-move{0%,100%{transform:scaleY(.6);}50%{transform:scaleY(1);}}

  /* 6. In-Meeting Chat — chat bubbles */
  .vcf-chat-row{display:flex;gap:8px;margin-top:10px;}
  .vcf-chat-bubble{background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:6px 10px;font-size:10.5px;color:#3a3550;}
  .vcf-chat-bubble.vcf-mine{background:#eee9ff;margin-left:auto;}

  /* 7. File Sharing — files appearing in meeting */
  .vcf-files-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .vcf-file-item{width:34px;height:42px;border-radius:6px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.18);flex-shrink:0;animation:vcf-settle 2.6s ease-in-out infinite;}
  .vcf-file-item:nth-child(2){animation-delay:.2s;}
  .vcf-file-item:nth-child(3){animation-delay:.4s;}
  @keyframes vcf-settle{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

  /* 8. CRM Contact Integration — meeting linked to contact */
  .vcf-link-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .vcf-link-meet{width:38px;height:38px;border-radius:9px;background:var(--vcf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .vcf-link-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .vcf-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--vcf-indigo);animation:vcf-travel 2s ease-in-out infinite;}
  @keyframes vcf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .vcf-link-contact{width:38px;height:38px;border-radius:50%;background:var(--vcf-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 9. Multi-Participant Meetings — avatar stack */
  .vcf-multi-avs{display:flex;margin-top:16px;justify-content:center;}
  .vcf-multi-avs .vcf-avatar{width:32px;height:32px;font-size:11px;margin-left:-8px;}
  .vcf-multi-avs .vcf-avatar:first-child{margin-left:0;}

  /* 10. Meeting Analytics — bar chart */
  .vcf-chart-wrap{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:16px;}
  .vcf-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:vcf-bar-grow 2.6s ease-in-out infinite;}
  .vcf-bar:nth-child(4){background:var(--vcf-indigo);}
  .vcf-bar:nth-child(5){background:var(--vcf-mint);}
  .vcf-bar:nth-child(1){animation-delay:0s;}
  .vcf-bar:nth-child(2){animation-delay:.15s;}
  .vcf-bar:nth-child(3){animation-delay:.3s;}
  .vcf-bar:nth-child(4){animation-delay:.45s;}
  .vcf-bar:nth-child(5){animation-delay:.6s;}
  @keyframes vcf-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

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

  @media (prefers-reduced-motion:reduce){
    .vcf-root *{animation:none !important;transition:none !important;}
  }

  
  /* virtual-pbx-software */

@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:96 100}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.virtual-pbx-softwarecard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.pb1-head{display:flex;align-items:center;justify-content:space-between;}
.pb1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pb1-stats{display:flex;gap:8px;margin-top:11px;}
.pb1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.pb1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.pb1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.pb1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.pb1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.pb1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pb1-chg-a{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pb1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.pb1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pb1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-th-name{flex:1.9;}
.pb1-th-ext{flex:1.1;}
.pb1-th-dept{flex:1.3;}
.pb1-th-status{flex:1.2;text-align:right;}

.pb1-row{display:flex;align-items:center;font-size:10px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-row-a{animation-name:slideIn;animation-delay:.9s;}
.pb1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.pb1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.pb1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.pb1-name{flex:1.9;font-weight:600;display:flex;align-items:center;gap:6px;}
.pb1-avatar-a{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-avatar-b{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-avatar-c{width:18px;height:18px;border-radius:50%;background:#f1ece9;color:#7a726e;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-avatar-d{width:18px;height:18px;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pb1-ext{flex:1.1;color:#7a726e;font-size:9.5px;font-weight:600;}
.pb1-dept{flex:1.3;color:#7a726e;font-size:9.5px;}

.pb1-status{flex:1.2;text-align:right;}
.pb1-status-avail{display:inline-flex;align-items:center;gap:3px;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-status-oncall{display:inline-flex;align-items:center;gap:3px;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-status-away{display:inline-flex;align-items:center;gap:3px;background:#f1ece9;color:#7a726e;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb1-dot-green{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;}
.pb1-dot-amber{width:5px;height:5px;background:#f0ac2c;border-radius:50%;display:inline-block;animation:pulseLive 1.2s ease-in-out infinite;}
.pb1-dot-gray{width:5px;height:5px;background:#9a9290;border-radius:50%;display:inline-block;}

.pb1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.virtual-pbx-softwarecard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.pb2-head{display:flex;align-items:center;justify-content:space-between;}
.pb2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pb2-scorebox{background:#f7f4f1;padding:9px 11px;margin-top:12px;display:flex;align-items:center;gap:12px;}
.pb2-donut-wrap{position:relative;width:58px;height:58px;flex-shrink:0;}
.pb2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.pb2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.pb2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.pb2-donut-value{font-size:11.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb2-donut-label{font-size:7.5px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pb2-score-info{flex:1;}
.pb2-score-title{font-size:10.5px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb2-score-line{font-size:9px;color:#5d5451;margin-top:3px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.pb2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.pb2-ivr{margin-top:12px;}
.pb2-ivr-head{font-size:11px;font-weight:700;color:#181114;margin-bottom:6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pb2-ivr-row{display:flex;align-items:center;gap:9px;padding:5.5px 0;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;}
.pb2-ivr-row-a{animation-name:slideIn;animation-delay:1.6s;}
.pb2-ivr-row-b{animation-name:slideIn;animation-delay:1.72s;}
.pb2-ivr-row-c{animation-name:slideIn;animation-delay:1.84s;border-bottom:none;}

.pb2-ivr-key{width:20px;height:20px;background:#181114;color:#ff9a63;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb2-ivr-label{font-size:9.5px;color:#3c3532;font-weight:600;flex:1;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.pb2-ivr-dept{font-size:9px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.pb2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}


  .pbx-root{
    --pbx-ink:#17161c;
    --pbx-sub:#6b6878;
    --pbx-line:#eeece7;
    --pbx-paper:#faf9f6;
    --pbx-card:#ffffff;
    --pbx-indigo:#4b3fe4;
    --pbx-coral:#ff6b4a;
    --pbx-mint:#28a06b;
    --pbx-amber:#e6a23c;
    --pbx-tint-peach:#fbeadf;
    --pbx-tint-navy:#f2f1f6;
    --pbx-tint-mint:#e6f3ec;
    --pbx-tint-lav:#eeeafc;
    --pbx-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--pbx-ink);
   
    box-sizing:border-box;
  }
  .pbx-root *{box-sizing:border-box;}
  .pbx-wrap{max-width:1160px;margin:0 auto;}

  .pbx-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:start;
  }
  .pbx-card{
    background:var(--pbx-card);
    border:1px solid var(--pbx-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .pbx-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .pbx-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .pbx-tint-peach{background:var(--pbx-tint-peach);}
  .pbx-tint-navy{background:var(--pbx-tint-navy);}
  .pbx-tint-mint{background:var(--pbx-tint-mint);}
  .pbx-tint-lav{background:var(--pbx-tint-lav);}
  .pbx-tint-sky{background:var(--pbx-tint-sky);}

  .pbx-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .pbx-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .pbx-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .pbx-dot{width:8px;height:8px;border-radius:50%;}
  .pbx-dot--r{background:#f0665a;}
  .pbx-dot--y{background:#f0b64a;}
  .pbx-dot--g{background:#57c26a;}
  .pbx-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .pbx-window--dark .pbx-chrome-bar{background:rgba(255,255,255,.14);}

  .pbx-body{
    padding:32px 28px 34px;
  }
  .pbx-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .pbx-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--pbx-sub);
    margin:0;
  }

  .pbx-benefits-label{
    font-size:10.5px;
    font-weight:700;
    color:#a39ecf;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:20px 0 20px !important;
    padding-top:12px;
    border-top:1px solid #eee9f3;
  }
  .pbx-benefits{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 18px;
  }
  .pbx-benefits li{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    line-height:1.35;
    color:#332f45;
    font-weight:500;
  }
  .pbx-benefits li::before{
    content:"✓";
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#eee9ff;
    color:var(--pbx-indigo);
    font-weight:700;
    font-size:9px;
    flex-shrink:0;
  }

  .pbx-label{font-size:11px;font-weight:600;color:#8a8696;}
  .pbx-window--dark .pbx-label{color:#a9a4c4;}
  .pbx-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  @keyframes pbx-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Intelligent Call Routing — routing to department */
  .pbx-route-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .pbx-route-call{width:38px;height:38px;border-radius:9px;background:var(--pbx-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .pbx-route-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .pbx-route-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--pbx-indigo);animation:pbx-travel 2s ease-in-out infinite;}
  @keyframes pbx-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .pbx-route-dept{width:38px;height:38px;border-radius:50%;background:#4b3fe4;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}

  /* 2. IVR — menu options list */
  .pbx-ivr-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .pbx-ivr-key{width:20px;height:20px;border-radius:5px;background:#eee9ff;color:var(--pbx-indigo);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .pbx-ivr-line{height:7px;border-radius:4px;background:#f1efe9;flex:1;}

  /* 3. Call Forwarding — forwarding path to devices */
  .pbx-fwd-wrap{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;}
  .pbx-fwd-src{width:36px;height:36px;border-radius:9px;background:var(--pbx-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .pbx-fwd-path{width:16px;height:2px;background:#d9d0ff;position:relative;}
  .pbx-fwd-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--pbx-indigo);animation:pbx-travel 2s ease-in-out infinite;}
  .pbx-fwd-dest{width:30px;height:30px;border-radius:9px;background:#faf9ff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}

  /* 4. Auto Attendant — greeting message + menu */
  .pbx-attendant-wrap{margin-top:14px;background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:10px 12px;}
  .pbx-attendant-script{font-size:10.5px;color:#3a3550;font-style:italic;line-height:1.5;}

  /* 5. Call Queue Management — queue list */
  .pbx-queue-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .pbx-queue-pos{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:100px;background:#eee9ff;color:var(--pbx-indigo);}
  .pbx-queue-pos.pbx-next{background:var(--pbx-mint);color:#fff;animation:pbx-blink 1.8s ease-in-out infinite;}

  /* 6. Voicemail Management — voicemail list */
  .pbx-vm-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .pbx-vm-dur{font-size:10px;color:#8a8696;}

  /* 7. Extension Management — extension list */
  .pbx-ext-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .pbx-ext-num{font-family:'Sora',sans-serif;font-size:11px;font-weight:700;color:var(--pbx-indigo);}

  /* 8. Business Call Analytics — bar chart */
  .pbx-chart-wrap{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:16px;}
  .pbx-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:pbx-bar-grow 2.6s ease-in-out infinite;}
  .pbx-bar:nth-child(4){background:var(--pbx-indigo);}
  .pbx-bar:nth-child(5){background:var(--pbx-mint);}
  .pbx-bar:nth-child(1){animation-delay:0s;}
  .pbx-bar:nth-child(2){animation-delay:.15s;}
  .pbx-bar:nth-child(3){animation-delay:.3s;}
  .pbx-bar:nth-child(4){animation-delay:.45s;}
  .pbx-bar:nth-child(5){animation-delay:.6s;}
  @keyframes pbx-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

  /* 9. Multi-Device Calling — device icons */
  .pbx-devices{display:flex;align-items:flex-end;gap:16px;margin-top:18px;justify-content:center;}
  .pbx-device{background:#faf9ff;border:1px solid #eee9ff;border-radius:6px;position:relative;}
  .pbx-device--phone{width:20px;height:34px;border-radius:5px;}
  .pbx-device--laptop{width:44px;height:28px;}
  .pbx-device--desk{width:28px;height:20px;border-radius:5px;}
  .pbx-device-dot{position:absolute;top:-10px;left:-38px;width:7px;height:7px;border-radius:50%;background:var(--pbx-coral);animation:pbx-hop 2.4s ease-in-out infinite;}
  @keyframes pbx-hop{0%,100%{left:-38px;top:-10px;}50%{left:38px;top:-10px;}}

  /* 10. CRM Integration — linked records */
  .pbx-link-wrap{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;}
  .pbx-link-node{width:36px;height:36px;border-radius:10px;background:#faf9ff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
  .pbx-link-path{width:16px;height:2px;background:#d9d0ff;position:relative;}
  .pbx-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--pbx-indigo);animation:pbx-travel 2s ease-in-out infinite;}

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

  @media (prefers-reduced-motion:reduce){
    .pbx-root *{animation:none !important;transition:none !important;}
  }

  .powerful-tools-herocolor{
    
    background: linear-gradient(to bottom, #1e0043 0%, #0f0049 20%, #49034d 70%, #8c0f0f 100%, #ff0000 80%) !important;
}

/* email-marketing */
@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:42 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.email-marketingcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.em1-head{display:flex;align-items:center;justify-content:space-between;}
.em1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.em1-stats{display:flex;gap:8px;margin-top:11px;}
.em1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.em1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.em1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.em1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.em1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.em1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.em1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.em1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.em1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.em1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em1-th-campaign{flex:2.2;}
.em1-th-sent{flex:1.1;text-align:right;}
.em1-th-open{flex:1;text-align:right;}
.em1-th-click{flex:1;text-align:right;}

.em1-row{display:flex;align-items:center;font-size:9.5px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em1-row-a{animation-name:slideIn;animation-delay:.9s;}
.em1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.em1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.em1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.em1-campaign{flex:2.2;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.em1-icon-mail-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.em1-icon-mail-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;}
.em1-icon-mail-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;}
.em1-icon-mail-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;}

.em1-sent{flex:1.1;text-align:right;color:#7a726e;font-size:9px;}
.em1-open{flex:1;text-align:right;color:#1f9d55;font-weight:700;}
.em1-click{flex:1;text-align:right;color:#1f9d55;font-weight:700;}

.em1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.email-marketingcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.em2-head{display:flex;align-items:center;justify-content:space-between;}
.em2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.em2-scorebox{background:#f7f4f1;padding:9px 11px;margin-top:12px;display:flex;align-items:center;gap:12px;}
.em2-donut-wrap{position:relative;width:56px;height:56px;flex-shrink:0;}
.em2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.em2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.em2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.em2-donut-value{font-size:11.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em2-donut-label{font-size:7.5px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.em2-score-info{flex:1;}
.em2-score-title{font-size:10.5px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em2-score-line{font-size:9px;color:#5d5451;margin-top:3px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.em2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.em2-suggest{margin-top:12px;}
.em2-suggest-head{font-size:11px;font-weight:700;color:#181114;margin-bottom:6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.em2-suggest-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 9px;background:#f7f4f1;margin-bottom:6px;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;}
.em2-suggest-row-a{animation-name:slideIn;animation-delay:1.6s;}
.em2-suggest-row-b{animation-name:slideIn;animation-delay:1.72s;}
.em2-suggest-row-c{animation-name:slideIn;animation-delay:1.84s;margin-bottom:0;}

.em2-suggest-text{font-size:9.5px;color:#3c3532;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em2-suggest-tag-high{background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.em2-suggest-tag-mid{background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.em2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

 .emc-root{
    --emc-ink:#17161c;
    --emc-sub:#6b6878;
    --emc-line:#eeece7;
    --emc-paper:#faf9f6;
    --emc-card:#ffffff;
    --emc-indigo:#4b3fe4;
    --emc-coral:#ff6b4a;
    --emc-mint:#28a06b;
    --emc-amber:#e6a23c;
    --emc-tint-peach:#fbeadf;
    --emc-tint-navy:#f2f1f6;
    --emc-tint-mint:#e6f3ec;
    --emc-tint-lav:#eeeafc;
    --emc-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--emc-ink);
   
    box-sizing:border-box;
  }
  .emc-root *{box-sizing:border-box;}
  .emc-wrap{max-width:1160px;margin:0 auto;}

  .emc-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .emc-card{
    background:var(--emc-card);
    border:1px solid var(--emc-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .emc-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .emc-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .emc-tint-peach{background:var(--emc-tint-peach);}
  .emc-tint-navy{background:var(--emc-tint-navy);}
  .emc-tint-mint{background:var(--emc-tint-mint);}
  .emc-tint-lav{background:var(--emc-tint-lav);}
  .emc-tint-sky{background:var(--emc-tint-sky);}

  .emc-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .emc-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .emc-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .emc-dot{width:8px;height:8px;border-radius:50%;}
  .emc-dot--r{background:#f0665a;}
  .emc-dot--y{background:#f0b64a;}
  .emc-dot--g{background:#57c26a;}
  .emc-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .emc-window--dark .emc-chrome-bar{background:rgba(255,255,255,.14);}

  .emc-body{
    padding:32px 28px 34px;
  }
  .emc-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .emc-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--emc-sub);
    margin:0;
  }

  .emc-label{font-size:11px;font-weight:600;color:#8a8696;}
  .emc-window--dark .emc-label{color:#a9a4c4;}
  .emc-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  .emc-ai-badge{
    font-size:9px;font-weight:700;color:var(--emc-indigo);background:#eee9ff;
    padding:2px 8px;border-radius:100px;letter-spacing:.03em;
  }
  @keyframes emc-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Drag-and-Drop Email Builder — draggable blocks */
  .emc-build-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .emc-build-handle{color:#c3bdf0;font-size:11px;}
  .emc-build-pill{flex:1;font-size:11px;font-weight:600;padding:6px 10px;border-radius:8px;background:#f6f4ff;color:#3a3550;}
  .emc-build-pill.emc-dragging{border:1px dashed var(--emc-indigo);animation:emc-jiggle 1.6s ease-in-out infinite;}
  @keyframes emc-jiggle{0%,100%{transform:translateX(0);}25%{transform:translateX(2px);}75%{transform:translateX(-2px);}}

  /* 2. AI Email Content Generator — lines typing in with sparkle */
  .emc-gen-wrap{display:flex;gap:10px;margin-top:12px;}
  .emc-gen-doc{width:38px;height:48px;border-radius:6px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.18);flex-shrink:0;position:relative;}
  .emc-gen-doc::after{content:"✨";position:absolute;top:-8px;right:-8px;font-size:12px;animation:emc-blink 1.6s ease-in-out infinite;}
  .emc-gen-lines{flex:1;padding-top:4px;}
  .emc-gen-line{height:7px;border-radius:4px;background:#f1efe9;margin-bottom:7px;width:0;animation:emc-typefill 2.6s ease-in-out infinite;}
  .emc-gen-line:nth-child(2){animation-delay:.3s;}
  .emc-gen-line:nth-child(3){animation-delay:.6s;}
  @keyframes emc-typefill{0%{width:0;background:#f1efe9;}45%{width:85%;background:#e3ddff;}70%,100%{width:85%;background:#e3ddff;}}

  /* 3. Marketing Automation — workflow steps chain */
  .emc-flow-row{display:flex;align-items:center;gap:6px;margin-top:16px;}
  .emc-flow-step{width:28px;height:28px;border-radius:50%;background:#f1efe9;display:flex;align-items:center;justify-content:center;font-size:11px;color:#8a8696;flex-shrink:0;}
  .emc-flow-step.emc-done{background:var(--emc-mint);color:#fff;}
  .emc-flow-step.emc-active{background:var(--emc-indigo);color:#fff;animation:emc-blink 1.8s ease-in-out infinite;}
  .emc-flow-line{flex:1;height:2px;background:#eee9ff;}

  /* 4. Audience Segmentation — tag chips */
  .emc-tagrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;height:100%;align-content:center;}
  .emc-tag{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:100px;animation:emc-pop 2.4s ease-in-out infinite;}
  .emc-tag:nth-child(1){background:#eee9ff;color:var(--emc-indigo);animation-delay:0s;}
  .emc-tag:nth-child(2){background:#ffe6dd;color:var(--emc-coral);animation-delay:.25s;}
  .emc-tag:nth-child(3){background:#e6f3ec;color:var(--emc-mint);animation-delay:.5s;}
  .emc-tag:nth-child(4){background:#fdf1da;color:var(--emc-amber);animation-delay:.75s;}
  @keyframes emc-pop{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}

  /* 5. Personalized Email Campaigns — personalized line with tokens */
  .emc-personal-line{font-size:11px;color:#3a3550;margin-top:14px;line-height:1.6;}
  .emc-token{background:#eee9ff;color:var(--emc-indigo);font-weight:600;padding:1px 6px;border-radius:5px;}

  /* 6. Email Scheduling — clock + schedule chips */
  .emc-sched-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .emc-sched-clock{width:36px;height:36px;border-radius:50%;border:2px solid var(--emc-indigo);position:relative;flex-shrink:0;}
  .emc-sched-clock::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;background:var(--emc-indigo);transform-origin:left center;animation:emc-tick 3s linear infinite;}
  @keyframes emc-tick{to{transform:translate(0,-50%) rotate(360deg);}}
  .emc-sched-chip{display:flex;gap:5px;margin-top:12px;}
  .emc-sched-chip span{font-size:10px;font-weight:600;padding:4px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .emc-sched-chip span.emc-on{background:var(--emc-indigo);color:#fff;}

  /* 7. A/B Testing — two variant comparison */
  .emc-ab-wrap{display:flex;gap:8px;margin-top:14px;}
  .emc-ab-card{flex:1;border-radius:9px;padding:8px 9px;border:1px solid #eee9ff;background:#faf9ff;}
  .emc-ab-card.emc-winner{border-color:var(--emc-mint);background:#f2faf5;}
  .emc-ab-pct{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#241f2e;}
  .emc-ab-card.emc-winner .emc-ab-pct{color:var(--emc-mint);}

  /* 8. Real-Time Email Analytics — live stat grid */
  .emc-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
  .emc-kpi-tile{background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:7px 9px;}
  .emc-kpi-num{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#241f2e;}
  .emc-kpi-tile:nth-child(1) .emc-kpi-num{animation:emc-blink 2.2s ease-in-out infinite;}

  /* 9. Email Templates Library — template gallery */
  .emc-tmpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
  .emc-tmpl-tile{aspect-ratio:3/4;border-radius:8px;background:#faf9ff;border:1px solid #eee9ff;position:relative;animation:emc-settle 2.6s ease-in-out infinite;}
  .emc-tmpl-tile::before{content:"";position:absolute;top:8px;left:6px;right:6px;height:4px;border-radius:2px;background:#e3ddff;}
  .emc-tmpl-tile::after{content:"";position:absolute;top:16px;left:6px;width:60%;height:3px;border-radius:2px;background:#eee9ff;}
  .emc-tmpl-tile:nth-child(2){animation-delay:.15s;}
  .emc-tmpl-tile:nth-child(3){animation-delay:.3s;}
  @keyframes emc-settle{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

  /* 10. CRM Contact Integration — linked records */
  .emc-link-wrap{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;}
  .emc-link-node{width:36px;height:36px;border-radius:10px;background:#faf9ff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
  .emc-link-path{width:16px;height:2px;background:#d9d0ff;position:relative;}
  .emc-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--emc-indigo);animation:emc-travel 2s ease-in-out infinite;}
  @keyframes emc-travel{0%{left:0;}100%{left:calc(100% - 8px);}}

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

  @media (prefers-reduced-motion:reduce){
    .emc-root *{animation:none !important;transition:none !important;}
  }

  .crm-bulitgrowth-badge{
        display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 20px !important;
    border:1px solid rgba(255,255,255,.18);
    border-radius:30px;
    color:#FF9B6A;
    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;
       margin: 26px 10px 20px;
       max-width: 250px;
  }

  .crm-bulitgrowth-btn{
         display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #EB4D00;
    color: #fff;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    transition: .3s;
    width: 155px;
    margin: 26px 10px 0px;
  }

  /* newsletters */

  @keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:88 100}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes areaFade{0%{opacity:0}100%{opacity:1}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.newsletterscard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.nl1-head{display:flex;align-items:center;justify-content:space-between;}
.nl1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.nl1-stats{display:flex;gap:8px;margin-top:11px;}
.nl1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.nl1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.nl1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.nl1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.nl1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.nl1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.nl1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.nl1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.nl1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.nl1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-th-issue{flex:2.3;}
.nl1-th-date{flex:1.2;text-align:right;}
.nl1-th-opens{flex:1;text-align:right;}
.nl1-th-clicks{flex:1;text-align:right;}

.nl1-row{display:flex;align-items:center;font-size:9.5px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-row-a{animation-name:slideIn;animation-delay:.9s;}
.nl1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.nl1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.nl1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.nl1-issue{flex:2.3;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nl1-num-a{width:22px;height:16px;background:#fdece3;color:#c14a1c;font-size:7px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-num-b{width:22px;height:16px;background:#fdece3;color:#c14a1c;font-size:7px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-num-c{width:22px;height:16px;background:#fdece3;color:#c14a1c;font-size:7px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl1-num-d{width:22px;height:16px;background:#fdece3;color:#c14a1c;font-size:7px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.nl1-date{flex:1.2;text-align:right;color:#7a726e;font-size:9px;}
.nl1-opens{flex:1;text-align:right;color:#7a726e;font-size:9px;}
.nl1-clicks{flex:1;text-align:right;color:#7a726e;font-size:9px;}

.nl1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.newsletterscard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.nl2-head{display:flex;align-items:center;justify-content:space-between;}
.nl2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.nl2-scorebox{background:#f7f4f1;padding:9px 11px;margin-top:12px;display:flex;align-items:center;gap:12px;}
.nl2-donut-wrap{position:relative;width:56px;height:56px;flex-shrink:0;}
.nl2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.nl2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.nl2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.nl2-donut-value{font-size:11.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl2-donut-label{font-size:7.5px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.nl2-score-info{flex:1;}
.nl2-score-title{font-size:10.5px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl2-score-line{font-size:9px;color:#5d5451;margin-top:3px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.nl2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.nl2-chartbox{background:#f7f4f1;padding:11px 14px 9px;margin-top:11px;}
.nl2-chart-toprow{display:flex;align-items:center;justify-content:space-between;}
.nl2-chart-title{font-size:10.5px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.nl2-chart-value{font-size:10px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.nl2-chart-wrap{position:relative;height:66px;margin-top:6px;}
.nl2-area{opacity:0;animation:areaFade 1s ease-out .9s forwards;}
.nl2-line{fill:none;stroke:#e0561f;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s cubic-bezier(.3,.7,.2,1) .3s forwards;}

.nl2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}

 .nlf-root{
    --nlf-ink:#17161c;
    --nlf-sub:#6b6878;
    --nlf-line:#eeece7;
    --nlf-paper:#faf9f6;
    --nlf-card:#ffffff;
    --nlf-indigo:#4b3fe4;
    --nlf-coral:#ff6b4a;
    --nlf-mint:#28a06b;
    --nlf-amber:#e6a23c;
    --nlf-tint-peach:#fbeadf;
    --nlf-tint-navy:#f2f1f6;
    --nlf-tint-mint:#e6f3ec;
    --nlf-tint-lav:#eeeafc;
    --nlf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--nlf-ink);
    
    box-sizing:border-box;
  }
  .nlf-root *{box-sizing:border-box;}
  .nlf-wrap{max-width:1160px;margin:0 auto;}

  .nlf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:start;
  }
  .nlf-card{
    background:var(--nlf-card);
    border:1px solid var(--nlf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .nlf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .nlf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .nlf-tint-peach{background:var(--nlf-tint-peach);}
  .nlf-tint-navy{background:var(--nlf-tint-navy);}
  .nlf-tint-mint{background:var(--nlf-tint-mint);}
  .nlf-tint-lav{background:var(--nlf-tint-lav);}
  .nlf-tint-sky{background:var(--nlf-tint-sky);}

  .nlf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .nlf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .nlf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .nlf-dot{width:8px;height:8px;border-radius:50%;}
  .nlf-dot--r{background:#f0665a;}
  .nlf-dot--y{background:#f0b64a;}
  .nlf-dot--g{background:#57c26a;}
  .nlf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .nlf-window--dark .nlf-chrome-bar{background:rgba(255,255,255,.14);}

  .nlf-body{
    padding:32px 28px 34px;
  }
  .nlf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .nlf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--nlf-sub);
    margin:0;
  }

  .nlf-benefits-label{
    font-size:10.5px;
    font-weight:700;
    color:#a39ecf;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:12px 0 12px;
    padding-top:12px;
    border-top:1px solid #eee9f3;
  }
  .nlf-benefits{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 18px;
  }
  .nlf-benefits li{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    line-height:1.35;
    color:#332f45;
    font-weight:500;
  }
  .nlf-benefits li::before{
    content:"✓";
    display:flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#eee9ff;
    color:var(--nlf-indigo);
    font-weight:700;
    font-size:9px;
    flex-shrink:0;
  }

  .nlf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .nlf-window--dark .nlf-label{color:#a9a4c4;}
  .nlf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  @keyframes nlf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Drag-and-Drop Newsletter Builder — draggable blocks */
  .nlf-build-row{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .nlf-build-handle{color:#c3bdf0;font-size:11px;}
  .nlf-build-pill{flex:1;font-size:11px;font-weight:600;padding:6px 10px;border-radius:8px;background:#f6f4ff;color:#3a3550;}
  .nlf-build-pill.nlf-dragging{border:1px dashed var(--nlf-indigo);animation:nlf-jiggle 1.6s ease-in-out infinite;}
  @keyframes nlf-jiggle{0%,100%{transform:translateX(0);}25%{transform:translateX(2px);}75%{transform:translateX(-2px);}}

  /* 2. AI Newsletter Content — lines typing in with sparkle */
  .nlf-gen-wrap{display:flex;gap:10px;margin-top:12px;}
  .nlf-gen-doc{width:38px;height:48px;border-radius:6px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.18);flex-shrink:0;position:relative;}
  .nlf-gen-doc::after{content:"✨";position:absolute;top:-8px;right:-8px;font-size:12px;animation:nlf-blink 1.6s ease-in-out infinite;}
  .nlf-gen-lines{flex:1;padding-top:4px;}
  .nlf-gen-line{height:7px;border-radius:4px;background:#f1efe9;margin-bottom:7px;width:0;animation:nlf-typefill 2.6s ease-in-out infinite;}
  .nlf-gen-line:nth-child(2){animation-delay:.3s;}
  .nlf-gen-line:nth-child(3){animation-delay:.6s;}
  @keyframes nlf-typefill{0%{width:0;background:#f1efe9;}45%{width:85%;background:#e3ddff;}70%,100%{width:85%;background:#e3ddff;}}

  /* 3. Ready-to-Use Templates — template gallery */
  .nlf-tmpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
  .nlf-tmpl-tile{aspect-ratio:3/4;border-radius:8px;background:#faf9ff;border:1px solid #eee9ff;position:relative;animation:nlf-settle 2.6s ease-in-out infinite;}
  .nlf-tmpl-tile::before{content:"";position:absolute;top:8px;left:6px;right:6px;height:4px;border-radius:2px;background:#e3ddff;}
  .nlf-tmpl-tile::after{content:"";position:absolute;top:16px;left:6px;width:60%;height:3px;border-radius:2px;background:#eee9ff;}
  .nlf-tmpl-tile:nth-child(2){animation-delay:.15s;}
  .nlf-tmpl-tile:nth-child(3){animation-delay:.3s;}
  @keyframes nlf-settle{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

  /* 4. Audience Segmentation — tag chips */
  .nlf-tagrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;height:100%;align-content:center;}
  .nlf-tag{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:100px;animation:nlf-pop 2.4s ease-in-out infinite;}
  .nlf-tag:nth-child(1){background:#eee9ff;color:var(--nlf-indigo);animation-delay:0s;}
  .nlf-tag:nth-child(2){background:#ffe6dd;color:var(--nlf-coral);animation-delay:.25s;}
  .nlf-tag:nth-child(3){background:#e6f3ec;color:var(--nlf-mint);animation-delay:.5s;}
  @keyframes nlf-pop{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}

  /* 5. Personalized Newsletters — personalized line with tokens */
  .nlf-personal-line{font-size:11px;color:#3a3550;margin-top:14px;line-height:1.6;}
  .nlf-token{background:#eee9ff;color:var(--nlf-indigo);font-weight:600;padding:1px 6px;border-radius:5px;}

  /* 6. Newsletter Scheduling — clock + chips */
  .nlf-sched-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .nlf-sched-clock{width:36px;height:36px;border-radius:50%;border:2px solid var(--nlf-indigo);position:relative;flex-shrink:0;}
  .nlf-sched-clock::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;background:var(--nlf-indigo);transform-origin:left center;animation:nlf-tick 3s linear infinite;}
  @keyframes nlf-tick{to{transform:translate(0,-50%) rotate(360deg);}}
  .nlf-sched-chip{display:flex;gap:5px;margin-top:12px;}
  .nlf-sched-chip span{font-size:10px;font-weight:600;padding:4px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .nlf-sched-chip span.nlf-on{background:var(--nlf-indigo);color:#fff;}

  /* 7. Subscription Management — subscriber rows */
  .nlf-sub-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .nlf-sub-status{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:100px;}
  .nlf-sub-new{background:#e6f3ec;color:var(--nlf-mint);}
  .nlf-sub-out{background:#f1efe9;color:#8a8696;}

  /* 8. Real-Time Performance Analytics — live stat grid */
  .nlf-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
  .nlf-kpi-tile{background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:7px 9px;}
  .nlf-kpi-num{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#241f2e;}
  .nlf-kpi-tile:nth-child(1) .nlf-kpi-num{animation:nlf-blink 2.2s ease-in-out infinite;}

  /* 9. Mobile-Friendly Design — device preview */
  .nlf-devices{display:flex;align-items:flex-end;gap:14px;margin-top:16px;justify-content:center;}
  .nlf-device{background:#faf9ff;border:1px solid #eee9ff;border-radius:6px;position:relative;animation:nlf-settle 2.8s ease-in-out infinite;}
  .nlf-device--phone{width:20px;height:34px;border-radius:5px;}
  .nlf-device--tablet{width:28px;height:36px;border-radius:5px;animation-delay:.15s;}
  .nlf-device--laptop{width:44px;height:28px;animation-delay:.3s;}

  /* 10. CRM Contact Integration — linked records */
  .nlf-link-wrap{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;}
  .nlf-link-node{width:36px;height:36px;border-radius:10px;background:#faf9ff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
  .nlf-link-path{width:16px;height:2px;background:#d9d0ff;position:relative;}
  .nlf-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--nlf-indigo);animation:nlf-travel 2s ease-in-out infinite;}
  @keyframes nlf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}

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

  @media (prefers-reduced-motion:reduce){
    .nlf-root *{animation:none !important;transition:none !important;}
  }

  /* email-tracking */


@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:66 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.email-trackingcard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.et1-head{display:flex;align-items:center;justify-content:space-between;}
.et1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-live{display:flex;align-items:center;gap:5px;background:#e9f7ee;color:#1f9d55;font-size:10px;font-weight:700;padding:4px 9px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-live-dot{width:6px;height:6px;background:#1f9d55;border-radius:50%;display:inline-block;animation:pulseLive 1.6s ease-in-out infinite;}

.et1-stats{display:flex;gap:8px;margin-top:11px;}
.et1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.et1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.et1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.et1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.et1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.et1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.et1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.et1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.et1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.et1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-th-contact{flex:1.7;}
.et1-th-subject{flex:1.7;}
.et1-th-action{flex:1.5;}
.et1-th-time{flex:1;text-align:right;}

.et1-row{display:flex;align-items:center;font-size:9.5px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-row-a{animation-name:slideIn;animation-delay:.9s;}
.et1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.et1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.et1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.et1-contact{flex:1.7;font-weight:600;display:flex;align-items:center;gap:6px;}
.et1-avatar-a{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-avatar-b{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-avatar-c{width:18px;height:18px;border-radius:50%;background:#fdece3;color:#c14a1c;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et1-avatar-d{width:18px;height:18px;border-radius:50%;background:#f1ece9;color:#7a726e;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.et1-subject{flex:1.7;color:#7a726e;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.et1-action{flex:1.5;}
.et1-action-opened3{display:inline-flex;align-items:center;gap:3px;color:#c14a1c;font-weight:700;}
.et1-action-clicked{color:#185fa5;font-weight:600;}
.et1-action-opened{color:#1f9d55;font-weight:600;}
.et1-action-notopened{color:#9a9290;font-weight:600;}
.et1-action-dot{width:5px;height:5px;background:#e0561f;border-radius:50%;display:inline-block;animation:pulseLive 1.3s ease-in-out infinite;}

.et1-time{flex:1;text-align:right;color:#9a9290;font-size:9px;}

.et1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.email-trackingcard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.et2-head{display:flex;align-items:center;justify-content:space-between;}
.et2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.et2-scorebox{background:#f7f4f1;padding:9px 11px;margin-top:12px;display:flex;align-items:center;gap:12px;}
.et2-donut-wrap{position:relative;width:56px;height:56px;flex-shrink:0;}
.et2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.et2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.et2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.et2-donut-value{font-size:11.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et2-donut-label{font-size:7.5px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.et2-score-info{flex:1;}
.et2-score-title{font-size:10.5px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et2-score-line{font-size:9px;color:#5d5451;margin-top:3px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.et2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.et2-notifybox{background:#181114;padding:12px 14px;margin-top:12px;}
.et2-notify-toprow{display:flex;align-items:center;gap:6px;}
.et2-notify-dot{width:6px;height:6px;background:#e0561f;border-radius:50%;display:inline-block;animation:pulseLive 1.3s ease-in-out infinite;}
.et2-notify-label{font-size:9px;color:#ff9a63;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.et2-notify-row{display:flex;align-items:center;gap:10px;margin-top:9px;}
.et2-notify-avatar{width:32px;height:32px;border-radius:50%;background:#e0561f;color:#ffffff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et2-notify-text{font-size:11px;font-weight:700;color:#ffffff;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.et2-notify-sub{font-size:9px;color:#a8a19d;margin-top:2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.et2-notify-btn{background:#ffffff;color:#181114;font-size:9.5px;font-weight:700;text-align:center;padding:6px 0;margin-top:10px;opacity:0;animation:chipPop .4s ease-out 1.4s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.et2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}



  .etf-root{
    --etf-ink:#17161c;
    --etf-sub:#6b6878;
    --etf-line:#eeece7;
    --etf-paper:#faf9f6;
    --etf-card:#ffffff;
    --etf-indigo:#4b3fe4;
    --etf-coral:#ff6b4a;
    --etf-mint:#28a06b;
    --etf-amber:#e6a23c;
    --etf-tint-peach:#fbeadf;
    --etf-tint-navy:#f2f1f6;
    --etf-tint-mint:#e6f3ec;
    --etf-tint-lav:#eeeafc;
    --etf-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--etf-ink);
   
    box-sizing:border-box;
  }
  .etf-root *{box-sizing:border-box;}
  .etf-wrap{max-width:1160px;margin:0 auto;}

  .etf-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .etf-card{
    background:var(--etf-card);
    border:1px solid var(--etf-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .etf-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .etf-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .etf-tint-peach{background:var(--etf-tint-peach);}
  .etf-tint-navy{background:var(--etf-tint-navy);}
  .etf-tint-mint{background:var(--etf-tint-mint);}
  .etf-tint-lav{background:var(--etf-tint-lav);}
  .etf-tint-sky{background:var(--etf-tint-sky);}

  .etf-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .etf-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .etf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .etf-dot{width:8px;height:8px;border-radius:50%;}
  .etf-dot--r{background:#f0665a;}
  .etf-dot--y{background:#f0b64a;}
  .etf-dot--g{background:#57c26a;}
  .etf-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .etf-window--dark .etf-chrome-bar{background:rgba(255,255,255,.14);}

  .etf-body{
    padding:32px 28px 34px;
  }
  .etf-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .etf-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--etf-sub);
    margin:0;
  }

  .etf-label{font-size:11px;font-weight:600;color:#8a8696;}
  .etf-window--dark .etf-label{color:#a9a4c4;}
  .etf-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  @keyframes etf-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Email Open Tracking — live open toast */
  .etf-toast{margin-top:14px;background:#fff;border:1px solid #f2e2da;border-radius:10px;padding:9px 11px;display:flex;gap:8px;align-items:flex-start;box-shadow:0 6px 14px -8px rgba(23,22,28,.2);animation:etf-slide-in 2.6s ease-in-out infinite;}
  @keyframes etf-slide-in{0%{transform:translateX(-8px);opacity:0;}18%{transform:translateX(0);opacity:1;}82%{opacity:1;}100%{opacity:0;}}
  .etf-live{display:flex;align-items:center;gap:6px;margin-top:12px;}
  .etf-live-dot{width:7px;height:7px;border-radius:50%;background:var(--etf-mint);animation:etf-blink 1.4s ease-in-out infinite;}

  /* 2. Link Click Tracking — click list with counts */
  .etf-click-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .etf-click-count{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:100px;background:#eee9ff;color:var(--etf-indigo);}

  /* 3. Real-Time Notifications — bell + toast */
  .etf-bell{width:34px;height:34px;border-radius:10px;background:#ffe6dd;display:flex;align-items:center;justify-content:center;position:relative;margin-top:6px;}
  .etf-bell-badge{position:absolute;top:-4px;right:-4px;width:15px;height:15px;border-radius:50%;background:var(--etf-coral);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:etf-blink 1.8s ease-in-out infinite;}

  /* 4. Email Delivery Status — status rows */
  .etf-status-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
  .etf-status-chip{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:100px;}
  .etf-status-ok{background:#e6f3ec;color:var(--etf-mint);}
  .etf-status-bounce{background:#ffe6dd;color:var(--etf-coral);animation:etf-blink 2s ease-in-out infinite;}
  .etf-status-wait{background:#fdf1da;color:var(--etf-amber);}

  /* 5. Email A/B Testing — variant comparison */
  .etf-ab-wrap{display:flex;gap:8px;margin-top:14px;}
  .etf-ab-card{flex:1;border-radius:9px;padding:8px 9px;border:1px solid #eee9ff;background:#faf9ff;}
  .etf-ab-card.etf-winner{border-color:var(--etf-mint);background:#f2faf5;}
  .etf-ab-pct{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#241f2e;}
  .etf-ab-card.etf-winner .etf-ab-pct{color:var(--etf-mint);}

  /* 6. Recipient Activity History — timeline */
  .etf-timeline{position:relative;padding-left:16px;margin-top:8px;}
  .etf-timeline::before{content:"";position:absolute;left:4px;top:2px;bottom:2px;width:2px;background:#eee9ff;}
  .etf-tl-item{position:relative;margin-bottom:12px;}
  .etf-tl-item::before{content:"";position:absolute;left:-16px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--etf-indigo);border:2px solid #fff;box-shadow:0 0 0 2px #eee9ff;}
  .etf-tl-item:nth-child(2)::before{animation:etf-blink 1.8s ease-in-out infinite;}
  .etf-tl-line{height:7px;border-radius:4px;background:#f1efe9;}

  /* 7. Device & Location Insights — device + location row */
  .etf-device-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .etf-device-ico{width:38px;height:38px;border-radius:10px;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}

  /* 8. Campaign Performance Reports — live stat grid */
  .etf-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
  .etf-kpi-tile{background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:7px 9px;}
  .etf-kpi-num{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#241f2e;}
  .etf-kpi-tile:nth-child(1) .etf-kpi-num{animation:etf-blink 2.2s ease-in-out infinite;}

  /* 9. CRM Activity Sync — linked records */
  .etf-link-wrap{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;}
  .etf-link-node{width:36px;height:36px;border-radius:10px;background:#faf9ff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
  .etf-link-path{width:16px;height:2px;background:#d9d0ff;position:relative;}
  .etf-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--etf-indigo);animation:etf-travel 2s ease-in-out infinite;}
  @keyframes etf-travel{0%{left:0;}100%{left:calc(100% - 8px);}}

  /* 10. Follow-Up Reminders — reminder toast */
  .etf-remind-toast{margin-top:14px;background:#fff;border:1px solid #f2e2da;border-radius:10px;padding:9px 11px;display:flex;gap:8px;align-items:flex-start;box-shadow:0 6px 14px -8px rgba(23,22,28,.2);}

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

  @media (prefers-reduced-motion:reduce){
    .etf-root *{animation:none !important;transition:none !important;}
  }

  /* multichannel-campaigns */


@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:74 100}}
@keyframes growBarA{0%{width:0%}100%{width:42%}}
@keyframes growBarB{0%{width:0%}100%{width:31%}}
@keyframes growBarC{0%{width:0%}100%{width:18%}}
@keyframes growBarD{0%{width:0%}100%{width:9%}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.multichannel-campaignscard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.mc1-head{display:flex;align-items:center;justify-content:space-between;}
.mc1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.mc1-stats{display:flex;gap:8px;margin-top:11px;}
.mc1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.mc1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.mc1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.mc1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.mc1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.mc1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.mc1-chg-a{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-chg-b{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.mc1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.mc1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.mc1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-th-campaign{flex:1.9;}
.mc1-th-channels{flex:1.5;}
.mc1-th-reach{flex:1.1;text-align:right;}
.mc1-th-status{flex:1.1;text-align:right;}

.mc1-row{display:flex;align-items:center;font-size:9.5px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-row-a{animation-name:slideIn;animation-delay:.9s;}
.mc1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.mc1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.mc1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.mc1-campaign{flex:1.9;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mc1-channels{flex:1.5;display:flex;gap:3px;}
.mc1-chip-email{background:#fdece3;color:#c14a1c;font-size:7px;font-weight:800;padding:2px 5px;opacity:0;animation:popIn .3s ease-out forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-chip-sms{background:#e6f1fb;color:#185fa5;font-size:7px;font-weight:800;padding:2px 5px;opacity:0;animation:popIn .3s ease-out forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-chip-social{background:#fdf3de;color:#b5810f;font-size:7px;font-weight:800;padding:2px 5px;opacity:0;animation:popIn .3s ease-out forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-chip-ads{background:#f1ece9;color:#5f5e5a;font-size:7px;font-weight:800;padding:2px 5px;opacity:0;animation:popIn .3s ease-out forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-d1{animation-delay:.95s;}
.mc1-d2{animation-delay:1s;}
.mc1-d3{animation-delay:1.07s;}
.mc1-d4{animation-delay:1.12s;}
.mc1-d5{animation-delay:1.19s;}
.mc1-d6{animation-delay:1.24s;}
.mc1-d7{animation-delay:1.31s;}
.mc1-d8{animation-delay:1.36s;}
.mc1-d9{animation-delay:1.41s;}

.mc1-reach{flex:1.1;text-align:right;color:#7a726e;font-size:9.5px;}

.mc1-status{flex:1.1;text-align:right;}
.mc1-status-live{display:inline-flex;align-items:center;gap:3px;background:#e9f7ee;color:#1f9d55;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-status-sched{display:inline-block;background:#fdf3de;color:#b5810f;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-status-paused{display:inline-block;background:#f1ece9;color:#7a726e;font-size:8.5px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc1-live-dot{width:5px;height:5px;background:#1f9d55;border-radius:50%;display:inline-block;animation:pulseLive 1.4s ease-in-out infinite;}

.mc1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.multichannel-campaignscard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.mc2-head{display:flex;align-items:center;justify-content:space-between;}
.mc2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.mc2-scorebox{background:#f7f4f1;padding:9px 11px;margin-top:12px;display:flex;align-items:center;gap:12px;}
.mc2-donut-wrap{position:relative;width:56px;height:56px;flex-shrink:0;}
.mc2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.mc2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.mc2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.mc2-donut-value{font-size:11.5px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc2-donut-label{font-size:7.5px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.mc2-score-info{flex:1;}
.mc2-score-title{font-size:10.5px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc2-score-line{font-size:9px;color:#5d5451;margin-top:3px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.mc2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.mc2-breakdown{margin-top:13px;}
.mc2-bd-title{font-size:11px;font-weight:700;color:#181114;margin-bottom:8px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.mc2-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.mc2-bar-label{font-size:9.5px;color:#5d5451;width:52px;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.mc2-bar-track{flex:1;height:6px;background:#f1ece9;}
.mc2-bar-fill-a{height:6px;background:#e0561f;width:0%;animation:growBarA 1s cubic-bezier(.3,.7,.2,1) .9s forwards;}
.mc2-bar-fill-b{height:6px;background:#e0561f;width:0%;animation:growBarB 1s cubic-bezier(.3,.7,.2,1) 1.05s forwards;}
.mc2-bar-fill-c{height:6px;background:#e0561f;width:0%;animation:growBarC 1s cubic-bezier(.3,.7,.2,1) 1.2s forwards;}
.mc2-bar-fill-d{height:6px;background:#e0561f;width:0%;animation:growBarD 1s cubic-bezier(.3,.7,.2,1) 1.35s forwards;}
.mc2-bar-pct{font-size:9.5px;font-weight:700;color:#181114;width:26px;text-align:right;flex-shrink:0;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.mc2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}



/* multichannel-campaigns */
  .ccm-root{
    --ccm-ink:#17161c;
    --ccm-sub:#6b6878;
    --ccm-line:#eeece7;
    --ccm-paper:#faf9f6;
    --ccm-card:#ffffff;
    --ccm-indigo:#4b3fe4;
    --ccm-coral:#ff6b4a;
    --ccm-mint:#28a06b;
    --ccm-amber:#e6a23c;
    --ccm-tint-peach:#fbeadf;
    --ccm-tint-navy:#f2f1f6;
    --ccm-tint-mint:#e6f3ec;
    --ccm-tint-lav:#eeeafc;
    --ccm-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--ccm-ink);
    
    box-sizing:border-box;
  }
  .ccm-root *{box-sizing:border-box;}
  .ccm-wrap{max-width:1160px;margin:0 auto;}

  .ccm-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:start;
  }
  .ccm-card{
    background:var(--ccm-card);
    border:1px solid var(--ccm-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .ccm-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .ccm-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .ccm-tint-peach{background:var(--ccm-tint-peach);}
  .ccm-tint-navy{background:var(--ccm-tint-navy);}
  .ccm-tint-mint{background:var(--ccm-tint-mint);}
  .ccm-tint-lav{background:var(--ccm-tint-lav);}
  .ccm-tint-sky{background:var(--ccm-tint-sky);}

  .ccm-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .ccm-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .ccm-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .ccm-dot{width:8px;height:8px;border-radius:50%;}
  .ccm-dot--r{background:#f0665a;}
  .ccm-dot--y{background:#f0b64a;}
  .ccm-dot--g{background:#57c26a;}
  .ccm-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .ccm-window--dark .ccm-chrome-bar{background:rgba(255,255,255,.14);}

  .ccm-body{
    padding:32px 28px 34px;
  }
  .ccm-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .ccm-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--ccm-sub);
    margin:0;
  }

  .ccm-benefits-label{
    font-size:10.5px;
    font-weight:700;
    color:#a39ecf;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:12px 0 12px;
    padding-top:12px;
    border-top:1px solid #eee9f3;
  }
  .ccm-benefits{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 18px;
  }
  .ccm-benefits li{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    line-height:1.35;
    color:#332f45;
    font-weight:500;
  }
  .ccm-benefits li::before{
    content:"✓";
    display:flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#eee9ff;
    color:var(--ccm-indigo);
    font-weight:700;
    font-size:9px;
    flex-shrink:0;
  }

  .ccm-label{font-size:11px;font-weight:600;color:#8a8696;}
  .ccm-window--dark .ccm-label{color:#a9a4c4;}
  .ccm-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  @keyframes ccm-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Cross-Channel Campaign Management — channels feeding a hub */
  .ccm-hub-wrap{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
  .ccm-hub-core{width:42px;height:42px;border-radius:12px;background:var(--ccm-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2;box-shadow:0 8px 18px -6px rgba(75,63,228,.5);}
  .ccm-hub-node{position:absolute;width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.2);display:flex;align-items:center;justify-content:center;font-size:11px;animation:ccm-feed 2.4s ease-in-out infinite;}
  .ccm-hub-node:nth-child(2){top:8px;left:20px;animation-delay:0s;}
  .ccm-hub-node:nth-child(3){bottom:8px;left:20px;animation-delay:.4s;}
  .ccm-hub-node:nth-child(4){top:8px;right:20px;animation-delay:.8s;}
  .ccm-hub-node:nth-child(5){bottom:8px;right:20px;animation-delay:1.2s;}
  @keyframes ccm-feed{0%{opacity:1;transform:scale(1);}60%{opacity:.3;transform:scale(.5);}61%,100%{opacity:0;}}

  /* 2. Audience Segmentation — tag chips */
  .ccm-tagrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;height:100%;align-content:center;}
  .ccm-tag{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:100px;animation:ccm-pop 2.4s ease-in-out infinite;}
  .ccm-tag:nth-child(1){background:#eee9ff;color:var(--ccm-indigo);animation-delay:0s;}
  .ccm-tag:nth-child(2){background:#ffe6dd;color:var(--ccm-coral);animation-delay:.25s;}
  .ccm-tag:nth-child(3){background:#e6f3ec;color:var(--ccm-mint);animation-delay:.5s;}
  @keyframes ccm-pop{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}

  /* 3. Campaign Automation — workflow chain */
  .ccm-flow-row{display:flex;align-items:center;gap:6px;margin-top:16px;}
  .ccm-flow-step{width:28px;height:28px;border-radius:50%;background:#f1efe9;display:flex;align-items:center;justify-content:center;font-size:11px;color:#8a8696;flex-shrink:0;}
  .ccm-flow-step.ccm-done{background:var(--ccm-mint);color:#fff;}
  .ccm-flow-step.ccm-active{background:var(--ccm-indigo);color:#fff;animation:ccm-blink 1.8s ease-in-out infinite;}
  .ccm-flow-line{flex:1;height:2px;background:#eee9ff;}

  /* 4. Personalized Messaging — personalized line with tokens */
  .ccm-personal-line{font-size:11px;color:#3a3550;margin-top:14px;line-height:1.6;}
  .ccm-token{background:#eee9ff;color:var(--ccm-indigo);font-weight:600;padding:1px 6px;border-radius:5px;}

  /* 5. Multi-Channel Scheduling — clock + chips */
  .ccm-sched-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .ccm-sched-clock{width:36px;height:36px;border-radius:50%;border:2px solid var(--ccm-indigo);position:relative;flex-shrink:0;}
  .ccm-sched-clock::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;background:var(--ccm-indigo);transform-origin:left center;animation:ccm-tick 3s linear infinite;}
  @keyframes ccm-tick{to{transform:translate(0,-50%) rotate(360deg);}}
  .ccm-sched-chip{display:flex;gap:5px;margin-top:12px;}
  .ccm-sched-chip span{font-size:10px;font-weight:600;padding:4px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .ccm-sched-chip span.ccm-on{background:var(--ccm-indigo);color:#fff;}

  /* 6. Campaign Performance Analytics — bar chart */
  .ccm-chart-wrap{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:16px;}
  .ccm-bar{flex:1;background:#eee9ff;border-radius:4px 4px 0 0;animation:ccm-bar-grow 2.6s ease-in-out infinite;}
  .ccm-bar:nth-child(4){background:var(--ccm-indigo);}
  .ccm-bar:nth-child(5){background:var(--ccm-mint);}
  .ccm-bar:nth-child(1){animation-delay:0s;}
  .ccm-bar:nth-child(2){animation-delay:.15s;}
  .ccm-bar:nth-child(3){animation-delay:.3s;}
  .ccm-bar:nth-child(4){animation-delay:.45s;}
  .ccm-bar:nth-child(5){animation-delay:.6s;}
  @keyframes ccm-bar-grow{0%{height:20%;}60%,100%{height:var(--h,70%);}}

  /* 7. CRM Contact Integration — linked records */
  .ccm-link-wrap{display:flex;align-items:center;justify-content:center;gap:8px;height:100%;}
  .ccm-link-node{width:36px;height:36px;border-radius:10px;background:#faf9ff;border:1px solid #eee9ff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
  .ccm-link-path{width:16px;height:2px;background:#d9d0ff;position:relative;}
  .ccm-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--ccm-indigo);animation:ccm-travel 2s ease-in-out infinite;}
  @keyframes ccm-travel{0%{left:0;}100%{left:calc(100% - 8px);}}

  /* 8. Channel Performance Comparison — channel bars */
  .ccm-comp-row{display:flex;align-items:center;gap:8px;margin-top:11px;}
  .ccm-comp-ico{width:18px;flex-shrink:0;font-size:12px;}
  .ccm-comp-bar{flex:1;height:8px;border-radius:4px;background:#f1efe9;overflow:hidden;}
  .ccm-comp-bar i{display:block;height:100%;border-radius:4px;}

  /* 9. Customer Journey Tracking — timeline across channels */
  .ccm-journey{display:flex;align-items:center;gap:6px;margin-top:16px;}
  .ccm-journey-step{width:26px;height:26px;border-radius:50%;background:#eee9ff;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;}
  .ccm-journey-step.ccm-hit2{background:var(--ccm-indigo);color:#fff;animation:ccm-blink 1.8s ease-in-out infinite;}
  .ccm-journey-line{flex:1;height:2px;background:#eee9ff;}

  /* 10. Unified Campaign Dashboard — KPI grid */
  .ccm-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
  .ccm-kpi-tile{background:#faf9ff;border:1px solid #eee9ff;border-radius:10px;padding:7px 9px;}
  .ccm-kpi-num{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#241f2e;}
  .ccm-kpi-tile:nth-child(1) .ccm-kpi-num{animation:ccm-blink 2.2s ease-in-out infinite;}

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

  @media (prefers-reduced-motion:reduce){
    .ccm-root *{animation:none !important;transition:none !important;}
  }

  /* video-emails */


@keyframes cardRiseA{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cardRiseB{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes donutDraw{0%{stroke-dasharray:0 100}100%{stroke-dasharray:82 100}}
@keyframes chipPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(224,86,31,.4)}70%{box-shadow:0 0 0 10px rgba(224,86,31,0)}100%{box-shadow:0 0 0 0 rgba(224,86,31,0)}}
@keyframes sheenMove{0%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(220%) skewX(-15deg)}}

.pagebody{margin:0;padding:48px 32px;background:linear-gradient(180deg,#150705 0%,#3a1508 55%,#6e2306 100%);font-family:'Plus Jakarta Sans',Arial,sans-serif;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;}

.video-emailscard1{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseA .7s cubic-bezier(.2,.7,.3,1) .1s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.ve1-head{display:flex;align-items:center;justify-content:space-between;}
.ve1-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve1-add{background:#e0561f;color:#ffffff;font-size:10.5px;font-weight:700;padding:5px 10px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ve1-stats{display:flex;gap:8px;margin-top:11px;}
.ve1-stat{flex:1;border:1px solid #efeae7;padding:6px 8px;}

.ve1-icon-a{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ve1-icon-b{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ve1-icon-c{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ve1-icon-d{width:16px;height:16px;background:#fdece3;display:flex;align-items:center;justify-content:center;margin-bottom:4px;}

.ve1-val-a{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve1-val-b{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve1-val-c{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve1-val-d{font-size:16px;font-weight:800;color:#181114;line-height:1.15;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ve1-chg-a{font-size:9.5px;color:#1f9d55;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve1-chg-b{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve1-chg-c{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve1-chg-d{font-size:9.5px;color:#7a726e;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ve1-listhead{display:flex;align-items:center;justify-content:space-between;margin-top:13px;margin-bottom:5px;}
.ve1-listtitle{font-size:11.5px;font-weight:700;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve1-viewall{font-size:9.5px;color:#e0561f;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ve1-thead{display:flex;font-size:9px;color:#9a9290;font-weight:700;padding:0 0 4px 0;border-bottom:1px solid #f1ece9;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve1-th-video{flex:2;}
.ve1-th-recipient{flex:1.5;}
.ve1-th-views{flex:1;text-align:right;}
.ve1-th-rate{flex:1.1;text-align:right;}

.ve1-row{display:flex;align-items:center;font-size:9.5px;padding:5.5px 0;color:#3c3532;border-bottom:1px solid #f7f4f2;opacity:0;animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve1-row-a{animation-name:slideIn;animation-delay:.9s;}
.ve1-row-b{animation-name:slideIn;animation-delay:1.02s;}
.ve1-row-c{animation-name:slideIn;animation-delay:1.14s;}
.ve1-row-d{animation-name:slideIn;animation-delay:1.26s;border-bottom:none;}

.ve1-video{flex:2;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ve1-thumb-a{width:20px;height:14px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out .95s forwards;}
.ve1-thumb-b{width:20px;height:14px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.07s forwards;}
.ve1-thumb-c{width:20px;height:14px;background:#f1ece9;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.19s forwards;}
.ve1-thumb-d{width:20px;height:14px;background:#fdece3;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;animation:popIn .3s ease-out 1.31s forwards;}

.ve1-recipient{flex:1.5;color:#7a726e;font-size:9px;}
.ve1-views{flex:1;text-align:right;color:#7a726e;font-size:9px;}

.ve1-rate{flex:1.1;text-align:right;font-weight:700;}
.ve1-rate-high{color:#1f9d55;}
.ve1-rate-zero{color:#9a9290;}

.ve1-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.4s;pointer-events:none;}

.video-emailscard2{width:462px;height:303px;background:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;animation:cardRiseB .7s cubic-bezier(.2,.7,.3,1) .25s forwards;position:relative;overflow:hidden;border-radius:20px 20px 0px 0px;}
.ve2-head{display:flex;align-items:center;justify-content:space-between;}
.ve2-title{font-size:15px;font-weight:700;color:#181114;letter-spacing:-.2px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve2-pill{display:flex;align-items:center;gap:4px;background:#fdece3;color:#c14a1c;padding:3px 8px;font-size:10.5px;font-weight:700;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ve2-scorebox{background:#f7f4f1;padding:9px 11px;margin-top:12px;display:flex;align-items:center;gap:12px;}
.ve2-donut-wrap{position:relative;width:54px;height:54px;flex-shrink:0;}
.ve2-donut-track{fill:none;stroke:#ece6e2;stroke-width:3.6;}
.ve2-donut-fill{fill:none;stroke:#e0561f;stroke-width:3.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px;stroke-dasharray:0 100;animation:donutDraw 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards;}
.ve2-donut-textwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ve2-donut-value{font-size:11px;font-weight:800;color:#181114;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve2-donut-label{font-size:7px;color:#9a9290;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ve2-score-info{flex:1;}
.ve2-score-title{font-size:10.5px;font-weight:700;color:#e0561f;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve2-score-line{font-size:9px;color:#5d5451;margin-top:3px;opacity:0;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve2-score-line-a{animation-name:slideIn;animation-delay:1.3s;}
.ve2-score-line-b{animation-name:slideIn;animation-delay:1.42s;}

.ve2-videobox{background:#181114;padding:11px;margin-top:12px;}
.ve2-thumb{background:linear-gradient(135deg,#3a1508,#6e2306);height:88px;position:relative;display:flex;align-items:center;justify-content:center;}
.ve2-play-ring{width:36px;height:36px;border-radius:50%;background:#e0561f;display:flex;align-items:center;justify-content:center;animation:ringPulse 2s ease-out infinite;}
.ve2-duration-badge{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.6);color:#ffffff;font-size:8px;font-weight:700;padding:2px 6px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ve2-videoinfo{display:flex;align-items:center;justify-content:space-between;margin-top:9px;}
.ve2-video-title{font-size:10.5px;font-weight:700;color:#ffffff;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve2-video-sub{font-size:8.5px;color:#a8a19d;margin-top:1px;font-family:'Plus Jakarta Sans',Arial,sans-serif;}
.ve2-send-btn{background:#e0561f;color:#ffffff;font-size:9px;font-weight:700;padding:5px 10px;flex-shrink:0;opacity:0;animation:chipPop .4s ease-out 1.5s forwards;font-family:'Plus Jakarta Sans',Arial,sans-serif;}

.ve2-sheen{position:absolute;top:0;left:0;width:60px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheenMove 2.6s ease-in-out 2.7s;pointer-events:none;}




  .vec-root{
    --vec-ink:#17161c;
    --vec-sub:#6b6878;
    --vec-line:#eeece7;
    --vec-paper:#faf9f6;
    --vec-card:#ffffff;
    --vec-indigo:#4b3fe4;
    --vec-coral:#ff6b4a;
    --vec-mint:#28a06b;
    --vec-amber:#e6a23c;
    --vec-tint-peach:#fbeadf;
    --vec-tint-navy:#f2f1f6;
    --vec-tint-mint:#e6f3ec;
    --vec-tint-lav:#eeeafc;
    --vec-tint-sky:#eceafc;
    font-family:'Inter',sans-serif;
    
    color:var(--vec-ink);
   
    box-sizing:border-box;
  }
  .vec-root *{box-sizing:border-box;}
  .vec-wrap{max-width:1160px;margin:0 auto;}

  .vec-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .vec-card{
    background:var(--vec-card);
    border:1px solid var(--vec-line);
    border-radius:22px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .vec-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 44px -22px rgba(23,22,28,.18);
    border-color:#ded9ff;
  }

  .vec-shot{
    height:230px;
    padding:26px 28px;
    display:flex;
  }
  .vec-tint-peach{background:var(--vec-tint-peach);}
  .vec-tint-navy{background:var(--vec-tint-navy);}
  .vec-tint-mint{background:var(--vec-tint-mint);}
  .vec-tint-lav{background:var(--vec-tint-lav);}
  .vec-tint-sky{background:var(--vec-tint-sky);}

  .vec-window{
    width:100%;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 22px 40px -16px rgba(23,22,28,.22);
    padding:16px 18px;
    position:relative;
    overflow:hidden;
  }
  .vec-window--dark{background:#1c1832;box-shadow:0 22px 40px -16px rgba(0,0,0,.42);}

  .vec-chrome{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
  .vec-dot{width:8px;height:8px;border-radius:50%;}
  .vec-dot--r{background:#f0665a;}
  .vec-dot--y{background:#f0b64a;}
  .vec-dot--g{background:#57c26a;}
  .vec-chrome-bar{
    height:8px;flex:1;max-width:130px;margin-left:8px;border-radius:5px;
    background:rgba(23,22,28,.08);
  }
  .vec-window--dark .vec-chrome-bar{background:rgba(255,255,255,.14);}

  .vec-body{
    padding:32px 28px 34px;
  }
  .vec-body h3{
    font-family:'Sora',sans-serif;
    font-size:23px;
    font-weight:700;
    margin:0 0 14px;
    letter-spacing:-.01em;
  }
  .vec-body p{
    font-size:15.5px;
    line-height:1.7;
    color:var(--vec-sub);
    margin:0;
  }

  .vec-label{font-size:11px;font-weight:600;color:#8a8696;}
  .vec-window--dark .vec-label{color:#a9a4c4;}
  .vec-avatar{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;
    border:2px solid #fff;flex-shrink:0;
  }
  @keyframes vec-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  /* 1. Video Upload & Creation — upload tray with video icon */
  .vec-upload-wrap{margin-top:14px;text-align:center;}
  .vec-upload-tray{width:56px;height:40px;border:2px dashed #d9d0ff;border-radius:10px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;overflow:hidden;}
  .vec-upload-icon{animation:vec-rise 2.2s ease-in-out infinite;}
  @keyframes vec-rise{0%{transform:translateY(10px);opacity:0;}40%{transform:translateY(0);opacity:1;}80%{transform:translateY(-2px);opacity:1;}100%{transform:translateY(-14px);opacity:0;}}
  .vec-upload-bar{height:7px;border-radius:4px;background:#f1efe9;max-width:150px;margin:0 auto;overflow:hidden;}
  .vec-upload-bar i{display:block;height:100%;background:var(--vec-indigo);border-radius:4px;animation:vec-fillbar 2.2s ease-in-out infinite;}
  @keyframes vec-fillbar{0%{width:5%;}90%,100%{width:92%;}}

  /* 2. Targeted Video Campaigns — tag chips */
  .vec-tagrow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;height:100%;align-content:center;}
  .vec-tag{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:100px;animation:vec-pop 2.4s ease-in-out infinite;}
  .vec-tag:nth-child(1){background:#eee9ff;color:var(--vec-indigo);animation-delay:0s;}
  .vec-tag:nth-child(2){background:#ffe6dd;color:var(--vec-coral);animation-delay:.25s;}
  .vec-tag:nth-child(3){background:#e6f3ec;color:var(--vec-mint);animation-delay:.5s;}
  @keyframes vec-pop{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}

  /* 3. Video Calls-to-Action — CTA overlay on video */
  .vec-cta-wrap{margin-top:14px;background:#1c1832;border-radius:10px;height:120px;position:relative;display:flex;align-items:center;justify-content:center;}
  .vec-cta-btn{font-size:10.5px;font-weight:700;padding:7px 14px;border-radius:100px;background:var(--vec-indigo);color:#fff;animation:vec-pop 2.4s ease-in-out infinite;}

  /* 4. Lead Acquisition — sources feeding a capture hub */
  .vec-hub-wrap{position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
  .vec-hub-core{width:42px;height:42px;border-radius:12px;background:var(--vec-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2;box-shadow:0 8px 18px -6px rgba(75,63,228,.5);}
  .vec-hub-node{position:absolute;width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid #e3ddff;box-shadow:0 4px 10px -4px rgba(23,22,28,.2);display:flex;align-items:center;justify-content:center;font-size:11px;animation:vec-feed 2.4s ease-in-out infinite;}
  .vec-hub-node:nth-child(2){top:8px;left:20px;animation-delay:0s;}
  .vec-hub-node:nth-child(3){bottom:8px;left:20px;animation-delay:.4s;}
  .vec-hub-node:nth-child(4){top:8px;right:20px;animation-delay:.8s;}
  .vec-hub-node:nth-child(5){bottom:8px;right:20px;animation-delay:1.2s;}
  @keyframes vec-feed{0%{opacity:1;transform:scale(1);}60%{opacity:.3;transform:scale(.5);}61%,100%{opacity:0;}}

  /* 5. Video Performance Tracking — live stats grid */
  .vec-track-wrap{display:flex;justify-content:space-between;margin-top:14px;text-align:center;}
  .vec-track-stat{flex:1;}
  .vec-track-num{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;color:#241f2e;}
  .vec-live{display:flex;align-items:center;gap:6px;margin-top:12px;}
  .vec-live-dot{width:7px;height:7px;border-radius:50%;background:var(--vec-mint);animation:vec-blink 1.4s ease-in-out infinite;}

  /* 6. Personalized Video Emails — thumbnail with recipient name */
  .vec-vid-wrap{margin-top:12px;background:#1c1832;border-radius:10px;height:130px;position:relative;display:flex;align-items:center;justify-content:center;}
  .vec-play-btn{width:36px;height:36px;border-radius:50%;background:var(--vec-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;animation:vec-pop 2.2s ease-in-out infinite;}
  .vec-vid-name{position:absolute;bottom:8px;left:10px;font-size:10px;color:#e4e1f2;font-weight:600;}

  /* 7. Video Email Templates — template gallery */
  .vec-tmpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
  .vec-tmpl-tile{aspect-ratio:3/4;border-radius:8px;background:#faf9ff;border:1px solid #eee9ff;position:relative;animation:vec-settle 2.6s ease-in-out infinite;display:flex;align-items:center;justify-content:center;font-size:12px;}
  .vec-tmpl-tile:nth-child(2){animation-delay:.15s;}
  .vec-tmpl-tile:nth-child(3){animation-delay:.3s;}
  @keyframes vec-settle{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

  /* 8. Video Email Scheduling — clock + chips */
  .vec-sched-wrap{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .vec-sched-clock{width:36px;height:36px;border-radius:50%;border:2px solid var(--vec-indigo);position:relative;flex-shrink:0;}
  .vec-sched-clock::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;background:var(--vec-indigo);transform-origin:left center;animation:vec-tick 3s linear infinite;}
  @keyframes vec-tick{to{transform:translate(0,-50%) rotate(360deg);}}
  .vec-sched-chip{display:flex;gap:5px;margin-top:12px;}
  .vec-sched-chip span{font-size:10px;font-weight:600;padding:4px 8px;border-radius:100px;background:#f1efe9;color:#8a8696;}
  .vec-sched-chip span.vec-on{background:var(--vec-indigo);color:#fff;}

  /* 9. CRM Contact Integration — linked records */
  .vec-link-wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;}
  .vec-link-vid{width:38px;height:38px;border-radius:9px;background:var(--vec-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .vec-link-path{width:26px;height:2px;background:#d9d0ff;position:relative;}
  .vec-link-path::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--vec-indigo);animation:vec-travel 2s ease-in-out infinite;}
  @keyframes vec-travel{0%{left:0;}100%{left:calc(100% - 8px);}}
  .vec-link-contact{width:38px;height:38px;border-radius:50%;background:var(--vec-indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  /* 10. Mobile-Friendly Video Emails — device preview */
  .vec-devices{display:flex;align-items:flex-end;gap:14px;margin-top:16px;justify-content:center;}
  .vec-device{background:#faf9ff;border:1px solid #eee9ff;border-radius:6px;position:relative;animation:vec-settle 2.8s ease-in-out infinite;}
  .vec-device--phone{width:20px;height:34px;border-radius:5px;}
  .vec-device--tablet{width:28px;height:36px;border-radius:5px;animation-delay:.15s;}
  .vec-device--laptop{width:44px;height:28px;animation-delay:.3s;}

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

  @media (prefers-reduced-motion:reduce){
    .vec-root *{animation:none !important;transition:none !important;}
  }