:root {
--blue-600:#2563eb;
--blue-500:#3b82f6;
--blue-100:#dbeafe;
--blue-50:#eff6ff;
--slate-900:#0f172a;
--slate-800:#1e293b;
--slate-700:#334155;
--slate-600:#475569;
--slate-500:#64748b;
--slate-400:#94a3b8;
--slate-200:#e2e8f0;
--slate-100:#f1f5f9;
--slate-50:#f8fafc;
--white:#fff;
--green-500:#22c55e
}

* {
margin:0;
padding:0;
box-sizing:border-box
}

html {
scroll-behavior:smooth
}

body {
font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
background:var(--white);
color:var(--slate-800);
line-height:1.6
}

nav {
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
padding:1rem 5%;
display:flex;
justify-content:space-between;
align-items:center;
background:#fffffff2;
backdrop-filter:blur(20px);
border-bottom:1px solid transparent;
transition:all .3s ease
}

nav.scrolled {
border-bottom-color:var(--slate-200);
box-shadow:0 1px 3px #0000000d
}

.logo {
display:flex;
align-items:center;
gap:.75rem;
text-decoration:none;
color:var(--slate-900)
}

.logo-icon {
width:40px;
height:40px;
background:linear-gradient(135deg,var(--blue-500),var(--blue-600));
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:1.25rem
}

.logo-text {
font-weight:700;
font-size:1.25rem
}

.logo-text span {
color:var(--blue-600)
}

.nav-links {
display:flex;
gap:2.5rem;
align-items:center
}

.nav-links a {
color:var(--slate-600);
text-decoration:none;
font-size:.9rem;
font-weight:500;
transition:color .2s
}

.nav-links a:hover {
color:var(--slate-900)
}

.btn {
padding:.75rem 1.5rem;
border-radius:8px;
font-size:.9rem;
font-weight:600;
text-decoration:none;
cursor:pointer;
transition:all .3s cubic-bezier(0.4,0,0.2,1);
border:none;
display:inline-flex;
align-items:center;
gap:.5rem
}

.btn-primary {
background:var(--blue-600);
color:var(--white)
}

.btn-primary:hover {
background:var(--blue-500);
transform:translateY(-2px);
box-shadow:0 8px 20px #2563eb59
}

.btn-secondary {
background:var(--white);
color:var(--slate-700);
border:1px solid var(--slate-200)
}

.btn-secondary:hover {
background:var(--slate-50);
border-color:var(--slate-300);
transform:translateY(-2px)
}

.btn-large {
padding:1rem 2rem;
font-size:1rem
}

.req-demo-nav {
color:#fff!important
}

.hero {
padding:10rem 5% 6rem;
background:linear-gradient(180deg,var(--blue-50) 0%,var(--white) 100%);
position:relative;
overflow:hidden
}

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

.hero-content {
animation:fadeInUp .8s ease-out
}

@keyframes fadeInUp {
from {
opacity:0;
transform:translateY(30px)
}

to {
opacity:1;
transform:translateY(0)
}
}

.hero-badge {
display:inline-flex;
align-items:center;
gap:.5rem;
background:var(--white);
border:1px solid var(--slate-200);
padding:.4rem 1rem;
border-radius:50px;
font-size:.85rem;
color:var(--slate-700);
margin-bottom:1.5rem;
box-shadow:0 1px 2px #0000000d
}

.hero-badge-dot {
width:8px;
height:8px;
background:var(--green-500);
border-radius:50%;
animation:pulse 2s ease-in-out infinite
}

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

50% {
opacity:.7;
transform:scale(1.1)
}
}

.hero h1 {
font-size:clamp(2.5rem,4.5vw,3.5rem);
font-weight:700;
line-height:1.15;
color:var(--slate-900);
margin-bottom:1.5rem;
letter-spacing:-.03em
}

.hero h1 .highlight {
color:var(--blue-600)
}

.hero p {
font-size:1.15rem;
color:var(--slate-600);
margin-bottom:2rem;
max-width:520px;
line-height:1.7
}

.hero-buttons {
display:flex;
gap:1rem;
flex-wrap:wrap;
margin-bottom:3rem
}

.hero-visual {
position:relative;
animation:fadeInRight .8s ease-out .2s both
}

