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

:root {
--primary: #5465ff;
--primary-light: #788bff;
--primary-lighter: #9bb1ff;
--accent: #bfd7ff;
--accent-light: #e2fdff;
--dark: #0a0e27;
--gray: #64748b;
--light-bg: #f8fafc;
--white: #ffffff;
}

body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: var(--dark);
background: var(--white);
overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
line-height: 1.2;
}

.wrap {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
}

.wrap-wide {
max-width: 1480px;
margin: 0 auto;
padding: 0 40px;
}

.container-head {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
}

.main-header {
background: var(--white);
box-shadow: 0 2px 12px rgba(84, 101, 255, 0.08);
position: sticky;
top: 0;
z-index: 1000;
padding: 18px 0;
transition: all 0.3s ease;
}

.logo img {
height: 48px;
transition: transform 0.3s ease;
}

.logo img:hover {
transform: scale(1.05);
}

.main-nav ul {
list-style: none;
display: flex;
gap: 42px;
align-items: center;
}

.main-nav ul li {
position: relative;
}

.main-nav ul li a {
text-decoration: none;
color: var(--dark);
font-weight: 500;
font-size: 15px;
transition: color 0.3s ease;
display: flex;
align-items: center;
gap: 4px;
}

.main-nav ul li a:hover {
color: var(--primary);
}

.dropdown-menu {
position: absolute;
top: 100%;
left: -20px;
background: var(--white);
box-shadow: 0 8px 24px rgba(84, 101, 255, 0.15);
border-radius: 12px;
padding: 16px 0;
min-width: 240px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
}

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

.dropdown-menu li {
padding: 0;
}

.dropdown-menu li a {
padding: 12px 24px;
display: block;
font-size: 14px;
}

.dropdown-menu li a:hover {
background: var(--accent-light);
color: var(--primary);
}

.cta-btn-header {
background: var(--primary);
color: var(--white);
border: none;
padding: 14px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Space Grotesk', sans-serif;
}

.cta-btn-header:hover {
background: var(--primary-light);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(84, 101, 255, 0.3);
}

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

.burger-menu span {
width: 28px;
height: 3px;
background: var(--dark);
border-radius: 2px;
transition: all 0.3s ease;
}

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

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

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

.top-hero {
padding: 120px 0 100px;
background: linear-gradient(135deg, var(--accent-light) 0%, var(--white) 70%);
position: relative;
overflow: hidden;
}

.hero-arrange {
display: grid;
grid-template-columns: 1fr 1fr;
  gap: 100px;
align-items: center;
}

.hero-left h1 {
font-size: 68px;
  margin-bottom: 32px;
color: var(--dark);
line-height: 1.08;
letter-spacing: -1px;
}

.hero-left p {
font-size: 21px;
  color: var(--gray);
margin-bottom: 44px;
line-height: 1.65;
}

.hero-actions {
display: flex;
align-items: center;
  gap: 40px;
}

.primary-btn {
background: var(--primary);
color: var(--white);
border: none;
  padding: 20px 42px;
border-radius: 10px;
font-weight: 600;
font-size: 17px;
cursor: pointer;
transition: all 0.35s ease;
  font-family: 'Space Grotesk', sans-serif;
}

.primary-btn:hover {
background: var(--primary-light);
  transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(84, 101, 255, 0.4);
}

.proof-line {
display: flex;
  flex-direction: column;
}

.proof-num {
font-size: 42px;
font-weight: 700;
color: var(--primary);
  font-family: 'Space Grotesk', sans-serif;
line-height: 1;
margin-bottom: 6px;
}

.proof-text {
font-size: 14px;
  color: var(--gray);
}

.hero-right {
position: relative;
}

.visual-wrap {
position: relative;
}

.visual-wrap img {
  width: 100%;
border-radius: 20px;
box-shadow: 0 28px 70px rgba(84, 101, 255, 0.22);
}

.metric-overlay {
position: absolute;
  background: var(--white);
padding: 18px 24px;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
display: flex;
  align-items: center;
gap: 16px;
}

.metric-overlay.top {
top: -24px;
right: -40px;
}

.metric-overlay.bottom {
  bottom: 32px;
left: -48px;
}

.metric-overlay i {
font-size: 32px;
color: var(--primary);
}

.metric-data {
  display: flex;
flex-direction: column;
}

.m-val {
font-size: 28px;
font-weight: 700;
  color: var(--dark);
font-family: 'Space Grotesk', sans-serif;
line-height: 1;
}

.m-label {
font-size: 12px;
  color: var(--gray);
margin-top: 4px;
}

.client-words {
padding: 100px 0;
background: var(--white);
}

.client-words h2 {
  font-size: 46px;
text-align: center;
margin-bottom: 64px;
color: var(--dark);
}

.words-grid {
display: grid;
  grid-template-columns: repeat(3, 1fr);
gap: 28px;
}

.word-card {
background: var(--white);
border: 2px solid var(--light-bg);
  padding: 36px;
border-radius: 14px;
transition: all 0.3s ease;
}

.word-card:hover {
border-color: var(--primary);
transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(84, 101, 255, 0.12);
}

.stars {
display: flex;
gap: 4px;
margin-bottom: 20px;
}

.stars i {
  color: #fbbf24;
font-size: 17px;
}

.quote-txt {
font-size: 16px;
color: var(--dark);
  line-height: 1.7;
margin-bottom: 28px;
}

.who {
display: flex;
flex-direction: column;
}

.name {
  font-weight: 600;
color: var(--dark);
font-size: 15px;
}

.role {
font-size: 13px;
color: var(--gray);
  margin-top: 3px;
}

.real-case {
padding: 120px 0;
background: var(--light-bg);
}

.case-flex {
display: grid;
  grid-template-columns: 1.4fr 1fr;
gap: 72px;
align-items: start;
}

.case-visual-side {
position: relative;
}

.case-tag {
  position: absolute;
top: 20px;
left: 20px;
background: var(--primary);
color: var(--white);
padding: 10px 22px;
  border-radius: 8px;
font-weight: 600;
font-size: 13px;
}

.case-visual-side img {
width: 100%;
border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.case-story h2 {
font-size: 40px;
margin-bottom: 32px;
color: var(--dark);
}

.story-text p {
  font-size: 16px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 18px;
}

.case-nums {
display: flex;
gap: 36px;
  margin: 44px 0;
padding: 28px 0;
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
}

.cn-item {
display: flex;
  flex-direction: column;
}

.cn-val {
font-size: 38px;
font-weight: 700;
color: var(--primary);
  font-family: 'Space Grotesk', sans-serif;
line-height: 1;
margin-bottom: 6px;
}

.cn-label {
font-size: 13px;
color: var(--gray);
}

.services-block {
  padding: 120px 0;
background: var(--white);
}

.services-intro {
text-align: center;
max-width: 780px;
margin: 0 auto 72px;
}

.services-intro h2 {
  font-size: 48px;
margin-bottom: 24px;
color: var(--dark);
}

.services-desc {
font-size: 19px;
color: var(--gray);
  line-height: 1.65;
}

.services-display {
display: grid;
grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, auto);
gap: 28px;
margin-bottom: 56px;
}

.serv-item {
background: var(--white);
border: 2px solid var(--light-bg);
  padding: 44px;
border-radius: 16px;
transition: all 0.4s ease;
}

.serv-item:hover {
border-color: var(--primary);
transform: translateY(-8px);
  box-shadow: 0 20px 56px rgba(84, 101, 255, 0.14);
}

.serv-item.left-big {
grid-column: span 7;
grid-row: span 1;
}

.serv-item.right-tall {
  grid-column: span 5;
grid-row: span 2;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
border: none;
}

.serv-item.bottom-wide {
  grid-column: span 7;
grid-row: span 1;
}

.serv-top {
display: flex;
align-items: center;
gap: 18px;
  margin-bottom: 20px;
}

.serv-item i {
font-size: 40px;
color: var(--primary);
}

.serv-item.right-tall i {
color: var(--white);
}

.serv-item h3 {
  font-size: 26px;
color: var(--dark);
}

