/*** Cookie ***/
.cookie-alert {
  position: fixed;
  top: auto;
  bottom: 0;
  /* right: calc((100% - 1200px) / 2); */
  right: 20px;
  left: auto;
  padding: 0 !important;
  z-index: 999;
  opacity: 0;
  transform: translateY(100%);
  transition: all 500ms ease-out;
  max-width: 400px;
  width: 100%;
  border: 2px solid #333;
}
.cookie-alert.show {
  opacity: 1;
  transform: translateY(0%);
  transition-delay: 1000ms;
}
.cookie-alert .card-body {
  border-radius: 10px;
}
.cookie-alert .card-title {
  font-size: 45px;
}
.cookie-alert .card-text {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #545e6c !important;
}
.cookie-alert .card-title {
  letter-spacing: -1px;
}
#cookiessettingsmodal .modal-header{padding: 15px 25px;}
#cookiessettingsmodal .modal-header .modal-title{color: #333;font-size: 20px;font-weight: 600;}
#cookiessettingsmodal .modal-header .btn-close{
  color: #333;
  opacity: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  width: 25px;
  height: 25px;
}
#cookiessettingsmodal .modal-body .form-check.form-switch{
  display: flex;
  align-items: center;
  justify-content: end;
  width: auto;
  margin: 0;
  margin-bottom: -30px;
}
@media (max-width: 480px) {
    .cookie-alert {
      right: 0;
      left: 0;
      margin: auto;
      width: 95%;
    }
    .cookie-alert .card-title {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 10px;
    }
    .cookie-alert .card-text {
      font-size: 12px;
    }
}  

/*** Linkedin Modal ***/
.SocialMediaModal .ModalAll__content {    
    inset: 0;
    width: 100%;
    height: auto;
    max-width: 400px !important;
    max-height: 400px !important;
    border-radius: 16px !important;
} 
@media (max-width: 480px) {
    .SocialMediaModal .ModalAll__content {
        max-width: 90% !important;
        max-height: 400px !important;
    }
}


/* TABLE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.table-wrapper {
  background: var(--color-white);
  overflow-x: auto;
}

table {
  position: relative;
  text-align: center;
  width: 100%;
}

table thead {
  background: var(--color-white);
  transition: box-shadow 0.2s;
}

table tr {
  display: flex;
}

table th,
table td {
  width: 25%;
  min-width: 150px;
  border-bottom: 1px solid var(--color-gray-1);
}

table thead th,
table thead td {
  border: 1px solid var(--color-gray-1);
  border-radius: 12px;
  margin: 2px;
}

table th:nth-child(1) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1.3;
  padding: 0 10px;
}

table th:nth-child(1) .svg-wrapper {
  margin-top: 10px;
}

table th:nth-child(1) svg {
  width: 22px;
  height: 22px;
}

table th .heading {
  padding: 1rem;
  color: var(--color-white);
  border-radius: 8px;
}

table th:nth-child(2) .heading {
  background: var(--color-dark-5);
}

table th:nth-child(3) .heading {
  background: var(--color-dark-4);
}

table th:nth-child(4) .heading {
  background: var(--color-orange-1);
}

table th .info {
  position: relative;
  padding: 1.5rem 0;
  border-left: 1px solid var(--lightgray);
}

table th .popular {
  position: absolute;
  top: 10px;
  right: 0;
  font-size: 12px;
  background: var(--color-orange-1);
  padding: 6px 10px;
  border-radius: 6px;
}

table th .amount {
  font-size: 2rem;
}

table th .amount span {
  display: block;
  transform: translateY(-8px);
}

table th:nth-child(2) .amount {
  color: var(--color-dark-5);
}

table th:nth-child(3) .amount {
  color: var(--color-dark-4);
}

table th:nth-child(4) .amount {
  color: var(--color-orange-1);
}

table th .billing-msg,
table th .amount span {
  font-weight: normal;
  font-size: 0.8rem;
}
 
table td {
  padding: 10px;
}

table td:not(:first-child) {
  border-left: 1px solid var(--lightgray); 
}

table td:first-child {
  font-size: 1rem;
  text-align: left;
}

table svg {
  width: 18px;
  height: 18px;
}

table svg.not-included {
  fill: var(--color-red-2);
}

table svg.starter {
  fill: var(--color-green-2);
}

table svg.essential {
  fill: var(--color-green-2);
}

table svg.professional {
  fill: var(--color-green-1);
}

.sticky-table thead tr,
.sticky2-table thead tr {
  z-index: 1;
}

@media screen and (min-width: 780px) {  
  table th:nth-child(1) {
    padding: 0 20px;
  }
  
  table td {
    padding: 20px;
  }
  
  .sticky-table table thead {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 70px;
  }

  .sticky-table table thead tr th {
    box-shadow: 0px 2px 5px rgb(0 0 0 / 5%);
  }

  .sticky2-table table thead {
    position: absolute;
    left: 0;
  }
}


/*** Careers Page Hero ***/
.bg-gradient-dark {
  background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
}

.text-gradient-blue {
  background: linear-gradient(135deg, #4A90E2 0%, #7B68EE 50%, #00CED1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.floating-shape {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(123, 104, 238, 0.1) 100%);
  animation: float 6s ease-in-out infinite;
}

.floating-shape.-shape-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  right: 10%;
  animation-delay: 0s;
}

.floating-shape.-shape-2 {
  width: 200px;
  height: 200px;
  bottom: 20%;
  left: 5%;
  animation-delay: 2s;
}

.floating-shape.-shape-3 {
  width: 150px;
  height: 150px;
  top: 50%;
  right: 30%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

.career-hero-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.career-hero-card:hover {
  transform: translateY(-5px);
}

/*** Job Filter Tabs ***/
.filter-tab {
  transition: all 0.3s ease;
  cursor: pointer;
}

.filter-tab:hover {
  transform: translateY(-2px);
}

.filter-tab.is-tab-el-active,
.js-tabs-button.is-tab-el-active.filter-tab {
  background-color: var(--color-blue-1) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.js-tabs-button.filter-tab:not(.is-tab-el-active) {
  background-color: #fff;
  color: var(--color-dark-3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/*** Job Cards ***/
.job-card {
  transition: all 0.3s ease;
}

.job-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
}

.job-card:hover .text-blue-1 {
  transform: translateX(5px);
}

.job-card .text-blue-1 {
  transition: transform 0.3s ease;
}

/*** Hero Marquee Positions ***/
.position-marquee-wrapper {
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-row {
  width: 100%;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
}

.marquee-content {
  display: flex;
  gap: 12px;
  padding-right: 12px;
}

.position-chip {
  background: #ffffff1a;
  border: 1px solid #ffffff1a;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.position-chip:hover {
  transform: scale(1.01);
  background: #ffffff3c;
  border: 1px solid #ffffff2c;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.position-chip i {
  background:#ffffff6e;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  font-size: 18px;
}

/* Marquee Animations */
.marquee-left {
  animation: marquee-left 25s linear infinite;
}

.marquee-right {
  animation: marquee-right 25s linear infinite;
}

.marquee-left-slow {
  animation: marquee-left 35s linear infinite;
}

@keyframes marquee-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Pause on hover */
.position-marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

/*** Contact Page ***/
.border-top-blue {
  border-top: 4px solid var(--color-blue-1);
}
.border-top-green {
  border-top: 4px solid var(--color-green-1);
}
.border-top-purple {
  border-top: 4px solid var(--color-purple-1);
}

.office-card {
  transition: all 0.3s ease;
}
.office-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.-outline-orange-1 {
  border: 1px solid var(--color-orange-1);
}
.-outline-orange-1:hover {
  background-color: var(--color-orange-1);
  color: #fff !important;
}

.hover-bg-blue-1:hover {
  background-color: var(--color-blue-1) !important;
}
.hover-text-white:hover {
  color: #fff !important;
}
.transition-all {
  transition: all 0.3s ease;
}

.contact-form .form-control:focus {
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
  border-color: var(--color-blue-1);
}

/*** Contact Hero - Modern Design ***/
.contact-hero {
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
  min-height: 600px;
}

.contact-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(74, 144, 226, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(123, 104, 238, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 206, 209, 0.08) 0%, transparent 40%);
  z-index: 1;
}

.contact-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
}

.contact-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 1;
  animation: orbFloat 8s ease-in-out infinite;
}

.contact-hero__orb.-orb-1 {
  width: 400px;
  height: 400px;
  background: rgba(74, 144, 226, 0.2);
  top: -100px;
  right: 10%;
  animation-delay: 0s;
}

.contact-hero__orb.-orb-2 {
  width: 300px;
  height: 300px;
  background: rgba(123, 104, 238, 0.15);
  bottom: -50px;
  left: 5%;
  animation-delay: 2s;
}

.contact-hero__orb.-orb-3 {
  width: 200px;
  height: 200px;
  background: rgba(0, 206, 209, 0.1);
  top: 50%;
  left: 40%;
  animation-delay: 4s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.05); }
}

.contact-hero__text-gradient {
  background: linear-gradient(135deg, #4A90E2 0%, #7B68EE 40%, #00CED1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Right Visual */
.contact-hero__visual {
  position: relative;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-hero__card.-main {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 50px 40px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.contact-hero__card-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #4A90E2, #7B68EE);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  box-shadow: 0 10px 40px rgba(74, 144, 226, 0.3);
}

.contact-hero__card-icon i {
  font-size: 36px;
  color: #fff;
}

.contact-hero__card h3 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.contact-hero__card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.contact-hero__card-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}

.contact-hero__card-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.contact-hero__card-dots span:first-child {
  background: #4A90E2;
  animation: dotPulse 1.5s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* Floating Cards */
.contact-hero__float {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  z-index: 3;
  animation: floatCard 4s ease-in-out infinite;
}

.contact-hero__float.-float-1 {
  top: 10px;
  left: 50px;
  animation-delay: 0s;
}

.contact-hero__float.-float-2 {
  bottom: 20px;
  left: -20px;
  animation-delay: 1s;
}

.contact-hero__float.-float-3 {
  top: 140px;
  right: -80px;
  animation-delay: 2s;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Connection Lines */
.contact-hero__lines {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0.6;
}

/* Mobile Responsive */
@media (max-width: 991px) {
  .contact-hero {
    min-height: auto;
    text-align: start;
  }
  .contact-hero .mxw-450 {
    max-width: 100%;
  }
  .contact-hero .d-flex.flex-wrap.gap-30 {
    justify-content: center;
  }
  .contact-hero .d-flex.flex-wrap.gap-15 {
    justify-content: center;
  }
  .contact-hero__float.-float-1 {
    top: 10px;
    left: 10px;
    padding: 10px 12px;
  }
  .contact-hero__float.-float-2 {
    bottom: 10px;
    left: 50px;
    animation-delay: 1s;
    padding: 10px 12px;
  }
  .contact-hero__float.-float-3 {
    top: 150px;
    right: 0px;
    animation-delay: 2s;
    padding: 10px 12px;
  }
}

/*** Solution Detail Page ***/
.solution-detail-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  min-height: 550px;
}

.solution-detail-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 40%);
  z-index: 1;
}

.solution-detail-hero__pattern {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 1;
}

.solution-detail-hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.solution-hero-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.solution-hero-stat {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 25px 35px;
  text-align: center;
  transition: all 0.3s ease;
}

.solution-hero-stat:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(-10px);
}

.solution-hero-stat__value {
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
}

.solution-hero-stat__label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.5);
}

.hover-shadow {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hover-shadow:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

@media (max-width: 991px) {
  .solution-detail-hero {
    min-height: auto;
  }
  .solution-hero-stats {
    display: none;
  }
}

/*** TIM Difference Page ***/
.tim-diff-hero {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  position: relative;
}

.tim-diff-hero__canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.tim-diff-hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 50%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 10% 70%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
}

.tim-diff-hero__noise {
  display: none;
}

.tim-diff-hero__lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.tim-diff-hero__lines span {
  position: absolute;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.03) 50%, transparent 100%);
}

.tim-diff-hero__lines span:nth-child(1) { left: 10%; }
.tim-diff-hero__lines span:nth-child(2) { left: 30%; }
.tim-diff-hero__lines span:nth-child(3) { left: 50%; }
.tim-diff-hero__lines span:nth-child(4) { left: 70%; }
.tim-diff-hero__lines span:nth-child(5) { left: 90%; }

.tim-diff-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
}

.tim-diff-hero__orb.-orb-1 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.08));
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  animation: orbFloat1 20s ease-in-out infinite;
}

.tim-diff-hero__orb.-orb-2 {
  width: 400px;
  height: 400px;
  background: rgba(59, 130, 246, 0.1);
  bottom: 5%;
  left: 0%;
  animation: orbFloat2 15s ease-in-out infinite;
}

.tim-diff-hero__orb.-orb-3 {
  width: 350px;
  height: 350px;
  background: rgba(236, 72, 153, 0.08);
  top: 30%;
  right: 0%;
  animation: orbFloat3 18s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(40px); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -30px); }
}

@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, 20px); }
}

/* Hero Badge */
.tim-diff-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  line-height: 1;
}

.tim-diff-hero__badge-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* Hero Title - Creative Typography */
.tim-diff-hero__title {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.tim-diff-hero__title-line {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 5px;
  flex-wrap: wrap;
}

.tim-diff-hero__title-word {line-height: 1;}

.tim-diff-hero__title-word.-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(30, 41, 59, 0.25);
}

.tim-diff-hero__title-word.-filled {
  color: #1e293b;
}

.tim-diff-hero__title-accent {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  line-height: 1;
}

.tim-diff-hero__title-accent::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);
  border-radius: 2px;
  opacity: 0.6;
}

/* Hero Description - Light Theme */
.tim-diff-hero .text-white {
  color: #334155 !important;
}

.tim-diff-hero .text-white.text-opacity-70 {
  color: #64748b !important;
}

/* Comparison Section - Light Theme */
.tim-diff-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

.tim-diff-compare__side {
  flex: 1;
  padding: 32px;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.tim-diff-compare__side.-traditional {
  background: rgba(239, 68, 68, 0.03);
  border-right: 1px solid rgba(0, 0, 0, 0.04);
}

.tim-diff-compare__side.-tim {
  background: rgba(16, 185, 129, 0.03);
}

.tim-diff-compare__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.tim-diff-compare__side.-traditional .tim-diff-compare__label {
  color: #dc2626;
}

.tim-diff-compare__side.-tim .tim-diff-compare__label {
  color: #059669;
}

.tim-diff-compare__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tim-diff-compare__list li {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 8px;
  font-size: 14px;
  color: #475569;
  margin-bottom: 5px;
}

.tim-diff-compare__list li:last-child {
  margin-bottom: 0;
}

.tim-diff-compare__side.-traditional .tim-diff-compare__list li i {
  color: #ef4444;
  font-size: 16px;
  margin-top: 2px;
}

.tim-diff-compare__side.-tim .tim-diff-compare__list li i {
  color: #10b981;
  font-size: 16px;
  margin-top: 2px;
}

.tim-diff-compare__divider {
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  flex-shrink: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.tim-diff-compare__vs {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* Stats Bar - Light Theme */
.tim-diff-stats-bar {
  gap: 10px;
}

.tim-diff-stat-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background: #ffffff21;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgb(255 255 255 / 89%);
  border-radius: 100px;
  padding: 10px 20px 10px 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.tim-diff-stat-item__icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #6366f1;
}

.tim-diff-stat-item__value {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}

.tim-diff-stat-item__label {
  font-size: 12px;
  color: #64748b;
  line-height: 1;
}

/* Glass Button - Light Theme */
.button.-glass {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1e293b !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.button.-glass:hover {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* CTA Buttons - Light Theme Override */
.tim-diff-hero .button.-md.bg-white {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  border: none;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

.tim-diff-hero .button.-md.bg-white:hover {
  box-shadow: 0 6px 25px rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}

/* Scroll Indicator - Light Theme */
.tim-diff-hero__scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0.6;
  animation: fadeInUp 1s ease-out 1.5s both;
}

.tim-diff-hero__scroll span {
  font-size: 11px;
  color: #64748b;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tim-diff-hero__scroll-mouse {
  width: 24px;
  height: 38px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  position: relative;
}

.tim-diff-hero__scroll-wheel {
  width: 4px;
  height: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s ease-in-out infinite;
}

@keyframes scrollWheel {
  0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.3; transform: translateX(-50%) translateY(10px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 0.6; transform: translateX(-50%) translateY(0); }
}

/* Responsive */
@media (max-width: 991px) {
  .tim-diff-hero {
    min-height: auto;
  }
  .tim-diff-hero__title-word {
    font-size: 48px;
  }
  .tim-diff-hero__title-accent {
    font-size: 52px;
  }
  .tim-diff-compare {
    flex-direction: column;
  }
  .tim-diff-compare__side.-traditional {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  }
  .tim-diff-compare__divider {
    width: 100%;
    height: 60px;
  }
  .tim-diff-hero__scroll {
    display: none;
  }
}

@media (max-width: 767px) {
  .tim-diff-hero__title-word {
    font-size: 36px;
  }
  .tim-diff-hero__title-accent {
    font-size: 40px;
  }
  .tim-diff-hero__title-line {
    gap: 10px;
  }
  .tim-diff-stats-bar {
    gap: 8px;
  }
  .tim-diff-stat-item {
    padding: 10px 16px;
  }
  .tim-diff-stat-item__value {
    font-size: 18px;
  }
  .tim-diff-compare__side {
    padding: 24px;
  }
}

/* TIM Difference Cards */
.tim-diff-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.tim-diff-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}

.tim-diff-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.tim-diff-card-wide {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 24px;
  padding: 48px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.tim-diff-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.tim-diff-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #475569;
}

.integration-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
}

/* Use Case Cards */
.use-case-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.use-case-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}

.use-case-card__icon {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 28px;
  color: #fff;
}

.use-case-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
  margin-top: 16px;
}