@keyframes fadeInRight {
from {
opacity:0;
transform:translateX(40px)
}

to {
opacity:1;
transform:translateX(0)
}
}

.img-showcase {
width:100%;
border-radius:16px;
box-shadow:0 25px 50px -12px #0003;
transition:all .5s cubic-bezier(0.4,0,0.2,1);
transform:perspective(1000px) rotateY(-2deg) rotateX(1deg)
}

.img-showcase:hover {
transform:perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-8px);
box-shadow:0 35px 60px -15px #00000040
}

.hero-float {
position:absolute;
background:var(--white);
border-radius:12px;
box-shadow:0 10px 40px #0000001f;
border:1px solid var(--slate-100);
padding:1rem;
animation:float 6s ease-in-out infinite;
transition:all .3s ease
}

.hero-float:hover {
transform:translateY(-5px) scale(1.02);
box-shadow:0 15px 50px #00000026
}

.hero-float-1 {
top:-20px;
right:-30px;
animation-delay:0s
}

.hero-float-2 {
bottom:40px;
left:-40px;
animation-delay:2s
}

@keyframes float {
0%,100% {
transform:translateY(0)
}

50% {
transform:translateY(-15px)
}
}

.float-content {
display:flex;
align-items:center;
gap:.75rem
}

.float-icon {
width:40px;
height:40px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
transition:transform .3s ease
}

.hero-float:hover .float-icon {
transform:scale(1.1)
}

.float-icon.green {
background:#dcfce7
}

.float-icon.blue {
background:var(--blue-100)
}

.float-text {
font-size:.8rem
}

.float-text strong {
display:block;
color:var(--slate-800)
}

.float-text span {
color:var(--slate-500)
}

.logos-section {
padding:4rem 5%;
border-bottom:1px solid var(--slate-100)
}

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

.logos-title {
font-size:.85rem;
font-weight:500;
color:var(--slate-600);
text-transform:uppercase;
letter-spacing:.1em;
margin-bottom:2rem
}

.logos-grid {
display:flex;
justify-content:center;
align-items:center;
gap:4rem;
flex-wrap:wrap
}

.logo-item {
font-size:1.25rem;
font-weight:700;
color:var(--slate-500);
transition:all .3s ease
}

.logo-item:hover {
color:var(--slate-500);
transform:scale(1.05)
}

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

.section-header {
text-align:center;
max-width:600px;
margin:0 auto 4rem
}

.section-tag {
display:inline-block;
font-size:.8rem;
font-weight:600;
letter-spacing:.05em;
text-transform:uppercase;
color:var(--blue-600);
background:var(--blue-50);
padding:.4rem 1rem;
border-radius:50px;
margin-bottom:1rem
}

.section-title {
font-size:clamp(2rem,3vw,2.5rem);
font-weight:700;
color:var(--slate-900);
margin-bottom:1rem
}

.section-subtitle {
font-size:1.1rem;
color:var(--slate-600);
line-height:1.7
}

.features {
padding:6rem 5%
}

.features-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2rem
}

.feature-card {
background:var(--white);
border:1px solid var(--slate-200);
border-radius:16px;
padding:2rem;
transition:all .4s cubic-bezier(0.4,0,0.2,1)
}

.feature-card:hover {
border-color:var(--blue-200);
box-shadow:0 25px 50px #0000001a;
transform:translateY(-8px)
}

.feature-icon {
width:48px;
height:48px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:1.25rem;
font-size:1.5rem;
transition:transform .3s ease
}

.feature-card:hover .feature-icon {
transform:scale(1.15) rotate(5deg)
}

.feature-icon.blue {
background:var(--blue-100)
}

.feature-icon.green {
background:#dcfce7
}

.feature-icon.orange {
background:#ffedd5
}

.feature-icon.purple {
background:#f3e8ff
}

.feature-icon.cyan {
background:#cffafe
}

.feature-icon.rose {
background:#ffe4e6
}

.feature-card h3 {
font-size:1.15rem;
font-weight:600;
color:var(--slate-900);
margin-bottom:.75rem
}

.feature-card p {
font-size:.95rem;
color:var(--slate-600);
line-height:1.6
}

.showcase {
padding:6rem 5%;
background:var(--slate-50)
}

.showcase-item {
max-width:1200px;
margin:0 auto 8rem;
display:grid;
grid-template-columns:1fr 1fr;
gap:5rem;
align-items:center
}

