/* Automation metrics section spacing */
.page-index7 .automation-section-v2{padding:40px 0 80px}
/* ----- Pricing Showcase ----- */
.price-showcase-section{background:#ffffff;padding:120px 0}
.price-showcase-container{max-width:1100px;margin:0 auto;padding:0 24px}
.price-hero-card{background:#0b0b0b;color:#fff;border-radius:6px;padding:20px 24px;box-shadow:0 12px 40px rgba(0,0,0,.15)}
.price-eyebrow{color:#9ca3af;font-size:12px;margin:0 0 8px 0}
.price-plan-name{font-size:40px;line-height:1.1;margin:0 0 8px 0}
.price-row{display:flex;align-items:flex-end;gap:6px;margin:0 0 14px 0}
.price-amount{font-size:36px;font-weight:700}
.price-per{color:#9ca3af}
.price-desc{color:#cbd5e1;margin:0 0 18px 0}
.price-btn-light{background:#fff;color:#111;border:0;border-radius:999px;padding:12px 18px;font-weight:600}

.price-lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
/* Half-height for bottom row */
.price-lower-grid > *{height:180px}
.price-photo-card{background:#fff;border-radius:2px;overflow:hidden}
.price-photo{width:100%;height:100%;object-fit:cover;display:block}
.price-quote-card{background:linear-gradient(135deg,#1f2937,#6b21a8);border-radius:2px;color:#fff;padding:16px;display:flex;flex-direction:column;justify-content:flex-end}
.price-quote{font-size:18px;line-height:1.6;margin:0 0 12px 0}
.price-quote-author{margin:0;color:#d1d5db}

@media (max-width: 900px){
  .price-lower-grid{grid-template-columns:1fr}
}
/* ----- Start With a Finished Product ----- */
.start-finished-section{background:#f5f5f4;padding:120px 0}
.start-finished-container{max-width:1200px;margin:0 auto;padding:0 32px}
.start-finished-header{text-align:center;margin-bottom:40px}
.start-finished-title{font-size:56px;line-height:1.05;font-weight:700;margin:0 0 12px 0;color:#0b0b0b}
.start-finished-subtitle{color:#6b7280;font-size:18px;margin:0}

.start-finished-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:20px;align-items:stretch}

/* Feature Card */
.sf-feature-card{background:#ffffff;border-radius:12px;padding:28px 28px 28px 28px;display:flex;flex-direction:column;justify-content:space-between}
.sf-eyebrow{font-size:14px;color:#6b7280;margin:0 0 12px 0}
.sf-card-title{font-size:26px;line-height:1.25;margin:0 0 20px 0;color:#0b0b0b;font-weight:600}
.sf-muted{color:#9ca3af;font-weight:400}
.sf-btn-primary{align-self:flex-start;background:#0b0b0b;color:#fff;border:0;border-radius:999px;padding:12px 18px;font-weight:600}

/* Image Card */
.sf-image-card{background:#ffffff;border-radius:12px;overflow:hidden;display:flex;position:relative}
.sf-image{width:100%;height:100%;object-fit:cover;display:block}

/* Overlay UI card */
.sf-overlay-card{position:absolute;inset:auto 12% 12% 12%;background:#ffffff;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.25);padding:16px;display:flex;flex-direction:column;gap:12px}
.sf-ov-header{display:flex;justify-content:space-between;align-items:center}
.sf-ov-title{font-weight:600;color:#0b0b0b}
.sf-ov-actions{display:flex;gap:6px}
.sf-ov-dot{width:8px;height:8px;border-radius:50%;background:#e5e7eb;display:inline-block}
.sf-ov-body{display:flex;flex-direction:column;gap:12px}
.sf-ov-row{font-weight:600;color:#111}
.sf-ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sf-ov-field label{display:block;color:#6b7280;font-size:12px;margin-bottom:4px}
.sf-ov-chip{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;padding:6px 8px;color:#111;font-size:12px}

/* Plan Card */
.sf-plan-card-wrap{display:flex;flex-direction:column;gap:16px}
.sf-plan-card{background:#e9e9e7;border-radius:12px;padding:24px}
.sf-plan-name{margin:0 0 8px 0;font-size:14px;color:#111}
.sf-price-row{display:flex;align-items:flex-end;gap:6px;margin:6px 0 8px 0}
.sf-price{font-size:32px;font-weight:700;color:#0b0b0b}
.sf-per{color:#6b7280}
.sf-renew{color:#6b7280;font-size:14px;margin:0 0 14px 0}
.sf-plan-actions{display:flex;gap:10px}
.sf-btn-dark{background:#0b0b0b;color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:600}
.sf-btn-light{background:#fff;color:#111;border:1px solid #d1d5db;border-radius:8px;padding:10px 16px;font-weight:600}

.sf-note{background:#ffffff;border-radius:12px;padding:20px}
.sf-note-title{margin:0 0 8px 0;font-weight:700}
.sf-note-text{margin:0;color:#6b7280;line-height:1.6}

@media (max-width: 1024px){
  .start-finished-title{font-size:44px}
  .start-finished-grid{grid-template-columns:1fr;}
}
/* ----- Scoped Section: index7 Values Grid ----- */
.page-index7 .values-section{background:#fff;padding:60px 0 40px}
.page-index7 .values-container{max-width:1320px;margin:0 auto;padding:0 24px}
.page-index7 .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.page-index7 .value-card,.page-index7 .value-image-card,.page-index7 .value-cta-card{background:#0b0b0b;border-radius:4px;height:458px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 32px;position:relative}
.page-index7 .value-card{justify-content:flex-start}
.page-index7 .value-image-card{padding:0;overflow:hidden}
.page-index7 .value-image{width:100%;height:100%;object-fit:cover;display:block}

.page-index7 .value-num{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:48px;color:rgba(255,255,255,.25);font-weight:300;letter-spacing:.02em}
.page-index7 .value-title{font-size:36px;line-height:1.1;margin:0 0 10px 0;font-weight:700}
.page-index7 .value-card .value-title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;text-align:center;width:calc(100% - 64px);z-index:1}
.page-index7 .value-desc{color:#9ca3af;line-height:1.7;margin:0;max-width:460px;font-weight:300}
.page-index7 .value-card .value-desc{margin-top:auto}
.page-index7 .value-desc strong{color:#ffffff}

.page-index7 .value-cta-card{background:#111;position:relative}
.page-index7 .value-cta-title{font-size:28px;margin:0 0 16px 0}
.page-index7 .value-cta-btn{background:#fff;color:#111;border:0;border-radius:999px;padding:12px 18px;font-weight:600}

@media (max-width: 960px){
  .page-index7 .values-grid{grid-template-columns:1fr;}
  .page-index7 .value-card,.page-index7 .value-image-card,.page-index7 .value-cta-card{min-height:405px}
}
/* ----- Scoped Section: index7 Photo Hero ----- */
.page-index7 .photo-hero-section{background:#ffffff;padding:60px 0}
.page-index7 .photo-hero-container{max-width:1200px;margin:0 auto;padding:0 24px}
.page-index7 .photo-hero-frame{border-radius:6px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.18);height:420px}
.page-index7 .photo-hero-image{width:100%;height:100%;object-fit:cover;display:block}
/* ----- Scoped Section: index7 Insight Hero ----- */
.page-index7 .insight-hero-section{background:#ffffff;padding:120px 0 60px}
.page-index7 .insight-hero-container{max-width:820px;margin:0 auto;padding:0 24px}
.page-index7 .insight-meta{display:flex;gap:12px;color:#6b7280;font-size:14px;margin-bottom:16px}
.page-index7 .insight-badge{font-weight:600}
.page-index7 .insight-title{font-size:36px;line-height:1.12;letter-spacing:-0.01em;font-weight:300;color:#0b0b0b;margin:0 0 14px 0}
.page-index7 .insight-author{display:flex;align-items:center;gap:10px;margin:12px 0 20px 0}
.page-index7 .insight-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.page-index7 .insight-author-name{color:#111827;font-weight:600}
.page-index7 .insight-excerpt{color:#0b0b0b;line-height:1.75;margin:0;font-weight:300}
.page-index7 .insight-excerpt + .insight-excerpt{margin-top:16px}
/* ----- Scoped Section: index7 What's Included ----- */
.page-index7 .included-section{background:#ffffff;padding:120px 0}
.page-index7 .included-container{max-width:820px;margin:0 auto;padding:0 24px;color:#0b0b0b}
.page-index7 .included-intro p{color:#6b7280;line-height:1.75;margin:0 0 16px 0}
.page-index7 .included-title{font-size:22px;font-weight:700;margin:28px 0 12px 0}
.page-index7 .included-subcopy{color:#6b7280;line-height:1.75;margin:0 0 16px 0}
.page-index7 .included-list{list-style:none;padding:0;margin:16px 0 0 0;display:grid;gap:14px}
.page-index7 .included-list li{color:#6b7280;line-height:1.75}
.page-index7 .included-list strong{color:#111827}
/* ----- Scoped Section: index7 Tech Stack ----- */
.page-index7 .tech-stack-section{background:#000;padding:120px 0}
.page-index7 .tech-stack-container{max-width:1120px;margin:0 auto;padding:0 24px}
.page-index7 .tech-stack-header{margin-bottom:40px}
.page-index7 .tech-stack-subtitle{font-size:14px;color:#9ca3af;margin:0 0 12px 0}
.page-index7 .tech-stack-title{margin:0;color:#fff;font-size:45px;line-height:1.12;font-weight:300;letter-spacing:-0.01em}
.page-index7 .title-highlight{color:#fff;font-weight:700}
.page-index7 .title-secondary{color:#9ca3af;font-weight:300;font-size:45px;letter-spacing:-0.015em}
.page-index7 .tech-stack-content{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.page-index7 .tech-stack-left,.page-index7 .tech-stack-right{border-radius:12px;overflow:hidden;border:1px solid #232323;min-height:520px;background:#0f0f10}
.page-index7 .tech-stack-code-image,.page-index7 .tech-stack-dev-image{width:100%;height:100%;object-fit:cover;display:block}
.page-index7 .tech-stack-story{position:relative;height:100%}
.page-index7 .story-content{position:absolute;top:0;left:0;right:0;padding:24px 24px 0 24px;background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,0) 38%)}
.page-index7 .story-title{color:#fff;font-size:24px;margin:6px 0 4px 0}
.page-index7 .story-subtitle{color:#cbd5e1;font-size:16px;margin:0 0 16px 0}
.page-index7 .story-cta{display:flex;align-items:center;gap:12px}
.page-index7 .play-circle{width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:#000}
.page-index7 .watch-label{color:#fff;font-weight:600}

/* ----- Scoped Section: index7 Design Figma (black theme) ----- */
.page-index7 .design-figma-section{background:#0b0b0b;padding:120px 0}
.page-index7 .design-figma-container{max-width:1200px;margin:0 auto;padding:0 32px}
.page-index7 .design-figma-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}

.page-index7 .design-left{color:#fff}
.page-index7 .design-eyebrow{color:#9ca3af;font-size:14px;margin:0 0 16px 0}
.page-index7 .design-title{font-size:36px;line-height:1.15;letter-spacing:-0.01em;font-weight:300;margin:0 0 20px 0;color:#fff}

.page-index7 .design-cta-row{margin:0 0 28px 0}
.page-index7 .btn-request-access{background:#111;border:1px solid #2a2a2a;color:#fff;padding:14px 22px;border-radius:999px;font-weight:600}

.page-index7 .design-copy p{color:#cbd5e1;line-height:1.7;margin:0 0 14px 0}
.page-index7 .design-copy strong{color:#ffffff}
.page-index7 .btn-figma-outline{background:transparent;border:1px solid #6b7280;color:#e5e7eb;padding:10px 18px;border-radius:999px;transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease}
.page-index7 .btn-figma-outline:hover{background:#e5e7eb;color:#111;transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,255,255,.12)}

.page-index7 .design-right{display:flex;justify-content:center}
.page-index7 .design-visual-frame{background:#111;border-radius:16px;overflow:hidden;box-shadow:0 15px 40px rgba(0,0,0,.5);border:12px solid #000}
.page-index7 .design-visual-image{width:680px;height:420px;object-fit:cover;display:block}

@media (max-width: 960px){
  .page-index7 .design-figma-grid{grid-template-columns:1fr}
  .page-index7 .design-title{font-size:32px}
  .page-index7 .design-visual-image{width:100%;height:auto}
}
/* Customers Love - Tabs Section */
.customers-love-tabs-section {
    background: #ffffff;
    padding: 80px 0;
}

.customers-love-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.customers-love-title {
    font-size: 36px;
    font-weight: 700;
    color: #000;
    text-align: center;
    line-height: 1.2;
    margin: 0 0 24px 0;
}

.customers-love-title .muted {
    font-weight: 500;
    color: #6b7280;
}

.customers-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.tab-button {
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    font-weight: 600;
    cursor: pointer;
}

.tab-button.active {
    background: #111827;
    color: #ffffff;
}

.tab-panels {
    background: #f6f5f2;
    border-radius: 16px;
    padding: 32px;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.tab-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
}

.tab-card-visual img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 8px;
}

.tab-card-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.tab-card-content p {
    margin: 0 0 18px 0;
    color: #4b5563;
}

@media (max-width: 768px) {
    .customers-love-tabs-section { padding: 60px 0; }
    .customers-love-title { font-size: 28px; }
    .tab-card { grid-template-columns: 1fr; }
    .tab-card-visual img { height: 220px; }
}

/* White divider between horizontal sections */
.section-divider-white {
    width: 100%;
    height: 64px;
    background: #ffffff;
}

@media (max-width: 768px) {
    .section-divider-white {
        height: 48px;
    }
}

/* Reset y base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
}

/* Header/Navigation */
.header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
}

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

/* Logo */
.nav-left {
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.logo a,
.logo-v2 {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.logo a:hover,
.logo-v2:hover {
    opacity: 0.8;
}

.logo-icon {
    width: 6rem;
    height: auto;
}

.logo-text {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

/* Navigation menu */
.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 32px;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #374151;
}

.dropdown-arrow {
    font-size: 10px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

/* Dropdown Menu */
.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    padding: 8px 0;
    margin-top: 8px;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-item {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 12px 20px;
    transition: background-color 0.2s ease;
    border-radius: 4px;
    margin: 0 8px;
}

.dropdown-item:hover {
    background-color: #f9fafb;
    text-decoration: none;
}

.dropdown-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-title {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.2;
}

.dropdown-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.3;
}

/* Navigation right */
.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-icon {
    width: 40px;
    height: 40px;
    color: #6b7280;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-icon i {
    font-size: 16px;
}

.search-icon:hover {
    background-color: #f3f4f6;
}

.btn-templates {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border-radius: 3rem;
}

.btn-templates:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.btn-buy {
    background: #000;
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-buy:hover {
    background: #1f2937;
}

/* Banner */
.banner {
    background: #f6f4f1;
    border-bottom: 1px solid #f0f0f0;
    padding: 8px 0;
    text-align: center;
    overflow: hidden;
    position: relative;
    width: 40%;
    border-radius: 3rem;       
margin: auto;
margin-top: 2rem;
/* height: 2rem; */

}

.banner::before,
.banner::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    pointer-events: none;
    z-index: 2;
}

.banner::before {
    left: 0;
    background: linear-gradient(to right, #fefdf8, transparent);
}

.banner::after {
    right: 0;
    background: linear-gradient(to left, #fefdf8, transparent);
}

.banner-scroll {
    width: 100%;
    overflow: hidden;
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    animation: scroll-banner 30s linear infinite;
}

.banner-spacing {
    margin: 0 60px;
}

.banner-text {
    font-size: 56px;
    font-weight: 500;
    line-height: 1.1em;
    letter-spacing: -0.02em;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.banner-link {
    color: #6b7280;
    text-decoration: underline;
    font-weight: 500;
}

.banner-emoji {
    font-size: 16px;
}

.banner-extra {
    white-space: nowrap;
    margin-left: 100px;
}

@keyframes scroll-banner {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Main content */
.main {
    flex: 1;
}

/* Hero section */
.hero {
    height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    padding: 0 24px;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-welcome {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
    font-weight: 500;
}

.hero-title {
    font-size: 64px;
    font-weight: 500;
    line-height: 1.1;
    color: #111827;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.hero-description {
    font-size: 20px;
    color: #6b7280;
    margin-bottom: 48px;
    line-height: 1.6;
    font-weight: 400;
}

.btn-get-started {
    background: #000;
    color: white;
    border: none;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 48px;
}

.btn-get-started:hover {
    background: #1f2937;
    transform: translateY(-2px);
}

/* Rating */
.hero-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    color: #6b7280;
}

.rating-platform {
    font-weight: 600;
    color: #374151;
}

.rating-stars {
    display: flex;
    gap: 2px;
}

.star {
    color: #fbbf24;
    font-size: 16px;
}

.rating-text {
    font-weight: 500;
}

/* Responsive design */
@media (max-width: 768px) {
    .nav {
        padding: 12px 16px;
        flex-wrap: wrap;
    }
    
    .nav-center {
        order: 3;
        width: 100%;
        margin-top: 12px;
    }
    
    .nav-menu {
        gap: 16px;
        font-size: 14px;
    }

    .dropdown-menu {
        position: fixed;
        top: 60px;
        left: 20px;
        right: 20px;
        min-width: auto;
        max-height: 400px;
        overflow-y: auto;
    }

    .dropdown-item {
        padding: 16px 20px;
        border-bottom: 1px solid #f3f4f6;
    }

    .dropdown-item:last-child {
        border-bottom: none;
    }

    .dropdown-title {
        font-size: 16px;
    }

    .dropdown-subtitle {
        font-size: 14px;
    }
    
    .hero {
        height: 100vh;
        padding: 0 16px;
    }
    
    .hero-title {
        font-size: 48px;
    }
    
    .hero-description {
        font-size: 18px;
    }
    
    .banner-content {
        font-size: 13px;
    }
}

/* Features Section */
.features-section {
    padding: 80px 24px;
    background: #ffffff;
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* Woman Image */
.feature-image {
    border-radius: 16px;
    overflow: hidden;
    height: 460px;
}

.woman-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Dashboard Card */
.dashboard-card {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 30%, #8e44ad 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
    border-radius: 16px;
    padding: 20px;
    height: 460px;
    display: flex;
    flex-direction: column;
}

/* Global animated gradient keyframe */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.dashboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.dashboard-icon {
    font-size: 20px;
    color: white;
}

.dashboard-title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.dashboard-content {
    background: white;
    border-radius: 12px;
    padding: 20px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dashboard-image {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    image-rendering: -webkit-optimize-contrast;
}

.dashboard-nav {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hamburger {
    font-size: 16px;
    color: #6b7280;
}

.nav-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    flex: 1;
    text-align: center;
}

.nav-icons {
    display: flex;
    gap: 12px;
}

.chat-icon, .bell-icon {
    font-size: 16px;
    color: #6b7280;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.breadcrumb-item {
    color: #9ca3af;
}

.breadcrumb-arrow {
    color: #9ca3af;
}

.breadcrumb-current {
    color: #374151;
    font-weight: 500;
}

.assistant-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.assistant-icon {
    font-size: 20px;
}

.assistant-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.status-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.status-row, .progress-row, .dates-row, .manager-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.status-badge {
    background: #d1fae5;
    color: #059669;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-text {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.progress-bar {
    width: 80px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    width: 80%;
    height: 100%;
    background: #06b6d4;
    border-radius: 3px;
}

.dates-text {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

.manager-avatar {
    width: 24px;
    height: 24px;
    background: linear-gradient(45deg, #f59e0b, #ef4444);
    border-radius: 50%;
}

/* Testimonial Card */
.testimonial-card {
    background: #111827;
    border-radius: 16px;
    padding: 32px;
    height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}

.testimonial-quote {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 600;
    margin: 0 0 32px 0;
    color: white;
}

.author-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

.author-title {
    font-size: 14px;
    color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 768px) {
    .features-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .feature-image,
    .dashboard-card,
    .testimonial-card {
        height: 400px;
    }
    
    .testimonial-quote {
        font-size: 20px;
    }
}

/* Companies Section */
.companies-section {
    padding: 80px 24px;
    background: #ffffff;
    border-top: 1px solid #f3f4f6;
}

.companies-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.companies-title {
    font-size: 48px;
    font-weight: 600;
    color: #111827;
    line-height: 1.1;
    margin: 0 0 48px 0;
    letter-spacing: -0.02em;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Trusted by description below title */
.trusted-by-description {
    font-size: 18px;
    color: #4b5563;
    max-width: 800px;
    margin: 0 auto 56px auto; /* more space below text */
}

/* Technologies grid */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 64px; /* more space between items */
    align-items: center;
    justify-items: center;
    margin-top: 16px;
}

.tech-item {
    width: 240px;
    height: 88px; /* larger logos */
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.9;
}

@media (max-width: 900px) {
    .tech-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .tech-grid { grid-template-columns: repeat(2, 1fr); }
    .tech-item { width: 180px; height: 72px; }
}

.carousel-wrapper {
    overflow: hidden;
    position: relative;
    mask: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.carousel-track {
    display: flex;
    gap: 60px;
    animation: scroll-logos 20s linear infinite;
    width: max-content;
}

.company-logo {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 56px; /* balanced size */
}

.company-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    filter: grayscale(100%);
}

.company-logo:hover img {
    opacity: 1;
    filter: grayscale(0%);
}

@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Responsive Design for Companies */
@media (max-width: 768px) {
    .companies-title {
        font-size: 20px;
        margin-bottom: 32px;
    }
    
    .carousel-track {
        gap: 40px;
    }
    
    .company-logo {
        min-width: 120px;
        height: 48px;
    }
}

/* Acceleration Section */
.acceleration-section {
    padding: 100px 24px;
    background: #ffffff;
}

.acceleration-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Left Content */
.acceleration-content {
    padding-right: 40px;
}

.acceleration-welcome {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 16px;
    font-weight: 500;
}

.acceleration-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    color: #111827;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.btn-get-started-accent {
    background: #000;
    color: white;
    border: none;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 48px;
}

.btn-get-started-accent:hover {
    background: #1f2937;
    transform: translateY(-2px);
}

.acceleration-description {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.description-main,
.description-secondary {
    font-size: 16px;
    line-height: 1.6;
    color: #6b7280;
}

.description-main strong,
.description-secondary strong {
    color: #374151;
}

/* Right Cards Grid */
.cards-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Top Cards Row */
.top-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Bottom Card Row */
.bottom-card-row {
    width: 100%;
}

/* Morance Card */
.morance-card {
    background: #000000;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 280px;
}

.morance-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.morance-brand {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin: 0;
    letter-spacing: 3px;
}

.revenue-text {
    font-size: 18px;
    color: white;
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
}

.btn-customer-stories {
    background: white;
    color: #111827;
    border: none;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.btn-customer-stories:hover {
    background: #f3f4f6;
}

/* Person Card */
.person-card {
    border-radius: 16px;
    overflow: hidden;
    height: 280px;
}

.person-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dashboard Instances Card */
.dashboard-instances-card {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 30%, #8e44ad 70%, #6366f1 100%);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    min-height: 300px;
    border-left: 8px solid #ff6b35;
}

.dashboard-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.dashboard-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.1;
    mix-blend-mode: overlay;
}

.dashboard-overlay {
    position: relative;
    z-index: 2;
    padding: 24px;
    background: rgba(255, 255, 255, 0.95);
    height: 100%;
    backdrop-filter: blur(10px);
}

.instances-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.instances-icon {
    font-size: 18px;
    color: #ef4444;
}

.instances-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    flex: 1;
}

.search-box {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    gap: 8px;
    width: 200px;
}

.search-box i {
    color: #9ca3af;
    font-size: 14px;
}

.search-input {
    border: none;
    outline: none;
    font-size: 14px;
    color: #6b7280;
    background: transparent;
    width: 100%;
}

.search-input::placeholder {
    color: #9ca3af;
}

/* Table */
.instances-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    align-items: center;
    font-size: 14px;
    color: #6b7280;
}

.table-row:last-child {
    border-bottom: none;
}

.task-name {
    font-weight: 500;
    color: #111827;
}

.completed-count,
.overdue-count {
    font-weight: 600;
    color: #374151;
}

.rate-indicator {
    width: 60px;
    height: 6px;
    border-radius: 3px;
}

.rate-high {
    background: #10b981;
}

.rate-medium {
    background: #f59e0b;
}

/* Responsive Design */
@media (max-width: 768px) {
    .acceleration-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .acceleration-content {
        padding-right: 0;
    }
    
    .acceleration-title {
        font-size: 36px;
    }
    
    .top-cards-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .morance-card,
    .person-card {
        height: 240px;
    }
    
    .morance-brand {
        font-size: 20px;
        letter-spacing: 2px;
    }
    
    .revenue-text {
        font-size: 16px;
    }
    
    .dashboard-instances-card {
        min-height: 350px;
    }
    
    .instances-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .search-box {
        width: 100%;
    }
    
    .table-header,
    .table-row {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: left;
    }
}

/* Features Grid Section */
.features-grid-section {
    padding: 100px 24px;
    background: #f8fafc;
}

.features-grid-container {
    max-width: 1200px;
    margin: 0 auto;
}

.features-header {
    text-align: center;
    margin-bottom: 64px;
}

.features-title {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3;
    color: #111827;
    margin: 0;
}

.features-subtitle {
    color: #6b7280;
    font-weight: 400;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 80px;
}

.feature-card {
    background: white;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

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

.feature-icon {
    margin-bottom: 24px;
}

.icon-dots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    width: 48px;
    height: 48px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #d1d5db;
}

/* Different icon patterns */
.icon-dots .dot:nth-child(1),
.icon-dots .dot:nth-child(5),
.icon-dots .dot:nth-child(9),
.icon-dots .dot:nth-child(13) {
    background: #3b82f6;
}

.security .dot:nth-child(2),
.security .dot:nth-child(6),
.security .dot:nth-child(10),
.security .dot:nth-child(14) {
    background: #10b981;
}

.collaboration .dot:nth-child(3),
.collaboration .dot:nth-child(7),
.collaboration .dot:nth-child(11),
.collaboration .dot:nth-child(15) {
    background: #f59e0b;
}

.insights .dot:nth-child(4),
.insights .dot:nth-child(8),
.insights .dot:nth-child(12),
.insights .dot:nth-child(16) {
    background: #ef4444;
}

.scale .dot:nth-child(1),
.scale .dot:nth-child(6),
.scale .dot:nth-child(11),
.scale .dot:nth-child(16) {
    background: #8b5cf6;
}

.integrations .dot:nth-child(2),
.integrations .dot:nth-child(7),
.integrations .dot:nth-child(12),
.integrations .dot:nth-child(13) {
    background: #06b6d4;
}

.feature-content {
    color: #374151;
}

.feature-heading {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
}

.feature-description {
    font-size: 16px;
    line-height: 1.5;
    color: #6b7280;
    margin: 0;
}

/* Chat Widget */
.chat-widget {
    background: #111827;
    border-radius: 24px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.chat-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-message {
    color: white;
}

.chat-greeting {
    font-size: 16px;
    margin: 0 0 4px 0;
}

.wave {
    font-size: 18px;
}

.chat-text {
    font-size: 14px;
    color: #d1d5db;
    margin: 0;
}

.chat-contact-btn {
    background: white;
    color: #111827;
    border: none;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-contact-btn:hover {
    background: #f3f4f6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .features-title {
        font-size: 28px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 60px;
    }
    
    .feature-card {
        padding: 24px;
    }
    
    .chat-widget {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 24px;
    }
    
    .chat-content {
        flex-direction: column;
        gap: 12px;
    }
}

/* Testimonial Section */
.testimonial-section {
    height: 50vh;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), 
                var(--testimonial-bg, url('Assets/Omnichannel1.jpeg'));
    background-size: cover;
    background-position: center right;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    position: relative;
}

.testimonial-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.testimonial-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 0 !important;
}

.testimonial-text {
width: 100%;
    margin-bottom: 0;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.testimonial-quote1 {
    font-size: 42px;
    font-weight: 500;
    line-height: 1.15;
    color: white;
    margin: 0 0 80px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.01em;
    max-width: 53%;
}

.testimonial-author {
    margin: 0;
    position: relative;
    width: 100%;
}

.author-info {
    display: flex;
    flex-direction: column;
   
}

.author-name {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

.author-title {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}

.testimonial-actions {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 16px;
}

.watch-video-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.watch-video-btn:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.play-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    color: #000;
}

.get-started-btn {
    background: white;
    border: none;
    color: #000;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.get-started-btn:hover {
    background: #f0f0f0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .testimonial-actions {
        position: static;
        transform: none;
        margin-top: 30px;
    }
    
    .testimonial-content {
        justify-content: flex-start;
        padding-top: 80px;
    }
}

@media (max-width: 768px) {
    .testimonial-section {
        background-attachment: scroll;
        min-height: 300px;
        height: 50vh;
    }
    
    .testimonial-container {
        padding: 0 24px;
    }
    
    .testimonial-content {
        padding-top: 60px;
    }
    
    .testimonial-text {
        margin-bottom: 40px;
    }
    
    .testimonial-quote1 {
        font-size: 40px;
        margin-bottom: 40px;
        line-height: 1.2;
    }
    
    .testimonial-actions {
        position: static;
        transform: none;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        margin-top: 20px;
    }
    
    .watch-video-btn,
    .get-started-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Pricing Section */
.pricing-section {
    padding: 80px 24px 80px 24px;
    background: white;
}

.pricing-container {
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-header {
    text-align: center;
    margin: 0 auto;
}

.pricing-title {
    font-size: 56px;
    font-weight: 500;
    line-height: 1.1;
    color: #111827;
    margin: 0 auto 24px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.02em;
    width: 50%;
}

.pricing-subtitle {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
    margin: 0 0 48px 0;
}

.pricing-reviews {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #9ca3af;
    font-size: 18px;
}

.reviews-platform {
    font-weight: 600;
    color: #374151;
}

.reviews-stars {
    display: flex;
    gap: 2px;
}

.star {
    color: #fbbf24;
    font-size: 18px;
}

.reviews-count {
    font-weight: 400;
    color: #6b7280;
}

/* Pricing Cards */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 64px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: fit-content;
}

.pricing-card.popular {
    border-color: #6366f1;
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
}

.pricing-card.enterprise {
    background: #111827;
    border-color: #374151;
    color: white;
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #111827;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.card-header {
    margin-bottom: 24px;
}

.plan-name {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
}

.enterprise .plan-name {
    color: white;
}

.plan-price {
    font-size: 36px;
    font-weight: 600;
    color: #6b7280;
}

.enterprise .plan-price {
    color: #9ca3af;
}

.price-period {
    font-size: 18px;
    font-weight: 400;
    color: #9ca3af;
}

.enterprise .price-period {
    color: #9ca3af;
}

.card-body {
    flex: 1;
}

.plan-description {
    font-size: 16px;
    color: #6b7280;
    margin: 0 0 32px 0;
    line-height: 1.5;
}

.enterprise .plan-description {
    color: #d1d5db;
}

.plan-button {
    width: 100%;
    padding: 14px 24px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    margin-bottom: 40px;
    transition: all 0.3s ease;
}

.basic-button {
    background: #111827;
    color: white;
}

.basic-button:hover {
    background: #374151;
}

.growth-button {
    background: linear-gradient(135deg, #ef4444, #8b5cf6);
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
    color: white;
}

.growth-button:hover {
    background: linear-gradient(135deg, #dc2626, #7c3aed);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

.enterprise-button {
    background: white;
    color: #111827;
}

.enterprise-button:hover {
    background: #f9fafb;
}

.plan-features {
    margin-bottom: 24px;
}

.features-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 16px 0;
}

.enterprise .features-title {
    color: white;
}

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

.features-list li {
    padding: 8px 0;
    font-size: 16px;
    color: #6b7280;
    position: relative;
    padding-left: 24px;
}

.enterprise .features-list li {
    color: #9ca3af;
}

.features-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #6b7280;
    font-weight: bold;
}

.enterprise .features-list li::before {
    color: #9ca3af;
}

.card-footer {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid #f3f4f6;
}

.enterprise .card-footer {
    border-top-color: #374151;
}

.disclaimer {
    font-size: 12px;
    color: #9ca3af;
    margin: 0;
    line-height: 1.4;
}

.enterprise .disclaimer {
    color: #6b7280;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .pricing-cards {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 600px;
    }
}

@media (max-width: 768px) {
    .pricing-section {
        padding: 80px 24px 60px 24px;
    }
    
    .pricing-title {
        font-size: 48px;
        margin-bottom: 20px;
    }
    
    .pricing-subtitle {
        font-size: 20px;
        margin-bottom: 32px;
    }
    
    .pricing-reviews {
        font-size: 16px;
        gap: 8px;
    }
    
    .star {
        font-size: 16px;
    }
    
    .pricing-cards {
        margin-top: 48px;
    }
    
    .pricing-card {
        padding: 24px;
    }
    
    .plan-price {
        font-size: 32px;
    }
}

/* Customer Testimonials Section */
.testimonials-section {
    padding: 120px 24px;
    background: #f8fafc;
}

.testimonials-container {
    max-width: 1400px;
    margin: 0 auto;
}

.testimonials-header {
    text-align: center;
    margin-bottom: 80px;
}

.testimonials-title {
    font-size: 56px;
    font-weight: 500;
    line-height: 1.1;
    color: #111827;
    margin: 0 auto 24px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.02em;
    width: 50%;
}

.testimonials-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: #111827;
    margin: 0 0 40px 0;
}

.testimonials-cta-btn {
    background: #111827;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonials-cta-btn:hover {
    background: #374151;
}

/* Testimonials Grid */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 80px;
}

.testimonial-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.testimonial-stars {
    display: flex;
    gap: 4px;
}

.star-filled {
    color: #111827;
    font-size: 16px;
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.5;
    color: #374151;
    margin: 0;
    flex: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.author-name {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

/* Footer */
.testimonials-footer {
    text-align: center;
}

.meet-customers-btn {
    background: transparent;
    color: #2a3038;
    border: 1px solid #d1d5db;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.meet-customers-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 80px 24px;
    }
    
    .testimonials-title {
        font-size: 40px;
    }
    
    .testimonials-subtitle {
        font-size: 18px;
    }
    
    .testimonials-header {
        margin-bottom: 60px;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 60px;
    }
    
    .testimonial-item {
        padding: 24px;
    }
}

/* Carousel Banner Section */
.carousel-banner-section {
    background: #000000;
    padding: 32px 0;
    overflow: hidden;
}

.carousel-banner-container {
    width: 100%;
}

.carousel-banner-track {
    display: flex;
    align-items: center;
    gap: 80px;
    animation: scroll-banner-infinite 30s linear infinite;
    width: fit-content;
}

.carousel-banner-item {
    display: flex;
    align-items: center;
    gap: 24px;
    white-space: nowrap;
    flex-shrink: 0;
}

.banner-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1em;
    letter-spacing: -0.02em;
    color: #0e0e0e;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.banner-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-1 {
    background: linear-gradient(135deg, #d4af37, #f4e4a6);
}

.icon-2 {
    background: linear-gradient(135deg, #ef4444, #8b5cf6);
}

.icon-dots-banner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    width: 24px;
    height: 24px;
}

.dot-banner {
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.8);
}

.icon-1 .dot-banner:nth-child(1),
.icon-1 .dot-banner:nth-child(5),
.icon-1 .dot-banner:nth-child(9),
.icon-1 .dot-banner:nth-child(13) {
    background: rgba(0, 0, 0, 0.6);
}

.icon-2 .dot-banner:nth-child(3),
.icon-2 .dot-banner:nth-child(7),
.icon-2 .dot-banner:nth-child(11),
.icon-2 .dot-banner:nth-child(15) {
    background: rgba(255, 255, 255, 1);
}

@keyframes scroll-banner-infinite {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .carousel-banner-section {
        padding: 24px 0;
    }
    
    .carousel-banner-track {
        gap: 40px;
    }
    
    .carousel-banner-item {
        gap: 16px;
    }
    
    .banner-text {
        font-size: 32px;
    }
    
    .banner-icon {
        width: 48px;
        height: 48px;
    }
    
    .icon-dots-banner {
        width: 20px;
        height: 20px;
        gap: 2px;
    }
    
    .dot-banner {
        width: 3px;
        height: 3px;
    }
}

/* FAQ Section */
.faq-section {
    padding: 120px 24px;
    background: white;
}

.faq-container {
    margin: 0 auto;
}

.faq-title {
    font-size: 48px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 64px 0;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1px solid #e5e7eb;
}

.faq-question {
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    color: #000000;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    color: #6b7280;
}

.faq-question span {
    flex: 1;
    text-align: left;
}

.faq-arrow {
    flex-shrink: 0;
    color: #6b7280;
    transition: transform 0.3s ease;
    margin-left: 16px;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding: 0 0 32px 0;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #6b7280;
}

.faq-item.active .faq-arrow {
    transform: rotate(180deg);
}

/* Responsive Design */
@media (max-width: 768px) {
    .faq-section {
        padding: 80px 24px;
    }
    
    .faq-title {
        font-size: 36px;
        margin-bottom: 48px;
    }
    
    .faq-question {
        padding: 24px 0;
        font-size: 16px;
    }
    
    .faq-answer p {
        padding-bottom: 24px;
        font-size: 15px;
    }
}

.text-white {
    color: #fff !important;
}

/* Download App Section */
.download-app-section {
    background: #000000;
    margin: 60px 40px;
    padding: 40px;
    height: 75vh;
    display: flex;
    align-items: center;
    border-radius: 1rem;
}

.download-app-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 70% 30%;
    /* gap: 80px; */
    align-items: center;
    width: 100%;
    height: 100%;
}

.download-app-content {
    color: white;
}

.download-app-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 24px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.download-app-title {
    font-size: 56px;
    font-weight: 500;
    line-height: 1.1;
    color: white;
    margin: 0 0 32px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.02em;
}

.download-app-description {
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 48px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.download-app-buttons {
    display: flex;
    gap: 16px;
}

.app-store-btn {
    background: white;
    color: #000;
    border: none;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.app-store-btn:hover {
    background: #f0f0f0;
}

.go-store-btn {
    background: white;
    color: #000;
    border: none;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.go-store-btn:hover {
    background: #f0f0f0;
}

.download-app-image {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding-right: 0;
}

.app-mockup {
    position: relative;
    width: 150%;
    height: 85%;
    background: linear-gradient(135deg, #8B5A2B 0%, #FF6B35 50%, #E91E63 100%);
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0;
    transform: translateX(-20%);
}

.mockup-image {
    width: 250px;
    height: auto;
    object-fit: contain;
    z-index: 2;
    position: relative;
}

/* Responsive Design */
@media (max-width: 1440px) and (min-width: 1025px) {
    .download-app-section {
        height: 80vh;
        padding: 0 32px;
    }
    
    .download-app-container {
        gap: 60px;
    }
    
    .download-app-title {
        font-size: 48px;
    }
    
    .download-app-description {
        font-size: 16px;
    }
    
    .app-mockup {
        height: 75%;
    }
    
    .mockup-image {
        width: 260px;
    }
}

@media (max-width: 1024px) {
    .download-app-container {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
    
    .download-app-image {
        height: 400px;
    }
    
    .app-mockup {
        height: 100%;
    }
    
    .mockup-image {
        width: 240px;
    }
}

@media (max-width: 768px) {
    .download-app-section {
        padding: 60px 24px;
    }
    
    .download-app-title {
        font-size: 40px;
        margin-bottom: 24px;
    }
    
    .download-app-description {
        font-size: 16px;
        margin-bottom: 32px;
    }
    
    .download-app-buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .app-store-btn,
    .go-store-btn {
        width: 100%;
        justify-content: center;
    }
    
    .download-app-image {
        height: 350px;
    }
    
    .mockup-image {
        width: 200px;
    }
}

/* Customers Love Artifact Section */
.customers-love-section-v4 {
    padding: 8rem 0;
    background-color: #f8f9fa;
}

.customers-love-container-v4 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.customers-love-header-v4 {
    text-align: center;
    margin-bottom: 6rem;
}

.customers-love-title-v4 {
    font-size: 2rem;
    font-weight: 600;
    color: #000;
    line-height: 1.2;
    margin: 0;
    max-width: 900px;
    margin: 0 auto;
}

.customers-love-subtitle-v4 {
    color: #666;
    font-weight: 400;
}

.customers-love-features-v4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 6rem;
}

.feature-card-v4 {
    background: white;
    padding: 3rem;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.feature-icon-v4 {
    margin-bottom: 2rem;
}

.feature-title-v4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
    line-height: 1.4;
    margin-bottom: 2rem;
}

.feature-highlight-v4 {
    color: #666;
    font-weight: 400;
}

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

.feature-item-v4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: #666;
    font-size: 0.9rem;
}

.feature-check-v4 {
    color: #10b981;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Support Chat Widget */
.support-chat-widget-v4 {
    position: relative;
    display: flex;
    justify-content: center;
}

.chat-widget-content-v4 {
    background: #000;
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
}

.chat-avatar-v4 {
    flex-shrink: 0;
}

.chat-avatar-img-v4 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-message-v4 {
    flex-grow: 1;
}

.chat-greeting-v4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.chat-text-v4 {
    font-size: 0.9rem;
    color: #d1d5db;
}

.chat-contact-btn-v4 {
    background: white;
    color: #000;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chat-contact-btn-v4:hover {
    background: #f3f4f6;
}

/* Updated Chat Widget Styles */
.chat-widget {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.chat-content {
    background: #000;
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
}

.chat-avatar {
    flex-shrink: 0;
}

.avatar-image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-message {
    flex-grow: 1;
}

.chat-greeting {
    font-size: 1rem;
    margin: 0 0 0.25rem 0;
}

.wave {
    display: inline-block;
    animation: wave 2s infinite;
}

@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(20deg); }
    75% { transform: rotate(-10deg); }
}

.chat-text {
    font-size: 0.9rem;
    color: #d1d5db;
    margin: 0;
}

.chat-contact-btn {
    background: white;
    color: #000;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chat-contact-btn:hover {
    background: #f3f4f6;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .customers-love-section-v4 {
        padding: 4rem 0;
    }
    
    .customers-love-container-v4 {
        padding: 0 1rem;
    }
    
    .customers-love-title-v4 {
        font-size: 2rem;
    }
    
    .customers-love-features-v4 {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 4rem;
    }
    
    .feature-card-v4 {
        padding: 2rem;
    }
    
    .chat-widget-content-v4 {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 2rem;
    }
    
    .chat-message-v4 {
        text-align: center;
    }
    
    .chat-widget {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .chat-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 2rem;
    }
    
    .chat-message {
        text-align: center;
    }
}

/* How It Works Section */
.how-it-works-section-v4 {
    padding: 8rem 0;
    background-color: white;
}

.how-it-works-container-v4 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.how-it-works-header-v4 {
    text-align: center;
    margin-bottom: 6rem;
}

.how-it-works-subtitle-v4 {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1rem;
    font-weight: 500;
}

.how-it-works-title-v4 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 2rem;
    line-height: 1.1;
}

.how-it-works-description-v4 {
    font-size: 1.25rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.how-it-works-steps-v4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.step-card-v4 {
    background: #f8f9fa;
    padding: 3rem;
    border-radius: 16px;
    text-align: left;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.step-card-v4::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #8B5A2B, #FF6B6B, #4ECDC4, #45B7D1, #8B5A2B);
    border-radius: 18px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.step-card-v4:hover::before {
    opacity: 1;
}

.step-card-v4:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
}

.step-icon-v4 {
    margin-bottom: 2rem;
}

.step-header-v4 {
    margin-bottom: 1.5rem;
}

.step-number-v4 {
    font-size: 0.875rem;
    color: #666;
    margin: 0 0 0.5rem 0;
    font-weight: 500;
}

.step-title-v4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    margin: 0;
    line-height: 1.3;
}

.step-description-v4 {
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
    font-size: 1rem;
}

.step-btn-v4 {
    background: white;
    color: #000;
    border: 1px solid #e5e7eb;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.step-btn-primary-v4 {
    background: #000;
    color: white;
    border: 1px solid #000;
}

.step-btn-v4:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.step-btn-primary-v4:hover {
    background: #333;
    border-color: #333;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .how-it-works-section-v4 {
        padding: 4rem 0;
    }
    
    .how-it-works-container-v4 {
        padding: 0 1rem;
    }
    
    .how-it-works-title-v4 {
        font-size: 2.5rem;
    }
    
    .how-it-works-description-v4 {
        font-size: 1.1rem;
    }
    
    .how-it-works-steps-v4 {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 4rem;
    }
    
    .step-card-v4 {
        padding: 2rem;
    }
}

/* Included with Every Plan Section */
.included-plan-section-v4 {
    padding: 8rem 0;
    background-color: #f8f9fa;
}

.included-plan-container-v4 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.included-plan-header-v4 {
    text-align: center;
    margin-bottom: 6rem;
}

.included-plan-title-v4 {
    font-size: 2.5rem;
    font-weight: 600;
    color: #000;
    line-height: 1.2;
    margin: 0;
    max-width: 800px;
    margin: 0 auto;
}

.included-plan-subtitle-v4 {
    color: #666;
    font-weight: 400;
}

.included-plan-content-v4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
    height: 75vh;
}

/* Statistics Card */
.statistics-card-v4 {
    background: #000;
    padding: 2rem;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
    position: relative;
    border-radius: 16px 0 0 16px;
}

.statistics-number-v4 {
    font-size: 5rem;
    font-weight: 700;
    line-height: 0.8;
    margin: 0;
    align-self: flex-start;
}

.statistics-text-v4 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0;
    max-width: none;
    font-weight: 400;
}

.customer-stories-btn-v4 {
    background: #4a4a4a;
    color: white;
    border: none;
    padding: 0.875rem 1.75rem;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
    margin-top: auto;
}

.customer-stories-btn-v4:hover {
    background: #555;
}

/* Professional Woman Image */
.professional-image-v4 {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    border-radius: 16px;
}

.professional-img-v4 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Action Card with Gradient */
.action-card-v4 {
    background: linear-gradient(135deg, #ff6b35, #ff4d6d, #c44569, #6c5ce7, #a55eea, #fd79a8);
    background-size: 300% 300%;
    animation: gradientShift 10s ease infinite;
    padding: 3rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    position: relative;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-card-v4:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.action-content-v4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
}

.play-icon-v4 {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
}

.action-text-v4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    line-height: 1.2;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .included-plan-section-v4 {
        padding: 4rem 0;
    }
    
    .included-plan-container-v4 {
        padding: 0 1rem;
    }
    
    .included-plan-title-v4 {
        font-size: 2rem;
    }
    
    .included-plan-content-v4 {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .statistics-card-v4,
    .professional-image-v4,
    .action-card-v4 {
        min-height: 300px;
    }
    
    .statistics-card-v4 {
        padding: 2rem 1.5rem;
        border-radius: 16px 16px 0 0;
    }
    
    .statistics-number-v4 {
        font-size: 4rem;
    }
    
    .statistics-text-v4 {
        font-size: 1.25rem;
    }
    
    .action-card-v4 {
        padding: 3rem 2rem;
        border-radius: 0 0 16px 16px;
    }
    
    .action-text-v4 {
        font-size: 1.25rem;
    }
    
    .play-icon-v4 {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}

/* Roadmap Section */
.roadmap-section-v4 {
    padding: 8rem 0;
    background-color: white;
}

.roadmap-container-v4 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.roadmap-layout-v4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Header */
.roadmap-header-v4 {
    margin-bottom: 6rem;
    max-width: 700px;
}

.roadmap-subtitle-v4 {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1rem;
    font-weight: 500;
}

.roadmap-title-v4 {
    font-size: 3rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 2rem;
    line-height: 1.1;
}

.roadmap-description-v4 {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 3rem;
}

.suggest-feature-btn-v4 {
    background: #000;
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.suggest-feature-btn-v4:hover {
    background: #333;
}

/* Timeline */
.roadmap-timeline-v4 {
    position: relative;
    max-width: 600px;
    width: 100%;
}

.timeline-line-v4 {
    display: none;
}

.timeline-item-v4 {
    position: relative;
    margin-bottom: 4rem;
    display: grid;
    grid-template-columns: 100px auto 1fr;
    align-items: start;
    gap: 2rem;
    text-align: left;
}

.timeline-marker-v4 {
    position: relative;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    justify-self: center;
}

.timeline-icon-v4 {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Completed item styling */
.timeline-item-v4.completed .timeline-icon-v4 {
    background: #10b981;
    color: white;
}

/* Pending item styling */
.timeline-item-v4.pending .timeline-icon-v4 {
    background: #6b7280;
    color: white;
}

/* Future item styling */
.timeline-item-v4.future .timeline-icon-v4 {
    background: #e5e7eb;
    color: #6b7280;
}

/* Seen on scroll */
.timeline-item-v4.seen .timeline-icon-v4 {
    background: #10b981;
    color: #ffffff;
}

.timeline-content-v4 {
    padding: 0.5rem 0;
    max-width: 500px;
    width: 100%;
    text-align: left;
}

.timeline-period-v4 {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
    padding-top: 0.5rem;
    text-align: right;
}

.timeline-feature-title-v4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.timeline-description-v4 {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.inline-suggest-btn-v4 {
    background: none;
    border: none;
    color: #000;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    transition: color 0.2s ease;
}

.inline-suggest-btn-v4:hover {
    color: #333;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .roadmap-section-v4 {
        padding: 4rem 0;
    }
    
    .roadmap-container-v4 {
        padding: 0 1rem;
    }
    
    .roadmap-header-v4 {
        margin-bottom: 4rem;
    }
    
    .roadmap-timeline-v4 {
        max-width: 100%;
    }
    
    .roadmap-title-v4 {
        font-size: 2rem;
    }
    
    .timeline-item-v4 {
        margin-bottom: 3rem;
    }
    
    .timeline-item-v4 {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
    
    .timeline-period-v4 {
        text-align: center;
        order: -1;
    }
    
    .timeline-marker-v4 {
        order: 0;
    }
    
    .timeline-content-v4 {
        order: 1;
        text-align: center;
    }
    
    .timeline-feature-title-v4 {
        font-size: 1.25rem;
    }
}

/* Final Testimonial Section */
.final-testimonial-section {
    background: #000000;
    padding: 120px 24px;
    text-align: center;
}

.final-testimonial-container {
    max-width: 1200px;
    margin: 0 auto;
}

.final-testimonial-header {
    margin-bottom: 80px;
}

.final-testimonial-title {
    font-size: 56px;
    font-weight: 500;
    line-height: 1.1;
    color: white;
    margin: 0 0 32px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.02em;
}

.final-testimonial-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.final-rating-platform {
    font-weight: 600;
    color: white;
}

.final-rating-stars {
    display: flex;
    gap: 2px;
}

.final-rating-stars .star {
    color: #fbbf24;
    font-size: 16px;
}

.final-rating-text {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.final-testimonial-card {
    border-radius: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    align-items: stretch;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}

.final-testimonial-content {
    background: #2a2a2a;
    padding: 48px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 24px;
}

.final-testimonial-cta {
    background: linear-gradient(135deg, #8B5A2B 0%, #FF6B35 30%, #E91E63 70%, #8B5CF6 100%);
    background-size: 250% 250%;
    animation: gradientShift 9s ease infinite;
    padding: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
}

.final-testimonial-quote {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: white;
    margin: 0 0 32px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.final-testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.final-author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.final-author-info {
    text-align: left;
}

.final-author-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

.final-author-title {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.buy-artifact-btn {
    background: white;
    color: #000;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap;
}

.buy-artifact-btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .final-testimonial-section {
        padding: 80px 24px;
    }
    
    .final-testimonial-title {
        font-size: 40px;
        margin-bottom: 24px;
    }
    
    .final-testimonial-header {
        margin-bottom: 60px;
    }
    
    .final-testimonial-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px;
        text-align: center;
    }
    
    .final-testimonial-content {
        text-align: center;
    }
    
    .final-testimonial-quote {
        font-size: 20px;
        margin-bottom: 24px;
    }
    
    .final-testimonial-author {
        justify-content: center;
    }
}

/* Main Footer Styles */
.main-footer {
    background: #000000;
    padding: 80px 60px 40px 60px;
    color: white;
}

.main-footer-container {
    max-width: 1000px;
    margin: 0 auto;
}

.main-footer-content {
    margin-bottom: 60px;
}

.main-footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.main-footer-column {
    display: flex;
    flex-direction: column;
}

.main-footer-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin: 0 0 24px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.main-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.main-footer-link {
    color: #9ca3af;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    transition: color 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.main-footer-link:hover {
    color: white;
}

.main-footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 32px;
}

.main-footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.main-footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-footer-logo svg {
    color: white;
}

.main-footer-logo-text {
    font-size: 18px;
    font-weight: 600;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.main-footer-copyright {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.main-footer-social {
    display: flex;
    gap: 16px;
}

.main-social-link {
    color: #6b7280;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-social-link:hover {
    color: white;
}

/* Main Footer Responsive Design */
@media (max-width: 768px) {
    .main-footer {
        padding: 60px 40px 32px 40px;
    }
    
    .main-footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    
    .main-footer-bottom-content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
    
    .main-footer-social {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .main-footer {
        padding: 60px 24px 32px 24px;
    }
    
    .main-footer-links {
        grid-template-columns: 1fr;
        gap: 24px;
    }
} 

.banner-text2 {
    font-size: 56px;
    font-weight: 500;
    line-height: 1.1em;
    letter-spacing: -0.02em;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ===== ESTILOS PARA INDEX2.HTML (v2) ===== */

/* Header/Navigation v2 */
.header-v2 {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.nav-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0rem;
    height: 48px;
}

/* Logo v2 */
.nav-left-v2 {
    display: flex;
    align-items: center;
}

.logo-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.logo-icon-v2 {
    width: 3rem;
    height: auto;
}

/* Navigation menu v2 */
.nav-center-v2 {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-menu-v2 {
    display: flex;
    list-style: none;
    gap: 32px;
    align-items: center;
}

.nav-link-v2 {
    text-decoration: none;
    color: #080808;
    font-size: 14px;
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.nav-link-v2:hover {
    color: #374151;
}

.dropdown-arrow-v2 {
    font-size: 10px;
    opacity: 0.6;
}

/* Navigation right v2 */
.nav-right-v2 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-icon-v2 {
    width: 40px;
    height: 40px;
    color: #6b7280;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-icon-v2 i {
    font-size: 16px;
}

.search-icon-v2:hover {
    background-color: #f3f4f6;
}

.btn-templates-v2 {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 3rem;
    transition: all 0.2s ease;
}

.btn-templates-v2:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.btn-buy-v2 {
    background: #000;
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-buy-v2:hover {
    background: #1f2937;
}

/* Main content v2 */
.main-v2 {
    flex: 1;
}

/* Hero Video section v2 */
.hero-video-v2 {
    height: 25vh;
    position: relative;
    overflow: hidden;
    padding: 0rem 4px;
}

.hero-video-container-v2 {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-bg-video-v2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-overlay-v2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 60px 0;
}

.hero-overlay-v2 > div {
    max-width: 1200px;
    width: 100%;
    padding: 0 24px;
}

.hero-content-v2 {
    max-width: 600px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-main-title-v2 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    color: white;
    white-space: nowrap;
    text-align: center;
}

.hero-subtitle-v2 {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
}

.hero-buttons-v2 {
    display: flex;
    gap: 16px;
    align-items: center;
    align-self: flex-end;
    margin-bottom: 20px;
}

.btn-watch-video-v2 {
    background: rgba(255, 255, 255, 0);
    color: #ffffff;
    border: none;
    font-size: 18px;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-watch-video-v2:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
}

.play-icon-v2 {
    width: 40px;
    height: 40px;
    background: #ffffff;
    color: rgb(0, 0, 0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.btn-get-started-v2 {
    background: white;
    color: #000;
    border: none;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-get-started-v2:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
}

/* Banner v2 */
.banner-v2 {
    background: #f6f4f1;
    border-bottom: 1px solid #f0f0f0;
    padding: 8px 0;
    text-align: center;
    overflow: hidden;
    position: relative;
    width: 40%;
    border-radius: 3rem;       
    margin: auto;
    margin-top: 2rem;
}

.banner-v2::before,
.banner-v2::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    pointer-events: none;
    z-index: 2;
}

.banner-v2::before {
    left: 0;
    background: linear-gradient(to right, #f6f4f1, transparent);
}

.banner-v2::after {
    right: 0;
    background: linear-gradient(to left, #f6f4f1, transparent);
}

.banner-scroll-v2 {
    width: 100%;
    overflow: hidden;
}

.banner-content-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    animation: scroll-banner-v2 30s linear infinite;
}

.banner-spacing-v2 {
    margin: 0 60px;
}

.banner-text-v2 {
    font-size: 14px;
    font-weight: 500;
    color: #0e0e0e;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.banner-link-v2 {
    color: #6b7280;
    text-decoration: underline;
    font-weight: 500;
}

.banner-emoji-v2 {
    font-size: 16px;
}

@keyframes scroll-banner-v2 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Automation Section v2 */
.automation-section-v2 {
    background: #ffffff;
    padding: 60px 0;
}

.automation-container-v2 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.automation-header-v2 {
    text-align: center;
    margin-bottom: 48px;
}

.automation-title-v2 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #000;
    margin-bottom: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.automation-description-v2 {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #6b7280;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.btn-explore-features-v2 {
    background: linear-gradient(135deg, #ff4757 0%, #5f27cd 100%);
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
    color: white;
    border: none;
    font-size: 16px;
    font-weight: 500;
    padding: 16px 32px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
}

.btn-explore-features-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(95, 39, 205, 0.3);
}

.automation-stats-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin-top: 80px;
}

.stat-item-v2 {
    text-align: left;
}

.stat-number-v2 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    margin-bottom: 1rem;
}

.stat-description-v2 {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #4b5563;
}

/* Responsive para automation v2 */
@media (max-width: 1024px) {
    .automation-stats-v2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .automation-section-v2 {
        padding: 60px 0;
    }
    
    .automation-container-v2 {
        padding: 0 20px;
    }
    
    .automation-header-v2 {
        margin-bottom: 60px;
    }
    
    .automation-title-v2 {
        font-size: 2.5rem;
    }
    
    .automation-description-v2 {
        font-size: 1rem;
    }
    
    .automation-stats-v2 {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 60px;
    }
    
    .stat-item-v2 {
        text-align: center;
    }
    
    .stat-number-v2 {
        font-size: 3rem;
    }
}

/* Product Section v2 */
.product-section-v2 {
    background: #ffffff;
    padding: 20px 0;
}

.product-container-v2 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.product-header-v2 {
    text-align: left;
    margin-bottom: 60px;
}

.product-title-v2 {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #000;
    margin-bottom: 1rem;
}

.product-description-v2 {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #6b7280;
}

.product-cards-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin-top: 60px;
}

.product-card-v2 {
    background: #f5f5f5;
    border-radius: 16px 16px 0 0;
    padding: 24px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    min-height: 400px;
    border: 1px solid #e5e7eb;
    border-bottom: none;
}

.product-card-v2:hover {
    background: linear-gradient(135deg, #ff8a00 0%, #e52e71 50%, #9b59b6 100%);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.product-card-v2:hover * {
    color: white !important;
}

/* Card 1 - Controller */
.card-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-title-v2 {
    font-size: 1rem;
    font-weight: 500;
    color: #000;
}

.card-actions-v2 {
    display: flex;
    gap: 8px;
}

.edit-btn-v2, .menu-btn-v2 {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.status-indicator-v2 {
    display: inline-block;
    margin-bottom: 8px;
}

.content-title-v2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px;
}

.content-description-v2 {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 20px;
}

.time-date-v2 {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

.time-section-v2, .date-section-v2, .output-section-v2 {
    margin-bottom: 16px;
}

.time-section-v2 label, .date-section-v2 label, .output-section-v2 label, .owners-section-v2 label {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.time-value-v2, .date-value-v2, .output-value-v2 {
    font-size: 0.9rem;
    color: #000;
    font-weight: 500;
}

.owners-list-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.owner-avatar-v2 {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.invite-btn-v2 {
    background: none;
    border: 1px dashed #d1d5db;
    color: #6b7280;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Card 2 - Dashboard */
.dashboard-menu-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.menu-item-v2 {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.menu-item-v2.active {
    background: #ffffff;
    color: #000;
    font-weight: 500;
}

.menu-item-v2:hover {
    background: #ffffff;
    color: #000;
}

/* Card 3 - Professional Plan */
.plan-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.plan-title-v2 {
    font-size: 1rem;
    font-weight: 600;
    color: #000;
}

.plan-price-v2 {
    text-align: right;
}

.price-amount-v2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
}

.price-period-v2 {
    font-size: 0.9rem;
    color: #6b7280;
}

.plan-description-v2 {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.5;
}

.plan-actions-v2 {
    display: flex;
    gap: 12px;
}

.upgrade-btn-v2 {
    background: #000;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
}

.cancel-btn-v2 {
    background: none;
    border: none;
    color: #6b7280;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    cursor: pointer;
}

.card-image-v2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px 16px 0 0;
}

.card-img-v2 {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
}

/* Responsive para product cards v2 */
@media (max-width: 1024px) {
    .product-cards-v2 {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .product-card-v2:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .product-section-v2 {
        padding: 15px 0;
    }
    
    .product-container-v2 {
        padding: 0 20px;
    }
    
    .product-title-v2 {
        font-size: 2.5rem;
    }
    
    .product-cards-v2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .product-card-v2:nth-child(3) {
        grid-column: auto;
        max-width: 100%;
    }
}

/* Cards Descriptions v2 */
.cards-descriptions-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 0;
}

.description-item-v2 {
    text-align: left;
    background: white;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 24px;
}

.description-title-v2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #000;
    margin-bottom: 1rem;
}

.description-text-v2 {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #6b7280;
}

/* Responsive para descriptions v2 */
@media (max-width: 1024px) {
    .cards-descriptions-v2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .description-item-v2:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .cards-descriptions-v2 {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 0;
    }
    
    .description-item-v2:nth-child(3) {
        grid-column: auto;
        max-width: 100%;
    }
    
    .description-item-v2 {
        text-align: center;
    }
    
    .description-title-v2 {
        font-size: 1.3rem;
    }
    
    .description-text-v2 {
        font-size: 0.95rem;
    }
}

/* Companies Testimonial Section v2 */
.companies-testimonial-section-v2 {
    background: #f8f9fa;
    padding: 80px 0;
}

.companies-testimonial-container-v2 {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.companies-logos-row-v2 {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: center;
    position: absolute;
}

.companies-logos-row-v2:first-child {
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
}

.companies-logos-row-v2:last-child {
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
}

.company-logo-item-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 400;
    color: #a1a1aa;
    transition: opacity 0.2s ease;
}

.company-logo-item-v2:hover {
    opacity: 1;
}

.logo-icon-v2 {
    font-size: 1.6rem;
    color: #a1a1aa;
}

.logo-text-v2 {
    font-size: 1.4rem;
    color: #a1a1aa;
}

.testimonial-content-v2 {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.testimonial-title-v2 {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000;
    margin-bottom: 2rem;
width: 60%;    margin-left: auto;
    margin-right: auto;
}

.testimonial-rating-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rating-platform-v2 {
    color: rgb(148, 147, 147);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
}

.rating-stars-v2 {
    display: flex;
    gap: 2px;
}

.star-v2 {
    color: #fbbf24;
    font-size: 16px;
}

.rating-count-v2 {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Responsive para companies testimonial v2 */
@media (max-width: 1024px) {
    .companies-testimonial-container-v2 {
        flex-direction: column;
        gap: 60px;
        padding: 60px 20px;
        position: static;
    }
    
    .companies-logos-row-v2 {
        position: static;
        flex-direction: row;
        gap: 100px;
        align-items: center;
        justify-content: center;
        transform: none;
    }
    
    .companies-logos-row-v2:first-child,
    .companies-logos-row-v2:last-child {
        position: static;
        transform: none;
        left: auto;
        right: auto;
        top: auto;
    }
    
    .testimonial-content-v2 {
        order: 1;
    }
    
    .companies-logos-row-v2:first-child {
        order: 0;
    }
    
    .companies-logos-row-v2:last-child {
        order: 2;
    }
}

@media (max-width: 768px) {
    .companies-testimonial-section-v2 {
        padding: 60px 0;
    }
    
    .companies-testimonial-container-v2 {
        padding: 0 20px;
        gap: 30px;
    }
    
    .testimonial-title-v2 {
        font-size: 2rem;
    }
    
    .companies-logos-row-v2 {
        gap: 40px;
    }
    
    .company-logo-item-v2 {
        font-size: 1.2rem;
    }
    
    .testimonial-rating-v2 {
        flex-direction: column;
        gap: 8px;
    }
}

/* Precision Section */
.precision-section-v2 {
    padding: 120px 0;
    background: #fff;
}

.precision-container-v2 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.precision-content-v2 {
    max-width: 500px;
}

.precision-welcome-v2 {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
    font-weight: 400;
}

.precision-title-v2 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: #000;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.precision-description-v2 {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 3rem;
}

.precision-features-v2 {
    display: flex;
    flex-direction: row;
    gap: 3rem;
}

.precision-feature-v2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.feature-icon-v2 {
    padding: 12px;
    border-radius: 8px;
    flex-shrink: 0;
}

.precision-feature-v2:first-child .feature-icon-v2 {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.precision-feature-v2:last-child .feature-icon-v2 {
    background: linear-gradient(135deg, #ef4444, #f97316);
}

.dotted-icon-v2 {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, white 2px, transparent 2px);
    background-size: 6px 6px;
    border-radius: 4px;
}

.brain-icon-v2 {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, white 1.5px, transparent 1.5px);
    background-size: 4px 4px;
    border-radius: 4px;
    position: relative;
}

.brain-icon-v2::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.feature-text-v2 h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 0.5rem;
}

.feature-text-v2 p {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
}

.precision-images-v2 {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 16px;
    height: 500px;
}

.precision-image-large-v2 {
    border-radius: 16px;
    overflow: hidden;
    grid-row: 1;
}

.precision-image-large-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.precision-image-bottom-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    grid-row: 2;
}

.precision-image-small-v2 {
    border-radius: 16px;
    overflow: hidden;
    height: 180px;
}

.precision-image-small-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.precision-logo-card-v2 {
    background: #000;
    border-radius: 16px;
    padding: 24px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 180px;
}

.lucident-logo-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
}

.lucident-icon-v2 {
    font-size: 1.2rem;
    color: white;
}

.lucident-logo-v2 span {
    font-size: 1.1rem;
    font-weight: 500;
    color: white;
}

.revenue-text-v2 h3 {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: white;
}

.customer-stories-btn-v2 {
    background: white;
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    align-self: flex-start;
    transition: all 0.2s ease;
}

.customer-stories-btn-v2:hover {
    background: #f5f5f5;
}

@media (max-width: 1024px) {
    .precision-container-v2 {
        grid-template-columns: 1fr;
        gap: 60px;
        padding: 0 20px;
    }
    
    .precision-title-v2 {
        font-size: 2.8rem;
    }
    
    .precision-images-v2 {
        height: 400px;
    }
    
    .precision-image-small-v2,
    .precision-logo-card-v2 {
        height: 150px;
    }
}

@media (max-width: 768px) {
    .precision-section-v2 {
        padding: 80px 0;
    }
    
    .precision-title-v2 {
        font-size: 2.2rem;
    }
    
    .precision-features-v2 {
        flex-direction: column;
        gap: 2rem;
    }
    
    .precision-feature-v2 {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .precision-image-bottom-v2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .precision-logo-card-v2 {
        height: 120px;
        padding: 20px;
    }
    
    .revenue-text-v2 h3 {
        font-size: 1rem;
    }
}

/* Customers Love Section */
.customers-love-section-v2 {
    padding: 120px 0;
    background: #f8f9fa;
}

.customers-love-container-v2 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.customers-love-header-v2 {
    text-align: center;
    margin-bottom: 80px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.customers-love-title-v2 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #000;
    margin-bottom: 0;
}

.customers-love-subtitle-v2 {
    color: #a1a1aa;
    font-weight: 400;
    display: block;
    margin-top: 0.5rem;
    font-size: 2.5rem;
}

.customers-love-tabs-v2 {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 60px;
    background: #f3f4f6;
    padding: 6px;
    border-radius: 12px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.tab-button-v2 {
    padding: 14px 28px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.tab-button-v2.active {
    background: #000;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tab-button-v2:hover:not(.active) {
    background: #e5e7eb;
    color: #374151;
}

.customers-love-content-v2 {
    position: relative;
    min-height: 500px;
}

.tab-content-v2 {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.tab-content-v2.active {
    display: grid;
}

.tab-content-left-v2 {
    position: relative;
}

.dashboard-preview-v2 {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.dashboard-image-v2 {
    width: 100%;
    height: auto;
    border-radius: 12px;
    padding: 3rem;
}

.dashboard-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 20px;
}

.dashboard-title-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
}

.dashboard-actions-v2 {
    display: flex;
    gap: 12px;
}

.dashboard-actions-v2 i {
    font-size: 1.1rem;
    color: #6b7280;
    cursor: pointer;
}

.breadcrumb-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 20px;
}

.breadcrumb-v2 i {
    font-size: 0.8rem;
}

.task-card-v2 {
    background: #f9fafb;
    border-radius: 12px;
    padding: 3rem;
}

.task-icon-v2 {
    width: 40px;
    height: 40px;
    background: #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.task-icon-v2 i {
    color: white;
    font-size: 1.2rem;
}

.task-card-v2 h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
}

.task-details-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-row-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.label-v2 {
    font-size: 0.9rem;
    color: #6b7280;
    min-width: 80px;
}

.status-completed-v2 {
    background: #d1fae5;
    color: #065f46;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
}

.progress-wrapper-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.progress-bar-v2 {
    flex: 1;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill-v2 {
    height: 100%;
    background: #10b981;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.avatar-v2 {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    border: 2px solid white;
}

.team-avatars-v2 {
    display: flex;
    gap: -8px;
}

.team-avatars-v2 .avatar-v2 {
    margin-left: -8px;
}

.team-avatars-v2 .avatar-v2:first-child {
    margin-left: 0;
}

.add-member-v2 {
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #6b7280;
    cursor: pointer;
    margin-left: -8px;
}

.tab-content-right-v2 {
    max-width: 550px;
    padding-left: 2rem;
}

.content-description-v2 h3 {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.1;
    color: #000;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.highlight-v2 {
    color: #6366f1;
}

.content-description-v2 p {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.6;
    margin-top: 1.5rem;
}

.content-description-v2 p strong {
    color: #000;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .customers-love-container-v2 {
        padding: 0 20px;
    }
    
    .tab-content-v2 {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .customers-love-title-v2 {
        font-size: 2rem;
    }
    
    .customers-love-subtitle-v2 {
        font-size: 2rem;
    }
    
    .content-description-v2 h3 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .customers-love-section-v2 {
        padding: 80px 0;
    }
    
    .customers-love-title-v2 {
        font-size: 1.8rem;
    }
    
    .customers-love-subtitle-v2 {
        font-size: 1.8rem;
    }
    
    .customers-love-header-v2 {
        margin-bottom: 60px;
    }
    
    .customers-love-tabs-v2 {
        flex-wrap: wrap;
        gap: 4px;
        padding: 4px;
    }
    
    .tab-button-v2 {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
    
    .content-description-v2 h3 {
        font-size: 2rem;
    }
    
    .dashboard-preview-v2 {
        padding: 20px;
    }
    
    .task-card-v2 {
        padding: 16px;
    }
}

/* Automation CTA Section */
.automation-cta-section-v2 {
    padding: 60px 0;
    background: #fff;
}

.automation-cta-container-v2 {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.automation-cta-title-v2 {
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.1;
    color: #000;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.automation-cta-description-v2 {
    font-size: 1.2rem;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.automation-cta-button-v2 {
    background: #000;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}

.automation-cta-button-v2:hover {
    background: #333;
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .automation-cta-title-v2 {
        font-size: 3rem;
    }
    
    .automation-cta-description-v2 {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .automation-cta-section-v2 {
        padding: 40px 0;
    }
    
    .automation-cta-container-v2 {
        padding: 0 20px;
    }
    
    .automation-cta-title-v2 {
        font-size: 2.5rem;
    }
    
    .automation-cta-description-v2 {
        font-size: 1rem;
        margin-bottom: 2.5rem;
    }
    
    .automation-cta-button-v2 {
        padding: 14px 28px;
        font-size: 0.95rem;
    }
}

/* Testimonials Grid Section */
.testimonials-grid-section-v2 {
    padding: 120px 0;
    background: #f8f9fa;
}

.testimonials-grid-container-v2 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.testimonials-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.testimonial-card-v2 {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.testimonial-company-v2 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #000;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gridpoint-icon-v2 {
    font-size: 1rem;
    color: #000;
}

.testimonial-quote-v2 {
    flex: 1;
    position: relative;
}

.quote-mark-v2 {
    font-size: 4rem;
    color: #e5e7eb;
    position: absolute;
    top: -20px;
    left: -10px;
    line-height: 1;
    font-family: serif;
}

.testimonial-quote-v2 p {
    font-size: 1.1rem;
    color: #000;
    line-height: 1.6;
    margin: 0;
    padding-left: 20px;
    font-weight: 400;
}

.testimonial-author-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar-v2 {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    flex-shrink: 0;
}

.author-info-v2 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-name-v2 {
    font-size: 1rem;
    font-weight: 600;
    color: #000;
}

.author-title-v2 {
    font-size: 0.9rem;
    color: #6b7280;
}

@media (max-width: 1024px) {
    .testimonials-grid-v2 {
        gap: 24px;
    }
    
    .testimonial-card-v2 {
        padding: 32px;
    }
    
    .testimonial-quote-v2 p {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .testimonials-grid-section-v2 {
        padding: 80px 0;
    }
    
    .testimonials-grid-container-v2 {
        padding: 0 20px;
    }
    
    .testimonials-grid-v2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .testimonial-card-v2 {
        padding: 24px;
        gap: 20px;
    }
    
    .quote-mark-v2 {
        font-size: 3rem;
        top: -15px;
        left: -8px;
    }
    
    .testimonial-quote-v2 p {
        font-size: 0.95rem;
        padding-left: 15px;
    }
    
    .testimonial-company-v2 {
        font-size: 1rem;
    }
    
    .author-name-v2 {
        font-size: 0.95rem;
    }
    
    .author-title-v2 {
        font-size: 0.85rem;
    }
}

/* Contact Form Section */
.contact-form-section-v2 {
    padding: 120px 0;
    background: #f8f9fa;
}

.contact-form-container-v2 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.contact-form-content-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.contact-form-left-v2 {
    max-width: 500px;
}

.contact-form-subtitle-v2 {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 1rem;
    font-weight: 400;
}

.contact-form-title-v2 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: #000;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.contact-form-description-v2 {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.contact-form-rating-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3rem;
}

.rating-platform-form-v2 {
    background: #000;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
}

.rating-stars-form-v2 {
    display: flex;
    gap: 2px;
}

.star-form-v2 {
    color: #fbbf24;
    font-size: 16px;
}

.rating-count-form-v2 {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.contact-form-testimonial-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    border-radius: 16px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.testimonial-image-v2 {
    background: #f0f0f0;
}

.testimonial-image-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.testimonial-content-form-v2 {
    background: #000;
    color: white;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-company-form-v2 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.testimonial-text-form-v2 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    flex: 1;
}

.customer-stories-form-btn-v2 {
    background: white;
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    align-self: flex-start;
    transition: all 0.2s ease;
}

.customer-stories-form-btn-v2:hover {
    background: #f5f5f5;
}

.contact-form-right-v2 {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.contact-form-v2 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group-v2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label-v2 {
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
}

.form-input-v2,
.form-textarea-v2,
.form-select-v2 {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    color: #000;
    background: white;
    transition: border-color 0.2s ease;
}

.form-input-v2:focus,
.form-textarea-v2:focus,
.form-select-v2:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-input-v2::placeholder {
    color: #9ca3af;
}

.form-textarea-v2 {
    resize: vertical;
    min-height: 80px;
}

.form-select-v2 {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
    appearance: none;
}

.form-checkbox-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-input-v2 {
    width: 16px;
    height: 16px;
    accent-color: #6366f1;
}

.checkbox-label-v2 {
    font-size: 0.9rem;
    color: #6b7280;
}

.terms-link-v2 {
    color: #6366f1;
    text-decoration: underline;
}

.terms-link-v2:hover {
    color: #4f46e5;
}

.form-submit-btn-v2 {
    background: #000;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.form-submit-btn-v2:hover {
    background: #333;
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .contact-form-content-v2 {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .contact-form-title-v2 {
        font-size: 2.8rem;
    }
    
    .contact-form-right-v2 {
        padding: 32px;
    }
}

@media (max-width: 768px) {
    .contact-form-section-v2 {
        padding: 80px 0;
    }
    
    .contact-form-container-v2 {
        padding: 0 20px;
    }
    
    .contact-form-title-v2 {
        font-size: 2.2rem;
    }
    
    .contact-form-testimonial-v2 {
        grid-template-columns: 1fr;
    }
    
    .testimonial-content-form-v2 {
        padding: 20px;
    }
    
    .contact-form-right-v2 {
        padding: 24px;
    }
    
    .contact-form-v2 {
        gap: 20px;
    }
}

/* Responsive para v2 */
@media (max-width: 768px) {
    .nav-v2 {
        padding: 8px 16px;
    }
    
    .nav-center-v2 {
        display: none;
    }
    
    .nav-menu-v2 {
        display: none;
    }
    
    .hero-video-v2 {
        height: 25vh;
        padding: 0 20px;
    }
    
    .hero-overlay-v2 {
        padding: 20px 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }
    
    .hero-overlay-v2 > div {
        max-width: 1200px;
        width: 100%;
        padding: 0 20px;
    }
    
    .hero-content-v2 {
        margin-bottom: 1rem;
    }
    
    .hero-main-title-v2 {
        font-size: 2.5rem;
        white-space: normal;
    }
    
    .hero-subtitle-v2 {
        font-size: 1rem;
    }
    
    .hero-buttons-v2 {
        gap: 12px;
        align-self: flex-start;
        margin-bottom: 0;
    }
    
    .banner-v2 {
        width: 90%;
        margin-top: 1rem;
    }
    
    .banner-content-v2 {
        font-size: 12px;
    }
}

/* ===== Omnichannel.html (FEATURES 2) STYLES - V3 ===== */

/* Hero Section v3 */
.hero-section-v3 {
    padding: 120px 0 80px;
    background: #fff;
}

.hero-container-v3 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 0;
    align-items: stretch;
    height: 500px;
}

/* Hero Images v3 */
.hero-image-left-v3 {
    position: relative;
}

.hero-left-img-v3 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* Hero Right Column v3 */
.hero-right-column-v3 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hero-image-top-v3 {
    flex: 1;
    position: relative;
}

.hero-top-img-v3 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.hero-card-bottom-v3 {
    height: 40%;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 25%, #8b5cf6 75%, #a855f7 100%);
    background-size: 200% 200%;
    animation: gradientShift 7s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dunham-card-v3 {
    text-align: center;
    color: white;
}

.dunham-title-v3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    letter-spacing: 2px;
}

.dunham-logo-v3 {
    font-size: 2rem;
    font-weight: 700;
    font-family: 'LinkedIn', sans-serif;
}

/* Hero Center Content v3 */
.hero-content-center-v3 {
    text-align: center;
    background: #080808;
    color: white;
    padding: 3rem 2.5rem;
    border-radius: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.hero-welcome-v3 {
    font-size: 1rem;
    color: #ccc;
    margin-bottom: 1rem;
    font-weight: 400;
}

.hero-title-v3 {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-description-v3 {
    font-size: 1rem;
    color: #ccc;
    line-height: 1.5;
    margin-bottom: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.btn-get-started-v3 {
    background: white;
    color: #080808;
    border: none;
    padding: 14px 28px;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 2rem;
    transition: all 0.2s ease;
    align-self: center;
    width: fit-content;
}

.btn-get-started-v3:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
}

.hero-rating-v3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.rating-platform-v3 {
    font-weight: 600;
    color: white;
    font-size: 1rem;
}

.rating-stars-v3 {
    display: flex;
    gap: 2px;
}

.star-v3 {
    color: #fbbf24;
    font-size: 1.25rem;
}

.rating-text-v3 {
    color: #ccc;
    font-size: 1rem;
}

/* Scrolling Banner v3 */
.scrolling-banner-v3 {
    background: #f8f9fa;
    padding: 20px 0;
    overflow: hidden;
    margin: 40px 0;
}

.scrolling-track-v3 {
    display: flex;
    animation: scroll-v3 30s linear infinite;
    white-space: nowrap;
}

.scrolling-item-v3 {
    padding: 0 60px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #080808;
    flex-shrink: 0;
}

@keyframes scroll-v3 {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Features Section v3 */
.features-section-v3 {
    padding: 80px 0;
    background: #f8f9fa;
}

.features-container-v3 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.features-title-v3 {
    font-size: 2.5rem;
    font-weight: 400;
    text-align: center;
    line-height: 1;
    margin-bottom: 4rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.features-title-black-v3 {
    color: #080808;
    font-weight: 600;
}

.features-title-gray-v3 {
    color: #9ca3af;
    font-weight: 400;
}

.features-list-v3 {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.feature-row-v3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
   
}

.feature-image-v3 {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 25%, #8b5cf6 75%, #a855f7 100%);
    padding: 4rem;
}

.feature-img-v3 {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 16px;
}

.feature-content-v3 {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.feature-text-group-v3 {
    margin-bottom: auto;
}

.feature-title-v3 {
    font-size: 2rem;
    font-weight: 600;
    color: #080808;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.feature-description-v3 {
    color: #666;
    line-height: 1.6;
    margin-bottom: auto;
    font-size: 1.1rem;
}

.feature-btn-v3 {
    background: #080808;
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 25%;
}

.feature-btn-v3:hover {
    background: #333;
    transform: translateY(-1px);
}

/* Comparison Section v3 */
.comparison-section-v3 {
    padding: 120px 0;
    background: #f8f9fa;
}

.comparison-container-v3 {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.comparison-title-v3 {
    font-size: 0.9rem;
    font-weight: 500;
    color: #999;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comparison-subtitle-v3 {
    font-size: 3.5rem;
    font-weight: 500;
    color: #080808;
    line-height: 1.1;
    width: 70%;
    margin: auto;
    margin-bottom: 1.5rem;

}

.comparison-description-v3 {
    color: #666;
    line-height: 1.6;
    margin-bottom: 4rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1rem;
}

.comparison-table-v3 {
    background: #080808;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin-bottom: 0;
}

.comparison-header-v3 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: #080808;
    padding: 2rem 2rem 1.5rem;
    color: white;
    border-bottom: 1px solid #333;
}

.comparison-col-artifact-v3 h3,
.comparison-col-others-v3 h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.comparison-vs-v3 {
    background: white;
    color: #080808;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.comparison-row-v3 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #333;
    background: #080808;
}

.comparison-row-v3:last-child {
    border-bottom: none;
}

.comparison-artifact-side-v3,
.comparison-others-side-v3 {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.comparison-divider-v3 {
    width: 1px;
    height: 60px;
    background: #333;
}

.comparison-metric-v3 {
    font-weight: 500;
    color: #999;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.comparison-artifact-value-v3 {
    font-weight: 500;
    color: white;
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.3;
}

.comparison-others-value-v3 {
    font-weight: 500;
    color: #999;
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.3;
}

.comparison-cta-v3 {
    background: linear-gradient(135deg, #8B7A2C, #D4A574, #E68369, #B85450);
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
    margin: auto;
    padding: 2rem;
    margin-top: 1rem;
}

/* Image extension below CTA banner */
.comparison-banner-image-wrap{width:100%; margin-top:16px; border-radius:8px; overflow:hidden}
.comparison-banner-image{width:100%; height:600px; object-fit:cover; display:block}

.comparison-cta-title-v3 {
    font-size: 2rem;
    font-weight: 600;
    color: white;
}

.comparison-cta-btn-v3 {
    background: #080808;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;

}

.comparison-cta-btn-v3:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Integrations Section v3 */
.integrations-section-v3 {
    padding: 60px 0;
    background: #fff;
    text-align: center;
}

.integrations-container-v3 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.integrations-title-v3 {
    font-size: 3.5rem;
    font-weight: 500;
    color: #080808;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.integrations-description-v3 {
    color: #666;
    line-height: 1.6;
    margin-bottom: 3rem;
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.integrations-btn-v3 {
    background: #080808;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 4rem;
}

.integrations-btn-v3:hover {
    background: #333;
    transform: translateY(-2px);
}

.integrations-carousel-v3 {
    overflow: hidden;
    width: 100%;
    background: #f8f9fa;
    padding: 3rem 0;
    border-radius: 16px;
}

.carousel-track-v3 {
    display: flex;
    gap: 2rem;
    animation: scroll-integrations-infinite 30s linear infinite;
    width: fit-content;
}

.integration-logo-v3 {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.integration-logo-v3:hover {
    transform: translateY(-4px);
}

/* Brand colors for social icons in integrations carousel */
.integrations-carousel-v3 .fa-telegram {
    color: #229ED9; /* Telegram */
}

.integrations-carousel-v3 .fa-whatsapp {
    color: #25D366; /* WhatsApp */
}

.integrations-carousel-v3 .fa-instagram {
    color: #E4405F; /* Instagram primary */
}

.integrations-carousel-v3 .fa-facebook {
    color: #1877F2; /* Facebook */
}

.integrations-carousel-v3 .fa-earth-americas {
    color: #111827; /* Web */
}

@keyframes scroll-integrations-infinite {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-82px * 9 - 2rem * 9));
    }
}

/* Roadmap Section v3 */
.roadmap-section-v3 {
    padding: 120px 0;
    background: #f8f9fa;
    scroll-margin-top: 96px; /* avoid overlap with fixed header on anchor jumps */
}

.roadmap-container-v3 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.roadmap-left-v3 {
    position: sticky;
    top: 96px; /* keep left header clear of top bar while scrolling */
}

.roadmap-header-v3 {
    text-align: left;
}

.roadmap-subtitle-v3 {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.roadmap-title-v3 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #080808;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.roadmap-description-v3 {
    color: #666;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
}

.roadmap-btn-v3 {
    background: #080808;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.roadmap-btn-v3:hover {
    background: #333;
    transform: translateY(-2px);
}

.roadmap-right-v3 {
    position: relative;
}

.roadmap-timeline-v3 {
    position: relative;
}

.roadmap-timeline-v3::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}

/* Animated progress line */
.roadmap-line-progress {
    position: absolute;
    left: 12px;
    top: 24px;
    width: 2px;
    height: 0;
    background: #080808;
    transition: height 0.3s ease-out;
    z-index: 1;
}

.roadmap-item-v3 {
    position: relative;
    padding-left: 3rem;
    margin-bottom: 3rem;
}

.roadmap-indicator-v3 {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roadmap-check-v3 {
    background: #080808;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    animation: checkmarkPop 0.3s ease-out;
    z-index: 2;
}

@keyframes checkmarkPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.roadmap-dot-v3 {
    background: #d1d5db;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.roadmap-content-v3 {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.roadmap-period-v3 {
    color: #999;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.roadmap-item-title-v3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #080808;
    margin-bottom: 1rem;
}

.roadmap-item-description-v3 {
    color: #666;
    line-height: 1.6;
    font-size: 1rem;
}

.roadmap-item-description-v3:last-child {
    margin-bottom: 0;
}

.roadmap-item-btn-v3 {
    background: #f3f4f6;
    color: #374151;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.roadmap-item-btn-v3:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
}

/* Support Section v3 */
.support-section-v3 {
    padding: 120px 0;
    background: #fff;
}

.support-container-v3 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
}

.support-left-v3 {
    text-align: left;
}

.support-icon-v3 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.icon-grid-v3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 24px;
    height: 24px;
}

.icon-dot-v3 {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}

.support-title-v3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #080808;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.support-rating-v3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.support-rating-platform-v3 {
    font-weight: 600;
    color: #080808;
    font-size: 1rem;
}

.support-rating-stars-v3 {
    display: flex;
    gap: 2px;
}

.support-star-v3 {
    color: #fbbf24;
    font-size: 1rem;
}

.support-rating-text-v3 {
    color: #666;
    font-size: 0.9rem;
}

.support-right-v3 {
    display: grid;
    gap: 1.5rem;
}

.support-card-v3 {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    height: 160px;
}

.support-card-image-v3 {
    height: 100%;
    overflow: hidden;
}

.support-img-v3 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.support-card-content-v3 {
    padding: 1.5rem 2rem;
}

.support-card-text-v3 {
    color: #374151;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.support-card-text-v3 strong {
    color: #080808;
    font-weight: 600;
}

.support-card-btn-v3 {
    background: #f8f9fa;
    color: #374151;
    border: 1px solid #e5e7eb;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.support-card-btn-v3:hover {
    background: #f1f3f4;
    transform: translateY(-1px);
}

/* Final Testimonial Section v3 */
.final-testimonial-section-v3 {
    padding: 80px 0;
    background: #f8f9fa;
    text-align: center;
}

.final-testimonial-container-v3 {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.final-testimonial-header-v3 {
    margin-bottom: 3rem;
}

.final-testimonial-title-v3 {
    font-size: 3rem;
    font-weight: 700;
    color: #080808;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.final-testimonial-rating-v3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.final-rating-platform-v3 {
    font-weight: 600;
    color: #080808;
    font-size: 1rem;
}

.final-rating-stars-v3 {
    display: flex;
    gap: 2px;
}

.final-star-v3 {
    color: #fbbf24;
    font-size: 1.25rem;
}

.final-rating-text-v3 {
    color: #666;
    font-size: 1rem;
}

.final-testimonial-card-v3 {
    background: white;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.final-testimonial-content-v3 {
    margin-bottom: 2rem;
}

.final-testimonial-quote-v3 {
    font-size: 1.25rem;
    color: #080808;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-style: italic;
}

.final-testimonial-author-v3 {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.final-author-avatar-v3 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.final-author-name-v3 {
    font-weight: 600;
    color: #080808;
    margin-bottom: 0.25rem;
}

.final-author-title-v3 {
    color: #666;
    font-size: 0.9rem;
}

.final-testimonial-cta-v3 {
    text-align: center;
}

.buy-artifact-btn-v3 {
    background: #080808;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.buy-artifact-btn-v3:hover {
    background: #333;
    transform: translateY(-1px);
}

/* Responsive Design for v3 */
@media (max-width: 768px) {
    .hero-container-v3 {
        grid-template-columns: 1fr;
        gap: 0;
        height: auto;
    }

    .hero-image-left-v3,
    .hero-right-column-v3 {
        order: 2;
        height: 250px;
    }

    .hero-right-column-v3 {
        flex-direction: row;
    }

    .hero-image-top-v3 {
        flex: 1;
        height: 100%;
    }

    .hero-card-bottom-v3 {
        height: 100%;
        width: 40%;
    }

    .hero-content-center-v3 {
        order: 1;
        padding: 3rem 2rem;
        height: auto;
        min-height: 400px;
    }

    .hero-left-img-v3,
    .hero-top-img-v3 {
        height: 100%;
    }

    .hero-title-v3 {
        font-size: 2.2rem;
    }

    .hero-description-v3 {
        font-size: 0.95rem;
        max-width: 350px;
    }
    
    .features-title-v3 {
        font-size: 2.2rem;
    }
    
    .comparison-subtitle-v3,
    .integrations-title-v3,
    .roadmap-title-v3,
    .support-title-v3,
    .final-testimonial-title-v3 {
        font-size: 2.5rem;
    }

    .roadmap-section-v3 {
        padding: 80px 0;
    }

    .roadmap-container-v3 {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .roadmap-left-v3 {
        position: static;
    }

    .roadmap-header-v3 {
        text-align: center;
        margin-bottom: 2rem;
    }

    .roadmap-timeline-v3::before {
        left: 8px;
    }
    
    .roadmap-line-progress {
        left: 8px;
    }

    .roadmap-item-v3 {
        padding-left: 2.5rem;
    }

    .integrations-section-v3 {
        padding: 40px 0;
    }

    .integrations-carousel-v3 {
        padding: 2rem 0;
    }

    .integration-logo-v3 {
        width: 60px;
        height: 60px;
    }

    .carousel-track-v3 {
        gap: 1.5rem;
        animation: scroll-integrations-infinite-mobile 25s linear infinite;
    }

    @keyframes scroll-integrations-infinite-mobile {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-62px * 9 - 1.5rem * 9));
        }
    }
    
    .feature-row-v3 {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }
    
    .feature-image-v3 {
        order: 1;
    }
    
    .feature-content-v3 {
        order: 2;
        padding: 1rem 0;
    }
    
    .feature-img-v3 {
        height: 400px;
    }
    
    .feature-title-v3 {
        font-size: 1.5rem;
    }
    
    .support-container-v3 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .support-left-v3 {
        text-align: center;
    }

    .support-title-v3 {
        font-size: 2rem;
    }

    .support-card-v3 {
        grid-template-columns: 1fr;
        height: auto;
    }

    .support-card-image-v3 {
        height: 200px;
    }

    .support-card-content-v3 {
        padding: 1.5rem;
    }
    
    .comparison-header-v3,
    .comparison-row-v3 {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1rem;
    }
    
    .comparison-vs-v3 {
        order: -1;
    }
    
    .support-cards-v3 {
        grid-template-columns: 1fr;
    }
    
    .final-testimonial-card-v3 {
        padding: 2rem;
    }
    
    .scrolling-item-v3 {
        padding: 0 30px;
        font-size: 1.25rem;
    }
}

/* Streamline Operations Section v4 */
.streamline-section-v4 {
    padding: 0;
    background: #fff;
}

.streamline-container-v4 {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.streamline-image-v4 {
    position: relative;
}

.streamline-img-v4 {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
}

.streamline-content-v4 {
    padding-left: 2rem;
}

.streamline-title-v4 {
    font-size: 3rem;
    font-weight: 500;
    color: #000000;
    line-height: 1.1;
    margin-bottom: 2rem;
}

.streamline-description-v4 {
    font-size: 1.125rem;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    width: 90%;
}

.streamline-btn-v4 {
    background: #000000;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.streamline-btn-v4:hover {
    background: #333;
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .streamline-container-v4 {
        gap: 3rem;
    }
    
    .streamline-title-v4 {
        font-size: 3rem;
    }
    
    .streamline-content-v4 {
        padding-left: 1rem;
    }
}

@media (max-width: 768px) {
    .streamline-section-v4 {
        padding: 80px 0;
    }
    
    .streamline-container-v4 {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
    
    .streamline-img-v4 {
        height: 400px;
    }
    
    .streamline-content-v4 {
        padding-left: 0;
    }
    
    .streamline-title-v4 {
        font-size: 2.5rem;
    }
    
    .streamline-description-v4 {
        max-width: 100%;
    }
}

/* Statistics Section v4 */
.statistics-section-v4 {
    padding: 0;
    background: #fff;
}

.statistics-container-v4 {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.statistics-card-v4 {
    background: #000000;
    padding: 3rem 2rem;
    border-radius: 16px;
    color: white;
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* Optional image background for statistics card */
.statistics-card-v4 .statistics-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.25; /* keep text readable */
}

.statistics-card-v4 > *:not(.statistics-bg) {
    position: relative;
    z-index: 1;
}

.statistics-percentage-v4 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1rem;
}

.statistics-text-v4 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    max-width: 300px;
}

.statistics-companies-v4 {
    padding-left: 2rem;
}

.companies-title-v4 {
    font-size: 1.125rem;
    color: #000000;
    margin-bottom: 2rem;
    font-weight: 500;
}

.companies-logos-v4 {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    align-items: center;
}

.company-logo-item-v4 {
    font-size: 1.125rem;
    color: #000000;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gridpoint-icon-v4 {
    background: #000000;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.companies-rating-v4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.companies-rating-platform-v4 {
    font-weight: 600;
    color: #000000;
    font-size: 1rem;
}

.companies-rating-stars-v4 {
    display: flex;
    gap: 2px;
}

.companies-star-v4 {
    color: #fbbf24;
    font-size: 1rem;
}

.companies-rating-text-v4 {
    color: #666;
    font-size: 0.9rem;
}

@media (max-width: 1024px) {
    .statistics-container-v4 {
        gap: 3rem;
    }
    
    .statistics-percentage-v4 {
        font-size: 3.5rem;
    }
    
    .statistics-text-v4 {
        font-size: 1.25rem;
    }
    
    .statistics-companies-v4 {
        padding-left: 1rem;
    }
}

@media (max-width: 768px) {
    .statistics-section-v4 {
        padding: 80px 0;
    }
    
    .statistics-container-v4 {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .statistics-card-v4 {
        padding: 2.5rem 2rem;
        text-align: center;
    }
    
    .statistics-percentage-v4 {
        font-size: 3rem;
    }
    
    .statistics-text-v4 {
        font-size: 1.125rem;
        max-width: 100%;
    }
    
    .statistics-companies-v4 {
        padding-left: 0;
        text-align: center;
    }
    
    .companies-logos-v4 {
        justify-content: center;
        gap: 1.5rem;
    }
    
    .companies-rating-v4 {
        justify-content: center;
    }
}

/* Finished Product Section v4 */
.finished-product-section-v4 {
    padding: 120px 0;
    background: #f8f9fa;
}

.finished-product-container-v4 {
    
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.finished-product-title-v4 {
    font-size: 3.5rem;
    font-weight: 500;
    color: #000000;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.finished-product-description-v4 {
    font-size: 1.25rem;
    color: #000000;
    line-height: 1.6;
    font-weight: 400;
}

@media (max-width: 1024px) {
    .finished-product-title-v4 {
        font-size: 3rem;
    }
    
    .finished-product-description-v4 {
        font-size: 1.125rem;
    }
}

@media (max-width: 768px) {
    .finished-product-section-v4 {
        padding: 80px 0;
    }
    
    .finished-product-container-v4 {
        padding: 0 1rem;
    }
    
    .finished-product-title-v4 {
        font-size: 2.5rem;
    }
    
    .finished-product-description-v4 {
        font-size: 1rem;
    }
}

/* Agents for Anything Section v4 */
.agents-section-v4 {
    padding: 120px 0;
    background: #f0f0f0;
}

.agents-container-v4 {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.8fr;
    gap: 3rem;
    align-items: start;
}

.agents-content-v4 {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.agents-label-v4 {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
    font-weight: 500;
}

.agents-title-v4 {
    font-size: 2.5rem;
    font-weight: 500;
    color: #000000;
    line-height: 1.3;
    margin-bottom: 2rem;
}

.agents-title-gray-v4 {
    color: #888;
}

.agents-btn-v4 {
    background: #000000;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.agents-btn-v4:hover {
    background: #333;
    transform: translateY(-1px);
}

.agents-dashboard-v4 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-card-v4 {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

.dashboard-header-v4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.dashboard-title-v4 {
    font-weight: 600;
    color: #000;
}

.dashboard-actions-v4 {
    display: flex;
    gap: 0.5rem;
}

.dashboard-icon-v4 {
    cursor: pointer;
    padding: 0.25rem;
}

.dashboard-status-v4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.status-indicator-v4 {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
}

.status-text-v4 {
    color: #000;
    font-weight: 500;
}

.dashboard-description-v4 {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.dashboard-details-v4 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-row-v4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-row-v4:last-child {
    border-bottom: none;
}

.detail-label-v4 {
    color: #666;
    font-size: 0.85rem;
    font-weight: 500;
}

.detail-value-v4 {
    color: #000;
    font-size: 0.85rem;
}

.detail-icon-v4 {
    margin-left: 0.5rem;
}

.owners-list-v4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.owner-avatar-v4 {
    width: 24px;
    height: 24px;
    background: #333;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

.invite-text-v4 {
    color: #666;
    font-size: 0.8rem;
    cursor: pointer;
}

.agents-sidebar-v4 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.pricing-card-v4 {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.pricing-header-v4 {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.pricing-amount-v4 {
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0.5rem;
}

.pricing-period-v4 {
    font-size: 1rem;
    font-weight: 400;
    color: #666;
}

.pricing-renewal-v4 {
    color: #666;
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.pricing-actions-v4 {
    display: flex;
    gap: 0.75rem;
}

.upgrade-btn-v4 {
    background: #000;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    flex: 1;
}

.cancel-btn-v4 {
    background: transparent;
    color: #666;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

.neural-card-v4 {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.neural-title-v4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 0.75rem;
}

.neural-description-v4 {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .agents-container-v4 {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
    
    .agents-title-v4 {
        font-size: 2.2rem;
    }
    
    .dashboard-card-v4 {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .agents-section-v4 {
        padding: 80px 0;
    }
    
    .agents-container-v4 {
        gap: 2rem;
    }
    
    .agents-title-v4 {
        font-size: 1.8rem;
    }
    
    .dashboard-card-v4 {
        max-width: 100%;
    }
    
    .pricing-actions-v4 {
        flex-direction: column;
    }
}

/* Our Customers Section */
.customers-section {
    background: #ffffff;
    padding: 80px 0 40px 0;
}

.customers-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.customers-title {
    font-size: 48px;
    font-weight: 500;
    color: #000;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.customers-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rating-platform {
    
    color: #2a2a2a;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.rating-stars {
    display: flex;
    gap: 1px;
}

.rating-stars .star {
    color: #fbbf24;
    font-size: 14px;
}

.rating-text {
    color: #6b7280;
    font-size: 14px;
    font-weight: 400;
}

@media (max-width: 768px) {
    .customers-section {
        padding: 60px 0 30px 0;
    }
    
    .customers-title {
        font-size: 40px;
        margin-bottom: 12px;
    }
    
    .customers-rating {
        gap: 6px;
    }
}

/* Customer Testimonials Grid Section */
.customer-testimonials-grid-section {
    background: #ffffff;
    padding: 40px 0 40px 0;
}

.customer-testimonials-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.testimonials-grid-layout {
    display: flex;
    gap: 0;
    height: 520px;
}

.left-column,
.right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Left Column: small top, large bottom */
.left-column .lucident-card {
    flex: 1;
}

.left-column .consumer-retail {
    flex: 2;
}

/* Right Column: large top, small bottom */
.right-column .finance {
    flex: 2;
}

.right-column .invarion-card {
    flex: 1;
}

.testimonial-card-custom {
    overflow: hidden;
    position: relative;
}

/* Text Cards (Lucident & Invarion) */
.lucident-card,
.invarion-card {
    background: #000000;
    color: white;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.company-name {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: white;
}

/* Force white text and icon in testimonials grid (index5) */
.customer-testimonials-grid-section .company-name {
    color: #ffffff;
}
.customer-testimonials-grid-section .arrow-icon {
    color: #ffffff; /* SVG uses currentColor for stroke */
    background: rgba(255, 255, 255, 0.12);
}

/* 50% larger company name variant for specific cases (e.g., IA.html) */
.customer-testimonials-grid-section .company-name.company-name-lg {
    font-size: 27px; /* reduced 25% from 36px */
}

@media (max-width: 768px) {
    .customer-testimonials-grid-section .company-name.company-name-lg {
        font-size: 22.5px; /* reduced 25% from 30px */
    }
}

.arrow-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.company-location {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 20px 0;
}

.testimonial-description {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Image Cards */
.image-card {
    position: relative;
    overflow: hidden;
}

.testimonial-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .customer-testimonials-grid-section {
        padding: 24px 0 30px 0;
    }
    
    .testimonials-grid-layout {
        flex-direction: column;
        height: auto;
    }
    
    .left-column,
    .right-column {
        margin-bottom: 0;
    }
    
    .testimonial-card-custom {
        height: 280px;
        margin-bottom: 0;
    }
    
    .lucident-card,
    .invarion-card {
        padding: 24px;
    }
    
    .company-name {
        font-size: 20px;
    }
    
    .testimonial-description {
        font-size: 14px;
    }
}

/* Featured Testimonial Section */
.featured-testimonial-section {
    background: #ffffff;
    padding: 60px 0 120px 0;
}

.featured-testimonial-container {
width: 60%;    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.featured-testimonial-quote {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 400;
    color: #000;
    margin: 0 0 60px 0;
    font-style: normal;
}

.featured-testimonial-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.featured-author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.featured-author-info {
    text-align: center;
}

.featured-author-name {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
}

.featured-author-title {
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
}

@media (max-width: 768px) {
    .featured-testimonial-section {
        padding: 40px 0 80px 0;
    }
    
    .featured-testimonial-container {
        padding: 0 20px;
    }
    
    .featured-testimonial-quote {
        font-size: 28px;
        margin-bottom: 40px;
    }
    
    .featured-author-avatar {
        width: 50px;
        height: 50px;
    }
    
    .featured-author-name {
        font-size: 15px;
    }
    
    .featured-author-title {
        font-size: 13px;
    }
}

/* Company Case Studies Section */
.company-case-studies-section {
    background: #ffffff;
    padding: 8px 0;
}

.company-case-studies-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

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

.case-study-column {
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: 520px;
    border-radius: 4px;
    overflow: hidden;
}

.case-study-card-text {
    flex: 1;
    background: #000000;
    color: white;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0;
    transition: all 0.4s ease;
    min-height: 0; /* allow equal split with grid */
}

.case-study-card-text:hover {
    background-image: url('Assets/bgcards.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.case-study-card-text:hover .case-study-arrow-icon {
    background: black;
    color: white;
}

.case-study-card-image {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0; /* allow equal split with grid */
}

.case-study-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2px;
}

.case-study-company-name {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: white;
    transition: color 0.4s ease;
}


.case-study-arrow-icon {
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    flex-shrink: 0;
    transition: all 0.4s ease;
}


.case-study-location {
    font-size: 12px;
    color: #9ca3af;
    margin: 0 0 16px 0;
}

.case-study-description {
    font-size: 14px;
    line-height: 1.4;
    color: #ffffff;
    margin: 0;
    transition: color 0.4s ease;
}


.case-study-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-study-category-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .case-studies-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .case-study-column {
        height: 400px;
        margin-bottom: 0;
        grid-template-rows: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .company-case-studies-section {
        padding: 5px 0;
    }
    
    .case-study-column {
        height: 360px;
        grid-template-rows: 1fr 1fr;
    }
    
    .case-study-card-text {
        padding: 24px;
    }
    
    .case-study-company-name {
        font-size: 18px;
    }
    
    .case-study-description {
        font-size: 13px;
    }
}

/* Contact Hero Section */
.contact-hero-section {
    background: #ffffff;
    padding: 100px 0;
    text-align: center;
}

.contact-hero-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

.contact-hero-label {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.contact-hero-title {
    font-size: 48px;
    font-weight: 600;
    color: #000;
    margin: 0 0 24px 0;
    line-height: 1.2;
}

.contact-hero-description {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    margin: 0;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .contact-hero-section {
        padding: 80px 0;
    }
    
    .contact-hero-title {
        font-size: 36px;
        margin-bottom: 20px;
    }
    
    .contact-hero-description {
        font-size: 16px;
    }
    
    .contact-hero-label {
        font-size: 13px;
        margin-bottom: 12px;
    }
}

/* Contact Info Section */
.contact-info-section {
    padding: 80px 0;
    background: #ffffff;
}

.contact-info-container {
   width: 70%;
    margin: 0 auto;
    padding: 0.3rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #8B5A2B 0%, #FF6B35 30%, #E91E63 70%, #8B5CF6 100%);
}

.contact-info-card {
    display: flex;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    
    
}

.contact-info-image {
    flex: 1;
    min-height: 400px;
}

.hq-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-info-details {
    flex: 1;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.contact-info-title {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.contact-info-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: #9ca3af;
    margin: 0 0 32px 0;
    line-height: 1.4;
}

.contact-info-address {
    margin-bottom: 24px;
}

.contact-info-address p {
    font-size: 16px;
    font-weight: 400;
    color: #6b7280;
    margin: 0 0 4px 0;
    line-height: 1.5;
}

.contact-info-phone p {
    font-size: 16px;
    font-weight: 400;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .contact-info-section {
        padding: 60px 0;
    }
    
    .contact-info-card {
        flex-direction: column;
    }
    
    .contact-info-image {
        min-height: 250px;
    }
    
    .contact-info-details {
        padding: 40px 30px;
    }
    
    .contact-info-title {
        font-size: 28px;
    }
    
    .contact-info-subtitle {
        font-size: 18px;
    }
}

/* Support and Sales Section */
.support-sales-section {
    padding: 80px 0;
    background: #ffffff;
}

.support-sales-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.support-sales-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    max-width: 800px;
    margin: 0 auto;
}

.support-column,
.sales-column {
    text-align: left;
}

.support-sales-title {
    font-size: 24px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.support-sales-email {
    font-size: 16px;
    font-weight: 400;
    color: #6b7280;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.support-sales-description {
    font-size: 16px;
    font-weight: 400;
    color: #9ca3af;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .support-sales-section {
        padding: 60px 0;
    }
    
    .support-sales-grid {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }
    
    .support-column,
    .sales-column {
        text-align: center;
    }
    
    .support-sales-title {
        font-size: 22px;
    }
}

/* Contact Form Section */
.contact-form-section {
    padding: 80px 0;
    background: #ffffff;
}

.contact-form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-form-card {
    background: #f9f9f7;
    border-radius: 12px;
    padding: 48px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.contact-form-title {
    font-size: 24px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 32px 0;
    line-height: 1.2;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    line-height: 1.4;
}

.form-input,
.form-textarea,
.form-select {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: #6b7280;
}

.form-input::placeholder {
    color: #9ca3af;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.form-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
    appearance: none;
}

.form-helper-text {
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
    margin: 4px 0 0 0;
    line-height: 1.4;
}

.form-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.form-checkbox {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #000000;
}

.checkbox-label {
    font-size: 14px;
    font-weight: 400;
    color: #374151;
    line-height: 1.4;
}

.terms-link {
    color: #000000;
    text-decoration: underline;
}

.terms-link:hover {
    color: #374151;
}

.submit-button {
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 8px;
}

.submit-button:hover {
    background: #1f2937;
}

@media (max-width: 768px) {
    .contact-form-section {
        padding: 60px 0;
    }
    
    .contact-form-card {
        padding: 32px 24px;
    }
    
    .contact-form-title {
        font-size: 22px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .form-input,
    .form-textarea,
    .form-select {
        font-size: 16px;
    }
}

/* Seamless Integrations Section */
.integrations-section {
    background: #f8f6f2;
    padding: 80px 0;
    margin: 0;
}

.integrations-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.integrations-left {
    background: #f8f6f2;
}

.integrations-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.integrations-tagline {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.integrations-title {
    font-size: 48px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.1;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.integrations-description {
    font-size: 18px;
    font-weight: 400;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.integrations-cta {
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    align-self: flex-start;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.integrations-cta:hover {
    background: #333333;
}

.integrations-right {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 40px;
    overflow: hidden;
}

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 100%;
}

.integration-icon {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.integration-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .integrations-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .integrations-title {
        font-size: 36px;
    }
    
    .integrations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .integrations-section {
        padding: 60px 0;
    }
    
    .integrations-container {
        padding: 0 16px;
    }
    
    .integrations-title {
        font-size: 28px;
    }
    
    .integrations-description {
        font-size: 16px;
    }
    
    .integrations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .integration-icon {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .integrations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .integration-icon {
        padding: 12px;
    }
    
    .integration-icon i {
        font-size: 1.5rem !important;
    }
}

/* How It Works Section */
.how-it-works-section {
    background: #f8f6f2;
    padding: 80px 0;
    margin: 0;
}

.how-it-works-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.how-it-works-header {
    text-align: center;
    margin-bottom: 60px;
}

.how-it-works-tagline {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    display: block;
}

.how-it-works-title {
    font-size: 48px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
    margin: 0 0 24px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.how-it-works-description {
    font-size: 18px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.how-it-works-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 60px;
}

.step-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.step-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #1f2937;
}

.step-dots-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 2px;
    width: 32px;
    height: 32px;
}

.step-dot {
    width: 4px;
    height: 4px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.8;
}

.step-dot-hidden {
    opacity: 0;
}

.step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.step-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 16px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.3;
}

.step-description {
    font-size: 16px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 24px 0;
    flex: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.step-cta {
    background: transparent;
    color: #1f2937;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin-top: auto;
    text-align: left;
    padding-left: 0;
}

.step-cta:hover {
    color: #000000;
}

/* First step card has black button */
.step-card:first-child .step-cta {
    background: #000000;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 6px;
}

.step-card:first-child .step-cta:hover {
    background: #333333;
    color: #ffffff;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .how-it-works-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .how-it-works-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .how-it-works-section {
        padding: 60px 0;
    }
    
    .how-it-works-container {
        padding: 0 16px;
    }
    
    .how-it-works-title {
        font-size: 28px;
    }
    
    .how-it-works-description {
        font-size: 16px;
    }
    
    .how-it-works-steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .step-card {
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .how-it-works-title {
        font-size: 24px;
    }
    
    .step-card {
        padding: 20px;
    }
    
    .step-icon {
        width: 40px;
        height: 40px;
    }
    
    .step-dots-container {
        width: 28px;
        height: 28px;
    }
}

/* Streamline Operations Section */
.streamline-operations-section {
    background: #ffffff;
    padding: 120px 0;
    margin: 0;
}

.streamline-operations-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.streamline-operations-left {
    position: relative;
}

.image-stack-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.top-image-card {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.top-image-card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.bottom-stats-card {
    width: 100%;
    background: linear-gradient(135deg, #ff6b35 0%, #8b5a3c 40%, #6b46c1 100%);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.stats-content {
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.stats-number-large {
    font-size: 80px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    flex-shrink: 0;
}

.stats-text-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats-line {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.2;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.streamline-operations-right {
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.streamline-main-title {
    font-size: 52px;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.1;
    margin: 0 0 24px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -0.01em;
}

.streamline-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.5;
    margin: 0 0 32px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.streamline-get-started-btn {
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin-bottom: 40px;
    display: inline-block;
    align-self: flex-start;
}

.streamline-get-started-btn:hover {
    background: #2d3748;
    transform: translateY(-1px);
}

.streamline-companies-section {
    margin-top: 0;
}

.companies-text {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    margin: 0 0 16px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.companies-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.company-name {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.company-with-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.company-with-icon svg {
    color: #374151;
    width: 14px;
    height: 14px;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.g2-text {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.stars-container {
    display: flex;
    gap: 1px;
}

.rating-star {
    color: #fbbf24;
    font-size: 14px;
}

.reviews-count {
    font-size: 14px;
    color: #6b7280;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .streamline-operations-container {
        max-width: 1200px;
        gap: 60px;
    }
    
    .streamline-main-title {
        font-size: 48px;
    }
    
    .top-image-card img {
        height: 360px;
    }
}

@media (max-width: 1024px) {
    .streamline-operations-container {
        grid-template-columns: 1fr;
        gap: 60px;
        padding: 0 32px;
    }
    
    .streamline-operations-right {
        padding-left: 0;
        text-align: center;
    }
    
    .streamline-main-title {
        font-size: 42px;
    }
    
    .streamline-subtitle {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .streamline-operations-section {
        padding: 80px 0;
    }
    
    .streamline-operations-container {
        padding: 0 24px;
    }
    
    .streamline-main-title {
        font-size: 36px;
    }
    
    .streamline-subtitle {
        font-size: 16px;
    }
    
    .top-image-card img {
        height: 300px;
    }
    
    .stats-number-large {
        font-size: 60px;
    }
    
    .stats-line {
        font-size: 18px;
    }
    
    .stats-content {
        padding: 32px 24px;
        gap: 24px;
    }
}

@media (max-width: 480px) {
    .streamline-main-title {
        font-size: 28px;
    }
    
    .top-image-card img {
        height: 250px;
    }
    
    .stats-number-large {
        font-size: 48px;
    }
    
    .stats-line {
        font-size: 16px;
    }
    
    .stats-content {
        padding: 24px 16px;
        gap: 20px;
    }
    
    .companies-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .rating-row {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Advanced Frameworks Section */
.advanced-frameworks-section {
    background: #fafafa;
    padding: 80px 0;
    margin: 0;
}

.advanced-frameworks-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.advanced-frameworks-header {
    text-align: center;
    margin-bottom: 60px;
}

.advanced-frameworks-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 32px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1f2937;
}

.title-bold {
    color: #1f2937;
}

.title-light {
    color: #6b7280;
    font-weight: 400;
}

.advanced-frameworks-cta {
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.advanced-frameworks-cta:hover {
    background: #333333;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.advanced-frameworks-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 60px;
}

.framework-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.framework-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.framework-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.framework-card:nth-child(1) .framework-icon {
    background: linear-gradient(135deg, #dc2626 0%, #7c3aed 100%);
}

.framework-card:nth-child(2) .framework-icon {
    background: linear-gradient(135deg, #ea580c 0%, #a16207 100%);
}

.framework-card:nth-child(3) .framework-icon {
    background: linear-gradient(135deg, #ea580c 0%, #65a30d 100%);
}

.icon-dots-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 2px;
    width: 32px;
    height: 32px;
}

.icon-dot {
    width: 4px;
    height: 4px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.8;
}

.framework-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 16px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.framework-description {
    font-size: 16px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .advanced-frameworks-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .advanced-frameworks-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .advanced-frameworks-section {
        padding: 60px 0;
    }
    
    .advanced-frameworks-container {
        padding: 0 16px;
    }
    
    .advanced-frameworks-title {
        font-size: 28px;
    }
    
    .advanced-frameworks-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .framework-card {
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .advanced-frameworks-title {
        font-size: 24px;
    }
    
    .framework-card {
        padding: 20px;
    }
    
    .framework-icon {
        width: 40px;
        height: 40px;
    }
    
    .icon-dots-container {
        width: 28px;
        height: 28px;
    }
}

/* API Section */
.api-section {
    background: #0a0a0a;
    color: #ffffff;
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.api-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.api-main-title {
    font-size: 3.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    color: #ffffff;
    line-height: 1.2;
}

/* API Selectors */
.api-selectors {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 80px;
    flex-wrap: wrap;
}

.api-selector {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.api-selector:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

.api-selector.active {
    background: rgba(255, 255, 255, 0.9);
    color: #0a0a0a;
    border-color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

/* API Content */
.api-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Left Column */
.api-left-column {
    position: relative;
}

.api-content-item {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.api-content-item.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.api-content-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #ffffff;
    line-height: 1.2;
}

.api-content-description {
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 32px;
}

.api-more-info {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.api-more-info:hover {
    color: #ffffff;
    transform: translateX(5px);
}

/* Right Column */
.api-right-column {
    position: relative;
}

.api-code-container {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.3);
    position: relative;
    overflow: hidden;
}

.api-code-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 50%, 
        rgba(255, 255, 255, 0.1) 100%);
    pointer-events: none;
}

.api-code-block {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 32px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.code-line {
    display: flex;
    align-items: center;
    min-height: 24px;
}

.line-number {
    color: #64748b;
    font-size: 0.85rem;
    width: 32px;
    text-align: right;
    margin-right: 24px;
    user-select: none;
    flex-shrink: 0;
}

/* Code Syntax Highlighting */
.code-import, .code-const, .code-await, .code-new {
    color: #7c3aed;
    font-weight: 600;
}

.code-module {
    color: #059669;
    font-weight: 600;
}

.code-from {
    color: #7c3aed;
}

.code-string {
    color: #dc2626;
}

.code-variable {
    color: #1565c0;
}

.code-method {
    color: #c2185b;
}

.code-property {
    color: #1565c0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .api-content {
        gap: 60px;
    }
    
    .api-main-title {
        font-size: 3rem;
    }
    
    .api-content-title {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .api-section {
        padding: 60px 0;
    }
    
    .api-container {
        padding: 0 20px;
    }
    
    .api-main-title {
        font-size: 2.2rem;
        margin-bottom: 40px;
    }
    
    .api-selectors {
        gap: 8px;
        margin-bottom: 50px;
    }
    
    .api-selector {
        font-size: 0.9rem;
        padding: 10px 18px;
    }
    
    .api-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .api-content-title {
        font-size: 2rem;
    }
    
    .api-content-description {
        font-size: 1.1rem;
    }
    
    .api-code-container {
        padding: 24px;
    }
    
    .api-code-block {
        padding: 20px;
        font-size: 0.85rem;
    }
    
    .line-number {
        width: 24px;
        margin-right: 16px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .api-selectors {
        flex-direction: column;
        align-items: center;
    }
    
    .api-selector {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
    
    .api-main-title {
        font-size: 1.8rem;
    }
    
    .api-content-title {
        font-size: 1.6rem;
    }
}

/* GPT Models Cards Section */
.gpt-models-section {
    background: transparent;
    padding: 80px 0;
}

.gpt-models-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.gpt-models-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.gpt-model-card {
    position: relative;
    border-radius: 24px;
    padding: 60px 40px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s ease;
}

.gpt-120b-card {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 30%, #8b5cf6 70%, #a855f7 100%);
}

.gpt-20b-card {
    background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 30%, #ddd6fe 70%, #e0e7ff 100%);
}

.card-decorative-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.decorative-curve {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.gpt-model-content {
    position: relative;
    z-index: 2;
}

.gpt-model-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 24px 0;
    line-height: 1.2;
}

.gpt-model-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0 0 32px 0;
    max-width: 280px;
}

.gpt-model-button {
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    border: none;
    border-radius: 50px;
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.gpt-20b-card:hover .gpt-model-button {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.gpt-model-button:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.gpt-model-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .gpt-models-section {
        padding: 60px 0;
    }
    
    .gpt-models-container {
        padding: 0 20px;
    }
    
    .gpt-models-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .gpt-model-card {
        padding: 40px 30px;
        height: 350px;
    }
    
    .gpt-model-title {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .gpt-model-description {
        font-size: 1rem;
        margin-bottom: 24px;
    }
    
    .gpt-model-button {
        padding: 14px 28px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .gpt-model-card {
        padding: 30px 24px;
        height: 320px;
    }
    
    .gpt-model-title {
        font-size: 1.8rem;
    }
    
    .gpt-model-description {
        font-size: 0.95rem;
    }
}

/* Individual Section Margins - 15% each side */
.section-margin-15 {
    max-width: 70%;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 1200px) {
    .section-margin-15 {
        max-width: 80%;
    }
}

@media (max-width: 768px) {
    .section-margin-15 {
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .section-margin-15 {
        max-width: 95%;
    }
}

/* Asymmetric Section Margins - Double left margin */
.section-margin-asymmetric {
    max-width: 70%;
    margin: 0 10% 0 20%;
    width: 100%;
}

@media (max-width: 1200px) {
    .section-margin-asymmetric {
        max-width: 75%;
        margin: 0 8% 0 16%;
    }
}

@media (max-width: 768px) {
    .section-margin-asymmetric {
        max-width: 80%;
        margin: 0 6% 0 12%;
    }
}

@media (max-width: 480px) {
    .section-margin-asymmetric {
        max-width: 90%;
        margin: 0 3% 0 6%;
    }
}