@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
 :root {
     --navy: #050d1a;
     --navy-2: #071525;
     --navy-3: #0a1e35;
     --navy-4: #0f2847;
     --blue: #1a6eff;
     --blue-light: #3b8cff;
     --cyan: #00d4ff;
     --cyan-dim: #00d4ff33;
     --purple: #7b5cf0;
     --purple-dim: #7b5cf020;
     --white: #ffffff;
     --white-80: rgba(255,255,255,0.8);
     --white-50: rgba(255,255,255,0.5);
     --white-20: rgba(255,255,255,0.2);
     --white-08: rgba(255,255,255,0.08);
     --white-04: rgba(255,255,255,0.04);
     --glow-blue: 0 0 60px rgba(26,110,255,0.35);
     --glow-cyan: 0 0 40px rgba(0,212,255,0.25);
     --border: rgba(255,255,255,0.1);
     --card-bg: rgba(255,255,255,0.04);
     --font-display: 'Sora', sans-serif;
     --font-body: 'DM Sans', sans-serif;
     --radius: 16px;
     --radius-sm: 10px;
     --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
 *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
html {
     scroll-behavior: smooth;
     scroll-padding-top: 50px;
}
body {
     font-family: var(--font-body);
     background: var(--navy);
     color: var(--white);
     overflow-x: hidden;
     line-height: 1.6;
}
/* ─── SCROLLBAR ─── */
 ::-webkit-scrollbar {
     width: 6px;
}
 ::-webkit-scrollbar-track {
     background: var(--navy);
}
 ::-webkit-scrollbar-thumb {
     background: var(--blue);
     border-radius: 3px;
}
/* ─── BACKGROUND GRID ─── */
 body::before {
     content: '';
     position: fixed;
     inset: 0;
     background-image: linear-gradient(var(--white-04) 1px, transparent 1px), linear-gradient(90deg, var(--white-04) 1px, transparent 1px);
     background-size: 60px 60px;
     pointer-events: none;
     z-index: 0;
}
/* ─── ORBS ─── */
.orb {
     position: fixed;
     border-radius: 50%;
     filter: blur(80px);
     pointer-events: none;
     z-index: 0;
     opacity: 0.35;
}
.orb-1 {
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, #1a6eff, transparent);
     top: -200px;
     left: -100px;
}
.orb-2 {
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, #7b5cf0, transparent);
     top: 40%;
     right: -150px;
}
.orb-3 {
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, #00d4ff, transparent);
     bottom: 10%;
     left: 20%;
}
/* ─── UTILITIES ─── */
.container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 24px;
     position: relative;
     z-index: 1;
}
.section {
     padding: 75px 0 90px;
}
.tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--cyan-dim);
     border: 1px solid rgba(0,212,255,0.3);
     color: var(--cyan);
     font-family: var(--font-display);
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     padding: 6px 14px;
     border-radius: 100px;
     margin-bottom: 20px;
}
.tag::before {
     content: '';
     width: 6px;
     height: 6px;
     background: var(--cyan);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}
 @keyframes pulse-dot {
     0%,100%{
        opacity:1;
        transform:scale(1)
    }
     50%{
        opacity:0.5;
        transform:scale(1.4)
    }
}
.section-title {
     font-family: var(--font-display);
     font-size: clamp(32px, 5vw, 52px);
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -0.02em;
     margin-bottom: 16px;
}
.section-sub {
     font-size: 18px;
     color: var(--white-50);
     font-weight: 300;
}
.gradient-text {
     background: linear-gradient(135deg, var(--cyan) 0%, var(--blue-light) 50%, var(--purple) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
}
/* ─── BUTTONS ─── */
.btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-family: var(--font-display);
     font-weight: 600;
     font-size: 15px;
     padding: 14px 28px;
     border-radius: var(--radius-sm);
     border: none;
     cursor: pointer;
     text-decoration: none;
     transition: var(--transition);
     white-space: nowrap;
}
.btn-primary {
     background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
     color: white;
     box-shadow: 0 4px 30px rgba(26,110,255,0.4);
}
.btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 40px rgba(26,110,255,0.6);
}
.btn-secondary {
     background: var(--white-08);
     color: var(--white);
     border: 1px solid var(--border);
     backdrop-filter: blur(10px);
}
.btn-secondary:hover {
     background: var(--white-20);
     border-color: var(--white-20);
     transform: translateY(-2px);
}
.btn-large {
     padding: 18px 30px;
     font-size: 17px;
     border-radius: var(--radius);
}
.btn svg {
     width: 18px;
     height: 18px;
     flex-shrink: 0;
}
/* ─── NAVBAR ─── */
 nav#navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     padding: 20px 0;
     background: rgba(5, 13, 26, 0.7);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
     transition: var(--transition);
}
.nav-inner {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
}
.logo {
     font-family: var(--font-display);
     font-weight: 800;
     font-size: 28px;
     text-decoration: none;
     color: white;
     letter-spacing: -0.03em;
     display: flex;
     align-items: center;
     gap: 5px;
}
.logo-icon {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: linear-gradient(135deg, var(--blue), var(--purple));
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     box-shadow: var(--glow-blue);
}
.logo span {
     color: var(--cyan);
     margin-bottom: -10px;
}
.nav-links {
     display: flex;
     align-items: center;
     gap: 32px;
     list-style: none;
}
.nav-links a {
     color: var(--white-80);
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     transition: var(--transition);
}
.nav-links a:hover {
     color: white;
}
.nav-cta {
     display: flex;
     align-items: center;
     gap: 12px;
}
.hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 4px;
     border: 0;
     background: transparent;
}
.hamburger span {
     display: block;
     width: 24px;
     height: 2px;
     background: white;
     border-radius: 2px;
     transition: var(--transition);
}
/* ─── HERO ─── */
.hero {
     padding: 130px 0 50px;
     position: relative;
     overflow: hidden;
}
.hero-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 64px;
     align-items: center;
}
.hero-content {
     container-type: inline-size;
}
.hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(0,212,255,0.08);
     border: 1px solid rgba(0,212,255,0.25);
     border-radius: 100px;
     padding: 8px 16px;
     margin-bottom: 28px;
     font-size: 13px;
     color: var(--cyan);
     font-weight: 500;
     animation: fadeInDown 0.6s ease both;
}
.hero-badge-dot {
     width: 8px;
     height: 8px;
     background: var(--cyan);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}
