/* ======================================================
   RESET
====================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Manrope','Inter',sans-serif;
text-decoration:none;
}

*, *::before, *::after {
box-sizing:border-box;
}

img, svg, canvas {
max-width:100%;
height:auto;
display:block;
}

html{
scroll-behavior:smooth;
-webkit-tap-highlight-color:transparent;
}

body{
background:#0a0a0a;
color:white;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

/* ======================================================
   MOUSE SPOTLIGHT
====================================================== */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
background:radial-gradient(
400px circle at var(--mouse-x) var(--mouse-y),
rgba(22,178,171,0.15),
transparent 40%);
z-index:0;
}

/* ======================================================
   PARTICLES CANVAS
====================================================== */

#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:-1;
}

/* ======================================================
   PRELOADER
====================================================== */

#preloader{
position:fixed;
inset:0;
background:#0a0a0a;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
transition:opacity .7s ease, visibility .7s ease;
}

/* Ambient radial behind everything */
#preloader::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(22,178,171,.06), transparent 70%);
pointer-events:none;
}

.preloader-inner{
display:flex;
flex-direction:column;
align-items:center;
position:relative;
}

/* Fixed-size box that holds logo + rings + scan — nothing outside shifts */
.pl-logo-wrap{
position:relative;
width:200px;
height:200px;
display:flex;
align-items:center;
justify-content:center;
}

/* Spinning rings */
.pl-ring{
position:absolute;
top:50%;
left:50%;
border-radius:50%;
border:1px solid transparent;
pointer-events:none;
}

.pl-ring-1{
width:144px;
height:144px;
border-color:rgba(22,178,171,.2);
border-top-color:#16B2AB;
animation:plSpin 2.8s linear infinite;
}

.pl-ring-2{
width:178px;
height:178px;
border-color:rgba(22,178,171,.08);
border-bottom-color:rgba(30,206,189,.45);
animation:plSpin 5.5s linear infinite reverse;
}

.pl-ring-3{
width:114px;
height:114px;
border-color:rgba(22,178,171,.12);
border-left-color:rgba(30,206,189,.35);
animation:plSpin 4s linear infinite;
animation-delay:-.8s;
}

@keyframes plSpin{
from{transform:translate(-50%,-50%) rotate(0deg);}
to{transform:translate(-50%,-50%) rotate(360deg);}
}

/* Logo — glow pulse only, no scale */
.preloader-logo{
height:88px;
position:relative;
z-index:1;
animation:plGlow 2.5s ease-in-out infinite;
}

@keyframes plGlow{
0%,100%{filter:drop-shadow(0 0 16px rgba(22,178,171,.55));}
50%{filter:drop-shadow(0 0 30px rgba(30,206,189,.95));}
}