.serv-item.right-tall h3 {
color: var(--white);
}

.serv-item p {
font-size: 16px;
  color: var(--gray);
line-height: 1.7;
}

.serv-item.right-tall p {
color: rgba(255,255,255,0.95);
font-size: 17px;
}

.services-cta-line {
  text-align: center;
}

.secondary-btn {
background: transparent;
color: var(--dark);
border: 2px solid var(--dark);
padding: 16px 38px;
  border-radius: 10px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Space Grotesk', sans-serif;
}

.secondary-btn:hover {
  background: var(--dark);
color: var(--white);
transform: translateY(-3px);
}

.numbers-proof {
padding: 80px 0;
  background: var(--dark);
}

.numbers-layout {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}

.num-block {
  text-align: center;
padding: 40px 24px;
border-radius: 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
}

.num-block.accent {
  background: var(--primary);
border: none;
}

.big-num {
display: block;
font-size: 56px;
font-weight: 700;
color: var(--white);
  font-family: 'Space Grotesk', sans-serif;
margin-bottom: 12px;
line-height: 1;
}

.num-block p {
font-size: 14px;
color: var(--gray);
}

.num-block.accent p {
  color: rgba(255,255,255,0.9);
}

.how-it-goes {
padding: 120px 0;
background: var(--white);
}

.process-grid {
display: grid;
  grid-template-columns: 1.1fr 1fr;
gap: 80px;
align-items: center;
}

.process-side img {
width: 100%;
border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.12);
}

.process-steps-side h2 {
font-size: 44px;
margin-bottom: 48px;
color: var(--dark);
}

.p-step {
  display: flex;
gap: 22px;
margin-bottom: 32px;
}

.p-number {
flex-shrink: 0;
width: 54px;
height: 54px;
  background: var(--primary);
color: var(--white);
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
  font-size: 19px;
font-weight: 700;
font-family: 'Space Grotesk', sans-serif;
}

.p-content h4 {
font-size: 20px;
margin-bottom: 8px;
  color: var(--dark);
}

.p-content p {
font-size: 15px;
color: var(--gray);
line-height: 1.6;
}

.content-teaser {
padding: 100px 0;
  background: var(--light-bg);
}

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

.content-left h2 {
font-size: 46px;
margin-bottom: 28px;
color: var(--dark);
}

.content-left p {
  font-size: 17px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 20px;
}

.content-left .secondary-btn {
margin-top: 24px;
}

.content-right {
  background: var(--white);
padding: 48px;
border-radius: 18px;
box-shadow: 0 12px 48px rgba(0,0,0,0.08);
}

.topic-list {
display: flex;
  flex-direction: column;
gap: 20px;
}

.topic-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 0;
  border-bottom: 1px solid var(--light-bg);
}

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

.topic-item i {
font-size: 24px;
  color: var(--primary);
flex-shrink: 0;
}

.topic-item span {
font-size: 16px;
color: var(--dark);
font-weight: 500;
}

.final-push {
  padding: 100px 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.push-box {
display: flex;
justify-content: space-between;
  align-items: center;
gap: 60px;
}

.push-left h2 {
font-size: 50px;
color: var(--white);
margin-bottom: 18px;
}

.push-left p {
  font-size: 20px;
color: rgba(255,255,255,0.95);
line-height: 1.6;
}

.big-cta {
background: var(--white);
color: var(--primary);
  border: none;
padding: 24px 52px;
border-radius: 12px;
font-weight: 700;
font-size: 18px;
cursor: pointer;
  transition: all 0.35s ease;
font-family: 'Space Grotesk', sans-serif;
white-space: nowrap;
}

.big-cta:hover {
transform: translateY(-4px) scale(1.06);
  box-shadow: 0 18px 44px rgba(0,0,0,0.25);
}

.main-footer {
background: var(--dark);
color: var(--white);
padding: 80px 0 0;
  margin-top: 0;
}

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

.footer-grid {
display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
gap: 60px;
margin-bottom: 60px;
}

.footer-col h4 {
font-size: 16px;
font-weight: 600;
  margin-bottom: 24px;
color: var(--white);
font-family: 'Space Grotesk', sans-serif;
letter-spacing: 0.5px;
}

.footer-logo img {
height: 42px;
  margin-bottom: 20px;
}

.footer-desc {
color: var(--gray);
font-size: 14px;
line-height: 1.7;
margin-bottom: 24px;
}

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

.footer-social a {
width: 40px;
height: 40px;
border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 18px;
  transition: all 0.3s ease;
text-decoration: none;
}

.footer-social a:hover {
background: var(--primary);
transform: translateY(-3px);
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
margin-bottom: 14px;
}

.footer-col ul li a {
color: var(--gray);
text-decoration: none;
  font-size: 14px;
transition: color 0.3s ease;
display: inline-block;
}

.footer-col ul li a:hover {
color: var(--primary-light);
  transform: translateX(4px);
}

.contact-info li {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--gray);
  font-size: 14px;
line-height: 1.6;
}

.contact-info li i {
color: var(--primary);
margin-top: 2px;
font-size: 16px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 32px 0;
text-align: center;
}

.footer-bottom p {
color: var(--gray);
  font-size: 14px;
}

.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--white);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
padding: 28px 40px;
display: none;
z-index: 9999;
border-top: 3px solid var(--primary);
}

.cookie-content {
  max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}

.cookie-text h3 {
  font-size: 18px;
margin-bottom: 8px;
color: var(--dark);
font-family: 'Space Grotesk', sans-serif;
}

.cookie-text p {
font-size: 14px;
  color: var(--gray);
line-height: 1.5;
}

.cookie-actions {
display: flex;
gap: 12px;
flex-shrink: 0;
}

.cookie-btn {
  padding: 12px 24px;
border-radius: 8px;
border: none;
font-weight: 600;
font-size: 14px;
cursor: pointer;
  transition: all 0.3s ease;
font-family: 'Space Grotesk', sans-serif;
}

.cookie-btn.accept {
background: var(--primary);
color: var(--white);
}

.cookie-btn.accept:hover {
  background: var(--primary-light);
transform: translateY(-2px);
}

.cookie-btn.decline {
background: transparent;
color: var(--gray);
  border: 2px solid var(--gray);
}

.cookie-btn.decline:hover {
background: var(--light-bg);
}

@media (max-width: 1024px) {
.main-nav {
position: absolute;
  top: 100%;
left: 0;
right: 0;
background: var(--white);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition: all 0.3s ease;
padding: 24px 40px;
}

.main-nav.active {
  opacity: 1;
visibility: visible;
transform: translateY(0);
}

.main-nav ul {
flex-direction: column;
gap: 0;
  align-items: flex-start;
}

.main-nav ul li {
width: 100%;
border-bottom: 1px solid var(--light-bg);
padding: 16px 0;
}

.dropdown-menu {
  position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
padding: 12px 0 0 20px;
}

.burger-menu {
  display: flex;
}

.cta-btn-header {
display: none;
}

.hero-arrange {
grid-template-columns: 1fr;
gap: 60px;
}

.hero-left h1 {
  font-size: 48px;
}

.metric-overlay.top {
right: 20px;
}

.metric-overlay.bottom {
left: 20px;
}

.words-grid {
grid-template-columns: 1fr;
  gap: 24px;
}

.case-flex {
grid-template-columns: 1fr;
gap: 48px;
}

.services-display {
grid-template-columns: 1fr;
}

.serv-item.left-big,
  .serv-item.right-tall,
.serv-item.bottom-wide {
grid-column: span 1;
grid-row: span 1;
}

.numbers-layout {
grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.process-grid {
grid-template-columns: 1fr;
gap: 48px;
}

.content-layout {
grid-template-columns: 1fr;
  gap: 48px;
}

.push-box {
flex-direction: column;
align-items: flex-start;
gap: 36px;
}

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

.footer-col:first-child {
grid-column: 1 / -1;
}

.cookie-content {
flex-direction: column;
align-items: flex-start;
  gap: 24px;
}

.cookie-actions {
width: 100%;
flex-wrap: wrap;
}

.cookie-btn {
flex: 1;
  min-width: 140px;
}
}

@media (max-width: 640px) {
.container-head {
padding: 0 20px;
}

.wrap-wide {
padding: 0 20px;
}

.footer-container {
  padding: 0 20px;
}

.hero-left h1 {
font-size: 36px;
}

.hero-actions {
flex-direction: column;
align-items: flex-start;
  gap: 24px;
}

.numbers-layout {
grid-template-columns: 1fr;
}

.push-left h2 {
font-size: 36px;
}

.big-cta {
  width: 100%;
}

.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}

.cookie-banner {
padding: 20px;
}

.cookie-actions {
  flex-direction: column;
}

.cookie-btn {
width: 100%;
}
}