.hero h1 {
     font-family: var(--font-display);
     font-size: clamp(38px, 5.5vw, 66px);
     font-weight: 800;
     line-height: 1.05;
     letter-spacing: -0.03em;
     margin-bottom: 24px;
     animation: fadeInUp 0.7s 0.1s ease both;
}
.hero-sub {
     font-size: 19px;
     color: var(--white-50);
     font-weight: 300;
     max-width: 520px;
     margin-bottom: 40px;
     line-height: 1.65;
     animation: fadeInUp 0.7s 0.2s ease both;
}
.hero-btns {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
     animation: fadeInUp 0.7s 0.3s ease both;
}
 @container (max-width: 540px) {
    .hero-btns {
         flex-direction: column;
         align-items: center;
    }
    .hero-btns > a {
         max-width: 100%;
         justify-content: center;
         text-align: center;
         white-space: normal;
    }
}
.hero-stats {
     display: flex;
     gap: 40px;
     margin-top: 56px;
     padding-top: 40px;
     border-top: 1px solid var(--border);
     animation: fadeInUp 0.7s 0.4s ease both;
}
.stat-num {
     font-family: var(--font-display);
     font-size: 32px;
     font-weight: 800;
     background: linear-gradient(135deg, var(--cyan), var(--blue-light));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
}
.stat-label {
     font-size: 13px;
     color: var(--white-50);
     margin-top: 2px;
     font-weight: 400;
}
/* HERO VISUAL */
.hero-visual {
     position: relative;
     animation: fadeInRight 0.8s 0.3s ease both;
}
.hero-dashboard {
     background: var(--navy-3);
     border: 1px solid var(--border);
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 40px 100px rgba(0,0,0,0.6), var(--glow-blue);
     position: relative;
}
.dashboard-topbar {
     background: var(--navy-4);
     padding: 14px 20px;
     display: flex;
     align-items: center;
     gap: 12px;
     border-bottom: 1px solid var(--border);
}
.dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
}
.dot-r {
     background: #ff5f57;
}
.dot-y {
     background: #febc2e;
}
.dot-g {
     background: #28c840;
}
.topbar-title {
     margin-left: 8px;
     font-size: 13px;
     font-weight: 500;
     color: var(--white-50);
     font-family: var(--font-display);
}
.topbar-status {
     margin-left: auto;
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 12px;
     color: #28c840;
     font-weight: 600;
}
.topbar-status::before {
     content: '';
     width: 6px;
     height: 6px;
     background: #28c840;
     border-radius: 50%;
     animation: pulse-dot 1.5s infinite;
}
.dashboard-body {
     padding: 20px;
}
.flow-canvas {
     background: var(--navy-2);
     border-radius: var(--radius-sm);
     border: 1px solid var(--border);
     padding: 20px;
     min-height: 240px;
     position: relative;
     overflow: hidden;
}
.flow-nodes {
     display: flex;
     align-items: center;
     gap: 0;
     justify-content: space-between;
}
.flow-node {
     background: var(--navy-4);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 12px 16px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     font-size: 11px;
     font-weight: 600;
     color: var(--white-80);
     min-width: 88px;
     text-align: center;
     position: relative;
     z-index: 2;
     transition: var(--transition);
}
.flow-node-icon {
     font-size: 22px;
}
.flow-node.active {
     border-color: var(--cyan);
     box-shadow: 0 0 20px var(--cyan-dim);
     animation: node-pulse 2s infinite;
}
.flow-node.done {
     border-color: #28c840;
}
 @keyframes node-pulse {
     0%,100%{
        box-shadow:0 0 15px var(--cyan-dim)
    }
     50%{
        box-shadow:0 0 30px rgba(0,212,255,0.4)
    }
}
.flow-line {
     flex: 1;
     height: 2px;
     background: linear-gradient(90deg, var(--border), var(--cyan), var(--border));
     position: relative;
     overflow: hidden;
}
.flow-line::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, var(--cyan), transparent);
     animation: flow-anim 2s infinite;
}
 @keyframes flow-anim {
     0%{
        left:-100%
    }
     100%{
        left:100%
    }
}
.dashboard-metrics {
     display: grid;
     grid-template-columns: repeat(3,1fr);
     gap: 10px;
     margin-top: 12px;
}
.metric-card {
     background: var(--navy-4);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 14px;
     text-align: center;
}
.metric-val {
     font-family: var(--font-display);
     font-size: 20px;
     font-weight: 700;
     color: var(--cyan);
}
.metric-lbl {
     font-size: 10px;
     color: var(--white-50);
     margin-top: 3px;
     font-weight: 500;
}
.floating-badge {
     position: absolute;
     background: var(--navy-4);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 10px 14px;
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 12px;
     font-weight: 600;
     box-shadow: 0 10px 40px rgba(0,0,0,0.4);
     animation: float 3s ease-in-out infinite;
}
.floating-badge-1 {
     top: -70px;
     right: -20px;
     animation-delay: 0s;
}
.floating-badge-2 {
     bottom: 225px;
     left: -175px;
     animation-delay: 1.5s;
}
.badge-icon {
     font-size: 20px;
}
.badge-green {
     color: #28c840;
}
.badge-blue {
     color: var(--cyan);
}
 @keyframes float {
     0%,100%{
        transform:translateY(0)
    }
     50%{
        transform:translateY(-8px)
    }
}
/* ─── BENEFITS ─── */
.benefits {
     background: linear-gradient(180deg, #091933 0%, #0b1827 100%);
}
.benefits-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     margin-top: 56px;
}
.benefit-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 32px;
     position: relative;
     overflow: hidden;
     transition: var(--transition);
     cursor: default;
}
.benefit-card::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, var(--blue)08, transparent 60%);
     opacity: 0;
     transition: var(--transition);
}
.benefit-card:hover {
     transform: translateY(-4px);
     border-color: rgba(0,212,255,0.3);
}
.benefit-card:hover::before {
     opacity: 1;
}
.benefit-icon {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     background: linear-gradient(135deg, rgba(26,110,255,0.15), rgba(123,92,240,0.15));
     border: 1px solid rgba(26,110,255,0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     margin-bottom: 20px;
}
.benefit-card h3 {
     font-family: var(--font-display);
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 10px;
}
.benefit-card p {
     font-size: 14px;
     color: var(--white-50);
     line-height: 1.65;
     font-weight: 300;
}
/* ─── HOW IT WORKS ─── */
.how {
     position: relative;
}
.how-header {
     text-align: center;
     margin-bottom: 72px;
}
.how-header .section-sub {
     margin: 0 auto;
}
.steps {
     display: grid;
     grid-template-columns: repeat(3,1fr);
     gap: 32px;
     position: relative;
}
.steps::before {
     content: '';
     position: absolute;
     top: 38px;
     left: 16.66%;
     right: 16.66%;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
}
.step {
     text-align: center;
     padding: 0 16px;
}
.step-num {
     width: 76px;
     height: 76px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--blue), var(--purple));
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-display);
     font-size: 26px;
     font-weight: 800;
     margin: 0 auto 28px;
     box-shadow: 0 0 40px rgba(26,110,255,0.3);
     position: relative;
     z-index: 1;
}
.step h3 {
     font-family: var(--font-display);
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 12px;
}
.step p {
     font-size: 15px;
     color: var(--white-50);
     font-weight: 300;
     line-height: 1.65;
}
/* ─── FEATURES ─── */
.features {
     background: var(--navy-2);
}
.features-header {
     margin-bottom: 56px;
}
.features-grid {
     display: grid;
     grid-template-columns: repeat(3,1fr);
     gap: 20px;
}
.feature-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 28px;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
}
.feature-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--blue), var(--purple));
     transform: scaleX(0);
     transition: var(--transition);
     transform-origin: left;
}
.feature-card:hover {
     transform: translateY(-4px);
     border-color: rgba(123,92,240,0.3);
}
.feature-card:hover::after {
     transform: scaleX(1);
}
.feature-icon {
     font-size: 32px;
     margin-bottom: 16px;
     display: block;
}
.feature-card h3 {
     font-family: var(--font-display);
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 8px;
     letter-spacing: -0.01em;
}
.feature-card p {
     font-size: 13px;
     color: var(--white-50);
     line-height: 1.6;
     font-weight: 300;
}
.feature-tag {
     display: inline-block;
     margin-top: 14px;
     background: var(--purple-dim);
     color: var(--purple);
     font-size: 10px;
     font-weight: 600;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     padding: 4px 10px;
     border-radius: 100px;
     border: 1px solid rgba(123,92,240,0.2);
}
/* ─── USE CASES ─── */
.usecases-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: start;
}
.usecase-visual {
     background: var(--navy-3);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 32px;
     position: relative;
}
.usecase-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
}
.usecase-item {
     display: flex;
     align-items: center;
     gap: 14px;
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 14px 18px;
     transition: var(--transition);
     cursor: default;
}
.usecase-item:hover {
     border-color: rgba(0,212,255,0.3);
     background: rgba(0,212,255,0.04);
}
.usecase-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--cyan);
     flex-shrink: 0;
}
.usecase-item span {
     font-size: 14px;
     font-weight: 500;
}
.usecase-num {
     margin-left: auto;
     font-family: var(--font-display);
     font-size: 11px;
     color: var(--white-50);
     font-weight: 600;
}
/* ─── TESTIMONIALS ─── */
.testimonials {
     background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
}
.testi-header {
     text-align: center;
     margin-bottom: 56px;
}
.testi-header .section-sub {
     margin: 0 auto;
}
.testi-carousel {
     position: relative;
     padding: 0 56px 42px;
}
.testi-viewport {
     overflow: hidden;
}
.testi-track {
     display: flex;
     gap: 24px;
     transition: transform 0.45s ease;
     will-change: transform;
}
.testi-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 32px;
     transition: var(--transition);
     flex: 0 0 calc((100% - 48px) / 3);
}
.testi-carousel-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     border: 1px solid var(--border);
     background: rgba(255,255,255,0.06);
     color: var(--white);
     font-size: 30px;
     line-height: 1;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
     backdrop-filter: blur(10px);
}
.testi-carousel-btn:hover {
     background: var(--white-20);
     border-color: rgba(0,212,255,0.35);
     color: var(--cyan);
}
.testi-carousel-prev {
     left: 0;
}
.testi-carousel-next {
     right: 0;
}
.testi-carousel-dots {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     display: flex;
     justify-content: center;
     gap: 10px;
}
.testi-carousel-dot {
     width: 9px;
     height: 9px;
     border: 0;
     border-radius: 50%;
     background: var(--white-20);
     cursor: pointer;
     transition: var(--transition);
     padding: 0;
}
.testi-carousel-dot.active {
     width: 26px;
     border-radius: 999px;
     background: linear-gradient(135deg, var(--blue), var(--cyan));
}
.testi-card:hover {
     border-color: rgba(26,110,255,0.3);
     transform: translateY(-4px);
}
.testi-stars {
     color: #fbbf24;
     font-size: 14px;
     margin-bottom: 16px;
     letter-spacing: 2px;
}
.testi-text {
     font-size: 15px;
     color: var(--white-80);
     line-height: 1.7;
     font-weight: 300;
     font-style: italic;
     margin-bottom: 24px;
}
.testi-author {
     display: flex;
     align-items: center;
     gap: 12px;
}
.testi-avatar {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--blue), var(--purple));
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-display);
     font-weight: 700;
     font-size: 16px;
}
.testi-avatar-img {
     object-fit: cover;
     border: 1px solid var(--border);
}
.testi-name {
     font-weight: 600;
     font-size: 14px;
     font-family: var(--font-display);
}
.testi-role {
     font-size: 12px;
     color: var(--white-50);
     margin-top: 2px;
}
/* ─── CTA ─── */
.cta-section {
     background: linear-gradient(135deg, var(--navy-3) 0%, rgba(123,92,240,0.1) 50%, var(--navy-3) 100%);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     text-align: center;
     padding: 75px 0;
     position: relative;
     overflow: hidden;
}
.cta-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(26,110,255,0.08), transparent);
}
.cta-section h2 {
     font-size: clamp(32px, 5vw, 54px);
     margin-bottom: 20px;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
}
.cta-section p {
     font-size: 18px;
     color: var(--white-50);
     margin-bottom: 40px;
     font-weight: 300;
}
.cta-btns {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
}
/* ─── FOOTER ─── */
 footer {
     background: var(--navy-2);
     border-top: 1px solid var(--border);
     padding: 64px 0 32px;
}
.footer-inner {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 48px;
     margin-bottom: 48px;
}
.footer-brand p {
     color: var(--white-50);
     font-size: 14px;
     line-height: 1.7;
     margin-top: 16px;
     max-width: 280px;
     font-weight: 300;
}
.footer-col h4 {
     font-family: var(--font-display);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: var(--white-50);
     margin-bottom: 20px;
}
.footer-col ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 12px;
}
.footer-col a {
     color: var(--white-80);
     text-decoration: none;
     font-size: 14px;
     transition: var(--transition);
}
.footer-col a:hover {
     color: var(--cyan);
}
.footer-col .footer-contact-link {
     display: inline-flex;
     align-items: center;
     gap: 7px;
}
.whatsapp-icon {
     width: 18px;
     height: 18px;
     flex: 0 0 18px;
     color: #25d366;
}
.footer-bottom {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 32px;
     border-top: 1px solid var(--border);
     font-size: 13px;
     color: var(--white-50);
}
.footer-social {
     display: flex;
     gap: 12px;
}
.social-link {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: var(--card-bg);
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--white-80);
     text-decoration: none;
     font-size: 16px;
     transition: var(--transition);
}
.social-link:hover {
     border-color: var(--cyan);
     color: var(--cyan);
}
/* ─── ANIMATIONS ─── */
 @keyframes fadeInUp {
     from{
        opacity:0;
        transform:translateY(24px)
    }
     to{
        opacity:1;
        transform:translateY(0)
    }
}
 @keyframes fadeInDown {
     from{
        opacity:0;
        transform:translateY(-16px)
    }
     to{
        opacity:1;
        transform:translateY(0)
    }
}
 @keyframes fadeInRight {
     from{
        opacity:0;
        transform:translateX(32px)
    }
     to{
        opacity:1;
        transform:translateX(0)
    }
}
.reveal {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
     opacity: 1;
     transform: translateY(0);
}
.reveal-delay-1 {
     transition-delay: 0.1s;
}
.reveal-delay-2 {
     transition-delay: 0.2s;
}
.reveal-delay-3 {
     transition-delay: 0.3s;
}
.reveal-delay-4 {
     transition-delay: 0.4s;
}
.reveal-delay-5 {
     transition-delay: 0.5s;
}
/* ─── MOBILE MENU ─── */
.mobile-menu {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 200;
     background: rgba(5,13,26,0.97);
     backdrop-filter: blur(20px);
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 32px;
}
.mobile-menu.open {
     display: flex;
}
.mobile-menu a {
     font-family: var(--font-display);
     font-size: 24px;
     font-weight: 700;
     color: white;
     text-decoration: none;
}
.mobile-close {
     position: absolute;
     top: 24px;
     right: 24px;
     background: none;
     border: none;
     color: white;
     font-size: 28px;
     cursor: pointer;
}
/* ─── RESPONSIVE ─── */
 @media (max-width: 1024px) {
    .benefits-grid,.features-grid {
         grid-template-columns: repeat(2,1fr);
    }
    .testi-carousel {
         padding: 0 48px 42px;
    }
    .testi-card {
         flex-basis: calc((100% - 24px) / 2);
    }
    .footer-inner {
         grid-template-columns: 1fr 1fr;
    }
}
 @media (max-width: 768px) {
    .nav-links,.nav-cta {
         display: none;
    }
    .hamburger {
         display: flex;
    }
    .hero-inner {
         grid-template-columns: minmax(0, 1fr);
         gap: 48px;
    }
    .hero-content,.hero-visual {
         min-width: 0;
         width: 100%;
    }
    .hero-visual {
         order: -1;
    }
    .dashboard-body {
         padding: 10px;
    }
    .flow-canvas {
         padding: 10px;
         min-height: 220px;
    }
    .flow-node {
         min-width: 52px;
         padding: 8px 4px;
         font-size: 9px;
    }
    .flow-node-icon {
         font-size: 18px;
    }
    .dashboard-metrics {
         grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .metric-card {
         min-width: 0;
         padding: 10px 4px;
    }
    .hero h1 {
         font-size: 38px;
    }
    .benefits-grid,.features-grid {
         grid-template-columns: 1fr;
    }
    .testi-carousel {
         padding: 0 0 54px;
    }
    .testi-card {
         flex-basis: 100%;
    }
    .testi-carousel-btn {
         top: auto;
         bottom: 0;
         transform: none;
    }
    .testi-carousel-prev {
         left: calc(50% - 58px);
    }
    .testi-carousel-next {
         right: calc(50% - 58px);
    }
    .testi-carousel-dots {
         bottom: 14px;
    }
    .steps {
         grid-template-columns: 1fr;
    }
    .steps::before {
         display: none;
    }
    .usecases-inner {
         grid-template-columns: 1fr;
    }
    .hero-stats {
         gap: 24px;
         flex-wrap: wrap;
    }
    .footer-inner {
         grid-template-columns: 1fr;
    }
    .footer-bottom {
         flex-direction: column;
         gap: 16px;
         text-align: center;
    }
    .section {
         padding: 72px 0;
    }
    .floating-badge-1,.floating-badge-2 {
         display: none;
    }
}
 @media (max-width: 600px) {
    .hero-btns {
         flex-direction: column;
         align-items: center;
    }
    .hero-btns > a {
         max-width: 100%;
         justify-content: center;
         text-align: center;
         white-space: normal;
    }
}
/* ─── ESTILOS INLINE EXTRAÍDOS DO HTML ─── */
.inline-style-1 {
     padding:10px 20px;
    font-size:14px;
}
.inline-style-2 {
     font-size:11px;
    color:var(--white-50) 
}
.inline-style-3 {
     font-size:11px;
    color:var(--white-50);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.06em;
    margin-bottom:14px;
}
.inline-style-4 {
     margin-top:20px;
    padding:12px;
    background:var(--navy);
    border-radius:8px;
    border:1px solid var(--border);
}
.inline-style-5 {
     font-size:11px;
    color:var(--white-50);
    margin-bottom:8px;
    font-weight:600;
}
.inline-style-6 {
     font-size:12px;
    color:#28c840;
    font-family:monospace;
}
.inline-style-7 {
     font-size:12px;
    color:var(--cyan);
    font-family:monospace;
    animation:pulse-dot 1.5s infinite;
}
.inline-style-8 {
     background:var(--navy) 
}
.inline-style-9 {
     margin-bottom:32px;
}
.inline-style-10 {
     display:flex;
    flex-direction:column;
    gap:14px;
}
.inline-style-11 {
     display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:500;
}
.inline-style-12 {
     color:var(--cyan) 
}
.inline-style-13 {
     font-size:12px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--white-50);
    margin-bottom:16px;
}
.inline-style-14 {
     justify-content:center;
    display:inline-flex;
}
.inline-style-15 {
     width:20px;
    height:20px 
}
.inline-style-16 {
     margin-bottom:0 
}
.inline-style-17 {
     margin-top:20px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.inline-style-18 {
     background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:6px 12px;
    font-size:12px;
    color:var(--white-50);
}
/* ─── AUTH / FORM PAGES ─── */
.auth-page{
    min-height:100vh;
    padding:120px 24px 64px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1
}
.auth-card{
    width:100%;
    max-width:520px;
    background:rgba(10,30,53,.86);
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:0 40px 100px rgba(0,0,0,.55),var(--glow-blue);
    padding:36px;
    backdrop-filter:blur(20px)
}
.auth-card.auth-card-large{
    max-width:760px
}
.auth-header{
    text-align:center;
    margin-bottom:30px
}
.auth-header h1{
    font-family:var(--font-display);
    font-size:clamp(28px,4vw,42px);
    line-height:1.1;
    margin-bottom:10px
}
.auth-header p{
    color:var(--white-50);
    font-weight:300
}
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}
.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px
}
.form-group.full{
    grid-column:1/-1
}
.form-group label{
    font-size:13px;
    color:var(--white-80);
    font-weight:600
}
.form-control{
    width:100%;
    border:1px solid var(--border);
    background:rgba(255,255,255,.06);
    color:var(--white);
    border-radius:12px;
    padding:14px 16px;
    font-family:var(--font-body);
    font-size:15px;
    outline:none;
    transition:var(--transition)
}
.form-control:focus{
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(0,212,255,.12)
}
.form-control::placeholder{
    color:var(--white-50)
}
textarea.form-control{
    min-height:130px;
    resize:vertical
}
.form-actions{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:8px
}
.form-actions .btn{
    justify-content:center;
    width:100%
}
.form-note{
    color:var(--white-50);
    font-size:13px;
    text-align:center
}
.form-note a{
    color:var(--cyan);
    text-decoration:none
}
.form-alert{
    display:none;
    margin-bottom:18px;
    padding:13px 15px;
    border-radius:12px;
    font-size:14px;
    border:1px solid rgba(0,212,255,.28);
    background:rgba(0,212,255,.08);
    color:var(--cyan)
}
.form-alert.error{
    border-color:rgba(255,95,87,.35);
    background:rgba(255,95,87,.08);
    color:#ff8b84;
}
@media(max-width:768px){
   .auth-page{
        padding-top:110px;
    }
   .auth-card{
        padding:26px;
    }
   .form-grid{
        grid-template-columns:1fr;
    }
}
.cadastro-success{
    text-align:center;
    padding:28px 18px 20px;
    outline:none;
}
.cadastro-success[hidden]{
    display:none;
}
.cadastro-success .logo{
    justify-content:center;
    margin-bottom:34px
}
.cadastro-success-icon{
    width:88px;
    height:88px;
    margin:0 auto 24px;
    display:grid;
    place-items:center;
    border:1px solid rgba(0,212,255,.38);
    border-radius:50%;
    color:#07111f;
    background:linear-gradient(135deg,var(--cyan),#8cf6d2);
    box-shadow:0 0 0 12px rgba(0,212,255,.06),0 18px 55px rgba(0,212,255,.2);
    font-family:var(--font-display);
    font-size:44px;
    font-weight:800
}
.cadastro-success .tag{
    margin-bottom:18px
}
.cadastro-success h1{
    margin:0 0 18px;
    font-family:var(--font-display);
    font-size:clamp(32px,5vw,50px);
    line-height:1.05;
    letter-spacing:-.035em
}
.cadastro-success p{
    max-width:570px;
    margin:0 auto 32px;
    color:var(--white-50);
    font-size:17px;
    line-height:1.7;
    font-weight:300
}
.cadastro-success .btn{
    min-width:220px;
    justify-content:center
}
.language-select{
    display:inline-flex;
    align-items:center
}
.language-select select{
    max-width:155px;
    height:38px;
    padding:0 5px 0 10px;
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--white-80);
    background:#0b1c31;
    font-family:var(--font-body);
    font-size:13px;
    cursor:pointer;
    outline:none
}
.language-select select:focus{
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(0,212,255,.12)
}
.sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important
}
.mobile-menu .language-select{
    width:min(320px,80vw)
}
.mobile-menu .language-select select{
    width:100%;
    max-width:none;
    height:46px
}
/* ─── FEATURES CTA ─── */
.features-cta {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
     gap: 16px;
     margin-top: 48px;
}
/* ─── RESOURCES PAGE ─── */
.resources-hero {
     padding: 150px 0 80px;
     position: relative;
     overflow: hidden;
}
.resources-hero-inner {
     max-width: 900px;
     text-align: center;
     margin: 0 auto;
}
.resources-hero .section-sub {
     margin: 0 auto 34px;
     max-width: 740px;
}
.resources-summary {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     margin-top: 42px;
}
.resources-summary-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 22px 18px;
     text-align: center;
}
.resources-summary-value {
     font-family: var(--font-display);
     font-size: 30px;
     font-weight: 800;
     color: var(--cyan);
}
.resources-summary-label {
    font-size: 12px;
    color: var(--white-50);
    margin-top: 4px;
}
.resources-nav {
    position: sticky;
    top: 77px;
    z-index: 10;
    background: rgba(5, 13, 26, 0.82);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.resources-nav-inner {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 14px 0px 2px 5px;
}
@media (min-width: 940px) {
    .resources-nav-inner {
        justify-content: center;
    }
}
.resources-nav-inner a {
    flex: 0 0 auto;
    color: var(--white-80);
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--white-04);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
}
.resources-nav-inner a:hover {
     color: var(--white);
     border-color: rgba(0,212,255,0.35);
     background: rgba(0,212,255,0.07);
}
.resources-section {
     padding: 40px 0;
     scroll-margin-top: 60px;
}
.resources-section.alt {
     background: var(--navy-2);
}
.resources-section-head {
     margin-bottom: 34px;
     text-align:center;
}
.resources-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
}
.resource-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 26px;
     min-height: 220px;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
}
.resource-card:hover {
     transform: translateY(-4px);
     border-color: rgba(0,212,255,0.3);
     box-shadow: 0 18px 60px rgba(0,0,0,0.22);
}
.resource-card::after {
     content: '';
     position: absolute;
     inset: auto 0 0 0;
     height: 2px;
     background: linear-gradient(90deg, var(--blue), var(--purple));
     transform: scaleX(0);
     transform-origin: left;
     transition: var(--transition);
}
.resource-card:hover::after {
     transform: scaleX(1);
}
.resource-icon {
     width: 48px;
     height: 48px;
     border-radius: 14px;
     background: linear-gradient(135deg, rgba(26,110,255,0.16), rgba(123,92,240,0.16));
     border: 1px solid rgba(26,110,255,0.22);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 23px;
     margin-bottom: 18px;
}
.resource-card h3 {
     font-family: var(--font-display);
     font-size: 18px;
     font-weight: 800;
     margin-bottom: 10px;
}
.resource-card p {
     color: var(--white-50);
     font-size: 14px;
     line-height: 1.65;
     font-weight: 300;
}
.resource-list {
     list-style: none;
     margin-top: 16px;
     display: flex;
     flex-direction: column;
     gap: 8px;
}
.resource-list li {
     color: var(--white-80);
     font-size: 13px;
     display: flex;
     gap: 8px;
}
.resource-list li::before {
     content: '✓';
     color: var(--cyan);
     flex-shrink: 0;
}
.resources-wide-card {
     background: linear-gradient(135deg, rgba(26,110,255,0.12), rgba(123,92,240,0.08));
     border: 1px solid var(--border);
     border-radius: 24px;
     padding: 42px;
     display: grid;
     grid-template-columns: 1.2fr 0.8fr;
     gap: 34px;
     align-items: center;
}
.resources-wide-card p {
     color: var(--white-50);
     font-weight: 300;
     line-height: 1.7;
}
.resources-cta-box {
     text-align: center;
     background: var(--navy-3);
     border: 1px solid var(--border);
     border-radius: 28px;
     padding: 58px 32px;
     box-shadow: var(--glow-blue);
}
.resources-cta-box .section-sub {
     margin: 0 auto 30px;
}
 @media (max-width: 1024px) {
    .resources-grid {
         grid-template-columns: repeat(2, 1fr);
    }
    .resources-summary {
         grid-template-columns: repeat(2, 1fr);
    }
    .resources-wide-card {
         grid-template-columns: 1fr;
    }
}
 @media (max-width: 768px) {
   .resources-hero {
         padding: 125px 0 64px;
    }
   .resources-grid,.resources-summary {
         grid-template-columns: 1fr;
    }
   .resources-section {
         padding: 45px 0;
    }
   .resources-nav {
         top: 72px;
    }
}
/* ─── SOBRE ─── */
.about-hero {
     padding-top: 160px;
     background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}