.use-case-stat__value {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.use-case-stat__label {
  font-size: 13px;
  color: #64748b;
}

/* Platform Features */
.platform-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.platform-visual__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.platform-visual:hover .platform-visual__overlay {
  opacity: 1;
}

.platform-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.platform-feature {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.platform-feature__icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
}

/* ROI Cards */
.roi-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 20px;
  padding: 32px 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.roi-card__value {
  font-size: 42px;
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.roi-card__label {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-top: 8px;
}

/* Case Study Cards */
.case-study-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.case-study-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}

.case-study-card__logo {
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.case-study-card__logo img {
  max-height: 40px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.case-study-card:hover .case-study-card__logo img {
  filter: grayscale(0%);
  opacity: 1;
}

.case-study-card__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}

.case-study-card__stat-value {
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.case-study-card__stat-label {
  font-size: 14px;
  color: #64748b;
}

.case-study-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.case-study-highlights li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  margin-bottom: 8px;
}

.case-study-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #3b82f6;
  transition: gap 0.3s ease;
}

.case-study-link:hover {
  gap: 10px;
}

/* Partner Logos Grid */
.partner-logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.partner-logo-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  transition: all 0.3s ease;
}

.partner-logo-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.partner-logo-item img {
  max-height: 100px;
  max-width: 100%;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.partner-logo-item:hover img {
  opacity: 1;
}

/* Gradient Text */
.text-gradient-blue {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* White with opacity for dark bg */
.bg-white-10 {
  background: rgba(255, 255, 255, 0.1);
}

.bg-white-20 {
  background: rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 991px) {
  .tim-diff-hero {
    min-height: auto;
  }
  .tim-diff-hero__visual {
    display: none;
  }
  .partner-logos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .tim-diff-card-wide {
    padding: 24px;
  }
  .partner-logos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .partner-logo-item {
    height: 80px;
    padding: 16px;
  }
}

/*** Switch TIM Page ***/
.switch-hero {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  position: relative;
}

.switch-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.switch-hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 50%, rgba(16, 185, 129, 0.06) 0%, transparent 50%);
}

.switch-hero__pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

.switch-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #3b82f6;
}

.switch-hero__badge i {
  font-size: 16px;
}

/* Hero Visual - Transform Journey */
.switch-transform {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 20px;
}

.switch-transform__before,
.switch-transform__after {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.switch-transform__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #64748b;
}

.switch-transform__label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.switch-transform__label-dot.-red {
  background: #ef4444;
}

.switch-transform__label-dot.-green {
  background: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.switch-transform__device {
  position: relative;
  width: 140px;
  height: 180px;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.4s ease;
}

.switch-transform__device.-old {
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  opacity: 0.8;
}

.switch-transform__device.-new {
  background: linear-gradient(145deg, #fff 0%, #f0fdf4 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 20px 50px rgba(16, 185, 129, 0.15);
}

.switch-transform__device-screen {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 12px;
  flex: 1;
}

.switch-transform__device.-old .switch-transform__device-screen {
  background: rgba(0, 0, 0, 0.04);
}

.switch-transform__metric {
  text-align: center;
  margin-bottom: 12px;
}

.switch-transform__metric .value {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.switch-transform__metric .unit {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-top: 4px;
}

.switch-transform__metric.-fade .value {
  color: #94a3b8;
}

.switch-transform__metric.-glow .value {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.switch-transform__bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.switch-transform__bars .bar {
  height: 6px;
  border-radius: 3px;
  background: #cbd5e1;
  transition: all 0.6s ease;
}

.switch-transform__bars.-success .bar {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.switch-transform__device-icon {
  text-align: center;
  font-size: 24px;
  color: #94a3b8;
  margin-top: 8px;
}

.switch-transform__device.-new .switch-transform__device-icon {
  color: #10b981;
}

.switch-transform__glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
  border-radius: 30px;
  z-index: -1;
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.switch-transform__issues,
.switch-transform__wins {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.switch-transform__issues span,
.switch-transform__wins span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.switch-transform__issues span {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

.switch-transform__wins span {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

/* Transform Arrow */
.switch-transform__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
}

.switch-transform__arrow-line {
  width: 2px;
  height: 40px;
  background: linear-gradient(180deg, transparent 0%, #3b82f6 50%, transparent 100%);
}

.switch-transform__arrow-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.switch-transform__arrow-text {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #3b82f6;
}

/* Floating Stats */
.switch-transform__float-stat {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  font-size: 13px;
  font-weight: 700;
  animation: floatStat 3s ease-in-out infinite;
}

.switch-transform__float-stat.-stat1 {
  top: 0;
  right: 0;
  color: #10b981;
  animation-delay: 0s;
}

.switch-transform__float-stat.-stat2 {
  bottom: 20px;
  right: 20px;
  color: #3b82f6;
  animation-delay: 1.5s;
}

@keyframes floatStat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Switch Reason Cards */
.switch-reason-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.3s ease;
}

.switch-reason-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}

.switch-reason-card__number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 48px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.04);
  line-height: 1;
}

.switch-reason-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.switch-reason-card__compare {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  margin-top: auto;
}

.switch-reason-card__compare-item {
  flex: 1;
  text-align: center;
}

.switch-reason-card__compare-item .label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 4px;
}

.switch-reason-card__compare-item .value {
  display: block;
  font-size: 16px;
  font-weight: 700;
}

.switch-reason-card__compare-item.-old .value {
  color: #ef4444;
  text-decoration: line-through;
}

.switch-reason-card__compare-item.-new .value {
  color: #10b981;
}

.switch-reason-card__compare-arrow {
  color: #94a3b8;
  font-size: 16px;
}

/* Role Cards */
.role-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: all 0.3s ease;
}

.role-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}

.role-card__icon {
  margin-bottom: 16px;
}

.role-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.role-card__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.role-card__list li:last-child {
  border-bottom: none;
}

.role-card__list li i {
  color: #10b981;
  font-size: 14px;
}

/* Integration Section */
.integration-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.integration-feature:hover {
  background: rgba(255, 255, 255, 0.12);
}

.integration-logos {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.integration-logos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.integration-logo-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  transition: all 0.3s ease;
}

.integration-logo-item:hover {
  background: rgba(255, 255, 255, 0.15);
}

.integration-logo-item img {
  max-height: 30px;
  max-width: 100%;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.integration-logo-item:hover img {
  opacity: 1;
}

/* Integration Section Light */
.integration-section-light {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  position: relative;
}

.integration-feature-light {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 16px 20px;
  color: #1e293b;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.integration-feature-light:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.integration-logos-light {
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.integration-logos-light__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.integration-logo-light-item {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  transition: all 0.3s ease;
}

.integration-logo-light-item:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: rgba(59, 130, 246, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.1);
}

.integration-logo-light-item img {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: all 0.3s ease;
}

.integration-logo-light-item:hover img {
  opacity: 1;
  transform: scale(1.05);
}

.integration-logo-text {
  font-size: 16px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.5px;
}

.integration-logo-light-item:hover .integration-logo-text {
  color: #3b82f6;
}

/* Responsive for Switch TIM */
@media (max-width: 991px) {
  .switch-transform {
    gap: 15px;
    padding: 15px;
  }
  .switch-transform__device {
    width: 120px;
    height: 160px;
  }
  .switch-transform__metric .value {
    font-size: 22px;
  }
  .switch-transform__float-stat {
    display: none;
  }
  .integration-logos__grid,
  .integration-logos-light__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .switch-reason-card {
    padding: 24px;
  }
  .switch-reason-card__number {
    font-size: 36px;
  }
  .role-card {
    padding: 20px;
  }
  .integration-logos,
  .integration-logos-light {
    padding: 24px;
  }
  .integration-logos__grid,
  .integration-logos-light__grid {
    gap: 12px;
  }
  .integration-logo-item,
  .integration-logo-light-item {
    height: 60px;
    padding: 12px;
  }
  .integration-logo-text {
    font-size: 14px;
  }
}

/*** Platform Page ***/
.platform-hero {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  position: relative;
}

.platform-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.platform-hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
}

.platform-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
}

.platform-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.platform-hero__orb.-orb1 {
  width: 500px;
  height: 500px;
  background: rgba(99, 102, 241, 0.12);
  top: -10%;
  right: 10%;
  animation: orbFloat1 20s ease-in-out infinite;
}

.platform-hero__orb.-orb2 {
  width: 400px;
  height: 400px;
  background: rgba(59, 130, 246, 0.1);
  bottom: 0;
  left: 5%;
  animation: orbFloat2 18s ease-in-out infinite;
}

.platform-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
  color: #6366f1;
}

.platform-hero__highlight {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   AI HUB - Interactive Platform Visual
   ============================================ */

.ai-hub {
  position: relative;
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pulse Rings */
.ai-hub__pulse-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.15);
  animation: pulseRing 4s ease-out infinite;
}

.pulse-ring.-ring1 {
  width: 160px;
  height: 160px;
  animation-delay: 0s;
}

.pulse-ring.-ring2 {
  width: 160px;
  height: 160px;
  animation-delay: 1.3s;
}

.pulse-ring.-ring3 {
  width: 160px;
  height: 160px;
  animation-delay: 2.6s;
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Data Particles */
.ai-hub__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #3b82f6;
  border-radius: 50%;
  animation: particleFloat 8s linear infinite;
}

.particle.-p1 { top: 50%; left: 50%; animation-delay: 0s; --angle: 0deg; }
.particle.-p2 { top: 50%; left: 50%; animation-delay: 1s; --angle: 45deg; }
.particle.-p3 { top: 50%; left: 50%; animation-delay: 2s; --angle: 90deg; }
.particle.-p4 { top: 50%; left: 50%; animation-delay: 3s; --angle: 135deg; }
.particle.-p5 { top: 50%; left: 50%; animation-delay: 4s; --angle: 180deg; }
.particle.-p6 { top: 50%; left: 50%; animation-delay: 5s; --angle: 225deg; }
.particle.-p7 { top: 50%; left: 50%; animation-delay: 6s; --angle: 270deg; }
.particle.-p8 { top: 50%; left: 50%; animation-delay: 7s; --angle: 315deg; }

@keyframes particleFloat {
  0% {
    transform: rotate(var(--angle)) translateX(60px) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: rotate(var(--angle)) translateX(80px) scale(1);
  }
  90% {
    opacity: 0.6;
    transform: rotate(var(--angle)) translateX(180px) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(200px) scale(0);
  }
}

/* AI Core Center */
.ai-hub__core {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-hub__core-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
  animation: coreGlow 3s ease-in-out infinite;
}

@keyframes coreGlow {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}

.ai-hub__core-inner {
  position: relative;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow:
    0 0 0 8px rgba(59, 130, 246, 0.1),
    0 20px 60px rgba(59, 130, 246, 0.4),
    inset 0 -5px 20px rgba(0, 0, 0, 0.2);
  animation: coreFloat 6s ease-in-out infinite;
}

@keyframes coreFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.ai-hub__brain {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.ai-hub__brain i {
  font-size: 26px;
  color: #fff;
}

.ai-hub__core-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.ai-hub__core-ring {
  position: absolute;
  inset: -12px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: coreRingSpin 20s linear infinite;
}

@keyframes coreRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Orbits */
.ai-hub__orbit {
  position: absolute;
  border-radius:50%;
}

.ai-hub__orbit.-inner {
  width: 260px;
  height: 260px;
  border: 1px solid rgba(99, 102, 241, 0.15);
  animation: orbitSpin 25s linear infinite;
}

.ai-hub__orbit.-outer {
  width: 380px;
  height: 380px;
  border: 1px dashed rgba(99, 102, 241, 0.1);
  animation: orbitSpin 40s linear infinite reverse;
}

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Nodes */
.ai-hub__node {
  position: absolute;
  width: 68px;
  height: 68px;
  background: #fff;
  border-radius: 68px;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.ai-hub__node:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(59, 130, 246, 0.2);
}

.ai-hub__node i {
  font-size: 22px;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.ai-hub__node span {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Inner orbit node positions */
.ai-hub__node.-n1 { top: -34px; left: 50%; transform: translateX(-50%); animation: counterSpin 25s linear infinite; }
.ai-hub__node.-n2 { right: -34px; top: 50%; transform: translateY(-50%); animation: counterSpin 25s linear infinite; }
.ai-hub__node.-n3 { bottom: -34px; left: 50%; transform: translateX(-50%); animation: counterSpin 25s linear infinite; }
.ai-hub__node.-n4 { left: -34px; top: 50%; transform: translateY(-50%); animation: counterSpin 25s linear infinite; }

@keyframes counterSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Small nodes for outer orbit */
.ai-hub__node.-small {
  width: 44px;
  height: 44px;
  border-radius: 44px;
  animation: counterSpinOuter 40s linear infinite;
}

.ai-hub__node.-small i {
  font-size: 18px;
  margin-bottom: 0;
}

.ai-hub__node.-small span {
  display: none;
}

/* Outer orbit node positions (6 nodes - 60° apart) */
.ai-hub__node.-n5 { top: -22px; left: 50%; margin-left: -22px; }
.ai-hub__node.-n6 { top: 25%; right: -12px; }
.ai-hub__node.-n7 { bottom: 25%; right: -12px; }
.ai-hub__node.-n8 { bottom: -22px; left: 50%; margin-left: -22px; }
.ai-hub__node.-n9 { bottom: 25%; left: -12px; }
.ai-hub__node.-n10 { top: 25%; left: -12px; }

@keyframes counterSpinOuter {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Connection SVG */
.ai-hub__connections {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.connection-circle {
  fill: none;
  stroke: url(#lineGrad);
  stroke-width: 1;
  stroke-dasharray: 8 12;
  animation: dashMove 20s linear infinite;
}

.connection-circle.-c1 {
  animation-direction: normal;
}

.connection-circle.-c2 {
  animation-direction: reverse;
  stroke-dasharray: 5 15;
}

@keyframes dashMove {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 100; }
}

/* Floating Labels */
.ai-hub__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ai-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #3b82f6;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  animation: labelFloat 4s ease-in-out infinite;
}

.ai-label i {
  font-size: 14px;
}

.ai-label.-l1 {
  top: 5%;
  right: -10%;
  animation-delay: 0s;
}

.ai-label.-l2 {
  bottom: 10%;
  left: -5%;
  animation-delay: 2s;
}

@keyframes labelFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* AI Hub Responsive */
@media (max-width: 1199px) {
  .ai-hub {
    width: 380px;
    height: 380px;
  }
  .ai-hub__orbit.-inner {
    width: 240px;
    height: 240px;
  }
  .ai-hub__orbit.-outer {
    width: 340px;
    height: 340px;
  }
  .ai-hub__core-inner {
    width: 100px;
    height: 100px;
  }
  .ai-hub__node {
    width: 60px;
    height: 60px;
  }
  .ai-hub__node.-small {
    width: 38px;
    height: 38px;
  }
  .ai-label {
    display: none;
  }
}

@media (max-width: 991px) {
  .ai-hub {
    width: 320px;
    height: 320px;
    margin: 40px auto 0;
  }
  .ai-hub__orbit.-inner {
    width: 200px;
    height: 200px;
  }
  .ai-hub__orbit.-outer {
    width: 280px;
    height: 280px;
  }
  .ai-hub__core-inner {
    width: 90px;
    height: 90px;
  }
  .ai-hub__brain i {
    font-size: 20px;
  }
  .ai-hub__node {
    width: 52px;
    height: 52px;
  }
  .ai-hub__node i {
    font-size: 18px;
  }
  .ai-hub__node.-small {
    width: 32px;
    height: 32px;
  }
  .ai-hub__node.-small i {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .ai-hub {
    width: 280px;
    height: 280px;
  }
  .ai-hub__orbit.-inner {
    width: 180px;
    height: 180px;
  }
  .ai-hub__node {
    width: 48px;
    height: 48px;
  }
  .ai-hub__node span {
    font-size: 8px;
  }
  .ai-hub__core-inner {
    width: 80px;
    height: 80px;
  }
  .ai-hub__core-label {
    font-size: 9px;
  }
}

/* Platform Feature Cards */
.platform-feature-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.platform-feature-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}

.platform-feature-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.platform-feature-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.platform-feature-card__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #475569;
  padding: 6px 0;
}

.platform-feature-card__list li i {
  color: #10b981;
}

/* Product Cards */
.product-card-large {
  display: block;
  background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.product-card-large:hover {
  box-shadow: 0 25px 60px rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.2);
  transform: translateY(-5px);
}

.product-card-large__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-card-large__icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.product-card-large__icon i {
  font-size: 36px;
  color: #3b82f6;
}

.product-card-large__features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.product-card-large__features span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #059669;
  background: rgba(16, 185, 129, 0.08);
  padding: 6px 12px;
  border-radius: 20px;
}

.product-card-large__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #3b82f6;
}

.product-card-large:hover .product-card-large__cta {
  gap: 12px;
}

.product-card-small {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
}

.product-card-small:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  transform: translateX(5px);
}