.showcase-item:nth-child(odd) .showcase-visual {
order:2
}

.showcase-item:last-child {
margin-bottom:0
}

.showcase-tag {
display:inline-block;
font-size:.75rem;
font-weight:600;
letter-spacing:.05em;
text-transform:uppercase;
color:var(--blue-600);
margin-bottom:1rem
}

.showcase-title {
font-size:2rem;
font-weight:700;
color:var(--slate-900);
margin-bottom:1rem;
line-height:1.2
}

.showcase-text {
font-size:1.05rem;
color:var(--slate-600);
margin-bottom:1.5rem;
line-height:1.7
}

.showcase-list {
list-style:none;
margin-bottom:2rem
}

.showcase-list li {
display:flex;
align-items:flex-start;
gap:.75rem;
margin-bottom:.75rem;
font-size:.95rem;
color:var(--slate-700);
transition:transform .2s ease
}

.showcase-list li:hover {
transform:translateX(5px)
}

.showcase-list li::before {
content:'✓';
color:var(--green-500);
font-weight:700;
flex-shrink:0
}

.showcase-visual {
position:relative
}

.showcase-img-wrapper {
position:relative;
overflow:hidden;
border-radius:20px;
box-shadow:0 30px 60px -15px #0003;
transition:all .5s cubic-bezier(0.4,0,0.2,1)
}

.showcase-img-wrapper::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(135deg,#2563eb1a,transparent);
opacity:0;
transition:opacity .4s ease;
z-index:1;
pointer-events:none
}

.showcase-img-wrapper:hover {
transform:translateY(-12px) scale(1.02);
box-shadow:0 40px 80px -20px #00000040
}

.showcase-img-wrapper:hover::before {
opacity:1
}

.showcase-img-wrapper img {
width:100%;
display:block;
transition:transform .5s cubic-bezier(0.4,0,0.2,1)
}

.showcase-img-wrapper:hover img {
transform:scale(1.03)
}

.showcase-visual::before {
content:'';
position:absolute;
top:-20px;
left:-20px;
width:100px;
height:100px;
background:var(--blue-100);
border-radius:50%;
z-index:-1;
opacity:.6;
transition:all .4s ease
}

.showcase-visual::after {
content:'';
position:absolute;
bottom:-15px;
right:-15px;
width:80px;
height:80px;
background:linear-gradient(135deg,var(--blue-500),var(--blue-600));
border-radius:16px;
z-index:-1;
opacity:.2;
transition:all .4s ease
}

.showcase-visual:hover::before {
transform:scale(1.2);
opacity:.4
}

.showcase-visual:hover::after {
transform:scale(1.1) rotate(5deg);
opacity:.3
}

.integrations {
padding:6rem 5%
}

.integration-cards {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:2rem;
max-width:900px;
margin:0 auto
}

.integration-card {
background:linear-gradient(135deg,var(--slate-900),var(--slate-800));
border-radius:20px;
padding:2.5rem;
color:var(--white);
position:relative;
overflow:hidden;
transition:all .4s cubic-bezier(0.4,0,0.2,1)
}

.integration-card:hover {
transform:translateY(-8px) scale(1.02);
box-shadow:0 30px 60px #0000004d
}