.about-actions {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     margin-top: 36px;
}
.about-section {
     background: var(--navy-2);
}
.about-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
}
.about-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 32px;
     transition: var(--transition);
}
.about-card:hover {
     transform: translateY(-4px);
     border-color: rgba(0,212,255,0.3);
}
.about-icon {
     width: 54px;
     height: 54px;
     border-radius: 14px;
     background: linear-gradient(135deg, rgba(26,110,255,0.15), rgba(123,92,240,0.15));
     border: 1px solid rgba(26,110,255,0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 25px;
     margin-bottom: 20px;
}
.about-card h2 {
     font-family: var(--font-display);
     font-size: 22px;
     line-height: 1.2;
     margin-bottom: 12px;
}
.about-card p,.about-text {
     color: var(--white-50);
     font-size: 15px;
     line-height: 1.75;
     font-weight: 300;
}
.about-text {
     margin-top: 22px;
     max-width: 620px;
}
.about-story {
     background: var(--navy);
}
.about-story-inner {
     display: grid;
     grid-template-columns: 1.1fr 0.9fr;
     gap: 64px;
     align-items: center;
}
.about-panel {
     background: var(--navy-3);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 32px;
     box-shadow: 0 24px 70px rgba(0,0,0,0.28);
}
.about-panel-title {
     font-family: var(--font-display);
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 20px;
}
.about-list-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 14px 0;
     border-bottom: 1px solid var(--border);
     color: var(--white-80);
     font-size: 14px;
     line-height: 1.5;
}
.about-list-item:last-child {
     border-bottom: 0;
}
.about-list-item span {
     color: var(--cyan);
     font-weight: 800;
}
 @media (max-width: 1024px) {
    .about-grid {
         grid-template-columns: 1fr;
    }
    .about-story-inner {
         grid-template-columns: 1fr;
         gap: 40px;
    }
}
 @media (max-width: 768px) {
    .about-hero {
         padding-top: 130px;
    }
    .about-actions {
         flex-direction: column;
    }
    .about-actions .btn {
         justify-content: center;
    }
}
/* ─── BLOG ─── */
/* Hero */
.blog-hero {
     padding-top: 160px;
     background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}