.about-intro-hero {
padding: 140px 0 110px;
background: linear-gradient(135deg, var(--light-bg) 0%, var(--white) 60%);
}

.intro-split {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 88px;
align-items: center;
}

.intro-text-side h1 {
font-size: 56px;
margin-bottom: 32px;
color: var(--dark);
line-height: 1.12;
}

.intro-text-side p {
font-size: 19px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 48px;
}

.intro-stats-mini {
display: flex;
gap: 52px;
}

.stat-mini {
display: flex;
flex-direction: column;
}

.stat-mini-num {
font-size: 46px;
font-weight: 700;
color: var(--primary);
font-family: 'Space Grotesk', sans-serif;
line-height: 1;
margin-bottom: 8px;
}

.stat-mini-label {
font-size: 14px;
color: var(--gray);
}

.intro-visual-side img {
width: 100%;
border-radius: 22px;
box-shadow: 0 28px 74px rgba(84, 101, 255, 0.2);
}

.story-section {
padding: 110px 0;
background: var(--white);
}

.story-layout {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 72px;
}

.section-label {
display: inline-block;
background: var(--accent);
color: var(--primary);
padding: 8px 18px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
margin-bottom: 22px;
text-transform: lowercase;
}

.story-left h2 {
font-size: 44px;
color: var(--dark);
line-height: 1.18;
}

.story-right p {
font-size: 17px;
color: var(--gray);
line-height: 1.75;
margin-bottom: 24px;
}

.values-grid-section {
padding: 120px 0;
background: var(--light-bg);
}

.values-title {
font-size: 48px;
text-align: center;
margin-bottom: 68px;
color: var(--dark);
}

.values-layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(220px, auto);
gap: 24px;
}

.value-card {
background: var(--white);
padding: 38px;
border-radius: 16px;
border: 2px solid transparent;
transition: all 0.35s ease;
display: flex;
flex-direction: column;
}

.value-card:hover {
border-color: var(--primary);
transform: translateY(-6px);
box-shadow: 0 18px 52px rgba(84, 101, 255, 0.16);
}

.value-card.val-large {
grid-column: span 6;
}

.value-card:not(.val-large):not(.val-accent) {
grid-column: span 3;
}

.value-card.val-accent {
grid-column: span 6;
background: var(--primary);
border-color: var(--primary);
}

.value-card i {
font-size: 42px;
color: var(--primary);
margin-bottom: 22px;
}

.value-card.val-accent i {
color: var(--white);
}

.value-card h3 {
font-size: 24px;
color: var(--dark);
margin-bottom: 14px;
}

.value-card.val-accent h3 {
color: var(--white);
}

.value-card p {
font-size: 15px;
color: var(--gray);
line-height: 1.65;
}

.value-card.val-accent p {
color: rgba(255,255,255,0.94);
}

.timeline-section {
padding: 120px 0;
background: var(--white);
}

.timeline-heading {
font-size: 46px;
color: var(--dark);
margin-bottom: 72px;
max-width: 680px;
}

.timeline-wrapper {
position: relative;
padding-left: 42px;
}

.timeline-wrapper::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--light-bg);
}

.timeline-item {
position: relative;
margin-bottom: 56px;
display: flex;
gap: 36px;
align-items: flex-start;
}

.timeline-item::before {
content: '';
position: absolute;
left: -48px;
top: 8px;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--primary-lighter);
border: 3px solid var(--white);
box-shadow: 0 0 0 3px var(--primary-lighter);
}

.timeline-item.tl-current::before {
background: var(--primary);
box-shadow: 0 0 0 3px var(--primary);
animation: pulse-timeline 2s infinite;
}

@keyframes pulse-timeline {
0%, 100% { box-shadow: 0 0 0 3px var(--primary); }
50% { box-shadow: 0 0 0 8px rgba(84, 101, 255, 0.3); }
}

.timeline-year {
font-size: 32px;
font-weight: 700;
color: var(--primary);
font-family: 'Space Grotesk', sans-serif;
min-width: 110px;
flex-shrink: 0;
}

.timeline-content h4 {
font-size: 22px;
color: var(--dark);
margin-bottom: 10px;
}

.timeline-content p {
font-size: 16px;
color: var(--gray);
line-height: 1.7;
}

.cta-about-bottom {
padding: 90px 0;
background: var(--light-bg);
}

.cta-about-box {
text-align: center;
max-width: 720px;
margin: 0 auto;
}

.cta-about-box h2 {
font-size: 48px;
color: var(--dark);
margin-bottom: 22px;
}

.cta-about-box p {
font-size: 19px;
color: var(--gray);
margin-bottom: 36px;
line-height: 1.65;
}

.cases-hero {
padding: 130px 0 80px;
background: var(--light-bg);
}

.cases-hero-content {
max-width: 840px;
}

.cases-hero-content h1 {
font-size: 62px;
color: var(--dark);
margin-bottom: 28px;
line-height: 1.1;
}

.cases-hero-content p {
font-size: 20px;
color: var(--gray);
line-height: 1.7;
}

.cases-showcase {
padding: 100px 0;
background: var(--white);
}

.case-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(280px, auto);
gap: 26px;
}

.case-block {
background: var(--white);
border: 2px solid var(--light-bg);
border-radius: 18px;
padding: 42px;
display: flex;
flex-direction: column;
position: relative;
transition: all 0.4s ease;
grid-column: span 4;
}

.case-block:hover {
border-color: var(--primary);
transform: translateY(-8px);
box-shadow: 0 22px 62px rgba(84, 101, 255, 0.14);
}

.case-block.cb-large {
grid-column: span 8;
}

.case-block.cb-wide {
grid-column: span 7;
}

.case-block.cb-accent {
grid-column: span 5;
background: linear-gradient(135deg, var(--primary-lighter) 0%, var(--primary) 100%);
border: none;
}

.case-tag-top {
position: absolute;
top: 22px;
right: 22px;
background: var(--primary);
color: var(--white);
padding: 8px 18px;
border-radius: 7px;
font-size: 12px;
font-weight: 600;
text-transform: lowercase;
}

.case-inner {
display: flex;
flex-direction: column;
height: 100%;
}

.case-block h3 {
font-size: 26px;
color: var(--dark);
margin-bottom: 18px;
line-height: 1.28;
}

.case-block.cb-accent h3 {
color: var(--white);
}

.case-block p {
font-size: 15px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 28px;
}

.case-block.cb-accent p {
color: rgba(255,255,255,0.95);
}

.case-metrics-row {
display: flex;
flex-wrap: wrap;
gap: 32px;
margin-top: auto;
padding-top: 24px;
border-top: 2px solid var(--light-bg);
}

.case-block.cb-accent .case-metrics-row {
border-top-color: rgba(255,255,255,0.25);
}

.c-metric {
display: flex;
flex-direction: column;
}

.c-metric-val {
font-size: 36px;
font-weight: 700;
color: var(--primary);
font-family: 'Space Grotesk', sans-serif;
line-height: 1;
margin-bottom: 6px;
}

.case-block.cb-accent .c-metric-val {
color: var(--white);
}

.c-metric-label {
font-size: 13px;
color: var(--gray);
}

.case-block.cb-accent .c-metric-label {
color: rgba(255,255,255,0.9);
}

.case-quote {
margin-top: 28px;
padding-top: 24px;
border-top: 2px solid var(--light-bg);
}