/* Scan beam — sweeps only within the logo bounds */
.pl-scan{
position:absolute;
left:50%;
transform:translateX(-50%);
width:88px;
height:2px;
background:linear-gradient(90deg,transparent,#16B2AB,transparent);
box-shadow:0 0 8px rgba(22,178,171,.8);
border-radius:2px;
pointer-events:none;
z-index:2;
animation:plScanMove 2s ease-in-out infinite;
}

/* logo top = (200-88)/2 = 56px, bottom = 144px */
@keyframes plScanMove{
0%{top:58px;opacity:.5;}
50%{top:142px;opacity:1;}
100%{top:58px;opacity:.5;}
}

/* Footer: bar + text — fixed dimensions, never causes shifts */
.pl-footer{
margin-top:36px;
width:240px;
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
}

.pl-bar{
width:100%;
height:2px;
background:rgba(255,255,255,.06);
border-radius:2px;
overflow:hidden;
}

.pl-bar-fill{
height:100%;
width:5%;
background:linear-gradient(90deg,#16B2AB,#1ecebd);
border-radius:2px;
transition:width .5s cubic-bezier(.2,.8,.2,1);
box-shadow:0 0 8px rgba(22,178,171,.55);
}

.pl-text{
font-size:.82rem;
letter-spacing:.04em;
color:#a3d5d1;
text-align:center;
height:20px;
line-height:20px;
margin:0;
}

.cursor{
display:inline-block;
animation:blink 1s infinite;
color:#16B2AB;
margin-left:2px;
}

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

/* ======================================================
   NAVBAR
====================================================== */

.navbar{
position:fixed;
top:0;
width:100%;
padding:20px 5%;
backdrop-filter:blur(18px);
background:rgba(10,10,10,0.6);
border-bottom:1px solid rgba(255,255,255,0.08);
z-index:1000;
}

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

.logo img{
height:56px;
}

.nav-links{
display:flex;
gap:30px;
align-items:center;
}

.nav-links a{
color:#a3d5d1;
transition:.3s;
font-size:0.95rem;
}

.nav-links a:hover{
color:white;
}

.nav-links a:not(.nav-cta){
position:relative;
}

.nav-links a:not(.nav-cta)::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:100%;
height:2px;
background:linear-gradient(90deg,#16B2AB,#1ecebd);
transform:scaleX(0);
transform-origin:center;
transition:transform .35s cubic-bezier(.2,.8,.2,1);
border-radius:2px;
}

.nav-links a:not(.nav-cta).nav-active{
color:white;
}

.nav-links a:not(.nav-cta).nav-active::after{
transform:scaleX(1);
}

.nav-cta{
background:linear-gradient(90deg,#16B2AB,#1ecebd);
padding:10px 20px;
border-radius:30px;
color:white !important;
}

.menu-toggle{
display:none;
flex-direction:column;
gap:6px;
cursor:pointer;
z-index:1001;
}

.menu-toggle span{
width:28px;
height:3px;
background:#16B2AB;
border-radius:3px;
transition:all 0.3s ease;
}

.menu-toggle.active span:nth-child(1){
transform:rotate(45deg) translate(8px, 8px);
}

.menu-toggle.active span:nth-child(2){
opacity:0;
}

.menu-toggle.active span:nth-child(3){
transform:rotate(-45deg) translate(7px, -7px);
}

/* ======================================================
   HERO
====================================================== */

.hero{
min-height:100vh;
display:flex;
align-items:center;
padding:0 5%;
padding-top:80px;
}

.hero-content{
display:flex;
justify-content:space-between;
align-items:center;
gap:80px;
width:100%;
}

.hero-left{
flex:1;
min-width:0;
}

.hero-right{
flex-shrink:0;
width:480px;
max-width:100%;
}

.badge{
padding:6px 16px;
border-radius:30px;
background:rgba(22,178,171,.15);
border:1px solid #16B2AB;
margin-bottom:20px;
display:inline-block;
font-weight:500;
letter-spacing:0.04em;
font-size:0.8rem;
}

.hero h1{
font-size:clamp(2rem, 5vw, 3.4rem);
font-weight:800;
line-height:1.15;
letter-spacing:-0.02em;
}

.hero h1 span{
background:linear-gradient(90deg,#16B2AB,#1ecebd);
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-typewriter{
display:inline-block;
min-width:0;
padding-bottom:0.15em;
line-height:1.25;
background:linear-gradient(90deg,#16B2AB,#1ecebd);
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
will-change:opacity,transform;
}

.hero-typewriter.hw-swap{
animation:hwSwap .5s cubic-bezier(.2,.8,.2,1);
}

@keyframes hwSwap{
0%{opacity:0;transform:translateY(10px);}
100%{opacity:1;transform:translateY(0);}
}

.hero-typewriter-cursor{
display:inline-block;
margin-left:2px;
color:#16B2AB;
font-weight:400;
animation:blink 1s step-end infinite;
-webkit-text-fill-color:#16B2AB;
}

.hero p{
margin:30px 0;
color:#a3d5d1;
line-height:1.8;
max-width:520px;
font-weight:400;
font-size:clamp(0.95rem, 2vw, 1.05rem);
opacity:0.9;
}

.buttons{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.btn{
padding:14px 28px;
border-radius:40px;
font-weight:600;
transition:.3s;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
text-align:center;
}

.btn-primary{
background:linear-gradient(90deg,#16B2AB,#1ecebd);
color:white;
position:relative;
overflow:hidden;
z-index: 1;
box-shadow: 0 4px 15px rgba(22,178,171, 0.4);
}

.btn-primary::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(90deg,#1ecebd,#16B2AB);
z-index: -1;
transition: opacity 0.3s ease;
opacity: 0;
}

.btn-primary:hover{
transform:translateY(-3px) scale(1.02);
box-shadow:0 8px 25px rgba(22,178,171,.7);
}

.btn-primary:hover::after {
opacity: 1;
}

.btn-outline{
border:2px solid #16B2AB;
color:#16B2AB;
position:relative;
overflow:hidden;
z-index: 1;
transition: all 0.3s ease;
}

.btn-outline::after {
content: "";
position: absolute;
bottom: 0; left: 0; width: 100%; height: 0%;
background: #16B2AB;
z-index: -1;
transition: all 0.3s ease;
}

.btn-outline:hover{
color:white;
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(22,178,171,.4);
border-color:transparent;
}

.btn-outline:hover::after {
height: 100%;
top: 0;
}

/* ======================================================
   GLASS MOCKUP
====================================================== */

.glass{
background:rgba(15,20,20,0.55);
backdrop-filter:blur(25px);
-webkit-backdrop-filter:blur(25px);
border:1px solid rgba(255,255,255,0.08);
border-top:1px solid rgba(255,255,255,0.15);
border-left:1px solid rgba(255,255,255,0.12);
border-radius:20px;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.4);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.glass:hover {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 12px 40px rgba(22,178,171,0.25);
border:1px solid rgba(22,178,171,0.3);
}

/* ======================================================
   HERO VISUALIZER (NEW AI DEMO)
====================================================== */

.hero-visualizer {
width:100%;
max-width:540px;
height:420px;
display:flex;
flex-direction:column;
overflow:hidden;
box-sizing:border-box;
}

.visualizer-header {
padding:16px 24px;
border-bottom:1px solid rgba(255,255,255,0.08);
display:flex;
align-items:center;
flex-shrink:0;
}

.visualizer-body {
flex:1;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
position:relative;
}

.vis-node {
display:flex;
flex-direction:column;
align-items:center;
position:relative;
z-index:2;
}

/* Input Card */
.vis-card {
width:90px;
height:105px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
border-top:1px solid rgba(255,255,255,0.15);
border-left:1px solid rgba(255,255,255,0.12);
border-radius:12px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
transition:all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
opacity:0;
transform:translateY(20px);
position:relative;
overflow:hidden;
}

.vis-card.active {
opacity:1;
transform:translateY(0);
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.vis-card svg {
width:34px;
height:34px;
margin-bottom:8px;
stroke-width:1.5px;
}

.vis-card.pdf-doc svg { color:#f87171; }
.vis-card.wa-msg svg { color:#4ade80; }

.vis-label {
font-size:0.65rem;
color:#a3d5d1;
text-align:center;
padding:0 4px;
font-weight:600;
}

/* Scanning Sweep inside Input Card */
.scan-line {
position:absolute;
top:0; left:0; right:0;
height:2px;
background:linear-gradient(90deg, transparent, #16B2AB, transparent);
box-shadow:0 0 10px #16B2AB, 0 0 5px #1ecebd;
animation:scanSweep 1.5s linear infinite alternate;
opacity:0;
transition:opacity 0.3s;
}

.vis-card.scanning .scan-line {
opacity:1;
}

@keyframes scanSweep {
0% { top:0%; }
100% { top:100%; }
}

/* Core Node */
.core-brain {
width:80px;
height:80px;
border-radius:50%;
background:linear-gradient(135deg, rgba(22,178,171,0.15), rgba(30,206,189,0.05));
border:2px solid rgba(22,178,171,0.5);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 0 20px rgba(22,178,171,0.2);
position:relative;
transition:all 0.4s ease;
}

.core-brain svg {
width:36px;
height:36px;
color:white;
transition:all 0.4s ease;
}

.core-brain::before, .core-brain::after {
content:"";
position:absolute;
top:50%; left:50%;
transform:translate(-50%, -50%);
border-radius:50%;
border:1px solid #16B2AB;
animation:brainPulse 2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
opacity:0;
}
.core-brain::after {
animation-delay:1s;
}

@keyframes brainPulse {
0% { width:80px; height:80px; opacity:0.8; }
100% { width:150px; height:150px; opacity:0; }
}

.core-brain.processing {
box-shadow:0 0 40px rgba(22,178,171,0.6);
border-color:#1ecebd;
transform:scale(1.05);
}
.core-brain.processing svg {
color:#1ecebd;
filter:drop-shadow(0 0 8px rgba(30,206,189,0.8));
}

/* Output Card */
.output-card {
width:130px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
border-top:1px solid rgba(255,255,255,0.12);
border-radius:12px;
padding:12px;
opacity:0;
transform:translateX(-20px);
transition:all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.output-card.active {
opacity:1;
transform:translateX(0);
}

.output-row {
height:8px;
background:rgba(255,255,255,0.1);
border-radius:4px;
margin-bottom:8px;
width:0%;
transition:width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.output-card.active .output-row { width:100%; }
.output-card.active .output-row:nth-child(2) { transition-delay:0.15s; width:85%; }
.output-card.active .output-row:nth-child(3) { transition-delay:0.3s; width:95%; }
.output-card.active .output-row:nth-child(4) { transition-delay:0.45s; width:70%; }
.output-card.active .output-row:nth-child(5) { transition-delay:0.6s; width:50%; margin-bottom:0; }

/* CRM Output Style */
.output-card.crm-style {
border-color:rgba(22,178,171,0.3);
background:linear-gradient(to bottom, rgba(22,178,171,0.08), transparent);
}
.output-card.crm-style .output-title {
font-size:0.65rem;
color:#1ecebd;
margin-bottom:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.05em;
opacity:0;
transition:opacity 0.4s 0.2s;
}
.output-card.active.crm-style .output-title {
opacity:1;
}

/* Connecting Beams */
.vis-connector {
position:absolute;
top:50%;
left:110px;
right:110px;
height:1px;
z-index:1;
}

.vis-connector::before, .vis-connector::after {
content:'';
position:absolute;
top:0;
height:1px;
background:rgba(255,255,255,0.15);
width:0%;
transition:width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vis-connector::before { left:0; }
.vis-connector::after { left:50%; }

.vis-connector.line-1-active::before { width:50%; }
.vis-connector.line-2-active::after { width:50%; }

.beam-group-1, .beam-group-2 {
position:absolute;
top:-3px;
width:100%;
height:7px;
overflow:hidden;
}
.beam-group-1 { left:0; width:50%; }
.beam-group-2 { left:50%; width:50%; }

.beam-dot {
position:absolute;
top:0;
left:0;
width:40px;
height:100%;
background:linear-gradient(90deg, transparent, #1ecebd, transparent);
opacity:0;
}

.beam-dot.forward-1 { animation:beamTravel 1s ease-in-out infinite; }
.beam-dot.forward-2 { animation:beamTravel 1s ease-in-out infinite; animation-delay:0.2s; }

@keyframes beamTravel {
0% { left:-40px; opacity:0; }
20% { opacity:1; }
80% { opacity:1; }
100% { left:100%; opacity:0; }
}

/* Status Footer */
.visualizer-status {
padding:16px 24px;
border-top:1px solid rgba(255,255,255,0.08);
background:rgba(0,0,0,0.3);
flex-shrink:0;
}

.status-text {
font-size:0.85rem;
color:#a3d5d1;
margin-bottom:10px;
display:block;
height:18px;
font-weight:500;
}

.progress-bar {
width:100%;
height:4px;
background:rgba(255,255,255,0.08);
border-radius:4px;
overflow:hidden;
}

.progress-fill {
height:100%;
width:0%;
background:linear-gradient(90deg, #16B2AB, #1ecebd);
transition:width 0.4s ease;
box-shadow:0 0 10px rgba(22,178,171,0.5);
}

/* ======================================================
   SERVICES SECTION
====================================================== */

.services-section{
padding:clamp(60px, 10vw, 120px) 5%;
background:transparent;
position:relative;
z-index:1;
}

.services-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
max-width:1200px;
margin:0 auto;
align-items:center;
}

.service-column{
text-align:center;
padding:40px;
}

.service-icon{
margin-bottom:30px;
}

.icon-symbol{
display:inline-flex;
align-items:center;
justify-content:center;
width:80px;
height:80px;
font-size:2.5rem;
font-weight:700;
color:#16B2AB;
background:rgba(22,178,171,0.1);
border:2px solid rgba(22,178,171,0.3);
border-radius:20px;
transition:all 0.4s ease;
}

.service-icon:hover .icon-symbol{
transform:scale(1.1);
box-shadow:0 0 30px rgba(22,178,171,0.4);
background:rgba(22,178,171,0.15);
}

.service-title{
font-size:clamp(1.4rem, 3vw, 1.8rem);
font-weight:700;
color:white;
margin-bottom:20px;
line-height:1.3;
}

.service-description{
font-size:1rem;
line-height:1.8;
color:#a3d5d1;
max-width:500px;
margin:0 auto;
}

/* ======================================================
   SOLUTIONS CATALOG
====================================================== */

.solutions-catalog{
padding:clamp(60px, 10vw, 120px) 5%;
background:transparent;
position:relative;
z-index:1;
}

.solutions-header{
text-align:center;
margin-bottom:60px;
}

.solutions-header h2{
font-size:clamp(2rem, 4vw, 2.8rem);
font-weight:800;
margin-bottom:15px;
background:linear-gradient(90deg,#16B2AB,#1ecebd);
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.solutions-subtitle{
font-size:clamp(1rem, 2vw, 1.2rem);
color:#a3d5d1;
font-weight:400;
opacity:0.9;
}

/* Solution card text structure */
.card-desc{
color:#d1d5db;
font-size:0.875rem;
line-height:1.75;
margin-bottom:12px;
}

.card-desc-sub{
color:#9ca3af;
font-size:0.825rem;
line-height:1.7;
margin-bottom:0;
opacity:0.85;
}

.card-benefits{
list-style:none;
padding:0;
margin:14px 0 0 0;
display:flex;
flex-direction:column;
gap:0;
}

.card-benefits li{
font-size:0.825rem;
color:#a3d5d1;
line-height:1.55;
padding-left:16px;
position:relative;
margin-bottom:7px;
}

.card-benefits li:last-child{
margin-bottom:0;
}

.card-benefits li::before{
content:"•";
position:absolute;
left:0;
color:#16B2AB;
font-weight:700;
}

/* Push metrics row away from the benefits list */
.solution-card .card-benefits + div{
margin-top:22px !important;
}

/* ======================================================
   CUSTOM SOLUTION SECTION
====================================================== */

.custom-solution{
padding:clamp(60px, 9vw, 100px) 5%;
background:transparent;
position:relative;
z-index:1;
overflow:hidden;
}

.custom-solution-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(60px, 8vw, 100px);
max-width:1300px;
margin:0 auto;
align-items:center;
}

/* --- Left column --- */
.custom-solution-left{
display:flex;
flex-direction:column;
gap:0;
}

.custom-sol-badge{
display:inline-block;
padding:5px 14px;
border-radius:30px;
background:rgba(22,178,171,.12);
border:1px solid rgba(22,178,171,.45);
color:#16B2AB;
font-size:0.72rem;
font-weight:700;
letter-spacing:0.1em;
text-transform:uppercase;
margin-bottom:16px;
width:fit-content;
}

.custom-sol-title{
font-size:clamp(1.7rem, 3.4vw, 2.45rem);
font-weight:800;
line-height:1.1;
letter-spacing:-0.02em;
color:white;
margin-bottom:16px;
}

.custom-sol-desc{
font-size:clamp(0.88rem, 1.6vw, 0.97rem);
line-height:1.65;
color:#a3d5d1;
opacity:0.9;
max-width:500px;
margin-bottom:28px;
}

.custom-sol-desc strong{
color:#e0f2f1;
font-weight:600;
}

/* --- Steps --- */
.custom-sol-steps{
display:flex;
flex-direction:column;
gap:18px;
margin-bottom:28px;
}

.custom-step{
display:flex;
align-items:flex-start;
gap:14px;
}

.custom-step-icon{
width:36px;
height:36px;
min-width:36px;
border-radius:10px;
background:rgba(22,178,171,.12);
border:1px solid rgba(22,178,171,.3);
display:flex;
align-items:center;
justify-content:center;
color:#16B2AB;
flex-shrink:0;
transition:all 0.3s ease;
}

.custom-step:hover .custom-step-icon{
background:rgba(22,178,171,.2);
box-shadow:0 0 18px rgba(22,178,171,.25);
}

.custom-step-body h4{
font-size:0.93rem;
font-weight:700;
color:white;
margin-bottom:3px;
line-height:1.4;
}

.custom-step-body p{
font-size:0.84rem;
line-height:1.6;
color:#a3d5d1;
opacity:0.85;
margin:0;
}

/* --- CTA --- */
.custom-sol-cta{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:12px;
}

.custom-sol-micro{
font-size:0.8rem;
color:#a3d5d1;
opacity:0.6;
margin:0;
letter-spacing:0.01em;
}

/* --- Micro-animation keyframes --- */
@keyframes workflowFloat{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-5px); }
}

@keyframes connectorPulse{
0%,100%{ opacity:0.6; transform:scaleY(0.95); }
50%{ opacity:1; transform:scaleY(1); }
}

@keyframes aiGlow{
0%,100%{ box-shadow:0 0 22px rgba(22,178,171,.15); }
50%{ box-shadow:0 0 38px rgba(22,178,171,.35); }
}

@keyframes glowBlob{
0%,100%{ opacity:.55; transform:translateX(-50%) scale(1); }
50%{ opacity:.85; transform:translateX(-50%) scale(1.12); }
}

/* --- Right column: Workflow card --- */
.custom-solution-right{
display:flex;
align-items:center;
justify-content:center;
}

.workflow-card{
position:relative;
width:100%;
max-width:412px;
padding:32px 30px;
display:flex;
flex-direction:column;
align-items:center;
gap:0;
overflow:hidden;
border:1px solid rgba(22,178,171,.25);
box-shadow:0 0 60px rgba(22,178,171,.12), 0 0 120px rgba(22,178,171,.06);
}

.workflow-top-badge{
position:absolute;
top:16px;
right:16px;
padding:3px 9px;
border-radius:20px;
background:rgba(22,178,171,.15);
border:1px solid rgba(22,178,171,.3);
color:#16B2AB;
font-size:0.6rem;
font-weight:700;
letter-spacing:0.1em;
text-transform:uppercase;
}

.workflow-node{
width:100%;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:14px 18px;
border-radius:12px;
font-weight:600;
font-size:0.92rem;
}

.workflow-node--input{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
color:#e0f2f1;
animation:workflowFloat 4s ease-in-out infinite;
}

.workflow-node--ai{
background:rgba(22,178,171,.1);
border:1px solid rgba(22,178,171,.4);
color:#e0f2f1;
padding:17px 22px;
font-size:0.97rem;
animation:aiGlow 3s ease-in-out infinite;
}

.workflow-node-icon{
width:32px;
height:32px;
border-radius:8px;
background:rgba(255,255,255,.08);
display:flex;
align-items:center;
justify-content:center;
color:#a3d5d1;
flex-shrink:0;
}

.workflow-node-icon svg{
width:17px;
height:17px;
}

.workflow-node-icon--ai{
background:rgba(22,178,171,.2);
color:#16B2AB;
}

/* Connector between nodes */
.workflow-connector{
display:flex;
flex-direction:column;
align-items:center;
gap:3px;
padding:4px 0;
animation:connectorPulse 2.5s ease-in-out infinite;
}

.workflow-connector-line{
width:2px;
height:14px;
background:linear-gradient(180deg, rgba(255,255,255,.15), #16B2AB);
border-radius:2px;
}

.workflow-connector-arrow{
color:#16B2AB;
line-height:1;
}

.workflow-connector-arrow svg{
width:16px;
height:16px;
}

.workflow-connector-label{
font-size:0.65rem;
letter-spacing:0.12em;
text-transform:uppercase;
color:#16B2AB;
opacity:0.7;
font-weight:600;
}

/* Output chips */
.workflow-outputs{
display:flex;
flex-wrap:wrap;
gap:7px;
justify-content:center;
margin-top:18px;
}

.workflow-output-chip{
display:inline-flex;
align-items:center;
gap:5px;
padding:5px 12px 5px 9px;
border-radius:20px;
font-size:0.72rem;
font-weight:600;
color:#a3d5d1;
background:rgba(22,178,171,.07);
border:1px solid rgba(22,178,171,.2);
letter-spacing:0.04em;
transition:transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.workflow-output-chip svg{
width:12px;
height:12px;
flex-shrink:0;
color:#16B2AB;
}

.workflow-output-chip:hover{
background:rgba(22,178,171,.18);
border-color:rgba(22,178,171,.5);
color:#e0f2f1;
transform:translateY(-2px) scale(1.05);
box-shadow:0 4px 14px rgba(22,178,171,.2);
}

/* Ambient glow blob */
.workflow-glow{
position:absolute;
bottom:-60px;
left:50%;
transform:translateX(-50%);
width:180px;
height:180px;
background:radial-gradient(circle, rgba(22,178,171,.2) 0%, transparent 70%);
pointer-events:none;
border-radius:50%;
animation:glowBlob 4s ease-in-out infinite;
}

@media(prefers-reduced-motion: reduce){
.workflow-node--input,
.workflow-node--ai,
.workflow-connector,
.workflow-glow{ animation:none; }
}

/* --- Responsive --- */
@media(max-width:900px){
.custom-solution-grid{
grid-template-columns:1fr;
gap:50px;
}
.custom-sol-desc{
max-width:100%;
}
.custom-solution-right{
justify-content:flex-start;
}
.workflow-card{
max-width:100%;
}
.custom-sol-cta{
align-items:flex-start;
}
}

@media(max-width:600px){
.custom-sol-title{
line-height:1.2;
}
.custom-step{
gap:14px;
}
.workflow-node{
font-size:0.9rem;
padding:15px 18px;
}
}

/* ======================================================
   FAQ SECTION
====================================================== */

.faq-section{
padding:clamp(80px, 12vw, 120px) 5%;
background:transparent;
position:relative;
}

.faq-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(40px, 8vw, 100px);
max-width:1400px;
margin:0 auto;
align-items:flex-start;
}

.faq-left{
position:sticky;
top:120px;
}

.faq-title{
font-size:clamp(2.5rem, 5vw, 3.2rem);
font-weight:800;
background:linear-gradient(90deg,#16B2AB,#1ecebd);
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:15px;
line-height:1.1;
}

.faq-heading{
font-size:clamp(1.4rem, 3vw, 1.8rem);
font-weight:700;
color:white;
margin-bottom:20px;
}

.faq-subtitle{
font-size:1rem;
line-height:1.8;
color:#a3d5d1;
opacity:0.9;
max-width:450px;
font-weight:400;
}

.faq-right{
display:flex;
flex-direction:column;
gap:16px;
}

.faq-item{
border-bottom:1px solid rgba(255,255,255,0.08);
}

.faq-header{
width:100%;
padding:24px 0;
background:none;
border:none;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
text-align:left;
transition:none;
}

.faq-header:hover .faq-question{
color:#16B2AB;
}

.faq-question{
font-size:1.05rem;
font-weight:600;
color:white;
flex:1;
line-height:1.5;
transition:color 0.25s ease;
}

.faq-chevron{
width:24px;
height:24px;
min-width:24px;
color:#16B2AB;
transition:transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
flex-shrink:0;
}

.faq-item.active .faq-chevron{
transform:rotate(-90deg);
}

.faq-content{
max-height:0;
overflow:hidden;
opacity:0;
transform: translateY(-10px);
transition:all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
padding:0;
}

.faq-item.active .faq-content{
max-height:1000px;
opacity:1;
transform: translateY(0);
padding-bottom:24px;
}

.faq-content p{
color:#a3d5d1;
line-height:1.8;
margin-bottom:16px;
font-size:0.95rem;
}

.faq-content p:last-child{
margin-bottom:0;
}

/* ======================================================
   CONTACT PAGE
====================================================== */

.contact-page{
padding:clamp(120px, 15vw, 160px) 5% clamp(60px, 10vw, 120px);
text-align:center;
}

.contact-page h1{
font-size:clamp(2rem, 4.5vw, 2.8rem);
margin-bottom:10px;
background:linear-gradient(90deg,#16B2AB,#1ecebd);
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.contact-page p{
color:#a3d5d1;
margin-bottom:50px;
}

.contact-wrapper{
display:flex;
justify-content:center;
}

.contact-form{
padding:40px;
width:100%;
max-width:600px;
}

.input-group{
margin-bottom:20px;
display:flex;
flex-direction:column;
text-align:left;
}

.input-group label{
margin-bottom:8px;
font-size:.9rem;
color:#a3d5d1;
}

.input-group input,
.input-group textarea{
background:#111;
border:1px solid rgba(22,178,171,.4);
padding:12px;
border-radius:8px;
color:white;
outline:none;
transition:.3s;
resize:none;
font-size:16px;
min-height:48px;
}

.input-group textarea{
resize:vertical;
min-height:120px;
}

.input-group input:focus,
.input-group textarea:focus{
border-color:#16B2AB;
box-shadow:0 0 10px rgba(22,178,171,.5);
}

.full-btn{
width:100%;
margin-top:10px;
}

/* ======================================================
   FOOTER
====================================================== */

.footer{
background:#0a0a0a;
padding:clamp(40px, 8vw, 80px) 5% clamp(20px, 4vw, 40px);
border-top:1px solid rgba(22,178,171,.2);
}

.footer-container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:40px;
}

.footer h3{
color:#16B2AB;
margin-bottom:15px;
}

.footer h4{
margin-bottom:15px;
color:#16B2AB;
}

.footer a{
display:block;
margin-bottom:10px;
color:#a3d5d1;
transition:.3s;
}

.footer a:hover{
color:white;
}

.footer a.transition-colors{
transition:color .2s ease;
}

.footer a.hover\:text-teal-400:hover{
color:#2dd4bf;
}

.footer .space-y-4{
display:flex;
flex-direction:column;
gap:1rem;
}

.footer .flex.items-center.gap-3{
display:flex;
align-items:center;
gap:.75rem;
margin-bottom:0;
}

.footer .w-5{
width:1.25rem;
}

.footer .h-5{
height:1.25rem;
}

.footer .flex.items-center.gap-3 svg{
flex-shrink:0;
stroke:#16B2AB;
}

.footer-bottom{
text-align:center;
margin-top:40px;
opacity:.6;
font-size:.85rem;
}

/* ======================================================
   SCROLL REVEAL ANIMATION
====================================================== */

.reveal{
opacity:0;
transform:translateY(50px);
transition:opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* Stagger delays for stats section */
.stats-grid .stat-item:nth-child(1).reveal{ transition-delay:0ms; }
.stats-grid .stat-item:nth-child(2).reveal{ transition-delay:100ms; }
.stats-grid .stat-item:nth-child(3).reveal{ transition-delay:200ms; }
.stats-grid .stat-item:nth-child(4).reveal{ transition-delay:300ms; }

/* Stagger delays for custom solution left column */
.custom-sol-badge.reveal{ transition-delay:0ms; }
.custom-sol-title.reveal{ transition-delay:100ms; }
.custom-sol-desc.reveal{ transition-delay:200ms; }
.custom-sol-cta .btn.reveal{ transition-delay:300ms; }
.custom-sol-micro.reveal{ transition-delay:350ms; }

/* Stagger delays for quienes-somos section */
.features h2.reveal{ transition-delay:0ms; }
.features-subtitle.reveal{ transition-delay:100ms; }
.features-grid .feature:nth-child(1).reveal{ transition-delay:200ms; }
.features-grid .feature:nth-child(2).reveal{ transition-delay:300ms; }
.features-grid .feature:nth-child(3).reveal{ transition-delay:400ms; }

/* Stagger delays for how-it-works section */
.how-it-works h2.reveal{ transition-delay:0ms; }
.how-it-works-subtitle.reveal{ transition-delay:120ms; }
.steps .step:nth-child(1).reveal{ transition-delay:200ms; }
.steps .step:nth-child(2).reveal{ transition-delay:300ms; }
.steps .step:nth-child(3).reveal{ transition-delay:400ms; }

/* ======================================================
   RESPONSIVE
====================================================== */

/* Tablet and below */
@media(max-width:1024px){

.navbar{
padding:20px 4%;
}

.hero{
padding:0 4%;
padding-top:80px;
}

.hero-content{
gap:60px;
}

.hero-right{
width:400px;
}

.ai-chat-container{
height:450px;
}

.services-container{
gap:60px;
}

.features-grid{
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:30px;
}

.steps{
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

}

/* Mobile landscape and below */
@media(max-width:900px){

.menu-toggle{
display:flex;
}

.nav-links{
position:fixed;
top:0;
right:-100%;
width:280px;
height:100vh;
background:rgba(10,10,10,0.98);
backdrop-filter:blur(20px);
flex-direction:column;
justify-content:center;
align-items:center;
gap:30px;
transition:right 0.4s ease;
border-left:1px solid rgba(255,255,255,0.1);
padding:40px;
}

.nav-links.active{
right:0;
}

.nav-links a{
font-size:1.1rem;
width:100%;
text-align:center;
padding:10px;
}

.nav-cta{
width:100%;
text-align:center;
}

.hero{
min-height:auto;
padding:100px 5% 60px;
}

.hero-content{
flex-direction:column;
text-align:center;
gap:50px;
}

.hero-left{
flex:none;
width:100%;
}

.hero-right{
width:100%;
max-width:480px;
}

.hero p{
margin:25px auto;
}

.buttons{
justify-content:center;
}

.ai-chat-container{
max-width:100%;
height:500px;
}

.message-content{
max-width:85%;
}

.services-container{
grid-template-columns:1fr;
gap:50px;
}

.service-column{
padding:30px 20px;
}

.features-grid{
grid-template-columns:1fr;
max-width:500px;
margin:0 auto;
}

.steps{
grid-template-columns:1fr;
max-width:400px;
margin:0 auto;
}

.steps::before{
display:none;
}

.faq-container{
grid-template-columns:1fr;
gap:40px;
}

.faq-left{
position:relative;
top:0;
}

.faq-title{
font-size:2rem;
}

.faq-heading{
font-size:1.3rem;
}

.contact-wrapper{
flex-direction:column;
}

.contact-form{
padding:30px;
}

.footer-container{
flex-direction:column;
gap:30px;
}

}

/* Mobile portrait */
@media(max-width:600px){

.navbar{
padding:15px 5%;
}

.logo img{
height:46px;
}

.menu-toggle span{
width:25px;
}

.badge{
font-size:0.8rem;
padding:6px 14px;
}

.hero{
padding:90px 5% 50px;
}

.hero h1{
line-height:1.2;
}

.hero p{
margin:20px auto;
}

.buttons{
flex-direction:column;
width:100%;
}

.btn{
width:100%;
text-align:center;
padding:13px 24px;
}

.ai-chat-container{
height:450px;
}

.chat-header{
padding:16px 20px;
}

.chat-messages{
padding:20px;
}

.message-avatar{
width:28px;
height:28px;
}

.message-avatar svg{
width:16px;
height:16px;
}

.message-bubble{
padding:10px 14px;
font-size:0.9rem;
}

.message-image{
width:180px;
height:120px;
}

.icon-symbol{
width:70px;
height:70px;
font-size:2.2rem;
}

.service-description{
font-size:0.95rem;
}

.feature{
padding:35px 30px;
}

.feature h3{
font-size:1.2rem;
}

.step{
padding:30px;
}

.step h3{
font-size:1.8rem;
}

.faq-section{
padding:50px 5%;
}

.faq-header{
padding:18px 0;
}

.faq-item{
border-bottom:1px solid rgba(22,178,171,.1);
}

.faq-question{
font-size:0.95rem;
}

.faq-chevron{
width:20px;
height:20px;
}

.contact-form{
padding:25px 20px;
}

.input-group input,
.input-group textarea{
padding:11px;
font-size:0.95rem;
}

.footer-container{
gap:25px;
}

.footer h3,
.footer h4{
font-size:1.1rem;
}

}

/* Small mobile */
@media(max-width:400px){

.logo img{
height:42px;
}

.hero{
padding:80px 5% 40px;
}

.ai-chat-container{
height:400px;
}

.chat-messages{
padding:16px;
}

.message-content{
max-width:90%;
}

.message-image{
width:160px;
height:100px;
}

.icon-symbol{
width:60px;
height:60px;
font-size:2rem;
}

.feature{
padding:30px 25px;
}

.step{
padding:25px;
}

.contact-form{
padding:20px 15px;
}

}
/* FEATURES */

.features{

padding:clamp(60px, 10vw, 120px) 5%;
text-align:center;

}

.features h2{

font-size:clamp(2rem, 4vw, 2.5rem);
margin-bottom:12px;

}

.features-subtitle{
font-size:clamp(0.9rem, 1.5vw, 1rem);
color:#a3d5d1;
opacity:0.8;
font-weight:400;
margin-bottom:clamp(40px, 6vw, 60px);
}

.features-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:40px;
align-items:stretch;

}

.feature{

padding:45px 40px;
transition:transform 0.25s ease, box-shadow 0.25s ease;
display:flex;
flex-direction:column;
justify-content:flex-start;
height:100%;

}

.feature h3{

font-size:1.3rem;
margin-bottom:18px;
line-height:1.3;

}

.feature h3 .icon,
.feature h3{
text-shadow:0 0 10px rgba(0,255,200,0.35);
}

.feature p{

color:#a3d5d1;
line-height:1.65;
margin-bottom:8px;

}

.feature p.p-primary{
color:rgba(255,255,255,0.9);
line-height:1.7;
margin-bottom:10px;
}

.feature p.p-secondary{
color:rgba(255,255,255,0.6);
line-height:1.7;
font-size:0.9em;
}

.feature p.valores-list{

font-size:0.85rem;
line-height:1.75;

}

.feature:hover{

transform:translateY(-5px);
box-shadow:0 0 30px rgba(0,255,200,0.18);

}

/* HOW IT WORKS */

.how-it-works{

padding:clamp(60px, 10vw, 120px) 5%;
text-align:center;
position:relative;
overflow:hidden;

}

.how-it-works h2{

font-size:clamp(2rem, 4vw, 2.5rem);
margin-bottom:12px;

}

.how-it-works-subtitle{
font-size:clamp(0.9rem, 1.5vw, 1rem);
color:#a3d5d1;
opacity:0.8;
margin-bottom:clamp(40px, 6vw, 60px);
font-weight:400;
}

.steps{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;
position:relative;

}

.steps::after {
    content: "";
    position: absolute;
    top: 52px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: rgba(255, 255, 255, 0.05); /* Línea base sutil */
    pointer-events: none;
    z-index: 0;
}

.steps::before{
    content:"";
    position:absolute;
    top:52px;
    left:5%;
    width: 0%; /* Inicia en 0 en lugar de scaleX */
    height:2px;
    background:linear-gradient(90deg, transparent, #16B2AB, #1ecebd, transparent);
    box-shadow:0 0 15px rgba(22,178,171,0.6);
    pointer-events:none;
    z-index:1;
    transition: width 1.5s cubic-bezier(0.215, 0.610, 0.355, 1) 0.2s; /* Carga fluida */
}

.steps.line-visible::before{
    width: 90%;
}

@media(max-width: 768px) {
    .steps::before, .steps::after {
        display: none;
    }
}

.step{

padding:40px;
transition:transform 0.25s ease, box-shadow 0.25s ease;
position:relative;
z-index:1;

}

.step:hover{
transform:translateY(-6px);
box-shadow:0 0 35px rgba(22,178,171,.3);
}

.step-number{
font-size:1.5rem;
font-weight:800;
letter-spacing:0.1em;
color:#16B2AB;
opacity:0.8;
margin-bottom:14px;
display:block;
}

/* Step number entrance animation */
@keyframes stepNumIn{
from{ opacity:0; transform:scale(0.85); }
to{ opacity:0.75; transform:scale(1); }
}

.step.reveal .step-number{
opacity:0;
}

.step.reveal.active .step-number{
animation:stepNumIn 450ms ease-out forwards;
}

.steps .step:nth-child(1).reveal.active .step-number{ animation-delay:0ms; }
.steps .step:nth-child(2).reveal.active .step-number{ animation-delay:120ms; }
.steps .step:nth-child(3).reveal.active .step-number{ animation-delay:240ms; }

.step h3{

font-size:2rem;
color:#16B2AB;
margin-bottom:10px;

}

/* ABOUT US / QUIÉNES SOMOS */

.about-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:40px;
margin-bottom:clamp(40px,6vw,60px);
}

.about-icon{
font-size:2.5rem;
margin-bottom:16px;
}

.valores-section{
margin-top:clamp(20px,4vw,40px);
}

.valores-title{
font-size:clamp(1.25rem,2.5vw,1.6rem);
font-weight:700;
color:#16B2AB;
letter-spacing:0.025em;
margin-bottom:clamp(24px,4vw,40px);
}

.valores-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:24px;
}

.valor-card{
padding:28px;
text-align:left;
}

.valor-icon{
font-size:1.8rem;
display:block;
margin-bottom:12px;
}

.valor-card h4{
font-size:1rem;
font-weight:700;
color:#16B2AB;
margin-bottom:8px;
letter-spacing:0.02em;
}

.valor-card p{
color:#a3d5d1;
font-size:0.9rem;
line-height:1.6;
opacity:0.9;
}

/* CTA */

.cta{

padding:clamp(80px, 12vw, 140px) 5%;
text-align:center;

}

.cta h2{

font-size:clamp(1.8rem, 3.5vw, 2.4rem);
margin-bottom:20px;

}

.cta p{

color:#a3d5d1;
font-size:1.15rem;
margin-bottom:30px;

}

.dashboard-section{

padding:clamp(60px, 10vw, 120px) 5%;
text-align:center;

}

.dashboard{

display:flex;
gap:40px;
justify-content:center;
padding:40px;
flex-wrap:wrap;

}

.metric{

text-align:center;
min-width:150px;

}

.metric span{

font-size:clamp(1.8rem, 3vw, 2.2rem);
color:#16B2AB;

}

.chart-section{

padding:clamp(60px, 10vw, 120px) 5%;
text-align:center;

}

.ai-demo{

padding:clamp(60px, 10vw, 120px) 5%;
text-align:center;

}

.ai-demo textarea{

width:100%;
max-width:600px;
height:120px;
margin-bottom:20px;
background:#111;
border:1px solid rgba(22,178,171,.4);
color:white;
padding:12px;
border-radius:8px;
font-size:16px;
resize:vertical;

}

.demo-result{

margin-top:30px;
padding:30px;

}

/* ======================================================
   MARQUEE SECTION
====================================================== */

.marquee-section {
    padding: 30px 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(22,178,171,0.1);
    border-bottom: 1px solid rgba(22,178,171,0.1);
    background: linear-gradient(90deg, rgba(10,10,10,0.8), rgba(22,178,171,0.02), rgba(10,10,10,0.8));
    z-index: 2;
}

.marquee-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    /* To create faded edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-row {
    display: flex;
    width: max-content;
    white-space: nowrap;
}

.marquee-left {
    animation: scroll-left 40s linear infinite;
}

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

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

.marquee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a3d5d1;
    letter-spacing: 0.5px;
}

.marquee-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1ecebd;
    box-shadow: 0 0 8px rgba(22,178,171,0.6);
}

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

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

/* ======================================================
   INTEGRATIONS MARQUEE (NEW)
====================================================== */
.integrations-section {
    padding: 3rem 0 1rem 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: transparent;
}
.integrations-title {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(22, 178, 171, 0.7);
    text-transform: uppercase;
    margin-bottom: 25px;
}
.integrations-marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 20px;
    padding: 24px 0;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.integrations-track {
    display: flex;
    gap: 20px;
    animation: scroll-integrations 35s linear infinite;
    min-width: 100%;
    flex-shrink: 0;
    justify-content: space-around;
}
.integration-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #8da4a2;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: default;
}
.integration-item:hover {
    background: rgba(22, 178, 171, 0.1);
    border-color: rgba(22, 178, 171, 0.4);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(22, 178, 171, 0.15);
}
.integration-item svg {
    width: 22px;
    height: 22px;
    opacity: 0.7;
    transition: all 0.3s ease;
}
.integration-item:hover svg {
    opacity: 1;
    stroke: #1ecebd;
    filter: drop-shadow(0 0 5px rgba(30,206,189,0.5));
}

@keyframes scroll-integrations {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% - 20px)); }
}

/* ======================================================
   STATS / MÉTRICAS SECTION
====================================================== */

.stats-section{
padding:clamp(40px,7vw,70px) 5%;
position:relative;
z-index:1;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
max-width:1200px;
margin:0 auto;
border:1px solid rgba(22,178,171,.15);
border-radius:20px;
overflow:hidden;
background:rgba(22,178,171,.04);
}

.stat-item{
padding:clamp(28px,4vw,44px) clamp(16px,3vw,32px);
text-align:center;
border-right:1px solid rgba(22,178,171,.1);
position:relative;
overflow:hidden;
transition:background .35s ease;
}

.stat-item:last-child{
border-right:none;
}

.stat-item::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:0%;
height:2px;
background:linear-gradient(90deg,#16B2AB,#1ecebd);
transition:width .45s ease;
}

.stat-item:hover{
background:rgba(22,178,171,.07);
}

.stat-item:hover::after{
width:70%;
}

.stat-number{
font-size:clamp(2rem,3.5vw,2.9rem);
font-weight:800;
background:linear-gradient(90deg,#16B2AB,#1ecebd);
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:-0.02em;
line-height:1;
margin-bottom:8px;
}

.stat-unit{
font-size:0.72rem;
font-weight:700;
color:rgba(255,255,255,.4);
text-transform:uppercase;
letter-spacing:.1em;
margin-bottom:6px;
}

.stat-label{
font-size:0.83rem;
color:#a3d5d1;
opacity:.8;
line-height:1.4;
}

@media(max-width:768px){
.stats-grid{
grid-template-columns:repeat(2,1fr);
}
.stat-item:nth-child(2){border-right:none;}
.stat-item:nth-child(1),
.stat-item:nth-child(2){border-bottom:1px solid rgba(22,178,171,.1);}
}

@media(max-width:480px){
.stat-item{padding:24px 16px;}
.stats-grid{border-radius:14px;}
}

/* ======================================================
   VISUALIZER SCENARIO DOTS
====================================================== */

.vis-scenario-dots{
display:flex;
gap:6px;
justify-content:center;
margin-top:10px;
}

.vis-dot{
width:6px;
height:6px;
border-radius:3px;
background:rgba(255,255,255,.18);
transition:width .35s cubic-bezier(.4,0,.2,1), background .35s ease, box-shadow .35s ease;
cursor:default;
}

.vis-dot--active{
width:20px;
background:#16B2AB;
box-shadow:0 0 8px rgba(22,178,171,.6);
}

/* ======================================================
   3D TILT CARDS (premium — Linear/Stripe style)
====================================================== */

.solution-card{
transform-style:preserve-3d;
transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
will-change:transform;
}

.solution-card.tilt-active{
transition:transform .1s linear, box-shadow .35s ease;
}

/* ======================================================
   MAGNETIC BUTTONS
====================================================== */

.btn-primary, .btn-outline{
will-change:transform;
}

.btn-primary.magnetic, .btn-outline.magnetic{
transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease;
}

/* When magnetic is active, JS drives transform — disable CSS hover transform to avoid conflict */
.btn-primary.magnetic:hover,
.btn-outline.magnetic:hover{
transform:none;
}

/* ======================================================
   GRAIN OVERLAY (subtle premium texture)
====================================================== */

body::after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:1;
opacity:0.035;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ======================================================
   READING PROGRESS BAR
====================================================== */

#reading-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, #16B2AB, #1ecebd);
z-index: 9999;
transition: width 0.1s linear;
box-shadow: 0 0 8px rgba(22,178,171,0.5);
pointer-events: none;
}

/* ======================================================
   SCROLL TO TOP BUTTON
====================================================== */

#scroll-top {
position: fixed;
bottom: 28px;
right: 28px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(22,178,171,0.12);
border: 1px solid rgba(22,178,171,0.35);
color: #16B2AB;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 998;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
pointer-events: none;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}

#scroll-top.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

#scroll-top:hover {
background: rgba(22,178,171,0.25);
box-shadow: 0 0 22px rgba(22,178,171,0.4);
transform: translateY(-3px);
}

#scroll-top:focus-visible {
outline: 2px solid #16B2AB;
outline-offset: 3px;
}

/* ======================================================
   NAVBAR SCROLLED STATE
====================================================== */

.navbar.scrolled {
background: rgba(10,10,10,0.92);
border-bottom-color: rgba(22,178,171,0.18);
transition: background 0.4s ease, border-bottom-color 0.4s ease;
}

/* ======================================================
   SOLUTION CARD SHIMMER ON HOVER
====================================================== */

.solution-card {
position: relative;
overflow: hidden;
}

.solution-card::after {
content: '';
position: absolute;
top: -50%;
left: -80%;
width: 55%;
height: 200%;
background: linear-gradient(90deg, transparent, rgba(22,178,171,0.07), transparent);
transform: skewX(-18deg);
transition: left 0.65s ease;
pointer-events: none;
}

.solution-card:hover::after {
left: 130%;
}

/* ======================================================
   PREFERS-REDUCED-MOTION — GLOBAL
====================================================== */

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }

.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}

#reading-progress { transition: none; }

@keyframes plSpin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(0deg); } }
@keyframes plGlow { 0%, 100% { filter: drop-shadow(0 0 16px rgba(22,178,171,.55)); } }
@keyframes plScanMove { 0%, 100% { top: 58px; opacity: .5; } }
@keyframes brainPulse { 0%, 100% { opacity: 0; } }
@keyframes beamTravel { 0%, 100% { opacity: 0; } }
@keyframes scanSweep { 0%, 100% { top: 0; } }
@keyframes workflowFloat { 0%, 100% { transform: none; } }
@keyframes connectorPulse { 0%, 100% { opacity: 0.6; transform: none; } }
@keyframes aiGlow { 0%, 100% { box-shadow: 0 0 22px rgba(22,178,171,.15); } }
@keyframes glowBlob { 0%, 100% { opacity: .55; transform: translateX(-50%); } }
@keyframes stepNumIn { from { opacity: 0.75; } to { opacity: 0.75; } }
@keyframes blink { 0%, 100% { opacity: 1; } }

.solution-card::after { transition: none; }
.btn, .btn-primary::after, .btn-outline::after,
.glass, .faq-content, .faq-chevron,
#scroll-top { transition: none; }
}