.blog-hero-inner {
     max-width: 860px;
}
/* Filtros */
.blog-filters {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 32px;
}
.blog-filter-btn {
     background: var(--card-bg);
     border: 1px solid var(--border);
     color: var(--white-80);
     font-family: var(--font-display);
     font-size: 13px;
     font-weight: 600;
     padding: 8px 18px;
     border-radius: 100px;
     cursor: pointer;
     transition: var(--transition);
     letter-spacing: 0.02em;
}
.blog-filter-btn:hover {
     border-color: rgba(0,212,255,0.4);
     color: var(--cyan);
}
.blog-filter-btn.active {
     background: linear-gradient(135deg, var(--blue), var(--purple));
     border-color: transparent;
     color: white;
     box-shadow: 0 4px 20px rgba(26,110,255,0.35);
}
/* Post em destaque */
.blog-featured-section {
     background: var(--navy);
     padding-bottom: 0;
}
.blog-featured {
     display: grid;
     grid-template-columns: 1.1fr 0.9fr;
     gap: 56px;
     align-items: center;
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: 24px;
     padding: 48px;
     position: relative;
     overflow: hidden;
     transition: var(--transition);
}
.blog-featured::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--blue), var(--cyan), var(--purple));
}
.blog-featured:hover {
     border-color: rgba(0,212,255,0.25);
     transform: translateY(-3px);
}
.blog-meta {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 20px;
     flex-wrap: wrap;
}
.blog-cat {
     font-family: var(--font-display);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     padding: 4px 12px;
     border-radius: 100px;
}
.blog-cat-tutorial {
     background: rgba(0,212,255,0.12);
     color: var(--cyan);
     border: 1px solid rgba(0,212,255,0.25);
}
.blog-cat-cases {
     background: rgba(26,110,255,0.12);
     color: var(--blue-light);
     border: 1px solid rgba(26,110,255,0.25);
}
.blog-cat-dicas {
     background: rgba(123,92,240,0.12);
     color: var(--purple);
     border: 1px solid rgba(123,92,240,0.25);
}
.blog-cat-novidades {
     background: rgba(40,200,64,0.12);
     color: #28c840;
     border: 1px solid rgba(40,200,64,0.25);
}
.blog-date,.blog-read {
     font-size: 13px;
     color: var(--white-50);
     font-weight: 400;
}
.blog-featured-title {
     font-family: var(--font-display);
     font-size: clamp(22px, 2.8vw, 32px);
     font-weight: 800;
     line-height: 1.2;
     letter-spacing: -0.02em;
     margin-bottom: 16px;
}
.blog-featured-excerpt {
     font-size: 15px;
     color: var(--white-50);
     line-height: 1.75;
     font-weight: 300;
     margin-bottom: 28px;
}
.blog-featured-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     flex-wrap: wrap;
}
.blog-author {
     display: flex;
     align-items: center;
     gap: 12px;
}
.blog-author-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--blue), var(--purple));
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-display);
     font-weight: 700;
     font-size: 13px;
     flex-shrink: 0;
}
.blog-author-name {
     font-weight: 600;
     font-size: 14px;
     font-family: var(--font-display);
}
.blog-author-role {
     font-size: 12px;
     color: var(--white-50);
     margin-top: 2px;
}
/* Bloco de código decorativo */
.blog-code-block {
     background: var(--navy-2);
     border: 1px solid var(--border);
     border-radius: 14px;
     overflow: hidden;
     box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.blog-code-topbar {
     background: var(--navy-4);
     padding: 12px 16px;
     display: flex;
     align-items: center;
     gap: 6px;
     border-bottom: 1px solid var(--border);
}
.blog-code-body {
     padding: 20px;
     display: flex;
     flex-direction: column;
     gap: 10px;
}
.blog-code-line {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 13px;
     font-family: 'DM Mono', 'Fira Code', monospace;
}
.code-step {
     width: 20px;
     text-align: center;
     font-size: 12px;
     font-weight: 700;
     flex-shrink: 0;
}
.code-step.done {
     color: #28c840;
}
.code-step.active {
     color: var(--cyan);
     animation: pulse-dot 1.5s infinite;
}
.code-step.pending{
     color: var(--white-20);
}
.code-key {
     color: var(--white-50);
     font-size: 12px;
     min-width: 72px;
}
.code-val {
     color: var(--cyan);
     font-size: 12px;
}
/* Grid de artigos */
.blog-grid-section {
     padding-top: 64px;
}
.blog-section-header {
     margin-bottom: 40px;
}
.blog-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
}
.blog-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 28px;
     display: flex;
     flex-direction: column;
     gap: 14px;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
}
.blog-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--blue), var(--purple));
     transform: scaleX(0);
     transition: var(--transition);
     transform-origin: left;
}
.blog-card:hover {
     transform: translateY(-4px);
     border-color: rgba(123,92,240,0.3);
}
.blog-card:hover::after {
     transform: scaleX(1);
}
.blog-card-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
}
.blog-card-title {
     font-family: var(--font-display);
     font-size: 16px;
     font-weight: 700;
     line-height: 1.4;
     letter-spacing: -0.01em;
     flex: 1;
}
.blog-card-excerpt {
     font-size: 13px;
     color: var(--white-50);
     line-height: 1.7;
     font-weight: 300;
     flex: 1;
}
.blog-card-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: auto;
     padding-top: 14px;
     border-top: 1px solid var(--border);
}
.blog-read-link {
     font-family: var(--font-display);
     font-size: 13px;
     font-weight: 600;
     color: var(--cyan);
     text-decoration: none;
     transition: var(--transition);
     display: flex;
     align-items: center;
     gap: 4px;
}
.blog-read-link:hover {
     color: var(--blue-light);
     gap: 8px;
}
/* Paginação */
.blog-pagination {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     margin-top: 56px;
}
.blog-page-btn {
     min-width: 40px;
     height: 40px;
     background: var(--card-bg);
     border: 1px solid var(--border);
     color: var(--white-80);
     font-family: var(--font-display);
     font-size: 14px;
     font-weight: 600;
     border-radius: 10px;
     cursor: pointer;
     transition: var(--transition);
     padding: 0 16px;
     display: flex;
     align-items: center;
     gap: 6px;
}
.blog-page-btn:hover {
     border-color: rgba(0,212,255,0.4);
     color: var(--cyan);
}
.blog-page-btn.active {
     background: linear-gradient(135deg, var(--blue), var(--purple));
     border-color: transparent;
     color: white;
}
.blog-page-next {
     padding: 0 20px;
}
/* Newsletter */
.blog-newsletter {
     background: var(--navy);
}
.blog-newsletter-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 64px;
     align-items: center;
     background: var(--navy-3);
     border: 1px solid var(--border);
     border-radius: 24px;
     padding: 56px;
     position: relative;
     overflow: hidden;
}
.blog-newsletter-inner::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(26,110,255,0.07), transparent);
     pointer-events: none;
}
.newsletter-input-group {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
}
.newsletter-input {
     flex: 1;
     min-width: 200px;
     background: var(--navy-2);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 14px 18px;
     font-family: var(--font-body);
     font-size: 15px;
     color: var(--white);
     outline: none;
     transition: var(--transition);
}
.newsletter-input::placeholder {
     color: var(--white-50);
}
.newsletter-input:focus {
     border-color: rgba(0,212,255,0.5);
     box-shadow: 0 0 0 3px rgba(0,212,255,0.08);
}
.newsletter-msg {
     font-size: 13px;
     margin-top: 10px;
     font-weight: 500;
     min-height: 20px;
}
/* Responsivo */
 @media (max-width: 1024px) {
    .blog-grid {
         grid-template-columns: repeat(2, 1fr);
    }
    .blog-featured {
         grid-template-columns: 1fr;
         gap: 32px;
    }
    .blog-newsletter-inner {
         grid-template-columns: 1fr;
         gap: 36px;
    }
}
 @media (max-width: 768px) {
    .blog-hero {
         padding-top: 130px;
    }
    .blog-grid {
         grid-template-columns: 1fr;
    }
    .blog-featured {
         padding: 28px;
    }
    .blog-featured-footer {
         flex-direction: column;
         align-items: flex-start;
    }
    .blog-newsletter-inner {
         padding: 32px 24px;
    }
    .blog-filters {
         gap: 8px;
    }
}
/* ─── ARTICLE PAGE ─── */
.article-hero {
     padding: 140px 0 56px;
     background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
     border-bottom: 1px solid var(--border);
}
.article-hero-inner {
     max-width: 860px;
}
.article-back {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--white-50);
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 28px;
     transition: var(--transition);
}
.article-back svg {
     width: 16px;
     height: 16px;
}
.article-back:hover {
     color: var(--cyan);
}
.article-meta {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 20px;
     flex-wrap: wrap;
}
.article-title {
     font-family: var(--font-display);
     font-size: clamp(28px, 4vw, 48px);
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -0.025em;
     margin-bottom: 18px;
}
.article-subtitle {
     font-size: 18px;
     color: var(--white-50);
     line-height: 1.7;
     font-weight: 300;
     max-width: 720px;
     margin-bottom: 28px;
}
.article-author {
     display: flex;
     align-items: center;
     gap: 12px;
     padding-top: 24px;
     border-top: 1px solid var(--border);
}
/* ── Layout principal ── */
.article-body-section {
     padding: 72px 0 80px;
     background: var(--navy-2);
}
.article-layout {
     display: grid;
     grid-template-columns: 1fr 300px;
     gap: 56px;
     align-items: start;
}
/* ── Conteúdo do artigo ── */
.article-intro {
     font-size: 17px;
     color: var(--white-80);
     line-height: 1.8;
     font-weight: 300;
}
.article-divider {
     height: 1px;
     background: linear-gradient(90deg, var(--blue), var(--purple), transparent);
     margin: 36px 0;
     opacity: 0.4;
}
.article-section {
     margin-bottom: 44px;
}
.article-h2 {
     font-family: var(--font-display);
     font-size: clamp(18px, 2.2vw, 24px);
     font-weight: 700;
     letter-spacing: -0.015em;
     margin-bottom: 14px;
     color: var(--white);
}
.article-p {
     font-size: 15px;
     color: var(--white-80);
     line-height: 1.85;
     font-weight: 300;
}
.article-highlight {
     background: var(--navy-3);
     border: 1px solid var(--border);
     border-left: 3px solid var(--cyan);
     border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
     padding: 24px 28px;
     margin-top: 20px;
}
.article-highlight-title {
     font-family: var(--font-display);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: var(--cyan);
     margin-bottom: 16px;
}
.article-check-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 9px 0;
     border-bottom: 1px solid var(--border);
     font-size: 14px;
     color: var(--white-80);
     line-height: 1.5;
}
.article-check-item:last-child {
     border-bottom: none;
}
.article-check-item span {
     color: var(--cyan);
     font-weight: 800;
     font-size: 13px;
     flex-shrink: 0;
     margin-top: 1px;
}
/* Tags */
.article-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 48px;
     padding-top: 28px;
     border-top: 1px solid var(--border);
}
.article-tag {
     background: var(--white-04);
     border: 1px solid var(--border);
     color: var(--white-50);
     font-size: 12px;
     font-weight: 500;
     padding: 5px 12px;
     border-radius: 100px;
     font-family: var(--font-display);
     letter-spacing: 0.03em;
}
/* Nav entre artigos */
.article-nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     margin-top: 32px;
     flex-wrap: wrap;
}
.article-nav-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--font-display);
     font-size: 14px;
     font-weight: 600;
     color: var(--white-80);
     text-decoration: none;
     padding: 12px 20px;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     background: var(--card-bg);
     transition: var(--transition);
}
.article-nav-btn svg {
     width: 16px;
     height: 16px;
}
.article-nav-btn:hover {
     border-color: rgba(0,212,255,0.3);
     color: var(--cyan);
}
.article-nav-primary {
     background: linear-gradient(135deg, var(--blue), var(--purple));
     border-color: transparent;
     color: white;
     box-shadow: 0 4px 20px rgba(26,110,255,0.3);
}
.article-nav-primary:hover {
     color: white;
     box-shadow: 0 6px 28px rgba(26,110,255,0.5);
}
/* ─── LEGAL PAGES ─── */
.legal-hero {
     padding: 140px 0 64px;
}
.legal-hero-inner {
     max-width: 820px;
}
.legal-updated {
     display: inline-flex;
     margin-top: 24px;
     color: var(--white-50);
     font-size: 14px;
}
.legal-body {
     padding: 72px 0 100px;
     background: var(--navy-2);
}
.legal-layout {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 280px;
     gap: 56px;
     align-items: start;
}
.legal-content {
     min-width: 0;
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: clamp(24px, 5vw, 56px);
}
.legal-intro,.legal-content p,.legal-content li {
     color: var(--white-80);
     font-size: 15px;
     line-height: 1.85;
     font-weight: 300;
}
.legal-intro {
     font-size: 17px;
}
.legal-section {
     scroll-margin-top: 110px;
     margin-top: 42px;
}
.legal-section:first-of-type {
     margin-top: 36px;
}
.legal-section h2 {
     font-family: var(--font-display);
     font-size: clamp(20px, 2.4vw, 27px);
     line-height: 1.25;
     margin-bottom: 14px;
}
.legal-section h3 {
     font-family: var(--font-display);
     font-size: 16px;
     margin: 24px 0 8px;
     color: var(--cyan);
}
.legal-section p + p {
     margin-top: 12px;
}
.legal-section ul {
     padding-left: 22px;
     margin: 12px 0;
}
.legal-section li + li {
     margin-top: 8px;
}
.legal-content a {
     color: var(--cyan);
     overflow-wrap: anywhere;
}
.legal-notice {
     margin-top: 22px;
     padding: 20px 22px;
     border: 1px solid rgba(0,212,255,.28);
     border-left: 3px solid var(--cyan);
     border-radius: var(--radius-sm);
     background: rgba(0,212,255,.06);
}
.legal-sidebar {
     position: sticky;
     top: 100px;
}
.legal-sidebar-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 24px;
}
.legal-sidebar h2 {
     color: var(--white-50);
     font-family: var(--font-display);
     font-size: 12px;
     letter-spacing:.07em;
     text-transform: uppercase;
     margin-bottom: 14px;
}
.legal-sidebar nav {
     display: flex;
     flex-direction: column;
     gap: 4px;
}
.legal-sidebar a {
     color: var(--white-80);
     font-size: 13px;
     line-height: 1.4;
     text-decoration: none;
     padding: 8px 10px;
     border-radius: 7px;
     transition: var(--transition);
}
.legal-sidebar a:hover {
     color: var(--cyan);
     background: var(--white-04);
}
 @media (max-width: 900px) {
    .legal-layout {
         grid-template-columns: 1fr;
    }
    .legal-sidebar {
         position: static;
         order: -1;
    }
}
/* ── Sidebar ── */
.article-sidebar {
     position: sticky;
     top: 100px;
     display: flex;
     flex-direction: column;
     gap: 20px;
}
.sidebar-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 24px;
}
.sidebar-card-title {
     font-family: var(--font-display);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     color: var(--white-50);
     margin-bottom: 16px;
}
.sidebar-toc {
     display: flex;
     flex-direction: column;
     gap: 4px;
}
.sidebar-toc-link {
     font-size: 13px;
     color: var(--white-50);
     text-decoration: none;
     padding: 7px 10px;
     border-radius: 8px;
     border-left: 2px solid transparent;
     transition: var(--transition);
     line-height: 1.4;
}
.sidebar-toc-link:hover,.sidebar-toc-link.active {
     color: var(--cyan);
     border-left-color: var(--cyan);
     background: rgba(0,212,255,0.05);
}
.sidebar-links {
     display: flex;
     flex-direction: column;
     gap: 10px;
}
.sidebar-link {
     font-size: 13px;
     color: var(--white-50);
     text-decoration: none;
     transition: var(--transition);
}
.sidebar-link:hover {
     color: var(--cyan);
}
.sidebar-cta {
     background: linear-gradient(135deg, rgba(26,110,255,0.1), rgba(123,92,240,0.1));
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 24px;
}
.sidebar-cta-text {
     font-size: 14px;
     color: var(--white-80);
     line-height: 1.6;
     font-weight: 400;
}
/* ── Responsivo ── */
 @media (max-width: 1024px) {
    .article-layout {
         grid-template-columns: 1fr;
    }
    .article-sidebar {
         position: static;
         flex-direction: row;
         flex-wrap: wrap;
    }
    .sidebar-card,.sidebar-cta {
         flex: 1;
         min-width: 260px;
    }
}
 @media (max-width: 768px) {
    .article-hero {
         padding-top: 120px;
    }
    .article-sidebar {
         flex-direction: column;
    }
    .sidebar-card,.sidebar-cta {
         min-width: unset;
    }
    .article-nav {
         flex-direction: column;
    }
    .article-nav-btn {
         justify-content: center;
         width: 100%;
    }
}
/* ─── PARCEIROS ─── */
/* Hero */
.partners-hero {
     padding-top: 160px;
     background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}