.case-quote p {
font-size: 16px;
font-style: italic;
color: var(--dark);
margin-bottom: 12px;
}

.quote-author {
font-size: 14px;
color: var(--gray);
font-weight: 500;
}

.method-snapshot {
padding: 110px 0;
background: var(--light-bg);
}

.method-content {
max-width: 960px;
margin: 0 auto;
}

.method-content h2 {
font-size: 44px;
color: var(--dark);
margin-bottom: 18px;
}

.method-content > p {
font-size: 18px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 56px;
}

.method-steps {
display: flex;
flex-direction: column;
gap: 32px;
}

.method-step {
display: flex;
gap: 28px;
align-items: flex-start;
}

.step-num {
flex-shrink: 0;
width: 62px;
height: 62px;
background: var(--primary);
color: var(--white);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 700;
font-family: 'Space Grotesk', sans-serif;
}

.step-info h4 {
font-size: 21px;
color: var(--dark);
margin-bottom: 10px;
}

.step-info p {
font-size: 16px;
color: var(--gray);
line-height: 1.65;
}

.cta-cases-bottom {
padding: 90px 0;
background: var(--white);
}

.cta-cases-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: 68px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
padding: 68px 72px;
border-radius: 20px;
}

.cta-cases-left h2 {
font-size: 42px;
color: var(--white);
margin-bottom: 16px;
}

.cta-cases-left p {
font-size: 18px;
color: rgba(255,255,255,0.95);
line-height: 1.65;
}

.cta-cases-right .primary-btn {
background: var(--white);
color: var(--primary);
white-space: nowrap;
}

.cta-cases-right .primary-btn:hover {
transform: translateY(-4px) scale(1.05);
}

.contact-hero-section {
padding: 120px 0 100px;
background: var(--light-bg);
}

.contact-split {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 80px;
align-items: start;
}

.contact-intro-side h1 {
font-size: 50px;
color: var(--dark);
margin-bottom: 28px;
line-height: 1.14;
}

.contact-intro-side > p {
font-size: 18px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 42px;
}

.contact-expectations {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 52px;
}

.exp-item {
display: flex;
align-items: center;
gap: 14px;
}

.exp-item i {
font-size: 22px;
color: var(--primary);
flex-shrink: 0;
}

.exp-item span {
font-size: 16px;
color: var(--dark);
}

.direct-contact-block {
background: var(--white);
padding: 34px;
border-radius: 14px;
border: 2px solid var(--light-bg);
}

.direct-contact-block h3 {
font-size: 20px;
color: var(--dark);
margin-bottom: 22px;
}

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

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

.di-row i {
font-size: 20px;
color: var(--primary);
flex-shrink: 0;
}

.di-row span {
font-size: 15px;
color: var(--gray);
}

.contact-form-side {
background: var(--white);
padding: 48px;
border-radius: 18px;
box-shadow: 0 12px 48px rgba(84, 101, 255, 0.1);
}

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

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.form-group {
display: flex;
flex-direction: column;
}

.form-group label {
font-size: 14px;
font-weight: 600;
color: var(--dark);
margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
padding: 14px 16px;
border: 2px solid var(--light-bg);
border-radius: 8px;
font-size: 15px;
font-family: 'Inter', sans-serif;
color: var(--dark);
transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
}

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

.form-submit-btn {
width: 100%;
margin-top: 12px;
}

.faq-contact-section {
padding: 100px 0;
background: var(--white);
}

.faq-heading {
font-size: 46px;
text-align: center;
color: var(--dark);
margin-bottom: 68px;
}

.faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 36px;
}

.faq-item {
background: var(--light-bg);
padding: 36px;
border-radius: 14px;
border: 2px solid transparent;
transition: all 0.3s ease;
}

.faq-item:hover {
border-color: var(--primary);
}

.faq-item h4 {
font-size: 19px;
color: var(--dark);
margin-bottom: 12px;
}

.faq-item p {
font-size: 15px;
color: var(--gray);
line-height: 1.7;
}

@media (max-width: 1024px) {
.intro-split,
.story-layout,
.process-grid,
.content-layout,
.contact-split {
grid-template-columns: 1fr;
gap: 52px;
}

.values-layout {
grid-template-columns: 1fr;
}

.value-card.val-large,
.value-card:not(.val-large):not(.val-accent),
.value-card.val-accent {
grid-column: span 1;
}

.case-grid {
grid-template-columns: 1fr;
}

.case-block,
.case-block.cb-large,
.case-block.cb-wide,
.case-block.cb-accent {
grid-column: span 1;
}

.cta-cases-box {
flex-direction: column;
align-items: flex-start;
gap: 36px;
padding: 48px;
}

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

.form-row {
grid-template-columns: 1fr;
}
}

@media (max-width: 640px) {
.intro-text-side h1,
.cases-hero-content h1 {
font-size: 38px;
}

.values-title,
.timeline-heading,
.faq-heading {
font-size: 34px;
}

.intro-stats-mini {
gap: 32px;
}

.timeline-wrapper {
padding-left: 32px;
}

.timeline-item {
flex-direction: column;
gap: 16px;
}

.timeline-year {
min-width: auto;
}

.contact-intro-side h1 {
font-size: 36px;
}

.contact-form-side {
padding: 32px 24px;
}

.cta-cases-box {
padding: 36px 28px;
}

.cta-cases-left h2,
.cta-about-box h2 {
font-size: 32px;
}
}

.serv-hero-alt {
padding: 140px 0 90px;
background: linear-gradient(160deg, #e2fdff 0%, #ffffff 55%);
position: relative;
}

.serv-hero-content {
max-width: 820px;
}

.pre-title {
display: inline-block;
background: var(--primary);
color: var(--white);
padding: 8px 20px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
margin-bottom: 28px;
text-transform: lowercase;
letter-spacing: 0.3px;
}

.serv-hero-content h1 {
font-size: 64px;
margin-bottom: 28px;
color: var(--dark);
line-height: 1.1;
}

.serv-hero-content p {
font-size: 20px;
color: var(--gray);
line-height: 1.6;
}

.serv-catalog {
padding: 110px 0;
background: var(--white);
}

.catalog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
}

.cat-card {
background: var(--white);
border: 2px solid #e5e7eb;
padding: 42px;
border-radius: 18px;
transition: all 0.4s ease;
position: relative;
}

.cat-card:hover {
border-color: var(--primary);
transform: translateY(-6px);
box-shadow: 0 18px 48px rgba(84,101,255,0.12);
}

.cat-card.main-card {
grid-row: span 2;
background: var(--light-bg);
}

.cat-card.accent-card {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
border: none;
}

.card-icon {
width: 68px;
height: 68px;
background: var(--accent-light);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}

.cat-card.accent-card .card-icon {
background: rgba(255,255,255,0.2);
}

.card-icon i {
font-size: 32px;
color: var(--primary);
}

.cat-card.accent-card .card-icon i {
color: var(--white);
}

.cat-card h3 {
font-size: 28px;
margin-bottom: 16px;
color: var(--dark);
}

.cat-card.accent-card h3 {
color: var(--white);
}

.cat-card p {
font-size: 16px;
color: var(--gray);
line-height: 1.65;
margin-bottom: 24px;
}

.cat-card.accent-card p {
color: rgba(255,255,255,0.95);
}

.card-features {
list-style: none;
margin: 28px 0;
}

.card-features li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
font-size: 15px;
color: var(--dark);
}

.card-features li i {
color: var(--primary);
font-size: 20px;
}

.card-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary);
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: gap 0.3s ease;
}

.cat-card.accent-card .card-link {
color: var(--white);
}

.card-link:hover {
gap: 14px;
}

.how-we-work {
padding: 100px 0;
background: var(--dark);
}

.work-layout {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 80px;
align-items: start;
}

.section-label {
display: inline-block;
color: var(--primary-light);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 18px;
}

.work-left h2 {
font-size: 44px;
color: var(--white);
margin-bottom: 24px;
line-height: 1.15;
}

.work-left p {
font-size: 17px;
color: var(--gray);
line-height: 1.7;
}

.work-step {
display: flex;
gap: 24px;
margin-bottom: 36px;
padding-bottom: 36px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}