.integration-card::before {
content:'';
position:absolute;
top:0;
right:0;
width:200px;
height:200px;
background:radial-gradient(circle,#3b82f64d,transparent 70%);
transition:all .4s ease
}

.integration-card:hover::before {
transform:scale(1.5);
opacity:.8
}

.integration-icon {
width:56px;
height:56px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:1.5rem;
font-size:1.75rem;
background:#ffffff1a;
transition:all .3s ease
}

.integration-card:hover .integration-icon {
transform:scale(1.1) rotate(5deg);
background:#ffffff26
}

.integration-card h3 {
font-size:1.35rem;
font-weight:600;
margin-bottom:1rem
}

.integration-card p {
color:var(--slate-300);
line-height:1.7;
font-size:.95rem
}

.stats {
padding:5rem 5%;
background:var(--blue-600);
color:var(--white)
}

.stats-grid {
max-width:1000px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:2rem;
text-align:center
}

.stat-item {
transition:transform .3s ease
}

.stat-item:hover {
transform:scale(1.05)
}

.stat-item h3 {
font-size:3rem;
font-weight:700;
margin-bottom:.5rem
}

.stat-item p {
font-size:.9rem;
opacity:.8
}

.testimonial {
padding:6rem 5%;
background:var(--slate-50)
}

.testimonial-content {
max-width:800px;
margin:0 auto;
text-align:center
}

.testimonial-quote {
font-size:clamp(1.25rem,2vw,1.5rem);
font-weight:500;
color:var(--slate-700);
line-height:1.7;
margin-bottom:2rem;
position:relative
}

.testimonial-author {
display:flex;
align-items:center;
justify-content:center;
gap:1rem
}

.author-avatar {
width:48px;
height:48px;
border-radius:50%;
background:var(--blue-600);
color:var(--white);
display:flex;
align-items:center;
justify-content:center;
font-weight:600;
transition:transform .3s ease
}

.testimonial-author:hover .author-avatar {
transform:scale(1.1)
}

.author-info {
text-align:left
}

.author-info h4 {
font-weight:600;
color:var(--slate-800)
}

.author-info span {
font-size:.9rem;
color:var(--slate-500)
}

.cta {
padding:6rem 5%
}

.cta-container {
max-width:900px;
margin:0 auto;
background:linear-gradient(135deg,var(--blue-600),var(--blue-500));
border-radius:24px;
padding:4rem;
text-align:center;
color:var(--white);
position:relative;
overflow:hidden;
transition:all .4s ease
}

.cta-container:hover {
transform:translateY(-5px);
box-shadow:0 30px 60px #2563eb4d
}

.cta-container::before {
content:'';
position:absolute;
top:-50%;
right:-20%;
width:400px;
height:400px;
background:radial-gradient(circle,#ffffff26,transparent 70%);
transition:all .4s ease
}

.cta-container:hover::before {
transform:scale(1.3)
}

.cta-title {
font-size:clamp(1.75rem,3vw,2.25rem);
font-weight:700;
margin-bottom:1rem;
position:relative
}

.cta-text {
font-size:1.1rem;
opacity:.9;
margin-bottom:2rem;
max-width:500px;
margin-left:auto;
margin-right:auto;
position:relative
}

.cta-buttons {
display:flex;
justify-content:center;
gap:1rem;
flex-wrap:wrap;
position:relative
}

.cta .btn-primary {
background:var(--white);
color:var(--blue-600)
}

.cta .btn-primary:hover {
background:var(--slate-100);
box-shadow:0 8px 20px #0003
}

.cta .btn-secondary {
background:transparent;
color:var(--white);
border-color:#ffffff4d
}

footer {
background:var(--slate-900);
color:var(--white);
padding:4rem 5% 2rem
}

.footer-content {
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:4rem;
margin-bottom:3rem
}

.footer-brand p {
color:var(--slate-300);
font-size:.9rem;
line-height:1.7;
margin-top:1rem
}

.footer-links h4 {
font-size:.8rem;
font-weight:600;
letter-spacing:.05em;
text-transform:uppercase;
margin-bottom:1.25rem;
color:var(--slate-300)
}

.footer-links ul {
list-style:none
}

.footer-links li {
margin-bottom:.6rem
}

.footer-links a {
color:var(--slate-300);
text-decoration:none;
font-size:.9rem;
transition:all .2s
}

.footer-links a:hover {
color:var(--white);
padding-left:5px
}

.footer-bottom {
display:flex;
justify-content:space-between;
align-items:center;
padding-top:2rem;
border-top:1px solid var(--slate-800);
font-size:.85rem;
color:var(--slate-400)
}

.footer-socials {
display:flex;
gap:1rem
}

.footer-socials a {
width:36px;
height:36px;
border-radius:8px;
background:var(--slate-800);
display:flex;
align-items:center;
justify-content:center;
color:var(--slate-400);
text-decoration:none;
transition:all .3s ease
}

.footer-socials a:hover {
background:var(--blue-600);
color:var(--white);
transform:translateY(-3px)
}

.menu-toggle {
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
padding:8px
}

.menu-toggle span {
width:22px;
height:2px;
background:var(--slate-700)
}

.fade-in {
opacity:0;
transform:translateY(30px);
transition:all .8s cubic-bezier(0.4,0,0.2,1)
}

.fade-in.visible {
opacity:1;
transform:translateY(0)
}

.fade-in-left {
opacity:0;
transform:translateX(-40px);
transition:all .8s cubic-bezier(0.4,0,0.2,1)
}

.fade-in-left.visible {
opacity:1;
transform:translateX(0)
}

.fade-in-right {
opacity:0;
transform:translateX(40px);
transition:all .8s cubic-bezier(0.4,0,0.2,1)
}

.fade-in-right.visible {
opacity:1;
transform:translateX(0)
}

.scale-in {
opacity:0;
transform:scale(0.9);
transition:all .8s cubic-bezier(0.4,0,0.2,1)
}

.scale-in.visible {
opacity:1;
transform:scale(1)
}

.stagger-children > * {
opacity:0;
transform:translateY(20px);
transition:all .5s cubic-bezier(0.4,0,0.2,1)
}

.stagger-children.visible > :nth-child(1) {
transition-delay:.1s
}

.stagger-children.visible > :nth-child(2) {
transition-delay:.2s
}

.stagger-children.visible > :nth-child(3) {
transition-delay:.3s
}

.stagger-children.visible > :nth-child(4) {
transition-delay:.4s
}

.stagger-children.visible > :nth-child(5) {
transition-delay:.5s
}

.stagger-children.visible > :nth-child(6) {
transition-delay:.6s
}

.stagger-children.visible > * {
opacity:1;
transform:translateY(0)
}

@media (max-width: 1024px) {
.hero-container {
grid-template-columns:1fr;
text-align:center
}

.hero p {
margin-left:auto;
margin-right:auto
}

.hero-buttons {
justify-content:center
}

.hero-visual {
max-width:550px;
margin:0 auto
}

.hero-float {
display:none
}

.features-grid {
grid-template-columns:repeat(2,1fr)
}

.showcase-item {
grid-template-columns:1fr;
gap:3rem
}

.showcase-item:nth-child(odd) .showcase-visual {
order:0
}

.footer-content {
grid-template-columns:1fr 1fr
}
}

@media (max-width: 768px) {
.nav-links {
display:none
}

.menu-toggle {
display:flex
}

.hero {
padding:8rem 5% 4rem
}

.features-grid {
grid-template-columns:1fr
}

.integration-cards {
grid-template-columns:1fr
}

.stats-grid {
grid-template-columns:repeat(2,1fr)
}

.footer-content {
grid-template-columns:1fr;
gap:2rem
}

.footer-bottom {
flex-direction:column;
gap:1rem;
text-align:center
}

.cta-container {
padding:3rem 2rem
}
}

.site-logo {
max-width:200px;
height:auto
}

@media (max-width: 768px) {
nav {
flex-wrap:nowrap;
justify-content:space-between;
align-items:center
}

.nav-links {
display:none;
flex-direction:column;
gap:1.5rem;
padding:1rem 0;
width:100%;
background:#fffffffa;
position:absolute;
top:100%;
left:0;
box-shadow:0 4px 12px #0000000d;
z-index:999
}

.nav-links.open {
display:flex
}

.menu-toggle {
display:flex
}
}

a:not(.btn):not(.logo):not(.nav-links a) {
    color: var(--blue-600);
    text-decoration: underline;
}

a:not(.btn):not(.logo):not(.nav-links a):visited {
    color: var(--blue-500);
}

a:not(.btn):not(.logo):not(.nav-links a):hover {
    color: var(--blue-600);
    text-decoration: underline;
}

a:not(.btn):not(.logo):not(.nav-links a):active {
    color: var(--blue-600);
}

footer a {
    color: var(--slate-300) !important;
}

footer a:hover {
    color: var(--white) !important;
}

.showcase-grid-3 {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2rem;
margin-top:2rem
}

.showcase-card {
background:#fff;
border-radius:16px;
padding:2rem;
box-shadow:0 10px 30px #0000000f;
transition:transform .2s ease,box-shadow .2s ease
}

.showcase-card:hover {
transform:translateY(-5px);
box-shadow:0 15px 40px #00000014
}

.showcase-card h3 {
margin-bottom:1rem;
font-size:1.25rem
}

@media (max-width: 1024px) {
.showcase-grid-3 {
grid-template-columns:1fr 1fr
}
}

@media (max-width: 640px) {
.showcase-grid-3 {
grid-template-columns:1fr
}
}