.partners-hero-inner {
     max-width: 900px;
}
.partners-hero-actions {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     margin-top: 36px;
}
.partners-stats {
     display: flex;
     gap: 48px;
     margin-top: 56px;
     padding-top: 40px;
     border-top: 1px solid var(--border);
     flex-wrap: wrap;
}
.partners-stat-num {
     font-family: var(--font-display);
     font-size: 36px;
     font-weight: 800;
     letter-spacing: -0.03em;
}
.partners-stat-label {
     font-size: 13px;
     color: var(--white-50);
     margin-top: 4px;
     font-weight: 400;
}
/* Tipos de parceria */
.partners-types {
     background: var(--navy);
}
.partners-types-header {
     margin-bottom: 56px;
}
.partners-types-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     align-items: start;
}
.partner-type-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 36px 32px;
     display: flex;
     flex-direction: column;
     gap: 16px;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
}
.partner-type-card:hover {
     transform: translateY(-4px);
     border-color: rgba(0,212,255,0.25);
}
.partner-type-card-featured {
     border-color: rgba(26,110,255,0.4);
     background: linear-gradient(160deg, rgba(26,110,255,0.07), rgba(123,92,240,0.05));
     box-shadow: 0 0 60px rgba(26,110,255,0.12);
}
.partner-type-card-featured::before {
     content: 'Mais popular';
     position: absolute;
     top: 0;
     right: 24px;
     background: linear-gradient(135deg, var(--blue), var(--purple));
     color: white;
     font-family: var(--font-display);
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     padding: 5px 14px;
     border-radius: 0 0 10px 10px;
}
.partner-type-icon {
     font-size: 36px;
}
.partner-type-badge {
     display: inline-block;
     font-family: var(--font-display);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     padding: 4px 14px;
     border-radius: 100px;
     width: fit-content;
}
.partner-type-badge-silver {
     background: rgba(180,180,180,0.1);
     color: #c0c0c0;
     border: 1px solid rgba(180,180,180,0.25);
}
.partner-type-badge-gold {
     background: rgba(255,195,0,0.1);
     color: #ffc300;
     border: 1px solid rgba(255,195,0,0.3);
}
.partner-type-badge-platinum{
     background: rgba(0,212,255,0.1);
     color: var(--cyan);
     border: 1px solid rgba(0,212,255,0.25);
}
.partner-type-card h3 {
     font-family: var(--font-display);
     font-size: 22px;
     font-weight: 700;
}
.partner-type-card p {
     font-size: 14px;
     color: var(--white-50);
     line-height: 1.7;
     font-weight: 300;
}
.partner-type-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 8px;
     flex: 1;
}
.partner-type-list li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 13px;
     color: var(--white-80);
     line-height: 1.5;
}
.partner-type-list li span {
     color: var(--cyan);
     font-weight: 800;
     flex-shrink: 0;
     margin-top: 1px;
}
/* Benefícios */
.partners-benefits-header {
     margin-bottom: 56px;
}
.partners-benefits-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
}
.partners-benefit {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 28px;
     transition: var(--transition);
}
.partners-benefit:hover {
     transform: translateY(-4px);
     border-color: rgba(123,92,240,0.3);
}
.partners-benefit-icon {
     font-size: 32px;
     margin-bottom: 14px;
     display: block;
}
.partners-benefit h3 {
     font-family: var(--font-display);
     font-size: 17px;
     font-weight: 700;
     margin-bottom: 10px;
}
.partners-benefit p {
     font-size: 14px;
     color: var(--white-50);
     line-height: 1.7;
     font-weight: 300;
}
/* Parceiros atuais */
.partners-current {
     background: var(--navy);
}
.partners-current-header {
     margin-bottom: 48px;
}
.partners-logos {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     margin-bottom: 56px;
}
.partner-logo-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     height: 72px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
}
.partner-logo-card:hover {
     border-color: rgba(0,212,255,0.3);
     background: rgba(0,212,255,0.04);
}
.partner-logo-inner {
     font-family: var(--font-display);
     font-size: 15px;
     font-weight: 700;
     color: var(--white-50);
     letter-spacing: -0.01em;
     transition: var(--transition);
}
.partner-logo-card:hover.partner-logo-inner {
     color: var(--white-80);
}
/* Depoimento parceiro */
.partner-testimonial {
     background: var(--navy-3);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 40px 48px;
     display: grid;
     grid-template-columns: 60px 1fr;
     gap: 24px;
     align-items: start;
     position: relative;
     overflow: hidden;
}
.partner-testimonial::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--blue), var(--cyan), var(--purple));
}
.partner-testi-quote {
     font-family: var(--font-display);
     font-size: 80px;
     font-weight: 800;
     line-height: 0.8;
     color: var(--blue);
     opacity: 0.5;
     margin-top: 8px;
}
.partner-testi-text {
     font-size: 16px;
     color: var(--white-80);
     line-height: 1.75;
     font-weight: 300;
     font-style: italic;
     margin-bottom: 24px;
}
.partner-testi-author {
     display: flex;
     align-items: center;
     gap: 12px;
}
/* Como funciona (steps) */
.partners-how {
}
.partners-how-header {
     text-align: center;
     margin-bottom: 64px;
}
.partners-how-steps {
     display: flex;
     align-items: flex-start;
     gap: 0;
     position: relative;
}
.partners-how-step {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 20px;
     padding: 0 16px;
}
.partners-how-num {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--blue), var(--purple));
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-display);
     font-size: 20px;
     font-weight: 800;
     box-shadow: 0 0 32px rgba(26,110,255,0.3);
     flex-shrink: 0;
     position: relative;
     z-index: 1;
}
.partners-how-connector {
     flex: 0 0 40px;
     height: 2px;
     background: linear-gradient(90deg, var(--blue), var(--purple));
     margin-top: 32px;
     opacity: 0.4;
}
.partners-how-body h3 {
     font-family: var(--font-display);
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 8px;
}
.partners-how-body p {
     font-size: 14px;
     color: var(--white-50);
     line-height: 1.65;
     font-weight: 300;
}
/* Formulário de candidatura */
.partners-form-section {
     background: var(--navy);
}
.partners-form-inner {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 72px;
     align-items: start;
}
.partners-form-info {
     display: flex;
     flex-direction: column;
     gap: 20px;
     margin-top: 36px;
}
.partners-info-item {
     display: flex;
     align-items: center;
     gap: 16px;
}
.partners-info-icon {
     font-size: 24px;
     flex-shrink: 0;
}
.partners-info-item strong {
     display: block;
     font-size: 14px;
     font-weight: 600;
     font-family: var(--font-display);
     margin-bottom: 2px;
}
.partners-info-item span {
     font-size: 13px;
     color: var(--white-50);
}
.partners-form-card {
     background: var(--navy-3);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 40px;
}
.partners-form-card select.form-control {
     color-scheme: dark;
     background-color: var(--navy-2);
     color: var(--white);
}
.partners-form-card select.form-control option {
     background-color: var(--navy-3);
     color: var(--white);
}
.partners-form-card select.form-control option:disabled {
     color: var(--white-50);
}
.partner-success h2,.career-success h2 {
     margin: 0 0 18px;
     font-family: var(--font-display);
     font-size: clamp(28px, 4vw, 42px);
     line-height: 1.1;
     letter-spacing: -0.03em;
}
/* FAQ */
.partners-faq-header {
     margin-bottom: 48px;
}
.partners-faq-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
}
.faq-item {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 28px;
     transition: var(--transition);
}
.faq-item:hover {
     border-color: rgba(0,212,255,0.25);
     transform: translateY(-2px);
}
.faq-q {
     font-family: var(--font-display);
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 12px;
     line-height: 1.4;
}
.faq-a {
     font-size: 14px;
     color: var(--white-50);
     line-height: 1.75;
     font-weight: 300;
}
/* Responsivo */
 @media (max-width: 1024px) {
    .partners-types-grid {
         grid-template-columns: 1fr;
         max-width: 560px;
         margin: 0 auto;
    }
    .partners-benefits-grid {
         grid-template-columns: repeat(2, 1fr);
    }
    .partners-logos {
         grid-template-columns: repeat(4, 1fr);
    }
    .partners-form-inner {
         grid-template-columns: 1fr;
         gap: 40px;
    }
    .partners-faq-grid {
         grid-template-columns: 1fr;
    }
    .partners-how-steps {
         flex-direction: column;
         align-items: flex-start;
         gap: 0;
    }
    .partners-how-step {
         flex-direction: row;
         text-align: left;
         align-items: flex-start;
         padding: 0 0 32px 0;
    }
    .partners-how-connector {
         display: none;
    }
    .partners-how-body {
         padding-top: 0;
    }
}
 @media (max-width: 768px) {
    .partners-hero {
         padding-top: 130px;
    }
    .partners-hero-actions {
         flex-direction: column;
    }
    .partners-hero-actions .btn {
         justify-content: center;
    }
    .partners-stats {
         gap: 24px;
    }
    .partners-benefits-grid {
         grid-template-columns: 1fr;
    }
    .partners-logos {
         grid-template-columns: repeat(2, 1fr);
    }
    .partner-testimonial {
         grid-template-columns: 1fr;
         padding: 28px;
    }
    .partner-testi-quote {
         display: none;
    }
    .partners-form-card {
         padding: 24px;
    }
}
/* ─── TRABALHE CONOSCO ─── */
/* Hero */
.careers-hero {
     padding-top: 160px;
     background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}