.work-step:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

.step-num {
flex-shrink: 0;
width: 48px;
height: 48px;
background: var(--primary);
color: var(--white);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
font-family: 'Space Grotesk', sans-serif;
}

.step-txt h4 {
font-size: 20px;
color: var(--white);
margin-bottom: 8px;
}

.step-txt p {
font-size: 15px;
color: var(--gray);
line-height: 1.6;
}

.visual-serv {
padding: 0 0 100px;
background: var(--dark);
}

.visual-arrange {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: center;
background: var(--white);
padding: 60px;
border-radius: 24px;
}

.visual-content h2 {
font-size: 40px;
margin-bottom: 24px;
color: var(--dark);
}

.visual-content p {
font-size: 17px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 36px;
}

.metric-row {
display: flex;
gap: 32px;
}

.m-item {
display: flex;
flex-direction: column;
}

.m-num {
font-size: 48px;
font-weight: 700;
color: var(--primary);
font-family: 'Space Grotesk', sans-serif;
line-height: 1;
margin-bottom: 8px;
}

.m-text {
font-size: 14px;
color: var(--gray);
}

.visual-img img {
width: 100%;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.industries-serve {
padding: 100px 0;
background: var(--light-bg);
}

.industries-serve h2 {
font-size: 46px;
text-align: center;
margin-bottom: 64px;
color: var(--dark);
}

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

.ind-card {
background: var(--white);
padding: 36px;
border-radius: 14px;
border: 2px solid transparent;
transition: all 0.3s ease;
}

.ind-card:hover {
border-color: var(--primary);
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(84,101,255,0.1);
}

.ind-card i {
font-size: 36px;
color: var(--primary);
margin-bottom: 18px;
display: block;
}

.ind-card h4 {
font-size: 20px;
margin-bottom: 12px;
color: var(--dark);
}

.ind-card p {
font-size: 15px;
color: var(--gray);
line-height: 1.6;
}

.cta-serv-page {
padding: 100px 0;
background: var(--white);
}

.cta-box-serv {
text-align: center;
max-width: 720px;
margin: 0 auto;
}

.cta-box-serv h2 {
font-size: 48px;
margin-bottom: 24px;
color: var(--dark);
}

.cta-box-serv p {
font-size: 18px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 36px;
}

.strat-hero {
padding: 140px 0 80px;
background: var(--white);
}

.strat-hero-flex {
max-width: 880px;
}

.strat-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--accent-light);
padding: 10px 22px;
border-radius: 8px;
margin-bottom: 32px;
}

.strat-badge i {
font-size: 20px;
color: var(--primary);
}

.strat-badge span {
font-size: 14px;
font-weight: 600;
color: var(--primary);
text-transform: lowercase;
}

.strat-hero h1 {
font-size: 62px;
margin-bottom: 28px;
color: var(--dark);
line-height: 1.1;
}

.strat-hero p {
font-size: 20px;
color: var(--gray);
line-height: 1.65;
}

.strat-what {
padding: 100px 0;
background: var(--light-bg);
}

.what-split {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 70px;
}

.what-left h2 {
font-size: 44px;
margin-bottom: 24px;
color: var(--dark);
}

.what-left p {
font-size: 17px;
color: var(--gray);
line-height: 1.7;
}

.deliverable-item {
background: var(--white);
padding: 32px;
border-radius: 14px;
margin-bottom: 20px;
border: 2px solid transparent;
transition: all 0.3s ease;
}

.deliverable-item:hover {
border-color: var(--primary);
transform: translateX(6px);
}

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

.deliv-header i {
font-size: 28px;
color: var(--primary);
}

.deliv-header h4 {
font-size: 20px;
color: var(--dark);
}

.deliverable-item p {
font-size: 15px;
color: var(--gray);
line-height: 1.6;
margin-left: 44px;
}

.problems-solve {
padding: 110px 0;
background: var(--white);
}

.problems-solve h2 {
font-size: 46px;
text-align: center;
margin-bottom: 64px;
color: var(--dark);
}

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

.prob-card {
background: var(--light-bg);
padding: 38px;
border-radius: 16px;
transition: all 0.3s ease;
}

.prob-card.highlight {
background: var(--primary);
}

.prob-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}

.prob-card h3 {
font-size: 24px;
margin-bottom: 14px;
color: var(--dark);
}

.prob-card.highlight h3 {
color: var(--white);
}

.prob-card p {
font-size: 15px;
color: var(--gray);
line-height: 1.65;
}

.prob-card.highlight p {
color: rgba(255,255,255,0.95);
}

.strat-process {
padding: 110px 0;
background: var(--light-bg);
}

.strat-process h2 {
font-size: 46px;
margin-bottom: 64px;
color: var(--dark);
text-align: center;
}

.timeline {
max-width: 820px;
margin: 0 auto;
position: relative;
}

.timeline::before {
content: '';
position: absolute;
left: 27px;
top: 50px;
bottom: 50px;
width: 3px;
background: var(--primary-lighter);
}

.timeline-item {
display: flex;
gap: 32px;
margin-bottom: 48px;
position: relative;
}

.timeline-marker {
flex-shrink: 0;
width: 54px;
height: 54px;
background: var(--primary);
color: var(--white);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 700;
font-family: 'Space Grotesk', sans-serif;
position: relative;
z-index: 1;
}

.timeline-content {
background: var(--white);
padding: 28px 32px;
border-radius: 14px;
flex: 1;
border: 2px solid #e5e7eb;
}

.timeline-content h4 {
font-size: 22px;
margin-bottom: 12px;
color: var(--dark);
}

.timeline-content p {
font-size: 15px;
color: var(--gray);
line-height: 1.65;
margin-bottom: 12px;
}

.time-note {
display: inline-block;
background: var(--accent-light);
color: var(--primary);
padding: 6px 14px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}

.strat-cta {
padding: 100px 0;
background: var(--white);
}

.cta-strat-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
background: var(--light-bg);
padding: 60px;
border-radius: 20px;
}

.cta-left-strat h2 {
font-size: 44px;
margin-bottom: 20px;
color: var(--dark);
}

.cta-left-strat p {
font-size: 17px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 32px;
}

.cta-stats {
display: flex;
gap: 40px;
}

.stat-item {
text-align: center;
}

.stat-value {
display: block;
font-size: 52px;
font-weight: 700;
color: var(--primary);
font-family: 'Space Grotesk', sans-serif;
line-height: 1;
margin-bottom: 10px;
}

.stat-label {
font-size: 14px;
color: var(--gray);
}

.seo-intro {
padding: 140px 0 90px;
background: linear-gradient(145deg, var(--light-bg) 0%, var(--white) 60%);
}

.seo-intro-wrap {
max-width: 840px;
}

.service-tag {
display: inline-block;
background: var(--primary);
color: var(--white);
padding: 9px 20px;
border-radius: 7px;
font-size: 13px;
font-weight: 600;
margin-bottom: 28px;
text-transform: lowercase;
}

.seo-intro h1 {
font-size: 62px;
margin-bottom: 26px;
color: var(--dark);
line-height: 1.12;
}

.seo-intro p {
font-size: 20px;
color: var(--gray);
line-height: 1.65;
margin-bottom: 42px;
}

.intro-metrics {
display: flex;
gap: 48px;
}

.intro-met {
display: flex;
flex-direction: column;
}

.met-num {
font-size: 44px;
font-weight: 700;
color: var(--primary);
font-family: 'Space Grotesk', sans-serif;
line-height: 1;
margin-bottom: 8px;
}

.met-txt {
font-size: 14px;
color: var(--gray);
}

.seo-checklist {
padding: 100px 0;
background: var(--white);
}

.seo-checklist h2 {
font-size: 46px;
text-align: center;
margin-bottom: 64px;
color: var(--dark);
}

.check-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}

.check-group {
background: var(--light-bg);
padding: 40px;
border-radius: 16px;
margin-bottom: 28px;
}

.check-group h3 {
font-size: 24px;
margin-bottom: 24px;
color: var(--dark);
}

.check-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 0;
}