.product-card-small__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-card-small__icon i {
  font-size: 24px;
}

.product-card-small__content {
  flex: 1;
}

.product-card-small__arrow {
  font-size: 18px;
  color: #94a3b8;
  transition: all 0.3s ease;
}

.product-card-small:hover .product-card-small__arrow {
  color: #3b82f6;
  transform: translateX(5px);
}

/* Use Case Cards */
.usecase-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  transition: all 0.3s ease;
}

.usecase-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}

.usecase-card__icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.usecase-card__icon i {
  font-size: 26px;
  color: #3b82f6;
}

.usecase-card__stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.usecase-card__stat .value {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.usecase-card__stat .label {
  font-size: 13px;
  color: #64748b;
}

/* Platform Page Responsive */
@media (max-width: 991px) {
  .platform-visual {
    height: 250px;
  }
  .platform-visual__ai-core {
    width: 100px;
    height: 100px;
  }
  .platform-visual__orbit {
    width: 220px;
    height: 220px;
  }
  .platform-visual__node {
    width: 60px;
    height: 60px;
  }
  .product-card-large {
    padding: 28px;
  }
}

@media (max-width: 767px) {
  .platform-visual {
    display: none;
  }
  .product-card-large__icon {
    width: 60px;
    height: 60px;
  }
  .product-card-large__icon i {
    font-size: 28px;
  }
  .product-card-small {
    padding: 20px;
  }
}

/* ============================================
   USE CASES MODERN SWIPER
   ============================================ */

.usecase-modern {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  overflow: hidden;
}

/* Navigation Buttons */
.usecase-nav {
  display: flex;
  gap: 12px;
}

.usecase-nav__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.usecase-nav__btn:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

.usecase-nav__btn i {
  font-size: 18px;
  color: #1e293b;
  transition: color 0.3s ease;
}

.usecase-nav__btn:hover i {
  color: #fff;
}

/* Slide Card */
.usecase-slide {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 420px;
  background: #1e293b;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.usecase-slide:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* Image */
.usecase-slide__image {
  position: absolute;
  inset: 0;
}

.usecase-slide__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.usecase-slide:hover .usecase-slide__image img {
  transform: scale(1.08);
}

.usecase-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 40%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

/* Content */
.usecase-slide__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  z-index: 2;
}

.usecase-slide__tag {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.usecase-slide__title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.2;
}

.usecase-slide__desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Stat Badge */
.usecase-slide__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 12px;
}