.careers-hero-inner {
     max-width: 860px;
}
.careers-hero-actions {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     margin-top: 36px;
}
/* Cultura */
.careers-culture {
}
.careers-culture-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 72px;
     align-items: start;
}
.careers-culture-text {
     font-size: 15px;
     color: var(--white-50);
     line-height: 1.8;
     font-weight: 300;
     margin-top: 16px;
}
.careers-culture-values {
     background: var(--navy-3);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 8px 0;
}
.careers-value-item {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     padding: 22px 28px;
     border-bottom: 1px solid var(--border);
     transition: var(--transition);
}
.careers-value-item:last-child {
     border-bottom: none;
}
.careers-value-item:hover {
     background: var(--white-04);
}
.careers-value-icon {
     font-size: 24px;
     flex-shrink: 0;
     margin-top: 2px;
}
.careers-value-item strong {
     display: block;
     font-family: var(--font-display);
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 4px;
}
.careers-value-item p {
     font-size: 13px;
     color: var(--white-50);
     line-height: 1.6;
     font-weight: 300;
     margin: 0;
}
/* Benefícios */
.careers-benefits-header {
     margin-bottom: 56px;
}
.careers-benefits-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
}
.careers-benefit {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 28px;
     transition: var(--transition);
}
.careers-benefit:hover {
     transform: translateY(-4px);
     border-color: rgba(0,212,255,0.3);
}
.careers-benefit-icon {
     font-size: 32px;
     display: block;
     margin-bottom: 14px;
}
.careers-benefit h3 {
     font-family: var(--font-display);
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 8px;
}
.careers-benefit p {
     font-size: 13px;
     color: var(--white-50);
     line-height: 1.7;
     font-weight: 300;
}
/* Filtros de vagas */
.careers-jobs-header {
     margin-bottom: 40px;
}
.careers-filters {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 36px;
}
.careers-filter-btn {
     background: var(--card-bg);
     border: 1px solid var(--border);
     color: var(--white-80);
     font-family: var(--font-display);
     font-size: 13px;
     font-weight: 600;
     padding: 8px 18px;
     border-radius: 100px;
     cursor: pointer;
     transition: var(--transition);
}
.careers-filter-btn:hover {
     border-color: rgba(0,212,255,0.4);
     color: var(--cyan);
}
.careers-filter-btn.active {
     background: linear-gradient(135deg, var(--blue), var(--purple));
     border-color: transparent;
     color: white;
     box-shadow: 0 4px 20px rgba(26,110,255,0.3);
}
/* Cards de vagas */
.careers-jobs-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
}
.job-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 28px 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 32px;
     transition: var(--transition);
}
.job-card:hover {
     border-color: rgba(26,110,255,0.3);
     transform: translateX(4px);
}
.job-card-left {
     flex: 1;
}
.job-area-badge {
     display: inline-block;
     font-family: var(--font-display);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     padding: 4px 12px;
     border-radius: 100px;
     margin-bottom: 12px;
}
.job-area-tech {
     background: rgba(0,212,255,0.1);
     color: var(--cyan);
     border: 1px solid rgba(0,212,255,0.25);
}
.job-area-comercial {
     background: rgba(26,110,255,0.1);
     color: var(--blue-light);
     border: 1px solid rgba(26,110,255,0.25);
}
.job-area-suporte {
     background: rgba(123,92,240,0.1);
     color: var(--purple);
     border: 1px solid rgba(123,92,240,0.25);
}
.job-area-marketing {
     background: rgba(255,195,0,0.1);
     color: #ffc300;
     border: 1px solid rgba(255,195,0,0.3);
}
.job-title {
     font-family: var(--font-display);
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 8px;
     letter-spacing: -0.01em;
}
.job-desc {
     font-size: 14px;
     color: var(--white-50);
     line-height: 1.65;
     font-weight: 300;
     max-width: 560px;
     margin-bottom: 14px;
}
.job-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
}
.job-tags span {
     background: var(--white-04);
     border: 1px solid var(--border);
     color: var(--white-50);
     font-size: 11px;
     font-weight: 500;
     padding: 3px 10px;
     border-radius: 100px;
     font-family: var(--font-display);
     letter-spacing: 0.02em;
}
.job-card-right {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 16px;
     flex-shrink: 0;
}
.job-info {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 6px;
}
.job-regime,.job-type,.job-level {
     font-size: 12px;
     font-weight: 500;
     color: var(--white-50);
     font-family: var(--font-display);
}
.job-regime {
     color: var(--cyan);
     font-weight: 600;
}
/* Processo seletivo */
.careers-process-header {
     text-align: center;
     margin-bottom: 64px;
}
.careers-process-steps {
     display: flex;
     align-items: flex-start;
     gap: 0;
}
.careers-process-step {
     flex: 1;
     text-align: center;
     padding: 0 20px;
}
.careers-process-num {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--blue), var(--purple));
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-display);
     font-size: 20px;
     font-weight: 800;
     margin: 0 auto 20px;
     box-shadow: 0 0 32px rgba(26,110,255,0.25);
     position: relative;
     z-index: 1;
}
.careers-process-arrow {
     flex: 0 0 32px;
     text-align: center;
     font-size: 20px;
     color: var(--white-20);
     margin-top: 22px;
}
.careers-process-step h3 {
     font-family: var(--font-display);
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 10px;
}
.careers-process-step p {
     font-size: 14px;
     color: var(--white-50);
     line-height: 1.65;
     font-weight: 300;
}
/* Banco de talentos */
.careers-talent-inner {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 72px;
     align-items: start;
}
.careers-talent-note {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     background: var(--navy-3);
     border: 1px solid var(--border);
     border-left: 3px solid var(--cyan);
     border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
     padding: 18px 20px;
     margin-top: 32px;
}
.careers-talent-note span {
     font-size: 20px;
     flex-shrink: 0;
}
.careers-talent-note p {
     font-size: 14px;
     color: var(--white-50);
     line-height: 1.6;
     font-weight: 300;
     margin: 0;
}
/* Responsivo */
 @media (max-width: 1024px) {
    .careers-culture-inner {
         grid-template-columns: 1fr;
         gap: 40px;
    }
    .careers-benefits-grid {
         grid-template-columns: repeat(2, 1fr);
    }
    .careers-talent-inner {
         grid-template-columns: 1fr;
         gap: 40px;
    }
    .job-card {
         flex-direction: column;
         align-items: flex-start;
         gap: 20px;
    }
    .job-card-right {
         align-items: flex-start;
         flex-direction: row;
         flex-wrap: wrap;
    }
    .job-info {
         flex-direction: row;
         gap: 12px;
         align-items: center;
    }
}
 @media (max-width: 768px) {
    .careers-hero {
         padding-top: 130px;
    }
    .careers-hero-actions {
         flex-direction: column;
    }
    .careers-hero-actions .btn {
         justify-content: center;
    }
    .careers-benefits-grid {
         grid-template-columns: 1fr;
    }
    .careers-process-steps {
         flex-direction: column;
         align-items: flex-start;
         gap: 32px;
    }
    .careers-process-step {
         text-align: left;
         display: flex;
         gap: 20px;
         align-items: flex-start;
         padding: 0;
    }
    .careers-process-num {
         flex-shrink: 0;
         margin: 0;
    }
    .careers-process-arrow {
         display: none;
    }
    .job-card {
         padding: 20px;
    }
    .careers-filters {
         gap: 8px;
    }
}
/* ─── INSTALAÇÃO ─── */
/* Hero */
.install-hero {
     padding-top: 160px;
     background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}