.check-item i {
font-size: 22px;
color: var(--primary);
flex-shrink: 0;
}

.check-item span {
font-size: 15px;
color: var(--dark);
}

.seo-visual-section {
padding: 100px 0;
background: var(--light-bg);
}

.seo-vis-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}

.vis-content h2 {
font-size: 42px;
margin-bottom: 24px;
color: var(--dark);
}

.vis-content p {
font-size: 17px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 36px;
}

.priority-list {
display: flex;
flex-direction: column;
gap: 18px;
}

.priority-item {
background: var(--white);
padding: 20px 24px;
border-radius: 12px;
border-left: 4px solid;
}

.priority-item.high {
border-left-color: #ef4444;
}

.priority-item.med {
border-left-color: #f59e0b;
}

.priority-item.low {
border-left-color: #10b981;
}

.priority-badge {
display: inline-block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}

.priority-item.high .priority-badge {
color: #ef4444;
}

.priority-item.med .priority-badge {
color: #f59e0b;
}

.priority-item.low .priority-badge {
color: #10b981;
}

.priority-item p {
font-size: 14px;
color: var(--gray);
line-height: 1.6;
margin: 0;
}

.vis-img img {
width: 100%;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.seo-deliverables {
padding: 100px 0;
background: var(--white);
}

.seo-deliverables h2 {
font-size: 46px;
text-align: center;
margin-bottom: 64px;
color: var(--dark);
}

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

.deliv-card {
background: var(--light-bg);
padding: 36px;
border-radius: 14px;
transition: all 0.3s ease;
border: 2px solid transparent;
}

.deliv-card.featured {
background: var(--primary);
border: none;
}

.deliv-card:hover {
border-color: var(--primary);
transform: translateY(-6px);
}

.deliv-card.featured:hover {
border-color: transparent;
}

.card-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}

.card-head i {
font-size: 32px;
color: var(--primary);
}

.deliv-card.featured .card-head i {
color: var(--white);
}

.card-head h4 {
font-size: 20px;
color: var(--dark);
}

.deliv-card.featured .card-head h4 {
color: var(--white);
}

.deliv-card p {
font-size: 15px;
color: var(--gray);
line-height: 1.65;
}

.deliv-card.featured p {
color: rgba(255,255,255,0.95);
}

.seo-faq {
padding: 100px 0;
background: var(--light-bg);
}

.faq-header h2 {
font-size: 46px;
text-align: center;
margin-bottom: 64px;
color: var(--dark);
}

.faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}

.faq-item {
background: var(--white);
padding: 32px;
border-radius: 14px;
}

.faq-item h4 {
font-size: 19px;
margin-bottom: 12px;
color: var(--dark);
}

.faq-item p {
font-size: 15px;
color: var(--gray);
line-height: 1.65;
}

.seo-cta-final {
padding: 100px 0;
background: var(--white);
}

.cta-box-seo {
text-align: center;
max-width: 680px;
margin: 0 auto;
background: var(--light-bg);
padding: 64px 48px;
border-radius: 20px;
}

.cta-box-seo h2 {
font-size: 46px;
margin-bottom: 20px;
color: var(--dark);
}

.cta-box-seo p {
font-size: 18px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 32px;
}

.analytics-hero {
padding: 140px 0 80px;
background: var(--white);
}

.analytics-hero-layout {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 60px;
align-items: start;
}

.service-badge-ana {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--accent-light);
padding: 10px 22px;
border-radius: 8px;
margin-bottom: 32px;
}

.service-badge-ana i {
font-size: 20px;
color: var(--primary);
}

.service-badge-ana span {
font-size: 14px;
font-weight: 600;
color: var(--primary);
text-transform: lowercase;
}

.hero-text-analytics h1 {
font-size: 62px;
margin-bottom: 28px;
color: var(--dark);
line-height: 1.1;
}

.hero-text-analytics p {
font-size: 20px;
color: var(--gray);
line-height: 1.65;
}

.hero-stats-ana {
display: flex;
flex-direction: column;
gap: 24px;
}

.stat-card-hero {
background: var(--primary);
padding: 32px;
border-radius: 14px;
}

.stat-hero-num {
display: block;
font-size: 52px;
font-weight: 700;
color: var(--white);
font-family: 'Space Grotesk', sans-serif;
line-height: 1;
margin-bottom: 12px;
}

.stat-card-hero p {
font-size: 15px;
color: rgba(255,255,255,0.95);
line-height: 1.5;
}

.what-we-track {
padding: 110px 0;
background: var(--light-bg);
}

.what-we-track h2 {
font-size: 46px;
text-align: center;
margin-bottom: 20px;
color: var(--dark);
}

.section-intro {
text-align: center;
font-size: 18px;
color: var(--gray);
max-width: 680px;
margin: 0 auto 64px;
}

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

.metric-block {
background: var(--white);
padding: 40px;
border-radius: 16px;
border: 2px solid transparent;
transition: all 0.3s ease;
}

.metric-block.accent {
background: var(--primary);
border: none;
}

.metric-block:hover {
border-color: var(--primary);
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(84,101,255,0.1);
}

.metric-block.accent:hover {
border-color: transparent;
}

.metric-icon {
width: 64px;
height: 64px;
background: var(--accent-light);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
}

.metric-block.accent .metric-icon {
background: rgba(255,255,255,0.2);
}

.metric-icon i {
font-size: 30px;
color: var(--primary);
}

.metric-block.accent .metric-icon i {
color: var(--white);
}

.metric-block h3 {
font-size: 22px;
margin-bottom: 14px;
color: var(--dark);
}

.metric-block.accent h3 {
color: var(--white);
}

.metric-block p {
font-size: 15px;
color: var(--gray);
line-height: 1.65;
}

.metric-block.accent p {
color: rgba(255,255,255,0.95);
}

.reporting-format {
padding: 100px 0;
background: var(--white);
}

.format-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
}

.format-left h2 {
font-size: 42px;
margin-bottom: 24px;
color: var(--dark);
}

.format-left p {
font-size: 17px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 36px;
}

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

.format-feature {
display: flex;
gap: 18px;
}

.format-feature i {
font-size: 28px;
color: var(--primary);
flex-shrink: 0;
margin-top: 4px;
}

.format-feature h4 {
font-size: 18px;
margin-bottom: 6px;
color: var(--dark);
}

.format-feature p {
font-size: 14px;
color: var(--gray);
line-height: 1.6;
margin: 0;
}

.dashboard-preview {
background: var(--dark);
padding: 36px;
border-radius: 18px;
box-shadow: 0 24px 64px rgba(0,0,0,0.2);
}

.dash-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}

.dash-label {
font-size: 12px;
text-transform: uppercase;
color: var(--primary-light);
font-weight: 600;
letter-spacing: 1px;
}

.dash-date {
font-size: 14px;
color: var(--gray);
}

.dash-kpi {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 28px;
}

.kpi-item {
display: flex;
flex-direction: column;
background: rgba(255,255,255,0.05);
padding: 18px;
border-radius: 10px;
}

.kpi-label {
font-size: 11px;
text-transform: uppercase;
color: var(--gray);
margin-bottom: 8px;
letter-spacing: 0.5px;
}

.kpi-value {
font-size: 26px;
font-weight: 700;
color: var(--white);
font-family: 'Space Grotesk', sans-serif;
margin-bottom: 6px;
}

.kpi-change {
font-size: 13px;
font-weight: 600;
}

.kpi-change.up {
color: #10b981;
}

.kpi-change.down {
color: #ef4444;
}

.dash-insight,
.dash-action {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 10px;
margin-bottom: 16px;
}

.dash-insight:last-child,
.dash-action:last-child {
margin-bottom: 0;
}

.dash-insight h5,
.dash-action h5 {
font-size: 13px;
text-transform: uppercase;
color: var(--primary-light);
margin-bottom: 10px;
letter-spacing: 0.8px;
}

.dash-insight p,
.dash-action p {
font-size: 14px;
color: rgba(255,255,255,0.9);
line-height: 1.6;
margin: 0;
}

.analytics-cta-block {
padding: 100px 0;
background: var(--light-bg);
}