.usecase-slide__stat .value {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.usecase-slide__stat .label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* Link Button */
.usecase-slide__link {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.usecase-slide:hover .usecase-slide__link {
  opacity: 1;
  transform: translateY(0);
}

.usecase-slide__link i {
  font-size: 20px;
  color: #fff;
  transition: transform 0.3s ease;
}

.usecase-slide__link:hover {
  background: #fff;
}

.usecase-slide__link:hover i {
  color: #3b82f6;
  transform: translate(2px, -2px);
}

/* Responsive */
@media (max-width: 991px) {
  .usecase-slide {
    height: 380px;
  }
  .usecase-slide__title {
    font-size: 20px;
  }
  .usecase-slide__stat .value {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .usecase-nav {
    display: none;
  }
  .usecase-slide {
    height: 360px;
  }
  .usecase-slide__content {
    padding: 24px;
  }
  .usecase-slide__link {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   VEGA PRODUCT PAGE - APPLE STYLE
   Clean, modern, immersive product showcase
   ============================================ */

/* Base Styles */
.vega-product-body {
  background: #fff;
  color: #1d1d1f;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gradient-text-apple {
  background: linear-gradient(90deg, #0071e3 0%, #42a5f5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section Labels */
.vega-section-label {
  font-size: 14px;
  font-weight: 600;
  color: #0071e3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.vega-section-title {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}

.vega-big-title {
  font-size: 64px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #1d1d1f;
}

/* Buttons */
.vega-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 500;
  border-radius: 980px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.vega-btn.-primary {
  padding: 12px 28px;
  background: #0071e3;
  color: #fff;
}

.vega-btn.-primary:hover {
  background: #0077ed;
}

.vega-btn.-secondary {
  padding: 12px 28px;
  background: transparent;
  color: #0071e3;
  border: 1px solid #0071e3;
}

.vega-btn.-secondary:hover {
  background: #0071e3;
  color: #fff;
}

.vega-btn.-link {
  padding: 0;
  background: none;
  color: #0071e3;
}

.vega-btn.-link:hover {
  text-decoration: underline;
}

.vega-btn.-large {
  padding: 16px 36px;
  font-size: 19px;
}

.vega-link {
  color: #0071e3;
  font-size: 17px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.3s ease;
}

.vega-link:hover {
  gap: 8px;
}

/* Navigation */
.vega-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 12px 0;
  background: rgba(251, 251, 253, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.vega-nav.-scrolled {
  background: rgba(251, 251, 253, 0.92);
}

.vega-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.vega-nav__logo img {
  height: 24px;
}

.vega-nav__product {
  font-size: 21px;
  font-weight: 600;
  color: #1d1d1f;
}

.vega-nav__links {
  display: flex;
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.vega-nav__links a {
  font-size: 12px;
  color: #1d1d1f;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.vega-nav__links a:hover,
.vega-nav__links a.active {
  opacity: 1;
}

.vega-nav__cta {
  padding: 8px 16px;
  background: #0071e3;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  transition: all 0.3s ease;
}

.vega-nav__cta:hover {
  background: #0077ed;
}

/* ============================================
   VEGA HERO SECTION
   ============================================ */
.vega-hero {
  padding: 120px 0 80px;
  background: linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
}

.vega-hero .container {
  display: flex;
  align-items: center;
  gap: 60px;
}

.vega-hero__content {
  flex: 1;
}

.vega-hero__title {
  font-size: 96px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #1d1d1f;
  margin-bottom: 16px;
}

.vega-hero__tagline {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  color: #1d1d1f;
  margin-bottom: 24px;
}

.vega-hero__cta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.vega-hero__price {
  font-size: 17px;
  color: #86868b;
}

.vega-hero__image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.vega-hero__image img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   VEGA HIGHLIGHTS SECTION
   ============================================ */
.vega-highlights {
  padding: 80px 0;
  background: #fff;
}

.vega-highlights__header {
  text-align: center;
  margin-bottom: 40px;
}

.vega-highlights__tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.vega-tab {
  padding: 8px 20px;
  background: #f5f5f7;
  border: none;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  cursor: pointer;
  transition: all 0.3s ease;
}

.vega-tab:hover {
  background: #e8e8ed;
}

.vega-tab.active {
  background: #1d1d1f;
  color: #fff;
}

.vega-highlights__slider {
  padding: 0 24px;
}

.vega-hl-card {
  background: #f5f5f7;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
}

.vega-hl-card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.vega-hl-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.vega-hl-card:hover .vega-hl-card__media img {
  transform: scale(1.05);
}

.vega-hl-card__content {
  padding: 24px;
}

.vega-hl-card__content h3 {
  font-size: 21px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.vega-hl-card__content p {
  font-size: 14px;
  color: #86868b;
  line-height: 1.5;
}

/* ============================================
   VEGA DESIGN SECTION
   ============================================ */
.vega-design {
  padding: 100px 0;
  background: #fff;
}

.vega-design__intro {
  text-align: center;
  margin-bottom: 60px;
}

.vega-viewer {
  margin-bottom: 80px;
}

.vega-viewer__media {
  position: relative;
  aspect-ratio: 16/9;
  background: #f5f5f7;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 24px;
}

.vega-viewer__image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.vega-viewer__image.active {
  opacity: 1;
}

.vega-viewer__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vega-viewer__controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.vega-viewer__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: #f5f5f7;
  border: 2px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.vega-viewer__btn:hover {
  background: #e8e8ed;
}

.vega-viewer__btn.active {
  background: #fff;
  border-color: #0071e3;
}

.vega-viewer__btn .icon {
  font-size: 24px;
  color: #1d1d1f;
}

.vega-viewer__btn .label {
  font-size: 12px;
  font-weight: 500;
  color: #1d1d1f;
}

.vega-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vega-feature-card {
  background: #f5f5f7;
  border-radius: 20px;
  padding: 32px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.vega-feature-card.-visible {
  opacity: 1;
  transform: translateY(0);
}

.vega-feature-card__icon {
  margin-bottom: 16px;
}

.vega-feature-card__icon img {
  height: 48px;
}

.vega-feature-card h4 {
  font-size: 21px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.vega-feature-card p {
  font-size: 14px;
  color: #86868b;
  line-height: 1.5;
}

/* ============================================
   VEGA CLOSE-UP SECTION
   ============================================ */
.vega-closeup {
  padding: 100px 0;
  background: #000;
  color: #fff;
}

.vega-closeup__header {
  text-align: center;
  margin-bottom: 60px;
}

.vega-closeup__header .vega-big-title {
  color: #fff;
}

.vega-closeup__sticky {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.vega-closeup__media {
  position: sticky;
  top: 100px;
  border-radius: 24px;
  overflow: hidden;
}

.vega-closeup__media video {
  width: 100%;
  display: block;
}

.vega-closeup__content {
  padding: 40px 0;
}

.vega-closeup__item {
  padding: 40px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.vega-closeup__item.-visible {
  opacity: 1;
  transform: translateY(0);
}

.vega-closeup__item:last-child {
  border-bottom: none;
}

.vega-closeup__item .number {
  font-size: 14px;
  font-weight: 600;
  color: #0071e3;
  display: block;
  margin-bottom: 12px;
}

.vega-closeup__item h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 12px;
}

.vega-closeup__item p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* ============================================
   VEGA SCANNER SECTION
   ============================================ */
.vega-scanner {
  padding: 100px 0;
  background: #f5f5f7;
}

.vega-scanner__header {
  text-align: center;
  margin-bottom: 60px;
}

.vega-zoom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}

.vega-zoom__image {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}

.vega-zoom__photo {
  width: 100%;
  display: block;
}

.vega-zoom__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vega-zoom__crosshair {
  width: 100px;
  height: 100px;
  border: 2px solid rgba(0, 113, 227, 0.5);
  border-radius: 50%;
  animation: zoomPulse 2s ease-in-out infinite;
}

@keyframes zoomPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 1; }
}

.vega-zoom__controls {
  padding: 20px 0;
}

.vega-zoom__slider {
  margin-bottom: 24px;
}

.vega-zoom__range {
  width: 100%;
  height: 4px;
  background: #d2d2d7;
  border-radius: 2px;
  appearance: none;
  cursor: pointer;
}

.vega-zoom__range::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #0071e3;
  border-radius: 50%;
  cursor: pointer;
}

.vega-zoom__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.vega-zoom__labels span {
  font-size: 12px;
  color: #86868b;
  cursor: pointer;
  transition: color 0.3s ease;
}

.vega-zoom__labels span.active {
  color: #0071e3;
  font-weight: 600;
}

.vega-zoom__desc {
  font-size: 17px;
  color: #1d1d1f;
  line-height: 1.5;
}

.vega-scanner__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 80px;
}

.vega-scanner__card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.vega-scanner__card.-visible {
  opacity: 1;
  transform: translateY(0);
}

.vega-scanner__card.-main {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.vega-scanner__visual {
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}

.vega-scanner__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vega-scanner__info h3 {
  font-size: 24px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.vega-scanner__info p {
  font-size: 14px;
  color: #86868b;
  margin-bottom: 16px;
}

.vega-scanner__stats {
  display: flex;
  gap: 32px;
}

.vega-scanner__stats .stat .value {
  display: block;
  font-size: 32px;
  font-weight: 600;
  color: #0071e3;
}

.vega-scanner__stats .stat .label {
  font-size: 12px;
  color: #86868b;
}

.vega-scanner__card i {
  font-size: 32px;
  color: #0071e3;
  margin-bottom: 16px;
}

.vega-scanner__card h4 {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.vega-scanner__card p {
  font-size: 14px;
  color: #86868b;
  line-height: 1.4;
}

.vega-video-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.vega-video-showcase__item {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}

.vega-video-showcase__media {
  aspect-ratio: 16/9;
}

.vega-video-showcase__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vega-video-showcase__text {
  padding: 24px;
}

.vega-video-showcase__text h4 {
  font-size: 21px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.vega-video-showcase__text p {
  font-size: 14px;
  color: #86868b;
  line-height: 1.5;
}

/* ============================================
   VEGA ANALYTICS SECTION
   ============================================ */
.vega-analytics {
  background: #fff;
}

.vega-analytics__hero {
  text-align: center;
  padding: 100px 0;
  position: relative;
}

.vega-analytics__image {
  margin-top: 40px;
}

.vega-analytics__image img {
  width: 100%;
  max-width: 1200px;
  border-radius: 24px;
}

.vega-analytics__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.vega-analytics__card {
  background: #f5f5f7;
  border-radius: 20px;
  padding: 32px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.vega-analytics__card.-visible {
  opacity: 1;
  transform: translateY(0);
}

.vega-analytics__icon {
  margin-bottom: 16px;
}

.vega-analytics__icon i {
  font-size: 32px;
  color: #0071e3;
}

.vega-analytics__card h4 {
  font-size: 21px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.vega-analytics__card > p {
  font-size: 14px;
  color: #86868b;
  line-height: 1.5;
  margin-bottom: 16px;
}

.vega-analytics__card img {
  width: 100%;
  border-radius: 12px;
}

.vega-analytics__features {
  padding: 80px 0;
}

/* ============================================
   VEGA PERFORMANCE SECTION
   ============================================ */
.vega-performance {
  background: #000;
  color: #fff;
}

.vega-performance__hero {
  text-align: center;
  padding: 100px 0;
}

.vega-performance__hero .vega-big-title {
  color: #fff;
}

.vega-performance__chip {
  position: relative;
  margin-top: 60px;
}

.vega-performance__chip img {
  width: 100%;
  max-width: 800px;
}

.vega-performance__chip-info {
  text-align: center;
  margin-top: 24px;
}

.vega-performance__chip-info h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
}

.vega-performance__chip-info p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.7);
}

.vega-performance__stats {
  padding: 80px 0;
}

.vega-perf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.vega-perf-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.vega-perf-card.-visible {
  opacity: 1;
  transform: translateY(0);
}

.vega-perf-value {
  display: block;
  font-size: 48px;
  font-weight: 600;
  background: linear-gradient(90deg, #0071e3 0%, #42a5f5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.vega-perf-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   VEGA BATTERY SECTION
   ============================================ */
.vega-battery {
  padding: 100px 0;
  background: #f5f5f7;
}

.vega-battery__header {
  text-align: center;
  margin-bottom: 60px;
}

.vega-battery__comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.vega-battery__chart {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  height: 300px;
  padding: 20px;
  background: #fff;
  border-radius: 20px;
}

.vega-battery__bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.vega-battery__bar .bar-fill {
  width: 60px;
  background: #d2d2d7;
  border-radius: 8px 8px 0 0;
  margin-top: auto;
  transition: height 1s ease;
}

.vega-battery__bar.-highlight .bar-fill {
  background: linear-gradient(180deg, #0071e3 0%, #42a5f5 100%);
}

.vega-battery__bar .bar-label {
  margin-top: 16px;
  font-size: 12px;
  color: #86868b;
}

.vega-battery__bar .bar-value {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
}

.vega-battery__bar.-highlight .bar-value {
  color: #0071e3;
}

.vega-battery__info h3 {
  font-size: 32px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 16px;
}

.vega-battery__info > p {
  font-size: 17px;
  color: #86868b;
  line-height: 1.5;
  margin-bottom: 24px;
}

.vega-battery__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vega-battery__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  color: #1d1d1f;
  padding: 8px 0;
}

.vega-battery__list i {
  color: #34c759;
  font-size: 20px;
}

/* ============================================
   VEGA FAMILY SECTION
   ============================================ */
.vega-family {
  padding: 100px 0;
  background: #fff;
}

.vega-family__header {
  text-align: center;
  margin-bottom: 60px;
}

.vega-family__card {
  text-align: center;
  padding: 20px;
}

.vega-family__card img {
  width: 100%;
  max-width: 200px;
  margin-bottom: 16px;
}

.vega-family__card h4 {
  font-size: 21px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.vega-family__card p {
  font-size: 14px;
  color: #86868b;
}

/* ============================================
   VEGA OS SECTION
   ============================================ */
.vega-os {
  padding: 100px 0;
  background: #f5f5f7;
}

.vega-os__header {
  text-align: center;
  margin-bottom: 60px;
}

.vega-os__card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}

.vega-os__card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.vega-os__card h4 {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  padding: 16px 16px 8px;
}

.vega-os__card p {
  font-size: 14px;
  color: #86868b;
  padding: 0 16px 16px;
  line-height: 1.4;
}

/* ============================================
   VEGA AI SECTION
   ============================================ */
.vega-ai {
  padding: 100px 0;
  background: #fff;
}

.vega-ai__header {
  text-align: center;
  margin-bottom: 60px;
}

.vega-ai__card {
  background: #f5f5f7;
  border-radius: 20px;
  overflow: hidden;
}

.vega-ai__card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.vega-ai__card h4 {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  padding: 16px 16px 8px;
}

.vega-ai__card p {
  font-size: 14px;
  color: #86868b;
  padding: 0 16px 16px;
  line-height: 1.4;
}

/* ============================================
   VEGA ENTERPRISE SECTION
   ============================================ */
.vega-enterprise {
  padding: 100px 0;
  background: #f5f5f7;
}

.vega-enterprise__header {
  text-align: center;
  margin-bottom: 60px;
}

.vega-enterprise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vega-enterprise__card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.vega-enterprise__card.-visible {
  opacity: 1;
  transform: translateY(0);
}

.vega-enterprise__card i {
  font-size: 40px;
  color: #0071e3;
  margin-bottom: 16px;
}

.vega-enterprise__card h4 {
  font-size: 21px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.vega-enterprise__card p {
  font-size: 14px;
  color: #86868b;
  line-height: 1.5;
}

/* ============================================
   VEGA SWITCH SECTION
   ============================================ */
.vega-switch {
  padding: 100px 0;
  background: #fff;
}

.vega-switch__header {
  text-align: center;
  margin-bottom: 60px;
}

.vega-switch__tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.vega-switch__tab {
  padding: 12px 24px;
  background: #f5f5f7;
  border: none;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  cursor: pointer;
  transition: all 0.3s ease;
}

.vega-switch__tab:hover {
  background: #e8e8ed;
}

.vega-switch__tab.active {
  background: #1d1d1f;
  color: #fff;
}

.vega-switch__content {
  display: none;
}

.vega-switch__content.active {
  display: block;
}

.vega-switch__table {
  max-width: 800px;
  margin: 0 auto;
  background: #f5f5f7;
  border-radius: 20px;
  overflow: hidden;
}

.vega-switch__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8ed;
}

.vega-switch__row:last-child {
  border-bottom: none;
}

.vega-switch__row.-header {
  background: #1d1d1f;
  color: #fff;
  font-weight: 600;
}

.vega-switch__row.-header .highlight {
  color: #42a5f5;
}

.vega-switch__row span {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.vega-switch__row span.highlight {
  color: #0071e3;
  font-weight: 600;
}

.vega-switch__row span i.bi-check-circle-fill {
  color: #34c759;
  font-size: 18px;
}

.vega-switch__row span i.bi-x-circle {
  color: #d2d2d7;
  font-size: 18px;
}

/* ============================================
   VEGA ACCESSORIES SECTION
   ============================================ */
.vega-accessories {
  padding: 100px 0;
  background: #f5f5f7;
}

.vega-accessories__header {
  text-align: center;
  margin-bottom: 60px;
}

.vega-accessory-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  text-align: center;
}

.vega-accessory-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}

.vega-accessory-card h4 {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.vega-accessory-card p {
  font-size: 14px;
  color: #86868b;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* ============================================
   VEGA SPECS SECTION
   ============================================ */
.vega-specs {
  padding: 100px 0;
  background: #fff;
}

.vega-specs__header {
  text-align: center;
  margin-bottom: 60px;
}

.vega-specs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.vega-specs__group {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.vega-specs__group.-visible {
  opacity: 1;
  transform: translateY(0);
}

.vega-specs__group h3 {
  font-size: 21px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8ed;
}

.vega-specs__group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vega-specs__group li {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f7;
  font-size: 14px;
}

.vega-specs__group li:last-child {
  border-bottom: none;
}

.vega-specs__group li span:first-child {
  color: #86868b;
}

.vega-specs__group li span:last-child {
  color: #1d1d1f;
  font-weight: 500;
  text-align: right;
}

/* ============================================
   VEGA CTA SECTION
   ============================================ */
.vega-cta {
  padding: 120px 0;
  background: linear-gradient(180deg, #f5f5f7 0%, #fff 100%);
  text-align: center;
}

.vega-cta__content {
  max-width: 700px;
  margin: 0 auto;
}

.vega-cta__content > p {
  font-size: 21px;
  color: #86868b;
  margin: 24px 0 32px;
  line-height: 1.5;
}

.vega-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================
   VEGA FOOTER
   ============================================ */
.vega-footer {
  padding: 40px 0;
  background: #f5f5f7;
  border-top: 1px solid #e8e8ed;
}

.vega-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.vega-footer__logo img {
  height: 24px;
  opacity: 0.6;
}

.vega-footer__links {
  display: flex;
  gap: 32px;
}

.vega-footer__links a {
  font-size: 12px;
  color: #86868b;
  transition: color 0.3s ease;
}

.vega-footer__links a:hover {
  color: #1d1d1f;
}

.vega-footer__copy {
  font-size: 12px;
  color: #86868b;
}

/* ============================================
   VEGA PAGE RESPONSIVE STYLES
   ============================================ */
@media (max-width: 1199px) {
  .vega-big-title { font-size: 52px; }
  .vega-hero__title { font-size: 72px; }
  .vega-features-grid { grid-template-columns: repeat(2, 1fr); }
  .vega-scanner__grid { grid-template-columns: 1fr 1fr; }
  .vega-scanner__card.-main { grid-column: span 2; grid-row: span 1; }
  .vega-perf-grid { grid-template-columns: repeat(2, 1fr); }
  .vega-enterprise__grid { grid-template-columns: repeat(2, 1fr); }
  .vega-specs__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .vega-nav__links { display: none; }
  .vega-big-title { font-size: 42px; }
  .vega-hero .container { flex-direction: column; text-align: center; }
  .vega-hero__title { font-size: 56px; }
  .vega-hero__cta { justify-content: center; }
  .vega-hero__image { max-width: 400px; }
  .vega-closeup__sticky { grid-template-columns: 1fr; }
  .vega-closeup__media { position: relative; top: 0; margin-bottom: 40px; }
  .vega-zoom { grid-template-columns: 1fr; }
  .vega-zoom__image { margin-bottom: 40px; }
  .vega-battery__comparison { grid-template-columns: 1fr; }
  .vega-battery__chart { margin-bottom: 40px; }
  .vega-analytics__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .vega-nav__cta { display: none; }
  .vega-nav__product { font-size: 17px; }
  .vega-big-title { font-size: 36px; }
  .vega-section-title { font-size: 32px; }
  .vega-hero { padding: 100px 0 60px; }
  .vega-hero__title { font-size: 48px; }
  .vega-hero__tagline { font-size: 21px; }
  .vega-hero__cta { flex-direction: column; align-items: center; }
  .vega-highlights__tabs { gap: 4px; }
  .vega-tab { padding: 6px 14px; font-size: 12px; }
  .vega-features-grid { grid-template-columns: 1fr; }
  .vega-viewer__controls { gap: 8px; }
  .vega-viewer__btn { padding: 12px 16px; }
  .vega-scanner__grid { grid-template-columns: 1fr; }
  .vega-scanner__card.-main { grid-column: span 1; }
  .vega-video-showcase { grid-template-columns: 1fr; }
  .vega-perf-grid { grid-template-columns: 1fr; }
  .vega-perf-value { font-size: 36px; }
  .vega-battery__chart { height: 250px; }
  .vega-enterprise__grid { grid-template-columns: 1fr; }
  .vega-switch__tabs { flex-direction: column; align-items: center; }
  .vega-switch__row { grid-template-columns: 1.5fr 1fr 1fr; padding: 12px 16px; }
  .vega-switch__row span { font-size: 12px; }
  .vega-specs__grid { grid-template-columns: 1fr; gap: 32px; }
  .vega-cta { padding: 80px 0; }
  .vega-cta__content > p { font-size: 17px; }
  .vega-cta__buttons { flex-direction: column; align-items: center; }
  .vega-footer__inner { flex-direction: column; text-align: center; }
  .vega-footer__links { flex-wrap: wrap; justify-content: center; gap: 16px; }
}

/* ============================================
   PREMIUM PRODUCT PAGE (PP) - APPLE-INSPIRED
   World-class product landing page system
   ============================================ */

/* CSS Custom Properties - FULL DARK THEME */
.pp {
  --pp-bg: #000;
  --pp-bg-light: #0a0a0a;
  --pp-bg-surface: #111111;
  --pp-bg-card: #1a1a1a;
  --pp-text: #f5f5f7;
  --pp-text-dark: #f5f5f7;
  --pp-text-muted: #86868b;
  --pp-accent: #0071e3;
  --pp-accent-hover: #0077ed;
  --pp-gradient-start: #2997ff;
  --pp-gradient-end: #30d158;
  --pp-surface: #1d1d1f;
  --pp-border: rgba(255,255,255,0.1);
  --pp-shadow: 0 4px 40px rgba(0,0,0,0.5);
  --pp-radius: 18px;
  --pp-radius-sm: 12px;
  --pp-transition: cubic-bezier(0.25, 0.1, 0.25, 1);
  --pp-transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--pp-bg);
  color: var(--pp-text);
  overflow-x: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .pp *, .pp *::before, .pp *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
.pp-label {display: inline-block;font-size: clamp(14px, 2vw, 17px);font-weight: 500;text-transform: uppercase;color: #86868b;margin-bottom: 5px;}

.pp-label--light {
  color: rgba(255,255,255,0.7);
}

.pp-title {
  font-weight: 700;
  line-height: 1.08;
  color: var(--pp-text-dark);
}

.pp-title--huge {
  font-size: clamp(24px, 4vw, 40px);
}

.pp-title--large {
  font-size: clamp(24px, 4vw, 40px);
}

.pp-title--hero {
  font-size: clamp(48px, 10vw, 96px);
  margin-bottom: 40px;
}

.pp-title--light {
  color: var(--pp-text);
}

.pp-gradient {
  background: -webkit-linear-gradient(45deg, var(--color-blue-3), var(--color-blue-2), var(--color-blue-1), var(--color-purple-1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pp-subtitle {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.5;
  color: var(--pp-text-muted);
  margin: 16px auto 0;
}

/* ========================================
   BUTTONS
   ======================================== */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 35px;
  font-weight: 500;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s var(--pp-transition);
  white-space: nowrap;
}

.pp-btn--primary {
  background: var(--pp-accent);
  color: #fff;
}

.pp-btn--primary:hover {
  background: var(--pp-accent-hover);
  transform: scale(1.02);
}

.pp-btn--secondary {
  background: rgba(255,255,255,0.1);
  color: var(--pp-text);
  backdrop-filter: blur(10px);
}

.pp-btn--secondary:hover {
  background: rgba(255,255,255,0.15);
}

.pp-btn--large {
  padding: 12px 24px;
  font-size: 18px;
}

.pp-btn--large svg{
  font-size: 14px;
}


.pp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pp-accent);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  transition: gap 0.3s var(--pp-transition);
}
.pp-link svg{
  font-size: 12px;
}

.pp-link:hover {
  gap: 10px;
}

/* ========================================
   FLOATING NAV
   ======================================== */
.pp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 12px 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s var(--pp-transition), opacity 0.4s var(--pp-transition);
}

.pp-nav.visible {
  transform: translateY(0);
  opacity: 1;
}

.pp-nav.hidden {
  transform: translateY(-100%);
}

.pp-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.pp-nav__logo img {
  height: 28px;
  width: auto;
}

.pp-nav__product {
  font-size: 17px;
  font-weight: 500;
  color: var(--pp-text);
}

.pp-nav__links {
  display: flex;
  gap: 32px;
}

.pp-nav__links a {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color 0.2s;
}

.pp-nav__links a:hover {
  color: #fff;
}

.pp-nav__cta {
  padding: 8px 18px;
  background: var(--pp-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.3s var(--pp-transition);
}

.pp-nav__cta:hover {
  background: var(--pp-accent-hover);
}

/* ========================================
   HERO SECTION - Apple Style
   Full viewport video/image with bottom marquee
   ======================================== */
.pp-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

.pp-hero__title-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Full Screen Media */
.pp-hero__media-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pp-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.pp-hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.pp-hero__fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hide fallback when video is playing */
.pp-hero__video:not([poster]) ~ .pp-hero__fallback,
.pp-hero.video-ready .pp-hero__fallback {
  opacity: 0;
  pointer-events: none;
}

/* Hero Text Overlay */
.pp-hero__text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.pp-hero__text-content {
  text-align: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pp-hero.text-visible .pp-hero__text-content {
  opacity: 1;
  transform: translateY(0);
}

.pp-hero__eyebrow {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.pp-hero.text-visible .pp-hero__eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.pp-hero__headline {
  font-size: clamp(64px, 12vw, 140px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
  color: #fff;
}

.pp-hero__headline-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pp-hero__headline-word:nth-child(1) {
  transition-delay: 0.4s;
}

.pp-hero__headline-word:nth-child(2) {
  transition-delay: 0.6s;
}

.pp-hero.text-visible .pp-hero__headline-word {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pp-hero__headline-word--accent {
  background: linear-gradient(135deg, #2997ff 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: 0.1em;
}

.pp-hero__tagline {
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 24px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease 0.9s, transform 1s ease 0.9s;
}

.pp-hero.text-visible .pp-hero__tagline {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Hero Text */
@media (max-width: 768px) {
  .pp-hero__eyebrow {
    font-size: 14px;
  }

  .pp-hero__tagline {
    margin-top: 16px;
    padding: 0 20px;
  }
}

/* Bottom Marquee */
.pp-hero__marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.pp-hero__marquee-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  height: 200px;
  bottom: 0;
  top: auto;
  pointer-events: none;
}

.pp-hero__marquee-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 24px 60px;
}

/* Buy Button */
.pp-hero__buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: #0071e3;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  border-radius: 980px;
  text-decoration: none;
  transition: background 0.2s ease;
  min-width: 80px;
}

.pp-hero__buy-btn:hover {
  background: #0077ed;
  color: #fff;
}

/* Pricing */
.pp-hero__pricing {
  text-align: left;
}

.pp-hero__price-line {
  font-size: 17px;
  color: #f5f5f7;
  margin: 0;
  line-height: 1.4;
}

.pp-hero__price-line strong {
  font-weight: 600;
}

.pp-hero__price-monthly {
  font-size: 14px;
  color: #86868b;
  margin: 4px 0 0;
}

/* Responsive */
@media (max-width: 734px) {
  .pp-hero__marquee-content {
    flex-direction: column;
    gap: 16px;
    padding: 30px 24px 40px;
  }

  .pp-hero__pricing {
    text-align: center;
  }

  .pp-hero__buy-btn {
    width: 100%;
    max-width: 280px;
  }
}

/* ========================================
   HIGHLIGHTS GALLERY - Apple Style
   Media Card Gallery with Video Cards
   ======================================== */
.pp-highlights-gallery {
  --gallery-card-width: min(calc(100vw - 0px), 1250px);
  --gallery-card-height: min(calc(100vh - 0px), 600px);
  --gallery-gap: 16px;
  --controls-bg: rgba(0, 0, 0, 0.7);
  --controls-blur: 20px;
  --dot-size: 8px;
  --dot-gap: 12px;
  --autoplay-duration: 8s;
  position: relative;
  padding: 80px 0 120px;
  background: #000;
  color: #fff;
  overflow: hidden;
}

/* Header */
.pp-highlights-gallery__viewport {
  margin: 0 auto;
}

.pp-highlights-gallery__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-bottom: 40px;
}

.pp-highlights-gallery__title {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.pp-highlights-gallery__cta {
  flex-shrink: 0;
}

.pp-highlights-gallery__film-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 400;
  color: #2997ff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.pp-highlights-gallery__film-link:hover {
  color: #63b3ff;
  text-decoration: underline;
}

.pp-highlights-gallery__play-icon {
  width: 20px;
  height: 20px;
}

/* Controls Container - Fixed at bottom center */
.pp-highlights-gallery__controls {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pp-highlights-gallery.in-view .pp-highlights-gallery__controls {
  opacity: 1;
  pointer-events: auto;
}

.pp-highlights-gallery__controls-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px 12px 12px;
  background: var(--controls-bg);
  backdrop-filter: blur(var(--controls-blur));
  -webkit-backdrop-filter: blur(var(--controls-blur));
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Play/Pause Button */
.pp-highlights-gallery__play-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.pp-highlights-gallery__play-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.pp-highlights-gallery__play-btn:active {
  transform: scale(0.95);
}

.pp-highlights-gallery__btn-icons {
  position: relative;
  width: 40px;
  height: 40px;
}

.pp-highlights-gallery__btn-icons svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pp-highlights-gallery__play-btn[data-state="paused"] .pp-highlights-gallery__icon-play {
  opacity: 1;
}

.pp-highlights-gallery__play-btn[data-state="playing"] .pp-highlights-gallery__icon-pause {
  opacity: 1;
}

.pp-highlights-gallery__play-btn[data-state="ended"] .pp-highlights-gallery__icon-replay {
  opacity: 1;
}

/* Dot Navigation */
.pp-highlights-gallery__dotnav {
  display: flex;
  align-items: center;
}

.pp-highlights-gallery__dots {
  display: flex;
  align-items: center;
  gap: var(--dot-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pp-highlights-gallery__dot-item {
  position: relative;
}

.pp-highlights-gallery__dot-link {
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: width 0.3s ease, background 0.2s ease;
}

.pp-highlights-gallery__dot-link:hover {
  background: rgba(255, 255, 255, 0.5);
}

.pp-highlights-gallery__dot-item.current .pp-highlights-gallery__dot-link {
  width: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
}

.pp-highlights-gallery__dot-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 10px;
  transition: none;
}

.pp-highlights-gallery.playing .pp-highlights-gallery__dot-item.current .pp-highlights-gallery__dot-progress {
  animation: dotProgress var(--autoplay-duration) linear forwards;
}

@keyframes dotProgress {
  from { width: 0; }
  to { width: 100%; }
}

/* Gallery Wrapper */
.pp-highlights-gallery__wrapper {
  position: relative;
  width: 100%;
}

.pp-highlights-gallery__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.pp-highlights-gallery__scroll::-webkit-scrollbar {
  display: none;
}

/* Cards Container */
.pp-highlights-gallery__cards {
  display: flex;
  gap: var(--gallery-gap);
  list-style: none;
  margin: 0;
}

/* Individual Card */
.pp-highlights-gallery__card {
  flex: 0 0 var(--gallery-card-width);
  aspect-ratio: 16/8;
  /* height: var(--gallery-card-height); */
  scroll-snap-align: center;
  opacity: 0.5;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.pp-highlights-gallery__card.current {
  opacity: 1;
  transform: scale(1);
}

.pp-highlights-gallery__card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #1d1d1f;
}

/* Media Container */
.pp-highlights-gallery__media {
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pp-highlights-gallery__video,
.pp-highlights-gallery__fallback,
.pp-highlights-gallery__static {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-highlights-gallery__video {
  position: relative;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pp-highlights-gallery__card.current .pp-highlights-gallery__video.loaded {
  opacity: 1;
}

.pp-highlights-gallery__fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pp-highlights-gallery__static {
  position: relative;
  z-index: 1;
}

/* Caption */
.pp-highlights-gallery__caption {
  position: absolute;
  z-index: 10;
  max-width: 500px;
}

.pp-highlights-gallery__caption--top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.pp-highlights-gallery__caption--top-left {
  top: 0;
  left: 0;
  text-align: left;
}
.pp-highlights-gallery__caption--top-right {
  top: 0;
  right: 0;
  text-align: right;
}

.pp-highlights-gallery__caption--bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.pp-highlights-gallery__caption--bottom-left {
  bottom: 0;
  left: 0;
  text-align: left;
}
.pp-highlights-gallery__caption--bottom-right {
  bottom: 0;
  right: 0;
  text-align: right;
}

.pp-highlights-gallery__caption-text {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* Accessibility */
.visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .pp-highlights-gallery {
    --gallery-card-width: calc(100vw - 48px);
    --gallery-card-height: 400px;
    padding: 60px 0 100px;
  }

  .pp-highlights-gallery__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .pp-highlights-gallery__title {
    font-size: 32px;
  }

  .pp-highlights-gallery__controls {
    bottom: 24px;
  }

  .pp-highlights-gallery__controls-inner {
    padding: 10px 16px;
    gap: 12px;
  }

  .pp-highlights-gallery__play-btn {
    width: 40px;
    height: 40px;
  }

  .pp-highlights-gallery__caption {
    padding: 16px;
  }

  .pp-highlights-gallery__caption--top-center,
  .pp-highlights-gallery__caption--top-left {
    padding-top: 24px;
  }

  .pp-highlights-gallery__caption--top-left {
    padding-left: 24px;
  }

  .pp-highlights-gallery__caption--bottom-center {
    padding-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .pp-highlights-gallery {
    --gallery-card-height: 320px;
  }

  .pp-highlights-gallery__cards {
    padding: 0;
  }

  .pp-highlights-gallery__card-inner {
    border-radius: 16px;
  }

  .pp-highlights-gallery__caption-text {
    font-size: 18px;
  }
}

/* ========================================
   SECTIONS BASE
   ======================================== */
.pp-section {
  padding: clamp(80px, 12vw, 160px) 24px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--pp-transition), transform 0.8s var(--pp-transition);
}

.pp-section.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   DESIGN SECTION - Apple Product Story Style
   ======================================== */
.pp-design {
  position: relative;
  background: #000;
  color: #fff;
  overflow: hidden;
}

.pp-design__viewport {
  margin: 0 auto;
}

/* Header */
.pp-design__header {
  text-align: center;
}

.pp-design__eyebrow {
  display: inline-block;
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 500;
  text-transform: uppercase;
  color: #86868b;
  margin-bottom: 5px;
}

.pp-design__headline {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 24px;
}

.pp-design__body {
  font-size: clamp(15px, 2.1vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: #86868b;
  margin: 0 auto;
}

/* Media Container */
.pp-design__media-container {
  display: flex;
  justify-content: center;
}

.pp-design__media-wrapper {
  width: 100%;
}

.pp-design__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6;
  border-radius: 20px;
  overflow: hidden;
  background: #1d1d1f;
}

.pp-design__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pp-design__video.loaded {
  opacity: 1;
}

.pp-design__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Compare Button (AAP Style) */
.pp-design__aap {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pp-design.in-view .pp-design__aap {
  opacity: 1;
  pointer-events: auto;
}

.pp-design__aap-inner {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pp-design__compare-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.pp-design__compare-btn:hover {
  color: #2997ff;
}

.pp-design__compare-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .pp-design__viewport {
  }

  .pp-design__headline {
    font-size: 40px;
  }

  .pp-design__media-container {
    padding: 2px 0px 60px;
  }

  .pp-design__media {
    border-radius: 12px;
  }

  .pp-design__aap {
    bottom: 24px;
  }
}

@media (max-width: 480px) {
  .pp-design__headline {
    font-size: 32px;
  }

  .pp-design__body {
    font-size: 15px;
  }
}

/* ========================================
   SCANNER SECTION - Apple Cameras Style
   Product story with range gallery
   ======================================== */
.pp-scanner {
  position: relative;
  background: #000;
  color: #fff;
  padding: 0;
  overflow: hidden;
}

/* Section Header */
.pp-scanner__viewport {
  margin: 0 auto;
  padding: 120px 24px 40px;
  text-align: center;
}

.pp-scanner__header {
  text-align: center;
}

.pp-scanner__eyebrow {
  display: inline-block;
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 500;
  text-transform: uppercase;
  color: #86868b;
  margin-bottom: 5px;
  background: -webkit-linear-gradient(45deg, var(--color-blue-3), var(--color-blue-2), var(--color-blue-1), var(--color-purple-1));
  background: -webkit-linear-gradient(45deg, var(--color-blue-3), var(--color-blue-2), var(--color-blue-1), var(--color-purple-1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pp-scanner__headline {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 30px;
  color: #f5f5f7;
}

/* Hero Media Intro */
.pp-scanner__intro {
  margin: 0 auto;
}

.pp-scanner__intro-content {
  display: grid;
  grid-template-columns: 70% 1fr;
  align-items: center;
  gap: 40px;
}

.pp-scanner__hero-media {
  width: 100%;
}

.pp-scanner__hero-wrapper {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #1d1d1f;
}

.pp-scanner__hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pp-scanner__hero-video.loaded {
  opacity: 1;
}

.pp-scanner__hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Stats Row */
.pp-scanner__stats-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: clamp(40px, 3vw, 100px);
}

.pp-scanner__stat {
  font-size: clamp(15px, 2vw, 17px);
  color: #86868b;
  text-align: left;
  margin: 0;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.pp-scanner__stat strong {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 600;
  background: -webkit-linear-gradient(45deg, var(--color-blue-3), var(--color-blue-2), var(--color-blue-1), var(--color-purple-1));
  background: -webkit-linear-gradient(45deg, var(--color-blue-3), var(--color-blue-2), var(--color-blue-1), var(--color-purple-1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pp-scanner__stat br.medium {
  display: none;
}

@media (min-width: 768px) {
  .pp-scanner__stat br.medium {
    display: block;
  }
}

/* Body Copy */
.pp-scanner__body {
  font-size: clamp(15px, 2.1vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: #86868b;
  text-align: center;
  margin: 80px auto;
  padding: 0;
}

.pp-scanner__body strong {
  color: #f5f5f7;
}

/* Range Gallery Section */
.pp-scanner__gallery-section {
  padding: 0 24px 120px;
}

.pp-scanner__gallery-wrapper {
  margin: 0 auto;
}

/* Tab Navigation - Apple Pill Style */
.pp-scanner__tabnav {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
}

.pp-scanner__tabnav-platter {
  position: relative;
  display: inline-flex;
  background: rgb(0 0 0);
  border-radius: 100px;
  padding: 4px;
}

.pp-scanner__tabnav-items {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.pp-scanner__tabnav-item {
  position: relative;
}

.pp-scanner__tabnav-link {
  display: block;
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-radius: 100px;
  color: #86868b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.pp-scanner__tabnav-link:hover {
  color: #f5f5f7;
}

.pp-scanner__tabnav-item.active .pp-scanner__tabnav-link {
  color: #000;
}

.pp-scanner__tabnav-indicator {
  position: absolute;
  top: 4px;
  left: 8px;
  height: calc(100% - 8px);
  background: #fff;
  border-radius: 100px;
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
              width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 0;
}

/* Gallery */
.pp-scanner__gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 16/8;
  border-radius: 20px;
  overflow: hidden;
  background: #1d1d1f;
}

.pp-scanner__gallery-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 0;
}

.pp-scanner__gallery-item.current {
  opacity: 1;
  z-index: 1;
}

.pp-scanner__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-scanner__gallery-caption {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
}

.pp-scanner__gallery-caption strong {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
  .pp-scanner__viewport {
    padding: 80px 0 32px;
  }

  .pp-scanner__headline {
    font-size: 48px;
  }

  .pp-scanner__hero-wrapper {
    border-radius: 16px;
  }

  .pp-scanner__body {
    margin: 40px auto;
  }

  .pp-scanner__gallery-section {
    padding: 0 0 30px;
  }
  .pp-scanner__tabnav {
    margin-top: 10px;
  }

  .pp-scanner__tabnav-platter {
    overflow-x: auto;
    max-width: 100%;
  }

  .pp-scanner__tabnav-link {
    padding: 8px 14px;
    font-size: 13px;
  }

  .pp-scanner__gallery {
    border-radius: 16px;
    aspect-ratio: 16 / 12;
  }

  .pp-scanner__gallery-caption {
    bottom: 10px;
  }
  .pp-scanner__gallery-caption strong {
    font-size: clamp(20px, 3vw, 30px);
  }
}

@media (max-width: 480px) {
  .pp-scanner__headline {
    font-size: 36px;
    margin: 0;
  }
  .pp-scanner__intro-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pp-scanner__stats-row {
    gap: 24px;
    flex-direction: row;
  }

  .pp-scanner__tabnav-link {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* ========================================
   PRO WORKFLOW SECTION
   Apple Pro Video style with scroll gallery
   ======================================== */
.pp-workflow {
  background: #000;
  color: #f5f5f7;
  position: relative;
  overflow: hidden;
}

.pp-workflow__viewport {
  margin: 0 auto;
  padding: 0 var(--pp-gutter);
  text-align: center;
}

/* Header */
.pp-workflow__header {
  margin-bottom: 60px;
}

.pp-workflow__eyebrow {display: inline-block;font-size: clamp(14px, 2vw, 17px);font-weight: 500;text-transform: uppercase;color: #86868b;margin-bottom: 5px;}

.pp-workflow__headline {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
  background: linear-gradient(to bottom, #fff 0%, #a1a1a6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero Device Frame */
.pp-workflow__hero {
  margin: 0 0 90px;
  display: grid;
  grid-template-columns: 1fr 65%;
  align-items: center;
  margin-right: calc((100% - 100vw) / 2);
}

.pp-workflow__device {
  position: relative;
  width: 100%;
}

.pp-workflow__screen {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.pp-workflow__video {
  width: 100%;
  height: auto;
  display: block;
}

.pp-workflow__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

.pp-workflow__video:not([poster]) + .pp-workflow__poster,
.pp-workflow.video-playing .pp-workflow__poster {
  opacity: 0;
}

.pp-workflow__frame {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Body Copy */
.pp-workflow__body {
  margin: auto;
  text-align: start;
}

.pp-workflow__body p {
  font-size: 18px;
  line-height: 1.5;
  color: #86868b;
  margin: 0;
}

.pp-workflow__body strong {
  color: #f5f5f7;
  font-weight: 600;
}

/* Scroll Gallery */
.pp-workflow__gallery {
  position: relative;
}

.pp-workflow__gallery-scroll {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 20px 0;
}

.pp-workflow__gallery-scroll::-webkit-scrollbar {
  display: none;
}

.pp-workflow__gallery-track {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  width: max-content;
}

/* Gallery Cards */
.pp-workflow__card {
  flex: 0 0 auto;
  width: 340px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.pp-workflow__card:first-child {
  width: 600px;
}

.pp-workflow__card:nth-child(2) {
  width: 350px;
}

.pp-workflow__card:nth-child(3) {
  width: 400px;
}

.pp-workflow__card:nth-child(4) {
  width: 500px;
}

.pp-workflow__card-caption {
  order: 2;
  text-align: left;
  margin-top: 16px;
  padding: 0 4px;
}

.pp-workflow__card-title {
  font-size: 19px;
  font-weight: 600;
  color: #f5f5f7;
  margin: 0 0 6px;
}

.pp-workflow__card-caption p {
  font-size: 14px;
  line-height: 1.47;
  color: #86868b;
  margin: 0;
}

.pp-workflow__card-media {
  order: 1;
  height: 260px;
  border-radius: 20px;
  overflow: hidden;
  background: #1d1d1f;
}

.pp-workflow__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Paddle Navigation */
.pp-workflow__paddlenav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}

.pp-workflow__paddle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pp-workflow__paddle:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.pp-workflow__paddle:disabled {
  opacity: 0.3;
  cursor: default;
}

.pp-workflow__paddle svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* Responsive */
@media (max-width: 1068px) {
  .pp-workflow__headline {
    font-size: clamp(36px, 7vw, 64px);
  }

  .pp-workflow__body p {
    font-size: 19px;
  }

  .pp-workflow__card {
    width: 300px !important;
  }

  .pp-workflow__card:nth-child(3) {
    width: 400px !important;
  }
}

@media (max-width: 734px) {
  .pp-workflow__header {
    margin-bottom: 40px;
  }
  .pp-section {
    padding: clamp(80px, 12vw, 160px) 0px;
  }

  .pp-workflow__eyebrow {
    font-size: 19px;
  }

  .pp-workflow__headline {
    font-size: 32px;
  }
  
  .pp-workflow__hero {
    margin-bottom: 60px;
    grid-template-columns: 1fr;
  }

  .pp-workflow__body {
    margin-bottom: 20px;
  }

  .pp-workflow__body p {
    font-size: 17px;
  }

  .pp-workflow__gallery {
    padding-bottom: 60px;
  }

  .pp-workflow__gallery-track {
    gap: 16px;
  }

  .pp-workflow__card {
    width: 280px !important;
  }

  .pp-workflow__card:nth-child(3) {
    width: 320px !important;
  }

  .pp-workflow__card-title {
    font-size: 17px;
  }

  .pp-workflow__card-caption p {
    font-size: 13px;
  }

  .pp-workflow__card-media {
    border-radius: 16px;
  }

  .pp-workflow__paddlenav {
    padding: 0 10px;
  }

  .pp-workflow__paddle {
    width: 32px;
    height: 32px;
  }

  .pp-workflow__paddle svg {
    width: 18px;
    height: 18px;
  }
}

/* ========================================
   BATTERY LIFE SECTION
   Apple-style big stat display
   ======================================== */
.pp-batterylife {
  background: #000;
  color: #f5f5f7;
  position: relative;
  overflow: hidden;
}

.pp-batterylife__viewport {
  margin: 0 auto;
  padding: 0 var(--pp-gutter);
  text-align: center;
}

/* Header */
.pp-batterylife__header {
  margin-bottom: 60px;
}

.pp-batterylife__eyebrow {display: inline-block;font-size: clamp(14px, 2vw, 17px);font-weight: 500;text-transform: uppercase;color: #86868b;margin-bottom: 5px;}

.pp-batterylife__headline {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
  color: #f5f5f7;
}

/* Hero Stat */
.pp-batterylife__hero {
  margin-bottom: 60px;
}

.pp-batterylife__stat-giant {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
}

.pp-batterylife__number {
  font-size: clamp(120px, 25vw, 280px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: -webkit-linear-gradient(45deg, #09ac32, #3cc854, #b5f1c4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pp-batterylife__unit {
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 600;
  color: #f5f5f7;
}

.pp-batterylife__stat-caption {
  font-size: 21px;
  color: #86868b;
  margin: 1px 0 0;
}

/* Body Copy */
.pp-batterylife__body {
  margin: 0 auto 80px;
  text-align: center;
}

.pp-batterylife__body p {
  font-size: 18px;
  line-height: 1.5;
  color: #86868b;
  margin: 0;
}

.pp-batterylife__body strong {
  color: #f5f5f7;
  font-weight: 600;
}

/* Stats Grid */
.pp-batterylife__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0 auto;
}

.pp-batterylife__stat-item {
  text-align: center;
  padding: 32px 16px;
  background: #000000;
  border-radius: 20px;
}

.pp-batterylife__stat-value {
  font-size: 48px;
  font-weight: 600;
  color: #f5f5f7;
  display: block;
  line-height: 1.1;
}

.pp-batterylife__stat-suffix {
  font-size: 24px;
  font-weight: 600;
  color: #86868b;
  padding-left: 6px;
}

.pp-batterylife__stat-label {
  font-size: 14px;
  color: #86868b;
  margin-top: 8px;
  display: block;
}

/* Responsive */
@media (max-width: 1068px) {
  .pp-batterylife__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 734px) {
  .pp-batterylife__header {
    margin-bottom: 40px;
  }

  .pp-batterylife__eyebrow {
    font-size: 19px;
  }

  .pp-batterylife__hero {
    margin-bottom: 40px;
  }

  .pp-batterylife__stat-giant {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .pp-batterylife__stat-caption {
    font-size: 17px;
  }

  .pp-batterylife__body {
    margin-bottom: 50px;
  }

  .pp-batterylife__body p {
    font-size: 17px;
  }

  .pp-batterylife__stats {
    gap: 16px;
  }

  .pp-batterylife__stat-item {
    padding: 24px 12px;
    border-radius: 16px;
  }

  .pp-batterylife__stat-value {
    font-size: 32px;
  }

  .pp-batterylife__stat-suffix {
    font-size: 18px;
  }

  .pp-batterylife__stat-label {
    font-size: 12px;
  }
}

/* ========================================
   ENVIRONMENT SECTION
   Apple-style sustainability cards
   ======================================== */
.pp-environment {
  background: #000;
  color: #f5f5f7;
  position: relative;
  padding: 80px 0;
}

/* Header */
.pp-environment__header {
  text-align: center;
  margin-bottom: 50px;
}

.pp-environment__eyebrow {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  color: #f5f5f7;
  margin: 0;
}

/* Cards Grid */
.pp-environment__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Environment Card */
.pp-env-card {
  background: #1c1c1e;
  border-radius: 24px;
  padding: 40px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.pp-env-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 40px;
}

.pp-env-card__icon svg{
  font-size:50px;
}

.pp-env-card__icon--purple {
  color: #a78bfa;
}

.pp-env-card__icon--orange {
  color: #f97316;
}

.pp-env-card__icon--cyan {
  color: #22d3ee;
}

.pp-env-card__text {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #f5f5f7;
  margin: 0;
  flex-grow: 1;
}

.pp-env-card__highlight {
  display: inline;
}

.pp-env-card__highlight--purple {
  color: #a78bfa;
}

.pp-env-card__highlight--orange {
  color: #f97316;
}

.pp-env-card__highlight--cyan {
  color: #22d3ee;
}

.pp-env-card__btn {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

.pp-env-card__btn:hover {
  color: rgba(255, 255, 255, 0.8);
  transform: scale(1.1);
}

.pp-env-card__btn svg {
  width: 28px;
  height: 28px;
}

/* Responsive */
@media (max-width: 1068px) {
  .pp-environment__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .pp-env-card:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 734px) {
  .pp-environment {
    padding: 60px 0;
  }

  .pp-environment__header {
    margin-bottom: 30px;
  }

  .pp-environment__eyebrow {
    font-size: 24px;
  }

  .pp-environment__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pp-env-card {
    padding: 32px 24px;
    min-height: 220px;
    border-radius: 20px;
  }

  .pp-env-card:last-child {
    grid-column: span 1;
  }

  .pp-env-card__icon {
    margin-bottom: 24px;
  }

  .pp-env-card__text {
    font-size: 21px;
  }

  .pp-env-card__btn {
    bottom: 20px;
    right: 20px;
  }
}

/* ========================================
   OUR VALUES SECTION
   Apple-style values grid
   ======================================== */
.pp-values {
  background: #000;
  color: #f5f5f7;
  position: relative;
}

.pp-values__viewport {
  margin: 0 auto;
  padding: 0 var(--pp-gutter);
}

/* Header */
.pp-values__header {
  text-align: center;
  margin-bottom: 60px;
}

.pp-values__eyebrow {display: inline-block;font-size: clamp(14px, 2vw, 17px);font-weight: 500;text-transform: uppercase;color: #86868b;margin-bottom: 5px;}

.pp-values__headline {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
  color: #f5f5f7;
}

/* Grid */
.pp-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Cards */
.pp-values__card {
  background: #1d1d1f;
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pp-values__card-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  color: #f5f5f7;
}

.pp-values__card-icon svg {
  width: 100%;
  height: 100%;
}

.pp-values__card-title {
  font-size: 24px;
  font-weight: 600;
  color: #f5f5f7;
  margin: 0 0 12px;
}

.pp-values__card-body {
  font-size: 14px;
  line-height: 1.47;
  color: #86868b;
  margin: 0 0 16px;
  flex: 1;
}

.pp-values__card .pp-link {
  font-size: 12px;
  line-height: 1.1;
}

/* Responsive */
@media (max-width: 1068px) {
  .pp-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 734px) {
  .pp-values__header {
    margin-bottom: 40px;
  }

  .pp-values__eyebrow {
    font-size: 19px;
  }

  .pp-values__headline {
    font-size: 40px;
  }

  .pp-values__grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .pp-values__card {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .pp-values__card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .pp-values__card-title {
    font-size: 21px;
  }

  .pp-values__card-body {
    font-size: 14px;
  }
}

/* ========================================
   BATTERY SECTION
   ======================================== */
.pp-battery {
  background: var(--pp-bg-light);
  color: var(--pp-text-dark);
  text-align: center;
}

.pp-battery__content {
  margin: 0 auto;
}

.pp-battery__visual {
  margin: 60px 0;
}

.pp-battery__ring {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto;
}

.pp-battery__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pp-battery__track {
  fill: none;
  stroke: var(--pp-bg-card);
  stroke-width: 8;
}

.pp-battery__progress {
  fill: none;
  stroke: var(--pp-accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 565.48;
  stroke-dashoffset: 565.48;
  transition: stroke-dashoffset 2s var(--pp-transition);
}

.pp-battery__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pp-battery__hours {
  font-size: 56px;
  font-weight: 600;
  color: var(--pp-accent);
  line-height: 1;
}

.pp-battery__unit {
  font-size: 17px;
  color: var(--pp-text-muted);
}

.pp-battery__features {
  display: flex;
  justify-content: center;
  gap: clamp(32px, 6vw, 80px);
  flex-wrap: wrap;
}

.pp-battery__feature {
  text-align: center;
}

.pp-battery__feature-value {
  display: block;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  color: var(--pp-text-dark);
}

.pp-battery__feature-label {
  font-size: 14px;
  color: var(--pp-text-muted);
}

/* ========================================
   TIM OS SECTION
   ======================================== */
.pp-os {
  background: var(--pp-bg-surface);
  color: var(--pp-text-dark);
}

.pp-os__intro {
  text-align: center;
  margin: 0 auto 60px;
}

.pp-os__gallery {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}

.pp-os__gallery-track {
  display: flex;
  gap: 24px;
  padding: 0 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pp-os__gallery-track::-webkit-scrollbar {
  display: none;
}

.pp-os__item {
  flex: 0 0 auto;
  width: clamp(280px, 35vw, 400px);
  scroll-snap-align: center;
  margin: 0;
}

.pp-os__item img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--pp-radius);
  border: 1px solid var(--pp-border);
  margin-bottom: 16px;
}

.pp-os__item figcaption {
  text-align: center;
}

.pp-os__item h4 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}

.pp-os__item p {
  font-size: 14px;
  color: var(--pp-text-muted);
}

/* ========================================
   TIM AI SECTION — Immersive Dark
   ======================================== */
.pp-ai {
  background: #000;
  color: #f5f5f7;
  position: relative;
  overflow: hidden;
}

/* ---- Multi-layer aurora background ---- */
.pp-ai__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.pp-ai__aurora-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0;
  transition: opacity 1.2s ease;
}

.pp-ai.in-view .pp-ai__aurora-layer { opacity: 1; }

.pp-ai__aurora-layer--1 {
  width: 800px; height: 800px;
  top: -25%; left: -10%;
  background: radial-gradient(circle, rgba(41,151,255,0.25) 0%, transparent 70%);
  animation: auroraDrift1 12s ease-in-out infinite alternate;
}

.pp-ai__aurora-layer--2 {
  width: 600px; height: 600px;
  top: 10%; right: -15%;
  background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, transparent 70%);
  animation: auroraDrift2 14s ease-in-out infinite alternate;
}

.pp-ai__aurora-layer--3 {
  width: 500px; height: 500px;
  bottom: -10%; left: 30%;
  background: radial-gradient(circle, rgba(236,72,153,0.15) 0%, transparent 70%);
  animation: auroraDrift3 10s ease-in-out infinite alternate;
}

@keyframes auroraDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(80px, 60px) scale(1.2); }
}
@keyframes auroraDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-60px, 40px) scale(1.15); }
}
@keyframes auroraDrift3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -50px) scale(1.1); }
}

/* ---- Hero header ---- */
.pp-ai__hero {
  text-align: center;
  position: relative;
  z-index: 1;
  margin-bottom: 60px;
}

.pp-ai__badge {display: inline-block;font-size: clamp(14px, 2vw, 17px);font-weight: 500;text-transform: uppercase;color: #86868b;margin-bottom: 5px;}

.pp-ai__title {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.03;
  color: #f5f5f7;
  margin: 0 0 28px;
}

.pp-ai__title-glow {
  background: -webkit-linear-gradient(45deg, var(--color-blue-3), var(--color-blue-2), var(--color-blue-1), var(--color-purple-1));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: aiGradientShift 6s ease-in-out infinite alternate;
}

@keyframes aiGradientShift {
  0%   { background-position: 0% center; }
  100% { background-position: 100% center; }
}

.pp-ai__subtitle {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.52;
  color: #86868b;
  max-width: 800px;
  margin: 0 auto;
}

/* ---- Floating orb ---- */
.pp-ai__orb-wrap {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-bottom: 80px;
  height: 220px;
}

.pp-ai__orb {
  position: relative;
  width: 180px;
  height: 180px;
}

.pp-ai__orb-core {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #a855f7, #2997ff 60%, #0a0a0a 100%);
  box-shadow: 0 0 60px rgba(41,151,255,0.4), 0 0 120px rgba(168,85,247,0.2);
  animation: orbPulse 4s ease-in-out infinite alternate;
}

.pp-ai__orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
}

.pp-ai__orb-ring--1 {
  inset: -10%;
  border-color: rgba(41,151,255,0.12);
  animation: orbSpin 20s linear infinite;
}
.pp-ai__orb-ring--2 {
  inset: -25%;
  border-color: rgba(168,85,247,0.08);
  animation: orbSpin 30s linear infinite reverse;
}
.pp-ai__orb-ring--3 {
  inset: -42%;
  border-color: rgba(236,72,153,0.05);
  animation: orbSpin 40s linear infinite;
}

@keyframes orbPulse {
  0%   { transform: scale(1); box-shadow: 0 0 60px rgba(41,151,255,0.4), 0 0 120px rgba(168,85,247,0.2); }
  100% { transform: scale(1.08); box-shadow: 0 0 80px rgba(41,151,255,0.5), 0 0 160px rgba(168,85,247,0.3); }
}

@keyframes orbSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- Bento feature grid ---- */
.pp-ai__bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.pp-ai__card {
  background: rgba(29,29,31,0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pp-ai__card--wide {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  padding: 0;
  min-height: 250px;
}

.pp-ai__card--accent {
  background: linear-gradient(135deg, rgba(41,151,255,0.15) 0%, rgba(168,85,247,0.1) 100%);
  border-color: rgba(41,151,255,0.15);
}

.pp-ai__card-img {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 16/9;
}

.pp-ai__card-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pp-ai__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pp-ai__card-text {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pp-ai__card-num {
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--color-blue-3), var(--color-blue-1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pp-ai__card h3,
.pp-ai__card-text h3 {
  font-size: 24px;
  font-weight: 600;
  color: #f5f5f7;
  margin: 0 0 8px;
}

.pp-ai__card--wide .pp-ai__card-text h3 {
  font-size: 28px;
  margin-bottom: 14px;
}

.pp-ai__card p,
.pp-ai__card-text p {
  font-size: 15px;
  line-height: 1.53;
  color: #86868b;
  margin: 0;
}

/* ========================================
   CONNECTIVITY SECTION
   ======================================== */
.pp-connectivity {
  background: var(--pp-bg-surface);
  color: var(--pp-text-dark);
}

.pp-connectivity__intro {
  text-align: center;
  margin: 0 auto 60px;
}

.pp-connectivity__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.pp-conn-card {
  padding: 32px;
  background: var(--pp-bg-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  transition: all 0.3s var(--pp-transition);
  opacity: 0;
  transform: translateY(20px);
}

.pp-conn-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.pp-conn-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.2);
  box-shadow: var(--pp-shadow);
}

.pp-conn-card__icon {
  width: 60px;
  height: 60px;
  color: var(--color-blue-2);
  margin-bottom: 16px;
}

.pp-conn-card__icon svg{
  width: 2.5em;
  height: 2.5em;
}

.pp-conn-card h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--pp-text-dark);
}

.pp-conn-card p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--pp-text-muted);
}

/* ========================================
   COMPARE SECTION
   ======================================== */
.pp-compare {
  background: var(--pp-bg-light);
  color: var(--pp-text-dark);
}

.pp-compare__intro {
  text-align: center;
  margin: 0 auto 60px;
}

.pp-compare__table {
  margin: 0 auto;
  border-radius: var(--pp-radius);
  overflow: hidden;
  background: var(--pp-bg-card);
  border: 1px solid var(--pp-border);
}

.pp-compare__header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--pp-bg-surface);
  border-bottom: 1px solid var(--pp-border);
}

.pp-compare__col {
  padding: 24px 16px;
  text-align: center;
}

.pp-compare__col--product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pp-compare__col--product img {
  width: 80px;
  height: auto;
}

.pp-compare__col--product span {
  font-size: 15px;
  font-weight: 600;
}

.pp-compare__product-select {
  padding: 8px 16px;
  background: var(--pp-bg-surface);
  border: 1px solid var(--pp-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--pp-text);
  cursor: pointer;
}

.pp-compare__body {
  padding: 8px 0;
}

.pp-compare__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--pp-border);
}

.pp-compare__row:last-child {
  border-bottom: none;
}

.pp-compare__col--feature {
  font-size: 14px;
  font-weight: 500;
  color: var(--pp-text-dark);
  text-align: left;
  padding: 16px;
}

.pp-compare__col--value {
  font-size: 14px;
  color: var(--pp-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-compare__col--highlight {
  color: var(--pp-accent);
  font-weight: 600;
}

.pp-compare__no {
  color: rgba(255,255,255,0.2);
}

.pp-compare__upgrade-cta {
  text-align: center;
  margin-top: 40px;
}

.pp-compare__upgrade-cta p {
  font-size: 15px;
  color: var(--pp-text-muted);
  margin-bottom: 8px;
}

/* ========================================
   ACCESSORIES SECTION
   ======================================== */
.pp-accessories {
  background: var(--pp-bg-surface);
  color: var(--pp-text-dark);
}

.pp-accessories__intro {
  text-align: center;
  margin-bottom: 60px;
}

.pp-accessories__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.pp-accessory {
  background: var(--pp-bg-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  overflow: hidden;
  transition: all 0.3s var(--pp-transition);
  opacity: 0;
  transform: translateY(20px);
}

.pp-accessory.in-view {
  opacity: 1;
  transform: translateY(0);
}

.pp-accessory:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.2);
  box-shadow: var(--pp-shadow);
}

.pp-accessory__media {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.pp-accessory__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--pp-transition);
}

.pp-accessory:hover .pp-accessory__media img {
  transform: scale(1.05);
}

.pp-accessory__content {
  padding: 24px;
}

.pp-accessory__content h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}

.pp-accessory__content p {
  font-size: 14px;
  color: var(--pp-text-muted);
  margin-bottom: 8px;
}

.pp-accessory__price {
  font-size: 15px;
  font-weight: 600;
  color: var(--pp-text-dark);
}

.pp-accessories__cta {
  text-align: center;
  margin-top: 40px;
}

/* ========================================
   FINAL CTA SECTION
   ======================================== */
.pp-cta {
  background: var(--pp-bg);
  color: var(--pp-text);
  text-align: center;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-cta__price {
  font-size: clamp(21px, 3vw, 28px);
  color: var(--pp-text-muted);
  margin: 32px 0;
}

.pp-cta__price strong {
  color: var(--pp-text);
}

.pp-cta__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.pp-cta__benefits {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}

.pp-cta__benefits span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--pp-text-muted);
}

.pp-cta__benefits svg {
  color: var(--pp-gradient-end);
}

/* ========================================
   FOOTER
   ======================================== */
.pp-footer {
  background: var(--pp-bg);
  color: var(--pp-text);
  padding: 40px 24px;
  border-top: 1px solid var(--pp-border);
}

.pp-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.pp-footer__links {
  display: flex;
  gap: 24px;
}

.pp-footer__links a {
  font-size: 14px;
  color: var(--pp-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.pp-footer__links a:hover {
  color: var(--pp-text);
}

.pp-footer__copy {
  font-size: 12px;
  color: var(--pp-text-muted);
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes ppFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ppFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ppPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes ppScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
  .pp-nav__links {
    display: none;
  }

  .pp-ai__bento {
    grid-template-columns: 1fr;
  }

  .pp-ai__card--wide {
    grid-column: span 1;
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .pp-ai__card-img {
    border-radius: 24px 24px 0 0;
    max-height: 260px;
  }

  .pp-ai__card-text {
    padding: 28px 24px;
  }

  .pp-ai__orb-wrap {
    height: 160px;
    margin-bottom: 50px;
  }

  .pp-ai__orb {
    width: 130px;
    height: 130px;
  }
}

@media (max-width: 768px) {
  .pp-hero__media {
    position: relative;
    transform: none;
    left: auto;
    margin-top: 40px;
    max-width: 100%;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .pp-connectivity__cards {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .pp-conn-card {
    padding: 20px;
  }
  .pp-conn-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }
  
  .pp-conn-card__icon svg{
    width: 1.5em;
    height: 1.5em;
  }

  .pp-hero__scroll {
    display: none;
  }

  .pp-viewer__controls {
    gap: 8px;
  }

  .pp-viewer__btn {
    padding: 10px 16px;
  }

  .pp-viewer__btn-label {
    display: none;
  }

  .pp-compare__col--feature {
    font-size: 12px;
  }

  .pp-compare__col--value {
    font-size: 12px;
  }

  .pp-footer__inner {
    flex-direction: column;
    text-align: center;
  }
  
  .pp-os__gallery-track {
    gap: 24px;
    padding: 0px;
  }
}

@media (max-width: 480px) {
  .pp-hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .pp-btn {
    width: 100%;
    justify-content: center;
  }

  .pp-cta__actions {
    flex-direction: column;
  }

  .pp-cta__benefits {
    gap: 24px;
  }
}

/* ============================================
   TAKE A CLOSER LOOK - Apple Product Viewer
   Horizontal pill tabs with expandable content
   Fixed bottom controls with blur backdrop
   ============================================ */

/* Section Container */
.pp-viewer {
  --viewer-controls-bg: rgba(0, 0, 0, 0.7);
  --viewer-blur: 20px;
  position: relative;
  padding: 120px 0 200px;
  background: #000;
  color: #fff;
  min-height: 100vh;
  overflow: visible;
}

.pp-viewer__header {
  text-align: center;
  margin-bottom: 60px;
  padding: 0 24px;
}

.pp-viewer__title {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  color: #f5f5f7;
  line-height: 1.1;
  margin: 0 0 16px;
}

/* AR Link in Header */
.pp-viewer__ar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  color: #2997ff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.pp-viewer__ar-link:hover {
  color: #63b3ff;
  text-decoration: underline;
}

.pp-viewer__ar-icon {
  width: 20px;
  height: 20px;
}

/* Main Container */
.pp-viewer__container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Desktop: Controls left, Gallery right */
@media (min-width: 1024px) {
  .pp-viewer__container {
    /* flex-direction: row; */
    align-items: flex-start;
    gap: 40px;
    max-width: 1400px;
  }
}

/* ============================================
   Media Gallery (Centered)
   ============================================ */
.pp-viewer__gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 16/8;
  border-radius: 20px;
  overflow: hidden;
  background: #1d1d1f;
}

.pp-viewer__media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
              visibility 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.pp-viewer__media.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.pp-viewer__picture {
  position: relative;
  width: 100%;
  height: 100%;
}

.pp-viewer__picture img,
.pp-viewer__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pp-viewer__picture img:only-child,
.pp-viewer__img.active {
  opacity: 1;
}

.pp-viewer__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-viewer__fallback {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.pp-viewer__fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   Bottom Controls - Fixed Horizontal Pill Tabs
   Apple All-Access-Pass Style
   ============================================ */
.pp-viewer__controls {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: auto;
  max-width: calc(100vw - 48px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pp-viewer.in-view .pp-viewer__controls {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop: Controls on left side, vertical layout */
@media (min-width: 1024px) {
  .pp-viewer__controls {
    position: absolute;
    bottom: auto;
    left: auto;
    transform: none;
    flex-shrink: 0;
    width: auto;
    max-width: none;
    opacity: 1;
    pointer-events: auto;
    order: -1; /* Controls first (left side) */
  }

  .pp-viewer__gallery {
    flex: 1;
    /* max-width: 900px; */
  }
}

.pp-viewer__pills {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 12px 16px;
}

/* Desktop: Vertical pills */
@media (min-width: 1024px) {
  .pp-viewer__pills {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 40px;
    min-width: auto;
    border-radius: 0;
  }
}

/* Individual Pill */
.pp-viewer__pill {
  position: relative;
  flex: 0 0 auto;
}

.pp-viewer__pill-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--viewer-controls-bg);
  backdrop-filter: blur(var(--viewer-blur));
  -webkit-backdrop-filter: blur(var(--viewer-blur));
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--pp-text);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
}

.pp-viewer__pill-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.pp-viewer__pill.active .pp-viewer__pill-btn {
  background: rgb(0 0 0);
}

.pp-viewer__pill-btn:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 2px;
}

/* Pill Swatch (Color indicator) */
.pp-viewer__pill-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Pill Icon (+) */
.pp-viewer__pill-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.pp-viewer__pill.active .pp-viewer__pill-icon {
  transform: rotate(45deg);
  opacity: 1;
}

.pp-viewer__pill-label {
  font-size: 14px;
}

/* ============================================
   Pill Expanded Content (Popup above pill)
   ============================================ */
.pp-viewer__pill-content {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: max-content;
  max-width: 400px;
  min-width: 300px;
  background: var(--viewer-controls-bg);
  backdrop-filter: blur(var(--viewer-blur));
  -webkit-backdrop-filter: blur(var(--viewer-blur));
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  z-index: 110;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
              inset 0 0 0 0px rgba(255, 255, 255, 0.08);
}

.pp-viewer__pill.active .pp-viewer__pill-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Desktop: Pill content opens to the right */
@media (min-width: 1024px) {
  .pp-viewer__pill-content {
    position: absolute;
    bottom: auto;
    top: 0;
    left: calc(100% + 20px);
    transform: translateX(-10px) translateY(0);
  }

  .pp-viewer__pill.active .pp-viewer__pill-content {
    transform: translateX(0) translateY(0);
  }
}

.pp-viewer__pill-body {
  margin-bottom: 16px;
}

.pp-viewer__pill-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--pp-text);
  margin: 0;
}

.pp-viewer__pill-text strong {
  font-weight: 600;
}

/* Color Name Current */
.pp-viewer__color-current {
  font-weight: 600;
}

/* ============================================
   Color Navigation (Inside Colors Pill)
   ============================================ */
.pp-viewer__colornav {
  border: none;
  margin: 16px 0 0 0;
  padding: 0;
}

.pp-viewer__colornav-list {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pp-viewer__colornav-item {
  position: relative;
}

.pp-viewer__colornav-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pp-viewer__colornav-swatch {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.pp-viewer__colornav-swatch:hover {
  transform: scale(1.1);
}

.pp-viewer__colornav-item input:checked + .pp-viewer__colornav-swatch {
  border-color: var(--pp-accent);
}

.pp-viewer__colornav-item input:focus-visible + .pp-viewer__colornav-swatch {
  outline: 2px solid var(--pp-accent);
  outline-offset: 2px;
}

/* ============================================
   Pill Navigation (Prev/Next)
   ============================================ */
.pp-viewer__pill-nav {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pp-viewer__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--pp-text);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.pp-viewer__nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

.pp-viewer__nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pp-viewer__nav-btn:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 2px;
}

.pp-viewer__nav-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ============================================
   Visually Hidden (Accessibility)
   ============================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .pp-viewer__media {
    transition: opacity 0.1s ease, visibility 0.1s ease;
  }

  .pp-viewer__pill-content {
    transition: opacity 0.1s ease, visibility 0.1s ease;
  }

  .pp-viewer__pill-icon {
    transition: none;
  }
}

/* ============================================
   Responsive: Tablet
   ============================================ */
@media (max-width: 1024px) {
  .pp-viewer__gallery {
    max-width: 600px;
    aspect-ratio: 12/8;
  }

  .pp-viewer__pills {
    gap: 6px;
  }

  .pp-viewer__pill-btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  .pp-viewer__pill-content {
    max-width: 340px;
    min-width: 260px;
    padding: 16px;
  }
}

/* ============================================
   Responsive: Mobile
   ============================================ */
@media (max-width: 768px) {
  .pp-viewer {
    padding: 80px 0 180px;
    min-height: auto;
  }

  .pp-viewer__header {
    margin-bottom: 32px;
  }

  .pp-viewer__title {
    font-size: 32px;
  }

  .pp-viewer__gallery {
    border-radius: 16px;
    margin-bottom: 224px;
    aspect-ratio: 12 / 6;
  }

  .pp-viewer__controls {
    bottom: 24px;
    max-width: calc(100vw - 32px);
  }

  .pp-viewer__pills {
    padding: 10px 12px;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 24px;
  }

  .pp-viewer__pill-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .pp-viewer__pill-label {
    font-size: 12px;
  }

  .pp-viewer__pill-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    transform: translateX(0) translateY(100%);
    max-width: 100%;
    min-width: 100%;
    padding: 24px 20px;
  }

  .pp-viewer__pill.active .pp-viewer__pill-content {
    transform: translateX(0) translateY(0);
    bottom: 60px;
  }

  .pp-viewer__pill-text {
    font-size: 15px;
  }
}

/* ============================================
   Mobile: Small screens
   ============================================ */
@media (max-width: 480px) {
  .pp-viewer__pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  .pp-viewer__pills::-webkit-scrollbar {
    display: none;
  }

  .pp-viewer__pill {
    flex-shrink: 0;
  }
}

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS (GSAP Integration)
   ============================================ */

/* Base state for animated elements */
.pp-section:not(.in-view) .pp-title,
.pp-section:not(.in-view) .pp-subtitle,
.pp-section:not(.in-view) .pp-label {
  opacity: 0;
  transform: translateY(30px);
}

/* Stagger cards base state */
.pp-section:not(.in-view) .pp-feature,
.pp-section:not(.in-view) .pp-scanner__card,
.pp-section:not(.in-view) .pp-ai__card,
.pp-section:not(.in-view) .pp-conn-card,
.pp-section:not(.in-view) .pp-accessory {
  opacity: 0;
  transform: translateY(40px);
}

/* Active section indicator */
.pp-section.is-active {
  z-index: 1;
}

/* Hero scroll-past state */
.pp-hero.scrolled-past .pp-hero__content {
  pointer-events: none;
}

/* Highlights Gallery scroll container */
.pp-highlights-gallery__scroll {
  cursor: grab;
}

.pp-highlights-gallery__scroll.grabbing {
  cursor: grabbing;
}

/* Battery ring animation */
.pp-battery__progress {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Comparison table rows */
.pp-compare__row {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Section scroll progress CSS variable usage */
.pp-section {
  --scroll-progress: 0;
}

/* Hero parallax enhancement */
.pp-hero__media {
  will-change: transform;
}

.pp-hero__content {
  will-change: transform, opacity;
}

/* Image reveal states */
.pp-os__gallery img,
.pp-os__feature img {
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ============================================
   GSAP ScrollTrigger Markers (dev only)
   ============================================ */
.gsap-marker-start,
.gsap-marker-end,
.gsap-marker-scroller-start,
.gsap-marker-scroller-end {
  z-index: 9999;
}

/* ============================================
   Reduced Motion: Disable all scroll animations
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .pp-section:not(.in-view) .pp-title,
  .pp-section:not(.in-view) .pp-subtitle,
  .pp-section:not(.in-view) .pp-label,
  .pp-section:not(.in-view) .pp-feature,
  .pp-section:not(.in-view) .pp-scanner__card,
  .pp-section:not(.in-view) .pp-ai__card,
  .pp-section:not(.in-view) .pp-conn-card,
  .pp-section:not(.in-view) .pp-accessory {
    opacity: 1;
    transform: none;
  }

  .pp-highlight {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pp-battery__progress {
    transition: none;
  }

  .pp-hero__media,
  .pp-hero__content {
    will-change: auto;
  }
}

/* ============================================
   SKIP NAVIGATION LINK
   ============================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pp-accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  z-index: 10000;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 16px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Focus visible styles for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   MOBILE ACCESSIBILITY FIXES
   Touch targets, responsive widths, 600px breakpoint
   ============================================ */

/* Ensure minimum 44x44px touch targets for accessibility */
.pp-highlights-gallery__dot-link,
.pp-nav__cta,
.pp-btn,
.button,
.js-listing-3-prev,
.js-listing-3-next,
.pp-pill__btn,
.swiper-button-prev,
.swiper-button-next {
  min-width: 10px;
  min-height: 10px;
}

/* Dot navigation touch targets */
.pp-highlights-gallery__dot-link {
  padding: 5px;
}

/* 600px Breakpoint - Tablet Portrait / Large Mobile */
@media (max-width: 600px) {
  /* Pill popup fixes */
  .pp-pill-popup {
    max-width: calc(100vw - 32px);
    left: 16px;
    right: 16px;
    transform: translateX(0);
  }

  /* Gallery card width fixes */
  .pp-highlights-gallery__card,
  .pp-closer-look__card {
    min-width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    aspect-ratio: 16 / 16;
  }

  /* Navigation menu full width */
  .pp-nav__links {
    gap: 16px;
  }

  .pp-nav__inner {
    padding: 0 16px;
  }

  /* Hero text adjustments */
  .pp-hero__headline {
    font-size: clamp(48px, 12vw, 72px);
  }

  .pp-hero__tagline {
    font-size: clamp(16px, 4vw, 20px);
  }

  /* Section padding reduction */
  .pp-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Typography scaling */
  .pp-title {
    font-size: clamp(32px, 8vw, 48px);
  }

  .pp-subtitle {
    font-size: clamp(14px, 3.5vw, 17px);
  }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
  /* Even smaller touch targets need larger hit areas */
  .pp-highlights-gallery__dot-link {
    padding: 4px;
  }

  /* Ensure buttons are easily tappable */
  .button,
  .pp-btn {
    padding: 12px 20px;
  }

  /* Navigation arrow buttons */
  .js-listing-3-prev,
  .js-listing-3-next {
    padding: 12px;
  }

  /* Environment cards */
  .pp-env-card {
    padding: 24px 20px;
    min-height: 220px;
  }

  .pp-env-card__icon {
    width: 40px;
    height: 40px;
  }

  .pp-env-card__icon svg {
    width: 40px;
    height: 40px;
  }

  .pp-env-card__highlight {
    font-size: 21px;
  }

  .pp-env-card__text {
    font-size: 21px;
  }
}

/* ============================================
   VIDEO MODAL
   ============================================ */
.pp-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pp-video-modal.is-active {
  opacity: 1;
  visibility: visible;
}

.pp-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.pp-video-modal__container {
  position: relative;
  width: 90%;
  max-width: 1200px;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pp-video-modal.is-active .pp-video-modal__container {
  transform: scale(1);
}

.pp-video-modal__close {
  position: absolute;
  top: -50px;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pp-video-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.pp-video-modal__content {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.pp-video-modal__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .pp-video-modal__container {
    width: 95%;
  }

  .pp-video-modal__close {
    top: -45px;
    right: 5px;
    width: 40px;
    height: 40px;
  }

  .pp-video-modal__content {
    border-radius: 8px;
  }
}

/* ============================================
   COMPARE DESIGN MODAL - Apple Style
   ============================================ */
.pp-compare-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pp-compare-modal.is-active {
  opacity: 1;
  visibility: visible;
}

.pp-compare-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.pp-compare-modal__container {
  position: relative;
  width: 95%;
  max-width: 1100px;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pp-compare-modal.is-active .pp-compare-modal__container {
  transform: scale(1) translateY(0);
}

.pp-compare-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pp-compare-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.pp-compare-modal__content {
  background: #1d1d1f;
  border-radius: 24px;
  padding: 48px 0;
  color: #f5f5f7;
  overflow: hidden;
}

/* Modal Header */
.pp-compare-modal__header {
  text-align: center;
  padding: 0 48px 32px;
}

.pp-compare-modal__title {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Tab Navigation */
.pp-compare-tabnav {
  display: flex;
  justify-content: center;
  padding: 48px 24px 0;
}

.pp-compare-tabnav__platter {
  position: relative;
  display: inline-flex;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  padding: 4px;
  width: 100%;
}

.pp-compare-tabnav__items {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.pp-compare-tabnav__item {
  position: relative;
}

.pp-compare-tabnav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.pp-compare-tabnav__item.active .pp-compare-tabnav__link {
  color: #fff;
}

.pp-compare-tabnav__link:hover {
  color: #fff;
}

.pp-compare-tabnav__icon {
  display: flex;
  width: 20px;
  height: 20px;
}

.pp-compare-tabnav__icon svg {
  width: 100%;
  height: 100%;
}

.pp-compare-tabnav__indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  margin-left: 4px;
  height: calc(100% - 8px);
  background: rgba(255, 255, 255, 0.15);
  border-radius: 980px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
}

/* Gallery */
.pp-compare-gallery {
  position: relative;
  padding: 0 48px;
}

.pp-compare-gallery__names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  justify-content: center;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgb(255 255 255 / 3%);
  margin-bottom: 16px;
}

.pp-compare-gallery__name {
  font-size: 21px;
  font-weight: 700;
  margin: 0;
  text-align: center;
}

.pp-compare-gallery__name--featured {
  color: #0071e3;
}

.pp-compare-gallery__current {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #86868b;
  margin-top: 0;
}

.pp-compare-gallery__scroll {
  overflow: hidden;
}

.pp-compare-gallery__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pp-compare-gallery__slide {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  animation: fadeIn 0.4s ease;
}

.pp-compare-gallery__slide.current {
  display: grid;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Compare Cards */
.pp-compare-card {
  background: #2c2c2e;
  border-radius: 18px;
  padding: 24px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pp-compare-card__image {
  width: 100%;
  max-height: 200px;
  height: auto;
  margin-bottom: 20px;
  object-fit: cover;
  border-radius: 16px;
}

.pp-compare-card__copy {
  width: 100%;
}

.pp-compare-card__headline {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 12px;
  color: white;
}

.pp-compare-card__callout {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #0071e3 0%, #00c7be 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pp-compare-card__feature {
  font-size: 14px;
  color: #86868b;
  line-height: 1.5;
  margin: 0;
}

/* Paddle Navigation */
.pp-compare-gallery__paddlenav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pp-compare-gallery__paddle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.pp-compare-gallery__paddle:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

.pp-compare-gallery__paddle:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pp-compare-gallery__paddle svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .pp-compare-modal__content {
    padding: 32px 0;
  }

  .pp-compare-modal__header {
    padding: 0 24px 24px;
  }

  .pp-compare-modal__title {
    font-size: 28px;
  }

  .pp-compare-tabnav {
    padding: 32px 24px 0;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .pp-compare-tabnav__link {
    padding: 6px 12px;
    font-size: 10px;
  }

  .pp-compare-tabnav__label {
    display: block;
  }

  .pp-compare-gallery {
    padding: 0 24px;
  }

  .pp-compare-gallery__names {
    gap: 12px;
  }

  .pp-compare-gallery__name {
    font-size: 14px;
  }

  .pp-compare-gallery__slide {
    gap: 12px;
  }

  .pp-compare-card {
    padding: 16px;
    min-height: 220px;
  }

  .pp-compare-card__image {
    max-width: 120px;
  }

  .pp-compare-card__headline {
    font-size: 14px;
  }

  .pp-compare-card__callout {
    font-size: 32px;
  }

  .pp-compare-card__feature {
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .pp-compare-gallery__names {
    gap: 10px;
  }

  .pp-compare-gallery__name {
    border-left: 0px solid transparent;
  }

  .pp-compare-gallery__name--featured {
    border-left-color: #0071e3;
  }

  .pp-compare-gallery__slide {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pp-compare-card {
    min-height: auto;
    padding: 20px;
  }
}

/* ============================================
   CONWO PLATFORM PAGE STYLES
   Apple-inspired design for software product
   ============================================ */

/* CSS Variables */
.cw {
    --cw-bg: #000;
    --cw-text: #f5f5f7;
    --cw-accent: #00c7be;
    --cw-accent-2: #0071e3;
    --cw-muted: #86868b;
    --cw-surface: #1d1d1f;
    --cw-surface-2: #2c2c2e;
    --cw-gradient: linear-gradient(135deg, #00c7be 0%, #0071e3 100%);
    --cw-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   HERO SECTION
   ============================================ */
.cw-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 120px 24px 80px;
    overflow: hidden;
    background: var(--cw-bg);
}

.cw-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.cw-hero__gradient {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 199, 190, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.cw-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.cw-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin-bottom: 60px;
}

.cw-hero__eyebrow {
    display: inline-block;
    font-size: 17px;
    font-weight: 500;
    color: var(--cw-accent);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cw-hero__title {
    font-size: clamp(64px, 12vw, 120px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0 0 24px;
    background: var(--cw-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cw-hero__subtitle {
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 600;
    color: var(--cw-text);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.cw-hero__description {
    font-size: 19px;
    color: var(--cw-muted);
    line-height: 1.5;
    margin: 0 0 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cw-hero__cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.cw-hero__visual {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.cw-hero__dashboard {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.1),
        0 40px 80px rgba(0,0,0,0.5),
        0 0 100px rgba(0, 199, 190, 0.2);
}

.cw-hero__dashboard-img {
    width: 100%;
    height: auto;
    display: block;
}

.cw-hero__scroll-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--cw-muted);
    font-size: 14px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

/* ============================================
   BUTTONS
   ============================================ */
.cw-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 980px;
    transition: all 0.3s var(--cw-transition);
    cursor: pointer;
    border: none;
}

.cw-btn--primary {
    background: var(--cw-accent-2);
    color: #fff;
}

.cw-btn--primary:hover {
    background: #0077ed;
    transform: scale(1.02);
}

.cw-btn--secondary {
    background: rgba(255,255,255,0.1);
    color: var(--cw-text);
    backdrop-filter: blur(10px);
}

.cw-btn--secondary:hover {
    background: rgba(255,255,255,0.15);
}

.cw-btn--large {
    padding: 18px 36px;
    font-size: 19px;
}

.cw-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cw-accent-2);
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    transition: gap 0.3s var(--cw-transition);
}

.cw-link:hover {
    gap: 12px;
}

/* ============================================
   STATS MARQUEE
   ============================================ */
.cw-stats {
    background: var(--cw-surface);
    padding: 24px 0;
    overflow: hidden;
}

.cw-stats__marquee {
    position: relative;
    width: 100%;
}

.cw-stats__track {
    display: flex;
    gap: 80px;
    animation: marquee 30s linear infinite;
    width: max-content;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.cw-stats__item {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
}

.cw-stats__number {
    font-size: 32px;
    font-weight: 700;
    background: var(--cw-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cw-stats__label {
    font-size: 15px;
    color: var(--cw-muted);
}

/* ============================================
   SECTIONS
   ============================================ */
.cw-section {
    padding: 120px 0;
    background: var(--cw-bg);
    color: var(--cw-text);
}

.cw-section__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.cw-section__header--left {
    text-align: left;
    margin: 0 0 40px;
}

.cw-section__eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--cw-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.cw-section__title {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 20px;
}

.cw-section__subtitle {
    font-size: 19px;
    color: var(--cw-muted);
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   BENTO GRID (Modules)
   ============================================ */
.cw-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 20px;
}

.cw-bento__card {
    background: var(--cw-surface);
    border-radius: 24px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--cw-transition), box-shadow 0.3s var(--cw-transition);
}

.cw-bento__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 199, 190, 0.15);
}

.cw-bento__card--large {
    grid-column: span 2;
    grid-row: span 2;
}

.cw-bento__icon {
    margin-bottom: 20px;
}

.cw-bento__title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 12px;
}

.cw-bento__description {
    font-size: 15px;
    color: var(--cw-muted);
    line-height: 1.5;
    margin: 0 0 20px;
}

.cw-bento__visual {
    margin: 20px -32px;
    overflow: hidden;
}

.cw-bento__visual img {
    width: 100%;
    height: auto;
    display: block;
}

.cw-bento__features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cw-bento__features li {
    font-size: 14px;
    color: var(--cw-muted);
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
}

.cw-bento__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cw-accent);
}

/* ============================================
   DASHBOARD SHOWCASE
   ============================================ */
.cw-dashboard__showcase {
    position: relative;
}

.cw-dashboard__frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}

.cw-dashboard__screen {
    position: relative;
    z-index: 1;
}

.cw-dashboard__screen img {
    width: 100%;
    height: auto;
    display: block;
}

.cw-dashboard__glow {
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 199, 190, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.cw-dashboard__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 60px;
}

.cw-dashboard__feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.cw-dashboard__feature-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cw-surface);
    border-radius: 12px;
    color: var(--cw-accent);
}

.cw-dashboard__feature-text h4 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 4px;
}

.cw-dashboard__feature-text p {
    font-size: 14px;
    color: var(--cw-muted);
    margin: 0;
}

/* ============================================
   SAFETY SECTION
   ============================================ */
.cw-safety__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cw-safety__card {
    background: var(--cw-surface);
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    transition: transform 0.3s var(--cw-transition);
}

.cw-safety__card:hover {
    transform: translateY(-4px);
}

.cw-safety__icon {
    margin-bottom: 20px;
}

.cw-safety__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px;
}

.cw-safety__description {
    font-size: 14px;
    color: var(--cw-muted);
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   INTEGRATIONS
   ============================================ */
.cw-integrations__visual {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1;
    margin: 0 auto 60px;
}

.cw-integrations__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cw-surface);
    border-radius: 50%;
    z-index: 2;
}

.cw-integrations__logo img {
    width: 60px;
    height: 60px;
}

.cw-integrations__pulse {
    position: absolute;
    inset: -20px;
    border: 2px solid var(--cw-accent);
    border-radius: 50%;
    opacity: 0.3;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.1; }
    100% { transform: scale(1); opacity: 0.3; }
}

.cw-integrations__orbit {
    position: absolute;
    inset: 0;
}

.cw-integrations__item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cw-surface-2);
    border-radius: 16px;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(200px) rotate(calc(-1 * var(--angle)));
    transition: transform 0.3s var(--cw-transition);
}

.cw-integrations__item img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.cw-integrations__item:hover {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(200px) rotate(calc(-1 * var(--angle))) scale(1.1);
}

.cw-integrations__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    text-align: center;
}

.cw-integrations__feature h4 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
}

.cw-integrations__feature p {
    font-size: 15px;
    color: var(--cw-muted);
    margin: 0;
}

/* ============================================
   DEVICE SYNC
   ============================================ */
.cw-sync {
    background: var(--cw-surface);
}

.cw-sync .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.cw-sync__features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.cw-sync__feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    color: var(--cw-muted);
}

.cw-sync__feature svg {
    color: var(--cw-accent);
    flex-shrink: 0;
}

.cw-sync__visual {
    position: relative;
}

.cw-sync__visual img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

/* ============================================
   RESULTS SECTION
   ============================================ */
.cw-results__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

.cw-results__card {
    background: var(--cw-surface);
    border-radius: 24px;
    padding: 32px;
    text-align: center;
    transition: transform 0.3s var(--cw-transition);
}

.cw-results__card:hover {
    transform: translateY(-4px);
}

.cw-results__logo {
    height: 32px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cw-results__logo img {
    height: 100%;
    width: auto;
    opacity: 0.7;
    filter: grayscale(1) brightness(2);
}

.cw-results__metric {
    margin-bottom: 12px;
}

.cw-results__number {
    font-size: 64px;
    font-weight: 700;
    background: var(--cw-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.cw-results__unit {
    font-size: 24px;
    font-weight: 600;
    color: var(--cw-accent);
}

.cw-results__label {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
}

.cw-results__detail {
    font-size: 14px;
    color: var(--cw-muted);
    margin: 0;
}

.cw-results__cta {
    text-align: center;
}

/* ============================================
   CTA SECTION
   ============================================ */
.cw-cta {
    position: relative;
    padding: 160px 0;
    overflow: hidden;
}

.cw-cta__bg {
    position: absolute;
    inset: 0;
}

.cw-cta__gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 50%, rgba(0, 199, 190, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(0, 113, 227, 0.2) 0%, transparent 50%);
}

.cw-cta__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cw-cta__title {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 20px;
}

.cw-cta__subtitle {
    font-size: 19px;
    color: var(--cw-muted);
    line-height: 1.5;
    margin: 0 0 40px;
}

.cw-cta__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.cw-cta__note {
    font-size: 14px;
    color: var(--cw-muted);
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .cw-bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .cw-bento__card--large {
        grid-column: span 2;
        grid-row: span 1;
    }

    .cw-results__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .cw-section {
        padding: 80px 0;
    }

    .cw-sync .container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cw-sync__visual {
        order: -1;
    }

    .cw-dashboard__features {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cw-safety__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cw-integrations__features {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cw-integrations__item {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(140px) rotate(calc(-1 * var(--angle)));
    }
}

@media (max-width: 767px) {
    .cw-hero {
        padding: 100px 16px 60px;
    }

    .cw-hero__description {
        font-size: 17px;
    }

    .cw-hero__cta {
        flex-direction: column;
        align-items: center;
    }

    .cw-section__header {
        margin-bottom: 48px;
    }

    .cw-bento {
        grid-template-columns: 1fr;
    }

    .cw-bento__card--large {
        grid-column: span 1;
    }

    .cw-safety__grid {
        grid-template-columns: 1fr;
    }

    .cw-results__grid {
        grid-template-columns: 1fr;
    }

    .cw-results__number {
        font-size: 48px;
    }

    .cw-integrations__visual {
        max-width: 300px;
    }

    .cw-integrations__item {
        width: 48px;
        height: 48px;
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(100px) rotate(calc(-1 * var(--angle)));
    }

    .cw-integrations__item img {
        width: 24px;
        height: 24px;
    }

    .cw-cta {
        padding: 100px 0;
    }

    .cw-cta__actions {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .cw-stats__number {
        font-size: 24px;
    }

    .cw-stats__label {
        font-size: 13px;
    }

    .cw-bento__card {
        padding: 24px;
    }

    .cw-bento__visual {
        margin: 16px -24px;
    }
}