.install-hero-inner {
     max-width: 860px;
}
/* Navegação de plataforma */
.install-platform-nav {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-top: 36px;
}
.install-platform-btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: var(--card-bg);
     border: 1px solid var(--border);
     color: var(--white-80);
     font-family: var(--font-display);
     font-size: 14px;
     font-weight: 600;
     padding: 12px 22px;
     border-radius: var(--radius-sm);
     text-decoration: none;
     transition: var(--transition);
}
.install-platform-btn:hover {
     border-color: rgba(0,212,255,0.4);
     color: var(--cyan);
}
.install-platform-btn.active {
     background: linear-gradient(135deg, var(--blue), var(--purple));
     border-color: transparent;
     color: white;
     box-shadow: 0 4px 20px rgba(26,110,255,0.3);
}
.install-platform-icon {
     font-size: 18px;
}
/* Header de seção */
.install-section-header {
     margin-bottom: 48px;
}
.install-section-platform-badge {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: var(--cyan-dim);
     border: 1px solid rgba(0,212,255,0.3);
     color: var(--cyan);
     font-family: var(--font-display);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     padding: 8px 16px;
     border-radius: 100px;
     margin-bottom: 20px;
}
.install-section-platform-badge span {
     font-size: 18px;
}
/* Card de instalação */
.install-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 36px;
     margin-bottom: 24px;
     position: relative;
     overflow: hidden;
}
.install-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--blue), var(--cyan), var(--purple));
}
.install-card-simple::before {
     display: none;
}
.install-card-header {
     display: flex;
     align-items: flex-start;
     gap: 20px;
     margin-bottom: 28px;
     padding-bottom: 24px;
     border-bottom: 1px solid var(--border);
}
.install-step-num {
     background: linear-gradient(135deg, var(--blue), var(--purple));
     color: white;
     font-family: var(--font-display);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     padding: 6px 14px;
     border-radius: 100px;
     white-space: nowrap;
     flex-shrink: 0;
     margin-top: 4px;
}
.install-card-title {
     font-family: var(--font-display);
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 8px;
     letter-spacing: -0.01em;
}
.install-card-desc {
     font-size: 14px;
     color: var(--white-50);
     line-height: 1.65;
     font-weight: 300;
}
/* Box de download */
.install-download-box {
     background: var(--navy-3);
     border: 1px solid rgba(0,212,255,0.2);
     border-radius: var(--radius-sm);
     padding: 20px 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     margin-bottom: 28px;
     flex-wrap: wrap;
}
.install-download-info {
     display: flex;
     align-items: center;
     gap: 16px;
}
.install-download-icon {
     font-size: 32px;
     flex-shrink: 0;
}
.install-download-name {
     font-family: var(--font-display);
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 4px;
     font-family: monospace;
     color: var(--cyan);
     letter-spacing: 0.01em;
}
.install-download-desc {
     font-size: 12px;
     color: var(--white-50);
     font-weight: 400;
}
/* Lista de passos */
.install-steps-list {
     display: flex;
     flex-direction: column;
     gap: 0;
}
.install-step {
     display: flex;
     align-items: flex-start;
     gap: 18px;
     padding: 18px 0;
     border-bottom: 1px solid var(--border);
     position: relative;
}
.install-step:last-child {
     border-bottom: none;
}
.install-step-badge {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: var(--navy-4);
     border: 2px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-display);
     font-size: 13px;
     font-weight: 800;
     color: var(--white-50);
     flex-shrink: 0;
     transition: var(--transition);
}
.install-step-badge.done {
     background: rgba(40,200,64,0.1);
     border-color: #28c840;
     color: #28c840;
}
.install-step-badge.success {
     background: linear-gradient(135deg, var(--blue), var(--purple));
     border-color: transparent;
     color: white;
}
.install-step-body strong {
     display: block;
     font-size: 15px;
     font-weight: 600;
     font-family: var(--font-display);
     margin-bottom: 5px;
     line-height: 1.4;
}
.install-step-body p {
     font-size: 13px;
     color: var(--white-50);
     line-height: 1.65;
     font-weight: 300;
     margin: 0;
}
.install-step-body code {
     background: var(--navy-4);
     border: 1px solid var(--border);
     color: var(--cyan);
     font-size: 12px;
     padding: 2px 7px;
     border-radius: 5px;
     font-family: monospace;
}
/* Avisos */
.install-notice {
     background: rgba(255,180,0,0.06);
     border: 1px solid rgba(255,180,0,0.25);
     border-left: 3px solid #fbbf24;
     border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
     padding: 20px 24px;
     display: flex;
     gap: 16px;
     align-items: flex-start;
     margin-top: 8px;
}
.install-notice-info {
     background: rgba(0,212,255,0.05);
     border-color: rgba(0,212,255,0.2);
     border-left-color: var(--cyan);
}
.install-notice-warning {
     background: rgba(255,107,107,0.05);
     border-color: rgba(255,107,107,0.2);
     border-left-color: #ff6b6b;
}
.install-notice-icon {
     font-size: 22px;
     flex-shrink: 0;
     margin-top: 2px;
}
.install-notice strong {
     display: block;
     font-family: var(--font-display);
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 8px;
}
.install-notice p {
     font-size: 13px;
     color: var(--white-50);
     line-height: 1.7;
     font-weight: 300;
     margin: 0;
}
.install-notice em {
     color: var(--white-80);
     font-style: normal;
     font-weight: 600;
}
/* Host Local capabilities */
.install-host-capabilities {
     background: var(--navy-3);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 28px 32px;
     margin-bottom: 28px;
}
.install-host-cap-title {
     font-family: var(--font-display);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     color: var(--white-50);
     margin-bottom: 20px;
}
.install-host-cap-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
}
.install-host-cap-item {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     font-weight: 500;
     color: var(--white-80);
     padding: 12px 14px;
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: 10px;
     transition: var(--transition);
}
.install-host-cap-item:hover {
     border-color: rgba(0,212,255,0.3);
     color: white;
}
.install-host-cap-item span {
     font-size: 20px;
     flex-shrink: 0;
}
/* Botão da loja */
.install-store-btn {
     display: inline-flex;
     align-items: center;
     gap: 14px;
     background: var(--navy-3);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 14px 24px;
     color: white;
     text-decoration: none;
     transition: var(--transition);
     margin-top: 24px;
}
.install-store-btn:hover {
     border-color: rgba(0,212,255,0.4);
     transform: translateY(-2px);
}
.install-store-android {
     border-color: rgba(40,200,64,0.25);
}
.install-store-android:hover {
     border-color: #28c840;
}
.install-store-btn span {
     display: block;
     font-size: 11px;
     color: var(--white-50);
     font-weight: 400;
}
.install-store-btn strong {
     display: block;
     font-family: var(--font-display);
     font-size: 16px;
     font-weight: 700;
}
/* iOS card */
.install-ios-card {
     max-width: 600px;
     margin: 0 auto;
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 56px 48px;
     text-align: center;
}
.install-ios-icon {
     font-size: 56px;
     margin-bottom: 20px;
     display: block;
     opacity: 0.5;
}
.install-ios-title {
     font-family: var(--font-display);
     font-size: 26px;
     font-weight: 800;
     margin-bottom: 16px;
     letter-spacing: -0.02em;
}
.install-ios-text {
     font-size: 15px;
     color: var(--white-50);
     line-height: 1.75;
     font-weight: 300;
     margin-bottom: 14px;
}
.install-ios-actions {
     display: flex;
     gap: 14px;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 32px;
}
/* Responsivo */
 @media (max-width: 1024px) {
    .install-host-cap-grid {
         grid-template-columns: repeat(2, 1fr);
    }
}
 @media (max-width: 768px) {
    .install-hero {
         padding-top: 130px;
    }
    .install-platform-nav {
         gap: 8px;
    }
    .install-platform-btn {
         padding: 10px 16px;
         font-size: 13px;
    }
    .install-card {
         padding: 24px 20px;
    }
    .install-card-header {
         flex-direction: column;
         gap: 12px;
    }
    .install-download-box {
         flex-direction: column;
         align-items: flex-start;
    }
    .install-host-cap-grid {
         grid-template-columns: 1fr;
    }
    .install-ios-card {
         padding: 36px 24px;
    }
    .install-ios-actions {
         flex-direction: column;
    }
    .install-ios-actions .btn {
         justify-content: center;
    }
}