.cta-analytics-final {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: center;
background: var(--white);
padding: 60px;
border-radius: 20px;
}

.cta-content-ana h2 {
font-size: 44px;
margin-bottom: 20px;
color: var(--dark);
}

.cta-content-ana p {
font-size: 17px;
color: var(--gray);
line-height: 1.7;
margin-bottom: 32px;
}

.cta-proof-ana {
display: flex;
flex-direction: column;
gap: 20px;
}

.proof-item-ana {
display: flex;
align-items: center;
gap: 16px;
background: var(--light-bg);
padding: 20px;
border-radius: 12px;
}

.proof-item-ana i {
font-size: 28px;
color: var(--primary);
flex-shrink: 0;
}

.proof-item-ana p {
font-size: 15px;
color: var(--dark);
line-height: 1.5;
margin: 0;
}

@media (max-width: 1024px) {
.serv-hero-content h1 {
font-size: 48px;
}

.catalog-grid {
grid-template-columns: 1fr;
}

.cat-card.main-card {
grid-row: span 1;
}

.work-layout {
grid-template-columns: 1fr;
gap: 48px;
}

.visual-arrange {
grid-template-columns: 1fr;
padding: 40px;
}

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

.what-split {
grid-template-columns: 1fr;
gap: 48px;
}

.prob-grid {
grid-template-columns: 1fr;
}

.check-layout {
grid-template-columns: 1fr;
gap: 28px;
}

.seo-vis-grid {
grid-template-columns: 1fr;
gap: 48px;
}

.deliv-grid {
grid-template-columns: 1fr;
}

.faq-grid {
grid-template-columns: 1fr;
}

.analytics-hero-layout {
grid-template-columns: 1fr;
}

.metrics-showcase {
grid-template-columns: 1fr;
}

.format-split {
grid-template-columns: 1fr;
gap: 48px;
}

.cta-analytics-final {
grid-template-columns: 1fr;
padding: 40px;
}

.cta-strat-box {
flex-direction: column;
align-items: flex-start;
padding: 40px;
}
}

@media (max-width: 640px) {
.serv-hero-content h1 {
font-size: 36px;
}

.strat-hero h1,
.seo-intro h1,
.hero-text-analytics h1 {
font-size: 40px;
}

.ind-grid {
grid-template-columns: 1fr;
}

.metric-row {
flex-direction: column;
gap: 20px;
}

.intro-metrics {
flex-direction: column;
gap: 24px;
}

.cta-stats {
flex-direction: column;
gap: 24px;
}

.dash-kpi {
grid-template-columns: 1fr;
}
}

.insights-hero {
padding: 140px 0 80px;
background: linear-gradient(165deg, var(--white) 0%, var(--accent-light) 100%);
}

.insights-intro {
max-width: 820px;
}

.insight-tag {
display: inline-block;
background: var(--primary);
color: var(--white);
padding: 8px 20px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
text-transform: lowercase;
  letter-spacing: 0.3px;
margin-bottom: 28px;
}

.insights-intro h1 {
font-size: 64px;
margin-bottom: 24px;
color: var(--dark);
line-height: 1.12;
}

.insights-intro p {
  font-size: 22px;
color: var(--gray);
line-height: 1.5;
}

.insights-mosaic {
padding: 80px 0 120px;
background: var(--white);
}

.mosaic-layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, auto);
gap: 24px;
}

.insight-block {
background: var(--white);
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
cursor: pointer;
  transition: all 0.35s ease;
position: relative;
}

.insight-block:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(84, 101, 255, 0.18);
  border-color: var(--primary);
}

.insight-block.large-feat {
grid-column: span 7;
grid-row: span 2;
}

.insight-block.standard {
grid-column: span 5;
  grid-row: span 1;
}

.insight-block.visual-card {
grid-column: span 5;
grid-row: span 1;
}

.insight-block.tall-text {
grid-column: span 7;
  grid-row: span 1;
}

.insight-block.medium-feat {
grid-column: span 5;
grid-row: span 1;
}

.insight-visual {
position: relative;
overflow: hidden;
}

.insight-visual img {
  width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.insight-block:hover .insight-visual img {
transform: scale(1.05);
}

.large-feat .insight-visual {
  height: 380px;
}

.visual-card .insight-visual {
height: 240px;
}

.medium-feat .insight-visual {
height: 260px;
}

.read-badge {
position: absolute;
  top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.75);
color: var(--white);
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
  font-weight: 600;
backdrop-filter: blur(8px);
}

.insight-text {
padding: 32px;
}

.large-feat .insight-text {
padding: 40px;
}

.insight-text.compact {
  padding: 24px;
}

.cat-label {
display: inline-block;
color: var(--primary);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
  margin-bottom: 12px;
}

.insight-text h2 {
font-size: 36px;
margin-bottom: 16px;
color: var(--dark);
line-height: 1.2;
}

.insight-text h3 {
  font-size: 24px;
margin-bottom: 12px;
color: var(--dark);
line-height: 1.25;
}

.insight-text p {
font-size: 16px;
color: var(--gray);
  line-height: 1.65;
margin-bottom: 20px;
}

.read-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary);
  font-weight: 600;
font-size: 15px;
transition: gap 0.3s ease;
}

.insight-block:hover .read-arrow {
gap: 12px;
}

.meta-line {
display: flex;
  justify-content: space-between;
align-items: center;
margin-top: 24px;
}

.read-time {
display: flex;
align-items: center;
gap: 6px;
  font-size: 13px;
color: var(--gray);
}

.insights-cta {
padding: 100px 0;
background: var(--light-bg);
}

.cta-content-box {
text-align: center;
  max-width: 680px;
margin: 0 auto;
background: var(--white);
padding: 64px 48px;
border-radius: 20px;
border: 2px solid var(--primary);
}

.cta-content-box h2 {
  font-size: 42px;
margin-bottom: 20px;
color: var(--dark);
}

.cta-content-box p {
font-size: 18px;
color: var(--gray);
  line-height: 1.6;
margin-bottom: 32px;
}

.insights-coming {
padding: 180px 0 160px;
background: linear-gradient(135deg, var(--accent-light) 0%, var(--white) 100%);
}

.coming-box {
  max-width: 720px;
margin: 0 auto;
text-align: center;
}

.status-pill {
display: inline-block;
background: var(--primary-light);
color: var(--white);
  padding: 10px 24px;
border-radius: 24px;
font-size: 14px;
font-weight: 600;
margin-bottom: 32px;
}

.coming-box h1 {
font-size: 68px;
  margin-bottom: 32px;
color: var(--dark);
line-height: 1.1;
}

.coming-box p {
font-size: 20px;
color: var(--gray);
line-height: 1.7;
  margin-bottom: 20px;
}

.sub-note {
font-size: 17px;
color: var(--dark);
font-weight: 500;
margin-top: 36px;
  margin-bottom: 36px;
}

.article-page {
background: var(--white);
}

.article-header-visual {
width: 100%;
height: 520px;
overflow: hidden;
}

.article-header-visual img {
  width: 100%;
height: 100%;
object-fit: cover;
}

.article-container {
max-width: 840px;
margin: 0 auto;
padding: 60px 24px 80px;
}

.article-breadcrumb {
  display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--gray);
margin-bottom: 36px;
}

.article-breadcrumb a {
color: var(--primary);
  text-decoration: none;
font-weight: 500;
}

.article-breadcrumb i {
font-size: 12px;
}

.article-head {
margin-bottom: 48px;
}

.article-category {
  display: inline-block;
color: var(--primary);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 16px;
}

.article-head h1 {
  font-size: 56px;
line-height: 1.15;
color: var(--dark);
margin-bottom: 24px;
}

.article-meta {
display: flex;
gap: 28px;
}

.meta-item {
  display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--gray);
}

.meta-item i {
font-size: 16px;
}

.article-body {
  color: var(--dark);
}

.lead-text {
font-size: 21px;
line-height: 1.7;
color: var(--gray);
margin-bottom: 48px;
  font-weight: 400;
}

.article-body h2 {
font-size: 32px;
line-height: 1.3;
color: var(--dark);
margin-top: 52px;
  margin-bottom: 20px;
}

.article-body p {
font-size: 17px;
line-height: 1.8;
color: var(--dark);
margin-bottom: 24px;
}

.article-footer-cta {
  margin-top: 72px;
padding-top: 72px;
border-top: 2px solid var(--light-bg);
}

.footer-cta-content {
text-align: center;
background: var(--light-bg);
  padding: 56px 40px;
border-radius: 16px;
}

.footer-cta-content h3 {
font-size: 36px;
margin-bottom: 16px;
color: var(--dark);
}

.footer-cta-content p {
  font-size: 17px;
color: var(--gray);
margin-bottom: 32px;
}

.related-articles {
padding: 80px 0;
background: var(--light-bg);
}

.related-title {
  font-size: 28px;
color: var(--dark);
margin-bottom: 40px;
}

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

.related-card {
  background: var(--white);
padding: 32px;
border-radius: 12px;
border: 1px solid #e5e7eb;
text-decoration: none;
display: block;
  transition: all 0.3s ease;
}

.related-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(84, 101, 255, 0.15);
border-color: var(--primary);
}

.related-cat {
  display: inline-block;
color: var(--primary);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 12px;
}

.related-card h4 {
  font-size: 20px;
color: var(--dark);
line-height: 1.3;
margin-bottom: 16px;
}

.related-arrow {
display: flex;
align-items: center;
  color: var(--primary);
font-weight: 600;
font-size: 14px;
}

.related-card:hover .related-arrow {
transform: translateX(4px);
}

@media (max-width: 1024px) {
.insights-intro h1 {
  font-size: 48px;
}

.mosaic-layout {
grid-template-columns: 1fr;
}

.insight-block.large-feat,
.insight-block.standard,
.insight-block.visual-card,
.insight-block.tall-text,
.insight-block.medium-feat {
  grid-column: span 1;
grid-row: span 1;
}

.large-feat .insight-visual,
.visual-card .insight-visual,
.medium-feat .insight-visual {
height: 280px;
}

.related-grid {
  grid-template-columns: 1fr;
}

.article-head h1 {
font-size: 42px;
}

.coming-box h1 {
font-size: 48px;
}
}

@media (max-width: 640px) {
.insights-hero {
  padding: 100px 0 60px;
}

.insights-intro h1 {
font-size: 36px;
}

.insights-intro p {
font-size: 18px;
}

.article-header-visual {
height: 320px;
}

.article-head h1 {
  font-size: 32px;
}

.article-body h2 {
font-size: 26px;
}

.lead-text {
font-size: 18px;
}

.cta-content-box {
padding: 40px 28px;
}

.cta-content-box h2 {
  font-size: 32px;
}

.footer-cta-content h3 {
font-size: 28px;
}

.coming-box h1 {
font-size: 32px;
}
}

.legal-hero {
padding: 88px 0 62px;
background: linear-gradient(160deg, var(--accent-light) 0%, var(--white) 58%);
}

.legal-breadcrumb {
font-size: 13px;
  margin-bottom: 24px;
color: var(--gray);
}

.legal-breadcrumb a {
color: var(--primary);
text-decoration: none;
transition: color 0.3s ease;
}

.legal-breadcrumb a:hover {
  color: var(--primary-light);
}

.legal-breadcrumb span {
margin: 0 8px;
}

.legal-hero h1 {
font-size: 58px;
color: var(--dark);
  margin-bottom: 16px;
line-height: 1.1;
letter-spacing: -1px;
}

.legal-updated {
font-size: 15px;
color: var(--gray);
font-style: italic;
}

.legal-content {
  padding: 96px 0 120px;
background: var(--white);
}

.legal-text-box {
max-width: 840px;
margin: 0 auto;
}

.legal-section {
margin-bottom: 64px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section h2 {
font-size: 32px;
color: var(--dark);
margin-bottom: 22px;
font-weight: 600;
}

.legal-section p {
font-size: 17px;
  color: var(--gray);
line-height: 1.75;
margin-bottom: 18px;
}

.legal-section p:last-child {
margin-bottom: 0;
}

.legal-section p strong {
color: var(--dark);
  font-weight: 600;
}

.thankyou-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
padding: 40px 20px;
}

.thankyou-box {
background: var(--white);
padding: 80px 60px;
  border-radius: 24px;
box-shadow: 0 32px 80px rgba(0,0,0,0.18);
text-align: center;
max-width: 640px;
width: 100%;
}

.check-icon {
margin-bottom: 32px;
}

.check-icon i {
  font-size: 88px;
color: var(--primary);
}

.thankyou-box h1 {
font-size: 44px;
color: var(--dark);
margin-bottom: 24px;
line-height: 1.15;
}

.thankyou-box p {
  font-size: 18px;
color: var(--gray);
line-height: 1.65;
margin-bottom: 16px;
}

.thankyou-subtext {
font-size: 15px;
color: var(--gray);
  margin-bottom: 44px;
}

.thankyou-btn {
background: var(--primary);
color: var(--white);
border: none;
padding: 18px 48px;
  border-radius: 10px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.35s ease;
font-family: 'Space Grotesk', sans-serif;
}

.thankyou-btn:hover {
  background: var(--primary-light);
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(84, 101, 255, 0.3);
}

@media (max-width: 1024px) {
.legal-hero h1 {
font-size: 44px;
  }
  
.legal-section h2 {
font-size: 28px;
}

.thankyou-box {
padding: 60px 40px;
}

.thankyou-box h1 {
font-size: 36px;
}
}

@media (max-width: 640px) {
.legal-hero {
  padding: 64px 0 48px;
}

.legal-hero h1 {
font-size: 34px;
}

.legal-content {
padding: 72px 0 96px;
}

.legal-section {
margin-bottom: 48px;
}

.legal-section h2 {
  font-size: 24px;
}

.legal-section p {
font-size: 16px;
}

.thankyou-box {
padding: 48px 28px;
}

.check-icon i {
font-size: 68px;
}

.thankyou-box h1 {
  font-size: 30px;
}

.thankyou-box p {
font-size: 16px;
}

.thankyou-btn {
width: 100%;
}
}

.form-progress-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 38px;
padding-bottom: 24px;
border-bottom: 2px solid var(--light-bg);
}

.progress-dots {
display: flex;
gap: 12px;
}

.progress-dots .dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--light-bg);
transition: all 0.4s ease;
position: relative;
}

.progress-dots .dot.active {
background: var(--primary);
box-shadow: 0 0 0 4px rgba(84, 101, 255, 0.2);
}

.step-indicator {
font-size: 13px;
color: var(--gray);
font-weight: 600;
}

.step-indicator #currentStep {
color: var(--primary);
font-size: 15px;
}

.form-step {
display: none;
animation: fadeInForm 0.4s ease;
}

.form-step.active {
display: block;
}

@keyframes fadeInForm {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

.step-title {
font-size: 24px;
color: var(--dark);
margin-bottom: 28px;
font-family: 'Space Grotesk', sans-serif;
}

.next-step-btn,
.prev-step-btn,
.submit-final-btn {
padding: 16px 32px;
border-radius: 10px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Space Grotesk', sans-serif;
border: none;
display: inline-flex;
align-items: center;
gap: 8px;
}

.next-step-btn,
.submit-final-btn {
background: var(--primary);
color: var(--white);
}

.next-step-btn:hover,
.submit-final-btn:hover {
background: var(--primary-light);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(84, 101, 255, 0.3);
}

.prev-step-btn {
background: transparent;
color: var(--gray);
border: 2px solid var(--light-bg);
}

.prev-step-btn:hover {
background: var(--light-bg);
border-color: var(--gray);
}

.form-nav-buttons {
display: flex;
gap: 14px;
margin-top: 32px;
}

.submit-final-btn {
flex: 1;
justify-content: center;
}

@media (max-width: 640px) {
.form-nav-buttons {
flex-direction: column-reverse;
}

.prev-step-btn,
.next-step-btn,
.submit-final-btn {
width: 100%;
justify-content: center;
}
}