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

:root {
--color-primary: #2f2235;
--color-secondary: #3f3244;
--color-tertiary: #60495a;
--color-light: #bfc3ba;
--color-neutral: #a9aca9;
--color-accent: #00ff88;
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
--transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
scroll-behavior: smooth;
}

body {
font-family: var(--font-body);
background: var(--color-primary);
color: var(--color-light);
line-height: 1.6;
overflow-x: hidden;
}

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

.main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(47, 34, 53, 0.85);
backdrop-filter: blur(12px);
z-index: 1000;
border-bottom: 1px solid rgba(0, 255, 136, 0.1);
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}

.logo img {
display: block;
transition: var(--transition-smooth);
}

.logo:hover img {
filter: drop-shadow(0 0 12px var(--color-accent));
}

.menu-toggle {
display: none;
flex-direction: column;
background: transparent;
border: none;
cursor: pointer;
padding: 8px;
}

.menu-toggle span {
width: 28px;
height: 2px;
background: var(--color-accent);
margin: 4px 0;
transition: var(--transition-smooth);
}

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

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

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

.nav-menu {
display: flex;
align-items: center;
gap: 48px;
}

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

.nav-dropdown {
position: relative;
}

.dropdown-toggle {
display: flex;
align-items: center;
gap: 6px;
}

.dropdown-toggle i {
font-size: 12px;
transition: var(--transition-smooth);
}

.nav-dropdown.active .dropdown-toggle i {
transform: rotate(180deg);
}

.dropdown-menu {
position: absolute;
top: calc(100% + 20px);
left: 0;
background: rgba(63, 50, 68, 0.98);
backdrop-filter: blur(16px);
border: 1px solid rgba(0, 255, 136, 0.2);
border-radius: 8px;
padding: 12px 0;
min-width: 220px;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition-smooth);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

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

.dropdown-menu li {
margin: 0;
}

.dropdown-menu a {
display: block;
padding: 12px 24px;
color: var(--color-neutral);
text-decoration: none;
font-size: 15px;
font-weight: 500;
transition: var(--transition-smooth);
}

.dropdown-menu a::after {
display: none;
}

.dropdown-menu a:hover {
background: rgba(0, 255, 136, 0.1);
color: var(--color-accent);
padding-left: 32px;
}

.nav-list a {
color: var(--color-neutral);
text-decoration: none;
font-size: 15px;
font-weight: 500;
position: relative;
transition: var(--transition-smooth);
}

.nav-list a::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: 2px;
background: var(--color-accent);
transition: var(--transition-smooth);
}

.nav-list a:hover {
color: var(--color-accent);
}

.nav-list a:hover::after {
width: 100%;
}

.nav-cta {
background: var(--color-accent);
color: var(--color-primary);
padding: 12px 28px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
font-size: 15px;
transition: var(--transition-smooth);
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.nav-cta:hover {
background: var(--color-light);
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
}

main {
margin-top: 85px;
}

.hero-future {
min-height: 100vh;
	display: flex;
align-items: center;
  position: relative;
	background: 
		linear-gradient(160deg, rgba(26,22,37,0.92) 0%, rgba(47,34,53,0.88) 40%, rgba(63,50,68,0.85) 100%),
		url('../img/bpv1.webp') center/cover no-repeat;
overflow: hidden;
  padding: 140px 0 100px;
}

.hero-bg-overlay {
position: absolute;
	top: 0;
left: 0;
  width: 100%;
	height: 100%;
background: 
		radial-gradient(circle at 20% 30%, rgba(0,255,136,0.15) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(96,73,90,0.4) 0%, transparent 50%);
  z-index: 0;
}

.hero-future .container {
position: relative;
	z-index: 1;
}

.hero-badge {
display: inline-block;
  background: rgba(0,255,136,0.1);
	border: 1px solid rgba(0,255,136,0.3);
padding: 10px 24px;
  border-radius: 50px;
	font-size: 12px;
font-weight: 700;
  letter-spacing: 2px;
	text-transform: uppercase;
color: var(--color-accent);
  margin-bottom: 40px;
}

.hero-massive {
font-family: var(--font-heading);
	font-size: 96px;
font-weight: 900;
  line-height: 0.9;
	color: var(--color-light);
letter-spacing: -5px;
  margin-bottom: 40px;
}

.glow-text {
color: var(--color-accent);
	text-shadow: 0 0 40px rgba(0,255,136,0.6), 0 0 80px rgba(0,255,136,0.3);
}

.hero-desc {
font-size: 19px;
  line-height: 1.75;
	color: var(--color-neutral);
max-width: 780px;
  margin-bottom: 60px;
}

.hero-stats-bar {
display: flex;
	gap: 60px;
}

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

.stat-value {
font-family: var(--font-heading);
	font-size: 56px;
font-weight: 900;
  color: var(--color-accent);
	line-height: 1;
margin-bottom: 8px;
}

.stat-label {
font-size: 13px;
  color: var(--color-neutral);
	font-weight: 600;
text-transform: uppercase;
  letter-spacing: 1px;
}

.scroll-indicator {
position: absolute;
	bottom: 40px;
left: 50%;
  transform: translateX(-50%);
	display: flex;
flex-direction: column;
  align-items: center;
	gap: 12px;
}

.scroll-indicator span {
font-size: 11px;
  letter-spacing: 2px;
	color: var(--color-neutral);
font-weight: 700;
}

.scroll-line {
width: 2px;
  height: 60px;
	background: linear-gradient(to bottom, var(--color-accent), transparent);
animation: scrollAnim 2s infinite;
}

@keyframes scrollAnim {
0% { opacity: 0; transform: translateY(-20px); }
  50% { opacity: 1; }
	100% { opacity: 0; transform: translateY(20px); }
}

.container-wide {
max-width: 1600px;
	margin: 0 auto;
padding: 0 40px;
}

.design-philosophy {
padding: 160px 0;
  background: var(--color-secondary);
	position: relative;
overflow: hidden;
}

.design-philosophy::before {
content: '';
	position: absolute;
top: 0;
  right: -10%;
	width: 600px;
height: 600px;
  background: radial-gradient(circle, rgba(0,255,136,0.08) 0%, transparent 70%);
	border-radius: 50%;
}

.section-number {
font-family: var(--font-heading);
  font-size: 140px;
	font-weight: 900;
color: rgba(0,255,136,0.05);
  line-height: 1;
	position: absolute;
top: 40px;
  left: 40px;
	z-index: 0;
}

.section-head-large {
font-family: var(--font-heading);
	font-size: 72px;
font-weight: 900;
  color: var(--color-light);
	letter-spacing: -3px;
margin-bottom: 20px;
  position: relative;
	z-index: 1;
}

.section-intro {
font-size: 20px;
  color: var(--color-neutral);
	margin-bottom: 80px;
max-width: 720px;
  position: relative;
	z-index: 1;
}

.philosophy-asymmetric {
display: flex;
	flex-direction: column;
gap: 32px;
  position: relative;
	z-index: 1;
}

.phil-mega-card {
background: linear-gradient(145deg, var(--color-primary) 0%, rgba(47,34,53,0.95) 100%);
	border: 1px solid rgba(0,255,136,0.2);
border-radius: 24px;
  padding: 0;
	overflow: hidden;
display: grid;
  grid-template-columns: 1fr 1fr;
	gap: 0;
transition: all 0.5s ease;
  position: relative;
}

.phil-mega-card::before {
content: '';
	position: absolute;
top: 0;
  left: 0;
	width: 100%;
height: 4px;
  background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
}

.phil-mega-card:hover {
border-color: rgba(0,255,136,0.5);
  transform: translateY(-8px);
	box-shadow: 0 24px 64px rgba(0,255,136,0.15);
}

.mega-visual {
position: relative;
  width: 600px;
	overflow: hidden;
}

.mega-img {
width: 100%;
	height: 100%;
object-fit: cover;
  transition: transform 0.8s ease;
}

.phil-mega-card:hover .mega-img {
transform: scale(1.08);
}

.visual-overlay {
position: absolute;
	top: 0;
left: 0;
  width: 100%;
	height: 100%;
background: linear-gradient(135deg, transparent 0%, rgba(47,34,53,0.4) 50%, rgba(47,34,53,0.8) 100%);
  pointer-events: none;
}

.mega-label {
position: absolute;
	top: 32px;
right: 32px;
  background: var(--color-accent);
	color: var(--color-primary);
padding: 12px 28px;
  border-radius: 50px;
	font-size: 11px;
font-weight: 900;
  letter-spacing: 2px;
	box-shadow: 0 8px 24px rgba(0,255,136,0.4);
}

.mega-content {
padding: 64px 56px;
  display: flex;
	flex-direction: column;
justify-content: center;
}

.mega-title {
font-family: var(--font-heading);
	font-size: 42px;
font-weight: 900;
  color: var(--color-light);
	line-height: 1.15;
margin-bottom: 32px;
  letter-spacing: -1px;
}

.mega-text {
font-size: 16px;
	line-height: 1.8;
color: var(--color-neutral);
  margin-bottom: 20px;
}

.phil-cards-row {
display: grid;
	grid-template-columns: 1fr 1fr;
gap: 32px;
}

.row-reverse {
grid-template-columns: 1.2fr 0.8fr;
}

.phil-compact-card {
background: var(--color-primary);
	border: 1px solid rgba(0,255,136,0.15);
border-radius: 20px;
  overflow: hidden;
	transition: all 0.4s ease;
position: relative;
}

.phil-compact-card::after {
content: '';
	position: absolute;
bottom: 0;
  left: 0;
	width: 100%;
height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
	opacity: 0;
transition: opacity 0.4s ease;
}

.phil-compact-card:hover {
border-color: rgba(0,255,136,0.4);
  transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.phil-compact-card:hover::after {
opacity: 1;
}

.compact-visual {
position: relative;
	height: 280px;
overflow: hidden;
}

.compact-img {
width: 100%;
  height: 100%;
	object-fit: cover;
transition: transform 0.6s ease;
}

.phil-compact-card:hover .compact-img {
transform: scale(1.1);
}

.compact-tag {
position: absolute;
	top: 20px;
right: 20px;
  background: rgba(0,255,136,0.95);
	color: var(--color-primary);
padding: 8px 18px;
  border-radius: 50px;
	font-size: 10px;
font-weight: 900;
  letter-spacing: 1.5px;
}

.compact-content {
padding: 36px;
}

.compact-title {
font-family: var(--font-heading);
	font-size: 28px;
font-weight: 900;
  color: var(--color-light);
	line-height: 1.2;
margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.compact-text {
font-size: 15px;
	line-height: 1.7;
color: var(--color-neutral);
  margin-bottom: 14px;
}

.phil-statement-card {
background: linear-gradient(135deg, rgba(0,255,136,0.12) 0%, rgba(0,255,136,0.04) 100%);
	border: 2px solid rgba(0,255,136,0.3);
border-radius: 20px;
  padding: 48px;
	position: relative;
overflow: hidden;
}

.statement-glow {
position: absolute;
	top: -50%;
left: -50%;
  width: 200%;
	height: 200%;
background: radial-gradient(circle, rgba(0,255,136,0.15) 0%, transparent 50%);
  animation: glowPulse 8s infinite;
}

@keyframes glowPulse {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
	50% { transform: translate(10%, 10%) scale(1.1); opacity: 0.8; }
}

.statement-heading {
font-family: var(--font-heading);
  font-size: 36px;
	font-weight: 900;
color: var(--color-accent);
  margin-bottom: 20px;
	text-shadow: 0 0 30px rgba(0,255,136,0.3);
position: relative;
  z-index: 1;
}

.statement-body {
font-size: 17px;
	line-height: 1.8;
color: var(--color-light);
  margin-bottom: 16px;
	position: relative;
z-index: 1;
}

@media (max-width: 1200px) {
.phil-mega-card {
	grid-template-columns: 1fr;
}

.mega-visual {
  height: 400px;
}

.mega-content {
	padding: 48px 40px;
}

.phil-cards-row,
.row-reverse {
  grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {
.section-number {
	font-size: 80px;
}

.section-head-large {
  font-size: 42px;
}

.section-intro {
	font-size: 17px;
}

.mega-visual {
  height: 320px;
}

.mega-content {
	padding: 36px 28px;
}

.mega-title {
  font-size: 32px;
}

.mega-text {
	font-size: 15px;
}

.compact-visual {
  height: 220px;
}

.compact-content {
	padding: 28px;
}

.compact-title {
  font-size: 24px;
}

.phil-statement-card {
	padding: 36px 28px;
}

.statement-heading {
  font-size: 28px;
}

.statement-body {
	font-size: 16px;
}
}

@media (max-width: 480px) {
.mega-title {
	font-size: 26px;
}

.compact-title {
  font-size: 20px;
}

.statement-heading {
	font-size: 24px;
}
}

.services-deep {
padding: 160px 0;
  background: var(--color-primary);
	position: relative;
}

.services-layout {
display: grid;
	grid-template-columns: 1fr 1.2fr;
gap: 80px;
  margin-top: 80px;
}

.service-main {
position: sticky;
top: 120px;
align-self: flex-start;
}

.service-visual-box {
position: relative;
	border-radius: 16px;
overflow: hidden;
}

.service-main-img {
width: 100%;
  height: 600px;
	object-fit: cover;
border-radius: 16px;
}

.service-label-float {
position: absolute;
	bottom: 32px;
left: 32px;
  background: var(--color-accent);
	color: var(--color-primary);
padding: 16px 32px;
  border-radius: 8px;
	font-weight: 800;
font-size: 18px;
  box-shadow: 0 8px 32px rgba(0,255,136,0.4);
}

.service-list {
display: flex;
	flex-direction: column;
gap: 40px;
}

.service-item {
display: flex;
  gap: 32px;
	padding: 40px;
background: var(--color-secondary);
  border-radius: 12px;
	border-left: 4px solid transparent;
transition: all 0.4s ease;
}

.service-item:hover {
border-left-color: var(--color-accent);
  transform: translateX(8px);
}

.service-num {
font-family: var(--font-heading);
	font-size: 64px;
font-weight: 900;
  color: rgba(0,255,136,0.2);
	line-height: 1;
flex-shrink: 0;
}

.service-title {
font-family: var(--font-heading);
  font-size: 26px;
	font-weight: 800;
color: var(--color-light);
  margin-bottom: 16px;
}

.service-text {
font-size: 16px;
	line-height: 1.7;
color: var(--color-neutral);
  margin-bottom: 16px;
}

.service-link {
color: var(--color-accent);
	font-weight: 700;
font-size: 15px;
  text-decoration: none;
	transition: all 0.3s ease;
}

.service-link:hover {
text-decoration: underline;
}

.team-expertise {
padding: 160px 0;
  background: var(--color-secondary);
	position: relative;
}

.expertise-grid {
display: grid;
	grid-template-columns: 1fr 1fr;
gap: 32px;
  margin-top: 80px;
}

.expertise-block {
background: var(--color-primary);
	padding: 48px;
border-radius: 16px;
  border: 1px solid rgba(0,255,136,0.1);
}

.expertise-icon-wrap {
width: 80px;
  height: 80px;
	background: rgba(0,255,136,0.15);
border-radius: 12px;
  display: flex;
	align-items: center;
justify-content: center;
  margin-bottom: 28px;
}

.expertise-icon-wrap i {
font-size: 40px;
	color: var(--color-accent);
}

.expertise-heading {
font-family: var(--font-heading);
  font-size: 28px;
	font-weight: 800;
color: var(--color-light);
  margin-bottom: 20px;
}

.expertise-desc {
font-size: 16px;
	line-height: 1.75;
color: var(--color-neutral);
  margin-bottom: 16px;
}

.expertise-visual-large {
border-radius: 16px;
  overflow: hidden;
}

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

.process-flow {
padding: 160px 0;
	background: var(--color-primary);
position: relative;
}

.flow-timeline {
max-width: 1000px;
  margin-top: 80px;
}

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

.timeline-item::before {
content: '';
	position: absolute;
left: 39px;
  top: 80px;
	width: 2px;
height: calc(100% + 60px);
  background: linear-gradient(to bottom, var(--color-accent), transparent);
}

.timeline-item:last-child::before {
display: none;
}

.timeline-marker {
width: 80px;
  height: 80px;
	background: var(--color-accent);
border-radius: 50%;
  display: flex;
	align-items: center;
justify-content: center;
  flex-shrink: 0;
	box-shadow: 0 0 40px rgba(0,255,136,0.4);
}

.marker-num {
font-family: var(--font-heading);
  font-size: 36px;
	font-weight: 900;
color: var(--color-primary);
}

.timeline-content {
flex: 1;
  padding: 20px 0;
}

.timeline-title {
font-family: var(--font-heading);
	font-size: 32px;
font-weight: 800;
  color: var(--color-light);
	margin-bottom: 20px;
}

.timeline-text {
font-size: 17px;
  line-height: 1.75;
	color: var(--color-neutral);
margin-bottom: 16px;
}

.cta-final {
padding: 140px 0;
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-tertiary) 100%);
	position: relative;
overflow: hidden;
}

.cta-final::before {
content: '';
	position: absolute;
top: -50%;
  right: -20%;
	width: 800px;
height: 800px;
  background: radial-gradient(circle, rgba(0,255,136,0.1) 0%, transparent 70%);
}

.cta-box {
max-width: 900px;
	margin: 0 auto;
text-align: center;
  position: relative;
	z-index: 1;
background: rgba(47,34,53,0.6);
  backdrop-filter: blur(20px);
	padding: 80px 60px;
border-radius: 24px;
  border: 1px solid rgba(0,255,136,0.2);
}

.cta-heading {
font-family: var(--font-heading);
	font-size: 68px;
font-weight: 900;
  color: var(--color-light);
	letter-spacing: -3px;
margin-bottom: 28px;
}

.cta-subtext {
font-size: 19px;
  line-height: 1.7;
	color: var(--color-neutral);
margin-bottom: 16px;
}

.cta-buttons {
display: flex;
	gap: 20px;
justify-content: center;
  margin-top: 48px;
}

.btn-cta-primary {
background: var(--color-accent);
	color: var(--color-primary);
padding: 20px 52px;
  border-radius: 8px;
	font-weight: 800;
font-size: 18px;
  text-decoration: none;
	transition: all 0.3s ease;
box-shadow: 0 0 40px rgba(0,255,136,0.4);
}

.btn-cta-primary:hover {
background: var(--color-light);
  transform: translateY(-4px);
	box-shadow: 0 12px 50px rgba(0,255,136,0.6);
}

.btn-cta-secondary {
background: transparent;
	border: 2px solid var(--color-accent);
color: var(--color-accent);
  padding: 18px 48px;
	border-radius: 8px;
font-weight: 700;
  font-size: 18px;
	text-decoration: none;
display: flex;
  align-items: center;
	gap: 12px;
transition: all 0.3s ease;
}

.btn-cta-secondary:hover {
background: rgba(0,255,136,0.1);
  transform: translateY(-4px);
}

@media (max-width: 1200px) {
.hero-massive {
	font-size: 72px;
}

.section-head-large {
  font-size: 56px;
}

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

.large-card {
  grid-row: span 1;
}

.services-layout {
	grid-template-columns: 1fr;
gap: 60px;
}

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

@media (max-width: 768px) {
.hero-massive {
	font-size: 52px;
letter-spacing: -2px;
}

.hero-desc {
  font-size: 17px;
}

.hero-stats-bar {
	flex-wrap: wrap;
gap: 32px;
}

.section-number {
  font-size: 80px;
}

.section-head-large {
	font-size: 42px;
}

.section-intro {
  font-size: 17px;
}

.project-img-wrap,
.featured-card .project-img-wrap {
	height: 280px;
}

.project-content {
  padding: 28px;
}

.project-metrics {
	flex-direction: column;
}

.service-main-img {
  height: 400px;
}

.service-item {
	flex-direction: column;
gap: 20px;
  padding: 32px;
}

.service-num {
	font-size: 48px;
}

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

.timeline-item::before {
  display: none;
}

.cta-heading {
	font-size: 42px;
}

.cta-box {
  padding: 60px 32px;
}

.cta-buttons {
	flex-direction: column;
}
}

@media (max-width: 480px) {
.hero-massive {
	font-size: 38px;
}

.stat-value {
  font-size: 42px;
}

.section-head-large {
	font-size: 32px;
}

.cta-heading {
  font-size: 32px;
}
}

.main-footer {
background: var(--color-secondary);
padding: 80px 0 32px;
margin-top: 120px;
border-top: 1px solid rgba(0, 255, 136, 0.15);
}

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

.footer-brand {
max-width: 360px;
}

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

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

.footer-contact-info {
display: flex;
flex-direction: column;
gap: 14px;
}

.contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--color-neutral);
font-size: 15px;
}

.contact-item i {
color: var(--color-accent);
font-size: 16px;
margin-top: 2px;
flex-shrink: 0;
}

.contact-item a {
color: var(--color-neutral);
text-decoration: none;
transition: var(--transition-smooth);
}

.contact-item a:hover {
color: var(--color-accent);
}

.footer-title {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
color: var(--color-light);
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}

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

.footer-links li {
margin-bottom: 12px;
}

.footer-links a {
color: var(--color-neutral);
text-decoration: none;
font-size: 15px;
transition: var(--transition-smooth);
display: inline-block;
}

.footer-links a:hover {
color: var(--color-accent);
transform: translateX(4px);
}

.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
border-top: 1px solid var(--color-tertiary);
}

.footer-copy {
color: var(--color-neutral);
font-size: 14px;
}

.footer-legal {
display: flex;
gap: 24px;
}

.footer-legal a {
color: var(--color-neutral);
text-decoration: none;
font-size: 14px;
transition: var(--transition-smooth);
}

.footer-legal a:hover {
color: var(--color-accent);
}

.cookie-banner {
position: fixed;
bottom: -200px;
left: 50%;
transform: translateX(-50%);
background: rgba(63, 50, 68, 0.98);
backdrop-filter: blur(16px);
padding: 28px 36px;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 255, 136, 0.2);
z-index: 9999;
max-width: 880px;
width: 90%;
transition: bottom 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.cookie-banner.show {
bottom: 32px;
}

.cookie-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
}

.cookie-text-block {
flex: 1;
}

.cookie-title {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 700;
color: var(--color-light);
margin-bottom: 8px;
letter-spacing: 0.5px;
}

.cookie-text {
color: var(--color-neutral);
font-size: 14px;
line-height: 1.6;
}

.cookie-actions {
display: flex;
gap: 12px;
align-items: center;
}

.cookie-btn {
padding: 10px 24px;
border: none;
border-radius: 6px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: var(--transition-smooth);
}

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

.cookie-accept:hover {
background: var(--color-light);
box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.cookie-decline {
background: transparent;
color: var(--color-neutral);
border: 1px solid var(--color-tertiary);
}

.cookie-decline:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}

.cookie-link {
color: var(--color-accent);
text-decoration: none;
font-size: 14px;
font-weight: 500;
}

.cookie-link:hover {
text-decoration: underline;
}

@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
}

@media (max-width: 768px) {
.menu-toggle {
display: flex;
}

.nav-menu {
position: fixed;
top: 80px;
left: 0;
width: 100%;
height: calc(100vh - 80px);
background: rgba(47, 34, 53, 0.98);
backdrop-filter: blur(16px);
flex-direction: column;
justify-content: flex-start;
padding: 48px 24px;
gap: 32px;
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.nav-menu.active {
transform: translateX(0);
}

.nav-list {
flex-direction: column;
gap: 24px;
text-align: center;
width: 100%;
}

.nav-list a {
font-size: 20px;
}

.nav-dropdown {
width: 100%;
}

.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
max-height: 0;
overflow: hidden;
padding: 0;
margin-top: 12px;
transition: max-height 0.4s ease;
}

.nav-dropdown.active .dropdown-menu {
max-height: 400px;
padding: 12px 0;
}

.dropdown-menu a {
font-size: 17px;
}

.nav-cta {
font-size: 18px;
padding: 14px 32px;
}

.hero-section h1 {
font-size: 42px;
}

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

.footer-bottom {
flex-direction: column;
gap: 20px;
text-align: center;
}

.footer-legal {
flex-direction: column;
gap: 12px;
}

.cookie-content {
flex-direction: column;
text-align: center;
}

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

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

@media (max-width: 480px) {
.hero-section h1 {
font-size: 32px;
}
}

.abt-hero {
padding: 180px 0 120px;
background: var(--color-primary);
position: relative;
overflow: hidden;
}

.abt-hero::before {
content: '';
position: absolute;
top: -30%;
right: -15%;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(0,255,136,0.08) 0%, transparent 65%);
pointer-events: none;
}

.abt-intro-split {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 1;
}

.abt-text-zone {
max-width: 680px;
}

.abt-tag {
display: inline-block;
background: rgba(0,255,136,0.12);
border: 1px solid rgba(0,255,136,0.25);
color: var(--color-accent);
padding: 8px 20px;
border-radius: 40px;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 32px;
}

.abt-mega-title {
font-family: var(--font-heading);
font-size: 86px;
font-weight: 900;
line-height: 0.95;
color: var(--color-light);
letter-spacing: -4px;
margin-bottom: 36px;
}

.highlight-glow {
color: var(--color-accent);
text-shadow: 0 0 35px rgba(0,255,136,0.5);
}

.abt-lead-text {
font-size: 18px;
line-height: 1.8;
color: var(--color-neutral);
}

.abt-visual-block {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.abt-main-img {
width: 100%;
height: 520px;
object-fit: cover;
display: block;
}

.abt-overlay-badge {
position: absolute;
bottom: 32px;
left: 32px;
background: rgba(47,34,53,0.92);
backdrop-filter: blur(12px);
border: 1px solid rgba(0,255,136,0.3);
padding: 24px 32px;
border-radius: 12px;
}

.badge-num {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 900;
color: var(--color-accent);
line-height: 1;
margin-bottom: 6px;
}

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

.abt-mission {
padding: 140px 0;
background: var(--color-secondary);
}

.abt-mission-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 72px;
align-items: start;
}

.mission-statement {
position: sticky;
top: 140px;
}

.mission-heading {
font-family: var(--font-heading);
font-size: 58px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 28px;
line-height: 1.1;
}

.mission-text {
font-size: 17px;
line-height: 1.85;
color: var(--color-neutral);
}

.mission-values-wrap {
display: flex;
flex-direction: column;
gap: 28px;
}

.value-card {
background: var(--color-primary);
border: 1px solid rgba(0,255,136,0.12);
padding: 40px;
border-radius: 16px;
transition: all 0.35s ease;
}

.value-card:hover {
border-color: rgba(0,255,136,0.35);
transform: translateX(12px);
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.value-icon {
font-size: 44px;
color: var(--color-accent);
margin-bottom: 20px;
display: block;
}

.value-title {
font-family: var(--font-heading);
font-size: 26px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 16px;
}

.value-desc {
font-size: 15px;
line-height: 1.7;
color: var(--color-neutral);
}

.abt-expertise {
padding: 140px 0;
background: var(--color-primary);
}

.expertise-header-row {
max-width: 800px;
margin-bottom: 72px;
}

.section-title-large {
font-family: var(--font-heading);
font-size: 68px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -3px;
margin-bottom: 20px;
line-height: 1.05;
}

.section-subtitle {
font-size: 19px;
color: var(--color-neutral);
line-height: 1.6;
}

.expertise-asymmetric {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 32px;
}

.exp-large-feature {
position: relative;
border-radius: 20px;
overflow: hidden;
height: 600px;
}

.exp-img-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.exp-feature-img {
width: 100%;
height: 100%;
object-fit: cover;
}

.exp-img-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, transparent 30%, rgba(47,34,53,0.85) 80%);
}

.exp-content-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 48px;
z-index: 2;
}

.exp-badge {
display: inline-block;
background: var(--color-accent);
color: var(--color-primary);
padding: 8px 20px;
border-radius: 30px;
font-size: 10px;
font-weight: 900;
letter-spacing: 1.5px;
margin-bottom: 20px;
text-transform: uppercase;
}

.exp-overlay-title {
font-family: var(--font-heading);
font-size: 38px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -1px;
margin-bottom: 20px;
line-height: 1.15;
}

.exp-overlay-text {
font-size: 16px;
line-height: 1.75;
color: var(--color-light);
max-width: 540px;
}

.exp-side-stack {
display: flex;
flex-direction: column;
gap: 32px;
}

.exp-compact-item {
background: var(--color-secondary);
border: 1px solid rgba(0,255,136,0.1);
padding: 36px;
border-radius: 16px;
display: flex;
gap: 24px;
transition: all 0.3s ease;
}

.exp-compact-item:hover {
border-color: rgba(0,255,136,0.3);
transform: translateY(-6px);
}

.exp-compact-icon {
font-size: 36px;
color: var(--color-accent);
flex-shrink: 0;
}

.exp-compact-content {
flex: 1;
}

.exp-compact-title {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 12px;
}

.exp-compact-text {
font-size: 14px;
line-height: 1.7;
color: var(--color-neutral);
}

.abt-team {
padding: 140px 0;
background: var(--color-secondary);
}

.section-title-center {
font-family: var(--font-heading);
font-size: 64px;
font-weight: 900;
color: var(--color-light);
text-align: center;
letter-spacing: -2.5px;
margin-bottom: 16px;
}

.section-desc-center {
font-size: 18px;
color: var(--color-neutral);
text-align: center;
margin-bottom: 72px;
}

.team-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
margin-bottom: 64px;
}

.team-stat-box {
background: var(--color-primary);
border: 1px solid rgba(0,255,136,0.15);
padding: 48px 32px;
border-radius: 12px;
text-align: center;
transition: all 0.3s ease;
}

.team-stat-box:hover {
border-color: var(--color-accent);
transform: scale(1.05);
}

.stat-number {
font-family: var(--font-heading);
font-size: 72px;
font-weight: 900;
color: var(--color-accent);
line-height: 1;
margin-bottom: 12px;
}

.stat-text {
font-size: 14px;
color: var(--color-neutral);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}

.team-highlights {
display: flex;
justify-content: center;
gap: 56px;
flex-wrap: wrap;
}

.highlight-item {
display: flex;
align-items: center;
gap: 16px;
max-width: 380px;
}

.highlight-icon {
font-size: 32px;
color: var(--color-accent);
flex-shrink: 0;
}

.highlight-text {
font-size: 15px;
line-height: 1.6;
color: var(--color-neutral);
}

.abt-approach {
padding: 140px 0;
background: var(--color-primary);
}

.section-title-dark {
font-family: var(--font-heading);
font-size: 68px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -3px;
margin-bottom: 80px;
}

.approach-timeline {
max-width: 1100px;
margin: 0 auto;
}

.approach-step {
display: grid;
grid-template-columns: 140px 1fr;
gap: 48px;
margin-bottom: 72px;
padding-bottom: 72px;
border-bottom: 1px solid rgba(0,255,136,0.08);
}

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

.step-indicator {
width: 140px;
height: 140px;
background: linear-gradient(135deg, rgba(0,255,136,0.15) 0%, rgba(0,255,136,0.05) 100%);
border: 2px solid rgba(0,255,136,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 56px;
font-weight: 900;
color: var(--color-accent);
flex-shrink: 0;
}

.step-content {
padding-top: 12px;
}

.step-title {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 900;
color: var(--color-light);
margin-bottom: 20px;
letter-spacing: -1px;
}

.step-desc {
font-size: 17px;
line-height: 1.8;
color: var(--color-neutral);
}

.abt-cta {
padding: 120px 0;
background: var(--color-secondary);
}

.cta-content-box {
max-width: 900px;
margin: 0 auto;
text-align: center;
background: rgba(47,34,53,0.5);
backdrop-filter: blur(16px);
border: 1px solid rgba(0,255,136,0.2);
padding: 80px 56px;
border-radius: 20px;
}

.cta-title {
font-family: var(--font-heading);
font-size: 58px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 24px;
line-height: 1.15;
}

.cta-description {
font-size: 18px;
line-height: 1.7;
color: var(--color-neutral);
margin-bottom: 48px;
}

.cta-action-row {
display: flex;
gap: 20px;
justify-content: center;
}

.btn-primary-cta {
background: var(--color-accent);
color: var(--color-primary);
padding: 18px 48px;
border-radius: 8px;
font-weight: 800;
font-size: 17px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
}

.btn-primary-cta:hover {
background: var(--color-light);
transform: translateY(-3px);
box-shadow: 0 8px 32px rgba(0,255,136,0.4);
}

.btn-secondary-cta {
background: transparent;
border: 2px solid var(--color-accent);
color: var(--color-accent);
padding: 16px 44px;
border-radius: 8px;
font-weight: 700;
font-size: 17px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}

.btn-secondary-cta:hover {
background: rgba(0,255,136,0.1);
transform: translateY(-3px);
}

.uid-hero-chaos {
padding: 160px 0 100px;
background: var(--color-primary);
position: relative;
overflow: hidden;
}

.uid-hero-chaos::before {
content: '';
position: absolute;
top: -20%;
left: -10%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(0,255,136,0.06) 0%, transparent 60%);
pointer-events: none;
}

.chaos-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: start;
position: relative;
z-index: 1;
margin-bottom: 80px;
}

.chaos-text-giant {
position: relative;
}

.breadcrumb-micro {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-neutral);
margin-bottom: 40px;
}

.breadcrumb-micro .sep {
color: var(--color-accent);
font-weight: 900;
}

.breadcrumb-micro .active {
color: var(--color-accent);
}

.title-explosion {
font-family: var(--font-heading);
font-size: 110px;
font-weight: 900;
line-height: 0.88;
color: var(--color-light);
letter-spacing: -6px;
margin-bottom: 0;
}

.outline-text {
color: transparent;
-webkit-text-stroke: 2px var(--color-accent);
text-stroke: 2px var(--color-accent);
}

.stat-float {
position: absolute;
bottom: -40px;
right: 0;
background: var(--color-accent);
color: var(--color-primary);
padding: 24px 36px;
border-radius: 0;
transform: rotate(-2deg);
box-shadow: 0 12px 40px rgba(0,255,136,0.35);
}

.stat-num {
font-family: var(--font-heading);
font-size: 52px;
font-weight: 900;
line-height: 1;
margin-bottom: 4px;
}

.stat-label {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
}

.chaos-img-stack {
position: relative;
margin-top: 60px;
}

.img-main-float {
position: relative;
transform: rotate(3deg);
}

.float-img {
width: 100%;
height: 480px;
object-fit: cover;
border-radius: 0;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
border: 4px solid var(--color-accent);
}

.hero-statement-bar {
max-width: 1000px;
margin: 0 auto;
padding: 48px 60px;
background: linear-gradient(135deg, rgba(0,255,136,0.08) 0%, rgba(0,255,136,0.03) 100%);
border-left: 6px solid var(--color-accent);
position: relative;
z-index: 1;
}

.statement-text {
font-size: 22px;
line-height: 1.6;
color: var(--color-light);
font-weight: 500;
}

.uid-impact-section {
padding: 140px 0;
background: var(--color-secondary);
}

.impact-layout {
display: grid;
grid-template-columns: 0.4fr 1fr;
gap: 80px;
}

.impact-left {
position: sticky;
top: 140px;
}

.impact-number-huge {
font-family: var(--font-heading);
font-size: 140px;
font-weight: 900;
color: rgba(0,255,136,0.12);
line-height: 0.9;
margin-bottom: 20px;
}

.impact-number-huge .slash {
color: var(--color-accent);
margin: 0 8px;
}

.impact-number-huge .total {
font-size: 80px;
}

.impact-heading {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 900;
color: var(--color-light);
line-height: 1.1;
letter-spacing: -2px;
}

.impact-cards-chaos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}

.impact-card {
background: var(--color-primary);
border: 2px solid rgba(0,255,136,0.15);
padding: 40px;
transition: all 0.35s ease;
position: relative;
}

.impact-card::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 4px;
background: var(--color-accent);
transition: width 0.35s ease;
}

.impact-card:hover {
border-color: var(--color-accent);
transform: translateY(-8px);
}

.impact-card:hover::before {
width: 100%;
}

.card-pop {
transform: translateY(-20px);
}

.card-offset {
transform: translateY(20px);
}

.card-wide {
grid-column: span 2;
}

.card-accent {
background: linear-gradient(135deg, rgba(0,255,136,0.08) 0%, var(--color-primary) 100%);
border-color: var(--color-accent);
}

.card-icon-wrap {
width: 64px;
height: 64px;
background: rgba(0,255,136,0.15);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
border-radius: 0;
}

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

.card-h {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 900;
color: var(--color-light);
margin-bottom: 16px;
letter-spacing: -0.5px;
}

.card-p {
font-size: 16px;
line-height: 1.7;
color: var(--color-neutral);
}

.uid-process-brutalist {
padding: 140px 0;
background: var(--color-primary);
}

.process-header-split {
display: flex;
align-items: center;
gap: 60px;
margin-bottom: 80px;
}

.process-num-giant {
font-family: var(--font-heading);
font-size: 200px;
font-weight: 900;
color: rgba(0,255,136,0.08);
line-height: 0.8;
}

.process-title-block {
flex: 1;
}

.process-mega-title {
font-family: var(--font-heading);
font-size: 72px;
font-weight: 900;
color: var(--color-light);
line-height: 1;
letter-spacing: -3px;
margin-bottom: 16px;
}

.process-subtitle {
font-size: 19px;
color: var(--color-neutral);
}

.process-diagonal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}

.process-box {
background: var(--color-secondary);
border: 3px solid transparent;
padding: 44px;
transition: all 0.3s ease;
position: relative;
}

.process-box::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 40px 40px 0;
border-color: transparent var(--color-accent) transparent transparent;
opacity: 0;
transition: opacity 0.3s ease;
}

.process-box:hover {
border-color: var(--color-accent);
transform: scale(1.03);
}

.process-box:hover::after {
opacity: 1;
}

.box-1 {
transform: translateY(-20px);
}

.box-2 {
transform: translateY(20px);
}

.box-3 {
transform: translateY(20px);
}

.box-4 {
transform: translateY(-20px);
}

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

.box-num {
width: 56px;
height: 56px;
background: var(--color-accent);
color: var(--color-primary);
font-family: var(--font-heading);
font-size: 32px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
flex-shrink: 0;
}

.box-title {
font-family: var(--font-heading);
font-size: 26px;
font-weight: 900;
color: var(--color-light);
}

.box-text {
font-size: 16px;
line-height: 1.7;
color: var(--color-neutral);
margin-bottom: 24px;
}

.box-deliverable {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: rgba(0,255,136,0.05);
border-left: 3px solid var(--color-accent);
font-size: 14px;
color: var(--color-light);
font-weight: 600;
}

.box-deliverable i {
color: var(--color-accent);
font-size: 16px;
margin-top: 2px;
flex-shrink: 0;
}

.uid-principles-modern {
padding: 140px 0;
background: var(--color-secondary);
}

.principles-intro {
max-width: 900px;
margin-bottom: 72px;
}

.principles-label {
display: inline-block;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-accent);
margin-bottom: 20px;
}

.principles-giant-title {
font-family: var(--font-heading);
font-size: 92px;
font-weight: 900;
color: var(--color-light);
line-height: 0.95;
letter-spacing: -4px;
}

.principles-bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 240px;
gap: 24px;
}

.bento-item {
background: var(--color-primary);
border: 2px solid rgba(0,255,136,0.12);
padding: 36px;
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}

.bento-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0,255,136,0.08) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.35s ease;
}

.bento-item:hover {
border-color: var(--color-accent);
transform: translateY(-6px);
}

.bento-item:hover::before {
opacity: 1;
}

.bento-content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
}

.bento-icon {
font-size: 40px;
color: var(--color-accent);
margin-bottom: 20px;
}

.bento-title {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 900;
color: var(--color-light);
margin-bottom: 12px;
}

.bento-desc {
font-size: 15px;
line-height: 1.6;
color: var(--color-neutral);
}

.bento-large {
grid-column: span 2;
grid-row: span 2;
}

.bento-large .bento-icon {
font-size: 56px;
}

.bento-large .bento-title {
font-size: 32px;
}

.bento-large .bento-desc {
font-size: 17px;
line-height: 1.75;
}

.bento-tall {
grid-row: span 2;
}

.bento-wide {
grid-column: span 2;
}

.bento-medium {
grid-row: span 1;
}

.bento-square {
grid-row: span 1;
}

.bento-accent-box {
background: linear-gradient(135deg, rgba(0,255,136,0.12) 0%, var(--color-primary) 100%);
border-color: var(--color-accent);
}

.uid-cta-final {
padding: 140px 0;
background: var(--color-primary);
position: relative;
}

.uid-cta-final::before {
content: '';
position: absolute;
top: -30%;
right: -20%;
width: 900px;
height: 900px;
background: radial-gradient(circle, rgba(96,73,90,0.25) 0%, transparent 60%);
pointer-events: none;
}

.cta-asymmetric {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 80px;
align-items: center;
background: var(--color-secondary);
border: 3px solid var(--color-accent);
padding: 80px 72px;
position: relative;
z-index: 1;
}

.cta-left-zone {
position: relative;
}

.cta-number {
position: absolute;
top: -40px;
left: -40px;
font-family: var(--font-heading);
font-size: 160px;
font-weight: 900;
color: rgba(0,255,136,0.08);
line-height: 1;
}

.cta-mega {
font-family: var(--font-heading);
font-size: 64px;
font-weight: 900;
color: var(--color-light);
line-height: 1.05;
letter-spacing: -3px;
position: relative;
z-index: 1;
}

.cta-right-zone {
display: flex;
flex-direction: column;
gap: 40px;
}

.cta-description {
font-size: 18px;
line-height: 1.75;
color: var(--color-neutral);
}

.cta-btn-stack {
display: flex;
gap: 20px;
}

.btn-cta-solid {
background: var(--color-accent);
color: var(--color-primary);
padding: 20px 44px;
font-weight: 900;
font-size: 17px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 12px;
border-radius: 0;
}

.btn-cta-solid:hover {
background: var(--color-light);
transform: translateY(-4px) scale(1.05);
box-shadow: 0 12px 40px rgba(0,255,136,0.4);
}

.btn-cta-solid i {
font-size: 18px;
}

.btn-cta-ghost {
background: transparent;
border: 3px solid var(--color-accent);
color: var(--color-accent);
padding: 17px 40px;
font-weight: 800;
font-size: 17px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 12px;
border-radius: 0;
}

.btn-cta-ghost:hover {
background: rgba(0,255,136,0.15);
transform: translateY(-4px);
}

.btn-cta-ghost i {
font-size: 18px;
transition: transform 0.3s ease;
}

.btn-cta-ghost:hover i {
transform: translateX(6px);
}

@media (max-width: 1200px) {
.chaos-grid {
grid-template-columns: 1fr;
gap: 60px;
}

.title-explosion {
font-size: 80px;
}

.stat-float {
position: static;
transform: none;
margin-top: 40px;
display: inline-block;
}

.impact-layout {
grid-template-columns: 1fr;
gap: 60px;
}

.impact-left {
position: static;
}

.impact-cards-chaos {
grid-template-columns: 1fr;
}

.card-pop,
.card-offset {
transform: none;
}

.card-wide {
grid-column: span 1;
}

.process-header-split {
flex-direction: column;
align-items: flex-start;
gap: 32px;
}

.process-num-giant {
font-size: 120px;
}

.process-diagonal-grid {
grid-template-columns: 1fr;
}

.box-1,
.box-2,
.box-3,
.box-4 {
transform: none;
}

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

.bento-large {
grid-column: span 2;
}

.cta-asymmetric {
grid-template-columns: 1fr;
gap: 56px;
padding: 60px 48px;
}

.cta-number {
position: static;
margin-bottom: 20px;
}
}

@media (max-width: 768px) {
.title-explosion {
font-size: 56px;
letter-spacing: -3px;
}

.float-img {
height: 360px;
}

.hero-statement-bar {
padding: 32px 28px;
}

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

.impact-number-huge {
font-size: 100px;
}

.impact-heading {
font-size: 42px;
}

.card-h {
font-size: 24px;
}

.process-mega-title {
font-size: 48px;
}

.box-header {
flex-direction: column;
align-items: flex-start;
}

.principles-giant-title {
font-size: 56px;
}

.principles-bento {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}

.bento-large,
.bento-tall,
.bento-wide {
grid-column: span 1;
grid-row: span 1;
}

.cta-mega {
font-size: 42px;
}

.cta-btn-stack {
flex-direction: column;
}
}

@media (max-width: 480px) {
.title-explosion {
font-size: 42px;
}

.float-img {
height: 280px;
}

.impact-number-huge {
font-size: 72px;
}

.impact-heading {
font-size: 32px;
}

.process-mega-title {
font-size: 36px;
}

.principles-giant-title {
font-size: 42px;
}

.cta-mega {
font-size: 32px;
}
}

.ux-hero-statement {
padding: 160px 0 100px;
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
position: relative;
overflow: hidden;
}

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

.service-badge-top {
display: inline-block;
background: rgba(0,255,136,0.1);
border: 1px solid rgba(0,255,136,0.3);
padding: 10px 24px;
border-radius: 50px;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 36px;
}

.ux-hero-title {
font-family: var(--font-heading);
font-size: 80px;
font-weight: 900;
line-height: 0.95;
color: var(--color-light);
letter-spacing: -4px;
margin-bottom: 40px;
}

.ux-hero-lead {
font-size: 20px;
line-height: 1.7;
color: var(--color-neutral);
max-width: 850px;
margin: 0 auto;
}

.ux-why-matters {
padding: 140px 0;
background: var(--color-primary);
}

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

.why-title {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 36px;
}

.why-paragraph {
font-size: 17px;
line-height: 1.8;
color: var(--color-neutral);
margin-bottom: 24px;
}

.why-img {
width: 100%;
height: 500px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.ux-methods-showcase {
padding: 140px 0;
background: var(--color-secondary);
}

.methods-headline {
font-family: var(--font-heading);
font-size: 64px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -3px;
margin-bottom: 80px;
text-align: center;
}

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

.method-card {
background: var(--color-primary);
padding: 44px;
border-radius: 16px;
border: 1px solid rgba(0,255,136,0.1);
transition: all 0.4s ease;
}

.method-large {
grid-column: span 2;
}

.method-card:hover {
border-color: rgba(0,255,136,0.4);
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}

.method-icon-box {
width: 72px;
height: 72px;
background: rgba(0,255,136,0.15);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}

.method-icon-box i {
font-size: 36px;
color: var(--color-accent);
}

.method-card-title {
font-family: var(--font-heading);
font-size: 26px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 16px;
}

.method-card-desc {
font-size: 16px;
line-height: 1.75;
color: var(--color-neutral);
}

.ux-deliverables {
padding: 140px 0;
background: var(--color-primary);
}

.deliverables-heading {
font-family: var(--font-heading);
font-size: 64px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -3px;
margin-bottom: 28px;
text-align: center;
}

.deliverables-intro {
font-size: 19px;
line-height: 1.7;
color: var(--color-neutral);
text-align: center;
max-width: 800px;
margin: 0 auto 80px;
}

.deliverables-list-wrap {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 32px;
}

.deliverable-item {
display: flex;
gap: 40px;
background: var(--color-secondary);
padding: 44px;
border-radius: 16px;
border-left: 4px solid transparent;
transition: all 0.4s ease;
}

.deliverable-item:hover {
border-left-color: var(--color-accent);
transform: translateX(8px);
}

.deliverable-num {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 900;
color: rgba(0,255,136,0.25);
line-height: 1;
flex-shrink: 0;
}

.deliverable-name {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 16px;
}

.deliverable-text {
font-size: 16px;
line-height: 1.75;
color: var(--color-neutral);
}

.ux-impact-proof {
padding: 140px 0;
background: var(--color-secondary);
}

.impact-showcase {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: center;
}

.impact-img {
width: 100%;
height: 520px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.impact-title {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 40px;
}

.impact-stat-row {
display: flex;
gap: 60px;
margin-bottom: 40px;
}

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

.impact-number {
font-family: var(--font-heading);
font-size: 52px;
font-weight: 900;
color: var(--color-accent);
line-height: 1;
margin-bottom: 8px;
}

.impact-label {
font-size: 14px;
color: var(--color-neutral);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}

.impact-desc {
font-size: 17px;
line-height: 1.8;
color: var(--color-neutral);
margin-bottom: 20px;
}

.ux-cta-engage {
padding: 140px 0;
background: var(--color-primary);
}

.cta-engage-box {
max-width: 900px;
margin: 0 auto;
text-align: center;
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-tertiary) 100%);
padding: 80px 60px;
border-radius: 24px;
border: 1px solid rgba(0,255,136,0.2);
}

.cta-engage-title {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 28px;
}

.cta-engage-text {
font-size: 18px;
line-height: 1.7;
color: var(--color-neutral);
margin-bottom: 44px;
}

.cta-engage-btn {
display: inline-block;
background: var(--color-accent);
color: var(--color-primary);
padding: 20px 52px;
border-radius: 8px;
font-weight: 800;
font-size: 18px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 0 40px rgba(0,255,136,0.4);
}

.cta-engage-btn:hover {
background: var(--color-light);
transform: translateY(-4px);
box-shadow: 0 12px 50px rgba(0,255,136,0.6);
}

@media (max-width: 1200px) {
.ux-hero-title {
font-size: 64px;
}

.why-split-layout {
grid-template-columns: 1fr;
gap: 60px;
}

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

.method-large {
grid-column: span 1;
}

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

@media (max-width: 768px) {
.ux-hero-title {
font-size: 42px;
letter-spacing: -2px;
}

.why-title {
font-size: 38px;
}

.methods-headline {
font-size: 42px;
}

.methods-asymmetric-grid {
grid-template-columns: 1fr;
}

.deliverable-item {
flex-direction: column;
gap: 24px;
}

.impact-stat-row {
flex-direction: column;
gap: 32px;
}

.cta-engage-title {
font-size: 38px;
}
}

.proto-hero-dynamic {
padding: 160px 0 100px;
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
position: relative;
}

.proto-hero-center {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}

.proto-hero-title {
font-family: var(--font-heading);
font-size: 76px;
font-weight: 900;
line-height: 0.95;
color: var(--color-light);
letter-spacing: -4px;
margin-bottom: 36px;
}

.proto-hero-description {
font-size: 19px;
line-height: 1.75;
color: var(--color-neutral);
max-width: 820px;
margin: 0 auto 60px;
}

.proto-hero-metrics {
display: flex;
justify-content: center;
gap: 60px;
}

.metric-unit {
display: flex;
flex-direction: column;
align-items: center;
}

.metric-value {
font-family: var(--font-heading);
font-size: 52px;
font-weight: 900;
color: var(--color-accent);
line-height: 1;
margin-bottom: 8px;
}

.metric-label {
font-size: 13px;
color: var(--color-neutral);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}

.proto-value-proposition {
padding: 140px 0;
background: var(--color-primary);
}

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

.value-heading {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 32px;
}

.value-text {
font-size: 17px;
line-height: 1.8;
color: var(--color-neutral);
margin-bottom: 24px;
}

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

.feature-card {
background: var(--color-secondary);
padding: 36px;
border-radius: 16px;
border-left: 4px solid transparent;
transition: all 0.4s ease;
}

.feature-card:hover {
border-left-color: var(--color-accent);
transform: translateX(8px);
}

.feature-card i {
font-size: 36px;
color: var(--color-accent);
margin-bottom: 20px;
display: block;
}

.feature-card-title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 12px;
}

.feature-card-text {
font-size: 15px;
line-height: 1.7;
color: var(--color-neutral);
}

.proto-fidelity-levels {
padding: 140px 0;
background: var(--color-secondary);
}

.fidelity-heading {
font-family: var(--font-heading);
font-size: 68px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -3px;
margin-bottom: 24px;
text-align: center;
}

.fidelity-intro {
font-size: 19px;
line-height: 1.7;
color: var(--color-neutral);
text-align: center;
max-width: 800px;
margin: 0 auto 80px;
}

.fidelity-cards-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}

.fidelity-card {
background: var(--color-primary);
padding: 48px;
border-radius: 20px;
border: 1px solid rgba(0,255,136,0.15);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}

.fidelity-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
}

.fidelity-card:hover {
border-color: rgba(0,255,136,0.4);
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.featured-card {
border-color: rgba(0,255,136,0.3);
}

.fidelity-badge {
display: inline-block;
background: rgba(0,255,136,0.15);
padding: 8px 20px;
border-radius: 50px;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 28px;
}

.fidelity-card-title {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 20px;
}

.fidelity-card-desc {
font-size: 16px;
line-height: 1.75;
color: var(--color-neutral);
margin-bottom: 32px;
}

.fidelity-details {
display: flex;
flex-direction: column;
gap: 16px;
}

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

.detail-row i {
font-size: 18px;
color: var(--color-accent);
}

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

.proto-tools-expertise {
padding: 140px 0;
background: var(--color-primary);
}

.tools-intro-block {
text-align: center;
max-width: 800px;
margin: 0 auto 80px;
}

.tools-heading {
font-family: var(--font-heading);
font-size: 68px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -3px;
margin-bottom: 24px;
}

.tools-description {
font-size: 19px;
line-height: 1.7;
color: var(--color-neutral);
}

.tools-showcase-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
margin-bottom: 80px;
}

.tool-item {
background: var(--color-secondary);
padding: 40px;
border-radius: 16px;
text-align: center;
border: 1px solid rgba(0,255,136,0.1);
transition: all 0.4s ease;
}

.tool-item:hover {
border-color: rgba(0,255,136,0.4);
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}

.tool-icon-placeholder {
width: 64px;
height: 64px;
background: rgba(0,255,136,0.15);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
}

.tool-icon-placeholder i {
font-size: 32px;
color: var(--color-accent);
}

.tool-name {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 16px;
}

.tool-detail {
font-size: 15px;
line-height: 1.7;
color: var(--color-neutral);
}

.tools-cta-block {
max-width: 900px;
margin: 0 auto;
text-align: center;
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-tertiary) 100%);
padding: 80px 60px;
border-radius: 24px;
border: 1px solid rgba(0,255,136,0.2);
}

.tools-cta-heading {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 24px;
}

.tools-cta-text {
font-size: 18px;
line-height: 1.7;
color: var(--color-neutral);
margin-bottom: 40px;
}

.tools-cta-btn {
display: inline-block;
background: var(--color-accent);
color: var(--color-primary);
padding: 20px 52px;
border-radius: 8px;
font-weight: 800;
font-size: 18px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 0 40px rgba(0,255,136,0.4);
}

.tools-cta-btn:hover {
background: var(--color-light);
transform: translateY(-4px);
box-shadow: 0 12px 50px rgba(0,255,136,0.6);
}

@media (max-width: 1200px) {
.proto-hero-title {
font-size: 56px;
}

.value-split {
grid-template-columns: 1fr;
}

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

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

@media (max-width: 768px) {
.proto-hero-title {
font-size: 42px;
letter-spacing: -2px;
}

.proto-hero-metrics {
flex-direction: column;
gap: 32px;
}

.value-heading {
font-size: 38px;
}

.fidelity-heading {
font-size: 42px;
}

.tools-heading {
font-size: 42px;
}

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

.tools-cta-heading {
font-size: 36px;
}
}

.strategy-hero-immersive {
padding: 160px 0 100px;
background: var(--color-primary);
position: relative;
}

.hero-strategy-layout {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: center;
}

.strategy-hero-headline {
font-family: var(--font-heading);
font-size: 76px;
font-weight: 900;
line-height: 0.95;
color: var(--color-light);
letter-spacing: -4px;
margin-bottom: 36px;
}

.strategy-hero-desc {
font-size: 19px;
line-height: 1.75;
color: var(--color-neutral);
}

.strategy-hero-img {
width: 100%;
height: 480px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.strategy-pillars {
padding: 140px 0;
background: var(--color-secondary);
}

.pillars-heading {
font-family: var(--font-heading);
font-size: 68px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -3px;
margin-bottom: 24px;
text-align: center;
}

.pillars-subheading {
font-size: 19px;
line-height: 1.7;
color: var(--color-neutral);
text-align: center;
max-width: 850px;
margin: 0 auto 80px;
}

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

.pillar-box {
background: var(--color-primary);
padding: 52px;
border-radius: 20px;
border: 1px solid rgba(0,255,136,0.15);
transition: all 0.4s ease;
}

.pillar-box:hover {
border-color: rgba(0,255,136,0.4);
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.pillar-icon-wrap {
width: 80px;
height: 80px;
background: rgba(0,255,136,0.15);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
}

.pillar-icon-wrap i {
font-size: 40px;
color: var(--color-accent);
}

.pillar-title {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 20px;
}

.pillar-description {
font-size: 16px;
line-height: 1.75;
color: var(--color-neutral);
margin-bottom: 28px;
}

.pillar-checklist {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}

.pillar-checklist li {
font-size: 15px;
color: var(--color-neutral);
padding-left: 28px;
position: relative;
}

.pillar-checklist li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-accent);
font-weight: 900;
}

.strategy-process-timeline {
padding: 140px 0;
background: var(--color-primary);
}

.process-timeline-heading {
font-family: var(--font-heading);
font-size: 68px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -3px;
margin-bottom: 80px;
text-align: center;
}

.timeline-sequence {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 40px;
}

.timeline-phase {
display: flex;
gap: 48px;
align-items: flex-start;
}

.phase-marker {
flex-shrink: 0;
width: 80px;
height: 80px;
background: var(--color-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 40px rgba(0,255,136,0.4);
}

.phase-number {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 900;
color: var(--color-primary);
}

.phase-content {
flex: 1;
background: var(--color-secondary);
padding: 40px;
border-radius: 16px;
border-left: 4px solid var(--color-accent);
}

.phase-title {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 16px;
}

.phase-text {
font-size: 16px;
line-height: 1.75;
color: var(--color-neutral);
margin-bottom: 20px;
}

.phase-duration {
font-size: 13px;
font-weight: 700;
color: var(--color-accent);
text-transform: uppercase;
letter-spacing: 1px;
}

.strategy-outcomes-cta {
padding: 140px 0;
background: var(--color-secondary);
}

.outcomes-wrap {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: center;
}

.outcomes-title {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 28px;
}

.outcomes-paragraph {
font-size: 17px;
line-height: 1.8;
color: var(--color-neutral);
margin-bottom: 40px;
}

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

.benefit-item {
display: flex;
align-items: center;
gap: 16px;
}

.benefit-item i {
font-size: 24px;
color: var(--color-accent);
}

.benefit-item span {
font-size: 16px;
font-weight: 600;
color: var(--color-light);
}

.cta-strategy-box {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-tertiary) 100%);
padding: 60px 48px;
border-radius: 20px;
border: 1px solid rgba(0,255,136,0.2);
text-align: center;
}

.cta-strategy-heading {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -1px;
margin-bottom: 20px;
}

.cta-strategy-text {
font-size: 16px;
line-height: 1.7;
color: var(--color-neutral);
margin-bottom: 36px;
}

.cta-strategy-button {
display: inline-block;
background: var(--color-accent);
color: var(--color-primary);
padding: 18px 48px;
border-radius: 8px;
font-weight: 800;
font-size: 17px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 0 40px rgba(0,255,136,0.4);
}

.cta-strategy-button:hover {
background: var(--color-light);
transform: translateY(-4px);
box-shadow: 0 12px 50px rgba(0,255,136,0.6);
}

@media (max-width: 1200px) {
.hero-strategy-layout {
grid-template-columns: 1fr;
gap: 48px;
}

.strategy-hero-headline {
font-size: 56px;
}

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

.outcomes-wrap {
grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {
.strategy-hero-headline {
font-size: 42px;
letter-spacing: -2px;
}

.pillars-heading {
font-size: 42px;
}

.process-timeline-heading {
font-size: 42px;
}

.timeline-phase {
flex-direction: column;
gap: 24px;
}

.outcomes-title {
font-size: 38px;
}
}

.portfolio-hero-wide {
padding: 160px 0 100px;
background: var(--color-primary);
}

.portfolio-hero-content {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}

.portfolio-hero-title {
font-family: var(--font-heading);
font-size: 76px;
font-weight: 900;
line-height: 0.95;
color: var(--color-light);
letter-spacing: -4px;
margin-bottom: 32px;
}

.portfolio-hero-subtitle {
font-size: 20px;
line-height: 1.7;
color: var(--color-neutral);
max-width: 880px;
margin: 0 auto 60px;
}

.portfolio-stats-inline {
display: flex;
justify-content: center;
gap: 80px;
}

.inline-stat {
display: flex;
flex-direction: column;
align-items: center;
}

.inline-stat-num {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 900;
color: var(--color-accent);
line-height: 1;
margin-bottom: 8px;
}

.inline-stat-label {
font-size: 13px;
color: var(--color-neutral);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}

.portfolio-featured-cases {
padding: 140px 0;
background: var(--color-secondary);
}

.featured-section-title {
font-family: var(--font-heading);
font-size: 68px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -3px;
margin-bottom: 80px;
text-align: center;
}

.featured-cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
}

.case-card-modern {
position: relative;
background: transparent;
transition: all 0.4s ease;
}

.card-shadow-layer {
position: absolute;
top: 16px;
left: 16px;
width: 100%;
height: 100%;
border-radius: 20px;
z-index: 0;
opacity: 0.8;
transition: all 0.4s ease;
}

.shadow-green {
background: linear-gradient(135deg, #00ff88 0%, #00cc70 100%);
}

.shadow-purple {
background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}

.shadow-blue {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.shadow-orange {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.shadow-pink {
background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.shadow-teal {
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.case-card-modern:hover {
transform: translate(-4px, -4px);
}

.case-card-modern:hover .card-shadow-layer {
opacity: 1;
top: 18px;
left: 18px;
}

.card-main-content {
position: relative;
z-index: 1;
background: var(--color-primary);
border-radius: 20px;
padding: 44px;
height: 100%;
}

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

.case-industry {
font-size: 13px;
font-weight: 700;
color: var(--color-accent);
text-transform: uppercase;
letter-spacing: 1px;
}

.case-year {
font-size: 13px;
font-weight: 600;
color: var(--color-neutral);
}

.case-title-modern {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 20px;
line-height: 1.2;
}

.case-description-modern {
font-size: 16px;
line-height: 1.75;
color: var(--color-neutral);
margin-bottom: 32px;
}

.case-metrics-row {
display: flex;
gap: 28px;
margin-bottom: 28px;
}

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

.metric-value-modern {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 900;
color: var(--color-accent);
line-height: 1;
margin-bottom: 6px;
}

.metric-label-modern {
font-size: 12px;
color: var(--color-neutral);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.case-tags-modern {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.tag-modern {
background: rgba(0,255,136,0.1);
border: 1px solid rgba(0,255,136,0.2);
padding: 8px 16px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
color: var(--color-accent);
}


.portfolio-industries {
padding: 140px 0;
background: var(--color-primary);
}

.industries-heading {
font-family: var(--font-heading);
font-size: 68px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -3px;
margin-bottom: 24px;
text-align: center;
}

.industries-intro {
font-size: 19px;
line-height: 1.7;
color: var(--color-neutral);
text-align: center;
max-width: 800px;
margin: 0 auto 80px;
}

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

.industry-item {
background: var(--color-secondary);
padding: 40px;
border-radius: 16px;
text-align: center;
border: 1px solid rgba(0,255,136,0.1);
transition: all 0.4s ease;
}

.industry-item:hover {
border-color: rgba(0,255,136,0.4);
transform: translateY(-6px);
}

.industry-item i {
font-size: 44px;
color: var(--color-accent);
margin-bottom: 24px;
display: block;
}

.industry-name {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 12px;
}

.industry-desc {
font-size: 14px;
line-height: 1.6;
color: var(--color-neutral);
}

.portfolio-approach-summary {
padding: 140px 0;
background: var(--color-secondary);
}

.approach-content-wrapper {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 60px;
align-items: start;
}

.approach-heading {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 28px;
}

.approach-paragraph {
font-size: 17px;
line-height: 1.8;
color: var(--color-neutral);
margin-bottom: 40px;
}

.approach-principles {
display: flex;
flex-direction: column;
gap: 28px;
}

.principle-row {
display: flex;
gap: 20px;
align-items: flex-start;
}

.principle-row i {
font-size: 28px;
color: var(--color-accent);
flex-shrink: 0;
margin-top: 4px;
}

.principle-title {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 8px;
}

.principle-desc {
font-size: 15px;
line-height: 1.7;
color: var(--color-neutral);
}

.metrics-box {
background: var(--color-primary);
padding: 48px;
border-radius: 20px;
border: 1px solid rgba(0,255,136,0.2);
position: sticky;
top: 140px;
}

.metrics-box-title {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 32px;
text-align: center;
}

.metric-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 0;
border-bottom: 1px solid var(--color-tertiary);
}

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

.metric-number {
font-family: var(--font-heading);
font-size: 44px;
font-weight: 900;
color: var(--color-accent);
line-height: 1;
margin-bottom: 8px;
}

.metric-text {
font-size: 14px;
color: var(--color-neutral);
font-weight: 600;
}

.portfolio-testimonials {
padding: 140px 0;
background: var(--color-primary);
}

.testimonials-heading {
font-family: var(--font-heading);
font-size: 68px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -3px;
margin-bottom: 80px;
text-align: center;
}

.testimonials-carousel {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}

.testimonial-card {
background: var(--color-secondary);
padding: 44px;
border-radius: 20px;
border: 1px solid rgba(0,255,136,0.15);
transition: all 0.4s ease;
}

.testimonial-card:hover {
border-color: rgba(0,255,136,0.4);
transform: translateY(-6px);
}

.testimonial-text {
font-size: 16px;
line-height: 1.8;
color: var(--color-neutral);
margin-bottom: 28px;
font-style: italic;
}

.testimonial-author {
display: flex;
flex-direction: column;
gap: 6px;
}

.author-name {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 800;
color: var(--color-light);
}

.author-role {
font-size: 14px;
color: var(--color-neutral);
}

.portfolio-cta-final {
padding: 140px 0;
background: var(--color-secondary);
}

.portfolio-cta-box {
max-width: 900px;
margin: 0 auto;
text-align: center;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-tertiary) 100%);
padding: 80px 60px;
border-radius: 24px;
border: 1px solid rgba(0,255,136,0.2);
}

.portfolio-cta-title {
font-family: var(--font-heading);
font-size: 56px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 28px;
}

.portfolio-cta-text {
font-size: 18px;
line-height: 1.7;
color: var(--color-neutral);
margin-bottom: 44px;
}

.portfolio-cta-button {
display: inline-block;
background: var(--color-accent);
color: var(--color-primary);
padding: 20px 52px;
border-radius: 8px;
font-weight: 800;
font-size: 18px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 0 40px rgba(0,255,136,0.4);
}

.portfolio-cta-button:hover {
background: var(--color-light);
transform: translateY(-4px);
box-shadow: 0 12px 50px rgba(0,255,136,0.6);
}

@media (max-width: 1200px) {
.portfolio-hero-title {
font-size: 56px;
}

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

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

.approach-content-wrapper {
grid-template-columns: 1fr;
}

.metrics-box {
position: static;
}

.testimonials-carousel {
grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {
.portfolio-hero-title {
font-size: 42px;
letter-spacing: -2px;
}

.portfolio-stats-inline {
flex-direction: column;
gap: 32px;
}

.featured-section-title {
font-size: 42px;
}

.featured-cases-grid {
grid-template-columns: 1fr;
}

.industries-heading {
font-size: 42px;
}

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

.approach-heading {
font-size: 38px;
}

.testimonials-heading {
font-size: 42px;
}

.portfolio-cta-title {
font-size: 38px;
}
}

.res-hero {
padding: 180px 0 120px;
background: linear-gradient(165deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-tertiary) 100%);
position: relative;
overflow: hidden;
}

.res-hero::before {
content: '';
position: absolute;
top: -40%;
right: -15%;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(0,255,136,0.12) 0%, transparent 65%);
border-radius: 50%;
}

.res-hero-content {
position: relative;
z-index: 1;
max-width: 820px;
}

.res-badge {
display: inline-block;
background: rgba(0,255,136,0.15);
border: 1px solid rgba(0,255,136,0.4);
color: var(--color-accent);
padding: 8px 24px;
border-radius: 50px;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 32px;
}

.res-hero-title {
font-family: var(--font-heading);
font-size: 92px;
font-weight: 900;
line-height: 0.95;
color: var(--color-light);
letter-spacing: -4px;
margin-bottom: 36px;
}

.title-accent {
color: var(--color-accent);
display: block;
text-shadow: 0 0 50px rgba(0,255,136,0.4);
}

.res-hero-text {
font-size: 20px;
line-height: 1.8;
color: var(--color-neutral);
max-width: 680px;
}

.res-preview {
padding: 100px 0;
background: var(--color-secondary);
}

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

.preview-card {
background: var(--color-primary);
border: 1px solid rgba(0,255,136,0.12);
border-radius: 16px;
padding: 40px;
transition: all 0.4s ease;
}

.preview-card:hover {
border-color: rgba(0,255,136,0.3);
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}

.card-large {
grid-column: span 2;
grid-row: span 2;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
overflow: hidden;
}

.card-visual {
height: 320px;
background: linear-gradient(135deg, rgba(96,73,90,0.4) 0%, rgba(63,50,68,0.6) 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.visual-placeholder {
width: 120px;
height: 120px;
background: rgba(0,255,136,0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.placeholder-icon {
font-size: 64px;
color: var(--color-accent);
}

.card-body {
padding: 48px 40px;
}

.card-tag {
display: inline-block;
background: rgba(0,255,136,0.1);
color: var(--color-accent);
padding: 6px 16px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 24px;
}

.card-title {
font-family: var(--font-heading);
font-size: 38px;
font-weight: 900;
color: var(--color-light);
line-height: 1.15;
margin-bottom: 20px;
letter-spacing: -1px;
}

.card-desc {
font-size: 16px;
line-height: 1.75;
color: var(--color-neutral);
}

.card-icon-wrap {
width: 72px;
height: 72px;
background: rgba(0,255,136,0.12);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}

.card-icon-wrap .material-icons {
font-size: 36px;
color: var(--color-accent);
}

.preview-title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 12px;
}

.preview-text {
font-size: 14px;
line-height: 1.6;
color: var(--color-neutral);
}

.res-notify {
padding: 100px 0;
background: var(--color-primary);
}

.notify-box {
max-width: 800px;
margin: 0 auto;
background: var(--color-secondary);
border: 2px solid rgba(0,255,136,0.2);
border-radius: 20px;
padding: 60px;
display: flex;
gap: 32px;
align-items: center;
}

.notify-icon {
width: 80px;
height: 80px;
background: rgba(0,255,136,0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.notify-icon .material-icons {
font-size: 40px;
color: var(--color-accent);
}

.notify-title {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 900;
color: var(--color-light);
margin-bottom: 16px;
}

.notify-text {
font-size: 17px;
line-height: 1.7;
color: var(--color-neutral);
}

.blog-intro {
padding: 180px 0 80px;
background: var(--color-primary);
text-align: center;
}

.blog-main-title {
font-family: var(--font-heading);
font-size: 84px;
font-weight: 900;
line-height: 0.95;
color: var(--color-light);
letter-spacing: -4px;
margin-bottom: 24px;
}

.title-highlight {
color: var(--color-accent);
text-shadow: 0 0 40px rgba(0,255,136,0.4);
}

.blog-subtitle {
font-size: 22px;
color: var(--color-neutral);
}

.articles-grid-section {
padding: 60px 0 140px;
background: var(--color-primary);
}

.articles-masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}

.article-card {
background: var(--color-secondary);
border: 1px solid rgba(0,255,136,0.1);
border-radius: 16px;
overflow: hidden;
transition: all 0.4s ease;
}

.article-card:hover {
border-color: rgba(0,255,136,0.35);
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.featured-article {
grid-column: span 2;
grid-row: span 2;
}

.article-link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}

.article-img-container {
height: 420px;
overflow: hidden;
position: relative;
}

.article-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}

.article-card:hover .article-img {
transform: scale(1.08);
}

.article-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(47,34,53,0.9) 0%, transparent 60%);
}

.article-img-container-small {
height: 220px;
overflow: hidden;
}

.article-content-box {
padding: 36px;
}

.featured-article .article-content-box {
padding: 48px;
}

.article-cat {
display: inline-block;
background: rgba(0,255,136,0.15);
color: var(--color-accent);
padding: 6px 16px;
border-radius: 20px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 20px;
}

.article-headline {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 900;
color: var(--color-light);
line-height: 1.15;
margin-bottom: 20px;
letter-spacing: -1px;
}

.article-headline-small {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 800;
color: var(--color-light);
line-height: 1.2;
margin-bottom: 16px;
}

.article-excerpt {
font-size: 15px;
line-height: 1.7;
color: var(--color-neutral);
margin-bottom: 20px;
}

.featured-article .article-excerpt {
font-size: 17px;
}

.article-meta {
display: flex;
gap: 16px;
align-items: center;
}

.meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--color-neutral);
font-weight: 500;
}

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

.with-image {
display: grid;
grid-template-rows: auto 1fr;
}

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

.article-hero-section {
padding: 140px 0 60px;
background: var(--color-secondary);
}

.container-narrow {
max-width: 820px;
margin: 0 auto;
padding: 0 24px;
}

.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-neutral);
text-decoration: none;
font-size: 14px;
font-weight: 600;
margin-bottom: 32px;
transition: all 0.3s ease;
}

.back-link:hover {
color: var(--color-accent);
transform: translateX(-4px);
}

.back-link .material-icons {
font-size: 20px;
}

.article-meta-top {
display: flex;
gap: 20px;
align-items: center;
margin-bottom: 24px;
}

.article-category-label {
background: rgba(0,255,136,0.15);
color: var(--color-accent);
padding: 8px 20px;
border-radius: 20px;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
}

.reading-time {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--color-neutral);
font-weight: 600;
}

.reading-time .material-icons {
font-size: 18px;
}

.article-main-title {
font-family: var(--font-heading);
font-size: 64px;
font-weight: 900;
line-height: 1.05;
color: var(--color-light);
letter-spacing: -3px;
margin-bottom: 28px;
}

.article-lead {
font-size: 20px;
line-height: 1.75;
color: var(--color-neutral);
margin-bottom: 40px;
}

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

.author-text {
display: flex;
flex-direction: column;
gap: 4px;
}

.author-name {
font-weight: 700;
font-size: 15px;
color: var(--color-light);
}

.publish-date {
font-size: 13px;
color: var(--color-neutral);
}

.article-featured-image {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
}

.article-featured-image img {
width: 100%;
height: 600px;
object-fit: cover;
border-radius: 20px;
}

.article-body {
padding: 100px 0;
}

.content-block {
margin-bottom: 64px;
}

.content-heading {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 900;
color: var(--color-light);
line-height: 1.2;
margin-bottom: 24px;
letter-spacing: -1px;
}

.content-text {
font-size: 18px;
line-height: 1.85;
color: var(--color-neutral);
margin-bottom: 24px;
}

.image-block {
margin-bottom: 64px;
border-radius: 16px;
overflow: hidden;
}

.content-image {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}

.highlight-box {
background: linear-gradient(135deg, rgba(0,255,136,0.08) 0%, rgba(0,255,136,0.03) 100%);
border: 2px solid rgba(0,255,136,0.25);
border-radius: 16px;
padding: 48px;
margin-top: 64px;
}

.highlight-title {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 900;
color: var(--color-accent);
margin-bottom: 20px;
text-shadow: 0 0 20px rgba(0,255,136,0.2);
}

.highlight-text {
font-size: 17px;
line-height: 1.8;
color: var(--color-light);
}

.article-footer-section {
padding: 60px 0 100px;
}

.return-link {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--color-accent);
color: var(--color-primary);
padding: 16px 36px;
border-radius: 8px;
text-decoration: none;
font-weight: 700;
font-size: 15px;
transition: all 0.3s ease;
box-shadow: 0 0 30px rgba(0,255,136,0.3);
}

.return-link:hover {
background: var(--color-light);
transform: translateY(-3px);
box-shadow: 0 8px 40px rgba(0,255,136,0.5);
}

.return-link .material-icons {
font-size: 20px;
}

@media (max-width: 1024px) {
.res-hero-title {
font-size: 68px;
}

.blog-main-title {
font-size: 62px;
}

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

.featured-article {
grid-column: span 2;
grid-row: span 1;
}

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

.card-large {
grid-column: span 2;
}
}

@media (max-width: 768px) {
.res-hero {
padding: 140px 0 80px;
}

.res-hero-title {
font-size: 48px;
letter-spacing: -2px;
}

.res-hero-text {
font-size: 17px;
}

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

.card-large {
grid-column: span 1;
grid-row: span 1;
}

.card-visual {
height: 240px;
}

.card-body {
padding: 32px 28px;
}

.card-title {
font-size: 28px;
}

.notify-box {
flex-direction: column;
padding: 40px 32px;
text-align: center;
}

.notify-title {
font-size: 26px;
}

.blog-intro {
padding: 140px 0 60px;
}

.blog-main-title {
font-size: 42px;
}

.blog-subtitle {
font-size: 18px;
}

.articles-masonry {
grid-template-columns: 1fr;
}

.featured-article {
grid-column: span 1;
}

.article-img-container {
height: 300px;
}

.article-main-title {
font-size: 42px;
letter-spacing: -2px;
}

.article-lead {
font-size: 17px;
}

.article-featured-image img {
height: 400px;
}

.content-heading {
font-size: 28px;
}

.content-text {
font-size: 16px;
}

.content-image {
height: 320px;
}

.highlight-box {
padding: 32px 24px;
}

.highlight-title {
font-size: 22px;
}
}

@media (max-width: 480px) {
.res-hero-title {
font-size: 36px;
}

.card-title {
font-size: 24px;
}

.notify-title {
font-size: 22px;
}

.blog-main-title {
font-size: 32px;
}

.article-main-title {
font-size: 32px;
}

.article-featured-image img {
height: 280px;
}

.content-heading {
font-size: 24px;
}

.content-image {
height: 240px;
}
}

.policy-document {
padding: 140px 0 100px;
background: var(--color-primary);
}

.container-narrow {
max-width: 920px;
margin: 0 auto;
padding: 0 28px;
}

.policy-header {
text-align: center;
margin-bottom: 64px;
padding-bottom: 48px;
border-bottom: 2px solid rgba(0,255,136,0.15);
}

.policy-page-title {
font-family: var(--font-heading);
font-size: 68px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 16px;
line-height: 1;
}

.policy-updated {
font-size: 15px;
color: var(--color-neutral);
font-weight: 500;
}

.policy-content {
background: var(--color-secondary);
padding: 56px;
border-radius: 12px;
border: 1px solid rgba(0,255,136,0.1);
}

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

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

.policy-subtitle {
font-family: var(--font-heading);
font-size: 26px;
font-weight: 800;
color: var(--color-accent);
margin-bottom: 20px;
letter-spacing: -0.5px;
}

.policy-text {
font-size: 17px;
line-height: 1.85;
color: var(--color-neutral);
margin-bottom: 20px;
}

.policy-text:last-child {
margin-bottom: 0;
}

.policy-contact-box {
background: rgba(0,255,136,0.05);
padding: 28px;
border-radius: 8px;
border-left: 4px solid var(--color-accent);
margin-top: 24px;
}

.policy-contact-box p {
font-size: 15px;
line-height: 1.75;
color: var(--color-light);
margin-bottom: 8px;
}

.policy-contact-box p:last-child {
margin-bottom: 0;
}

.policy-contact-box strong {
color: var(--color-accent);
font-weight: 700;
}

.contact-hero-area {
padding: 160px 0 80px;
background: var(--color-primary);
}

.contact-hero-wrap {
display: grid;
grid-template-columns: 1fr;
gap: 60px;
}

.contact-intro-block {
max-width: 780px;
}

.contact-page-heading {
font-family: var(--font-heading);
font-size: 78px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -3px;
line-height: 0.95;
margin-bottom: 32px;
}

.contact-lead-text {
font-size: 21px;
line-height: 1.7;
color: var(--color-neutral);
}

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

.info-card-item {
background: var(--color-secondary);
padding: 36px 28px;
border-radius: 12px;
border: 1px solid rgba(0,255,136,0.12);
display: flex;
flex-direction: column;
gap: 20px;
transition: all 0.35s ease;
}

.info-card-item:hover {
border-color: rgba(0,255,136,0.35);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.info-icon-holder {
width: 56px;
height: 56px;
background: rgba(0,255,136,0.15);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}

.info-icon-holder i {
font-size: 26px;
color: var(--color-accent);
}

.info-content-text {
flex: 1;
}

.info-card-label {
font-size: 13px;
font-weight: 700;
color: var(--color-neutral);
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 8px;
}

.info-card-value {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
color: var(--color-light);
display: block;
margin-bottom: 6px;
text-decoration: none;
transition: color 0.3s ease;
}

.info-card-value:hover {
color: var(--color-accent);
}

.info-card-note {
font-size: 14px;
color: var(--color-neutral);
}

.why-choose-section {
padding: 100px 0;
background: var(--color-secondary);
}

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

.choose-visual-side {
border-radius: 16px;
overflow: hidden;
}

.choose-image {
width: 100%;
height: 540px;
object-fit: cover;
display: block;
}

.choose-content-side {
padding-right: 20px;
}

.choose-section-title {
font-family: var(--font-heading);
font-size: 52px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 28px;
line-height: 1.1;
}

.choose-paragraph {
font-size: 18px;
line-height: 1.8;
color: var(--color-neutral);
margin-bottom: 48px;
}

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

.stat-box {
text-align: center;
padding: 24px;
background: rgba(0,255,136,0.05);
border-radius: 10px;
border: 1px solid rgba(0,255,136,0.15);
}

.stat-number {
font-family: var(--font-heading);
font-size: 42px;
font-weight: 900;
color: var(--color-accent);
line-height: 1;
margin-bottom: 10px;
}

.stat-description {
font-size: 13px;
color: var(--color-neutral);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
}

.approach-highlights {
padding: 100px 0;
background: var(--color-primary);
}

.approach-main-heading {
font-family: var(--font-heading);
font-size: 58px;
font-weight: 900;
color: var(--color-light);
text-align: center;
letter-spacing: -2px;
margin-bottom: 72px;
}

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

.approach-card {
background: var(--color-secondary);
padding: 44px 40px;
border-radius: 12px;
border-left: 4px solid transparent;
transition: all 0.4s ease;
position: relative;
}

.approach-card:hover {
border-left-color: var(--color-accent);
transform: translateX(6px);
}

.approach-number {
font-family: var(--font-heading);
font-size: 72px;
font-weight: 900;
color: rgba(0,255,136,0.08);
line-height: 1;
margin-bottom: 20px;
}

.approach-card-title {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 800;
color: var(--color-light);
margin-bottom: 16px;
}

.approach-card-text {
font-size: 16px;
line-height: 1.75;
color: var(--color-neutral);
}

.contact-form-section {
padding: 100px 0 140px;
background: var(--color-secondary);
}

.form-wrapper-box {
max-width: 840px;
margin: 0 auto;
background: var(--color-primary);
padding: 64px 56px;
border-radius: 16px;
border: 1px solid rgba(0,255,136,0.15);
}

.form-intro-text {
text-align: center;
margin-bottom: 52px;
}

.form-section-heading {
font-family: var(--font-heading);
font-size: 46px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -1.5px;
margin-bottom: 16px;
}

.form-description {
font-size: 17px;
color: var(--color-neutral);
line-height: 1.6;
}

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

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

.form-field-group {
display: flex;
flex-direction: column;
gap: 10px;
}

.form-label {
font-size: 14px;
font-weight: 700;
color: var(--color-light);
letter-spacing: 0.3px;
}

.required-mark {
color: var(--color-accent);
margin-left: 3px;
}

.form-input-field,
.form-select-field,
.form-textarea-field {
background: var(--color-secondary);
border: 1px solid rgba(0,255,136,0.2);
border-radius: 8px;
padding: 14px 18px;
font-size: 16px;
color: var(--color-light);
font-family: var(--font-body);
transition: all 0.3s ease;
}

.form-input-field:focus,
.form-select-field:focus,
.form-textarea-field:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(0,255,136,0.1);
}

.form-textarea-field {
resize: vertical;
min-height: 140px;
}

.form-checkbox-group {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 8px;
}

.form-checkbox-input {
width: 18px;
height: 18px;
margin-top: 3px;
cursor: pointer;
accent-color: var(--color-accent);
}

.form-checkbox-label {
font-size: 15px;
color: var(--color-neutral);
line-height: 1.6;
}

.privacy-link {
color: var(--color-accent);
text-decoration: underline;
}

.privacy-link:hover {
text-decoration: none;
}

.form-submit-button {
background: var(--color-accent);
color: var(--color-primary);
padding: 18px 48px;
border: none;
border-radius: 8px;
font-family: var(--font-heading);
font-size: 18px;
font-weight: 800;
cursor: pointer;
transition: all 0.35s ease;
box-shadow: 0 0 30px rgba(0,255,136,0.3);
margin-top: 16px;
}

.form-submit-button:hover {
background: var(--color-light);
transform: translateY(-3px);
box-shadow: 0 8px 40px rgba(0,255,136,0.5);
}

.thanks-page-wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
padding: 40px 24px;
}

.thanks-content-box {
max-width: 640px;
text-align: center;
}

.thanks-icon-circle {
width: 120px;
height: 120px;
background: rgba(0,255,136,0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 40px;
}

.thanks-icon-circle i {
font-size: 64px;
color: var(--color-accent);
}

.thanks-main-title {
font-family: var(--font-heading);
font-size: 64px;
font-weight: 900;
color: var(--color-light);
letter-spacing: -2px;
margin-bottom: 28px;
line-height: 1;
}

.thanks-message-text {
font-size: 19px;
line-height: 1.75;
color: var(--color-neutral);
margin-bottom: 48px;
}

.thanks-home-button {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--color-accent);
color: var(--color-primary);
padding: 18px 42px;
border-radius: 8px;
font-size: 17px;
font-weight: 700;
text-decoration: none;
transition: all 0.35s ease;
box-shadow: 0 0 30px rgba(0,255,136,0.3);
}

.thanks-home-button:hover {
background: var(--color-light);
transform: translateY(-3px);
box-shadow: 0 8px 40px rgba(0,255,136,0.5);
}

.thanks-home-button i {
font-size: 20px;
}

@media (max-width: 1024px) {
.contact-info-cards {
grid-template-columns: 1fr;
}

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

.choose-image {
height: 420px;
}

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

@media (max-width: 768px) {
.policy-page-title {
font-size: 42px;
}

.policy-content {
padding: 36px 28px;
}

.policy-subtitle {
font-size: 22px;
}

.policy-text {
font-size: 16px;
}

.contact-page-heading {
font-size: 48px;
letter-spacing: -2px;
}

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

.choose-section-title {
font-size: 38px;
}

.choose-paragraph {
font-size: 17px;
}

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

.approach-main-heading {
font-size: 42px;
}

.form-wrapper-box {
padding: 44px 32px;
}

.form-section-heading {
font-size: 36px;
}

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

.thanks-main-title {
font-size: 42px;
}

.thanks-message-text {
font-size: 17px;
}
}

@media (max-width: 480px) {
.policy-page-title {
font-size: 32px;
}

.contact-page-heading {
font-size: 36px;
}

.choose-section-title {
font-size: 32px;
}

.approach-main-heading {
font-size: 32px;
}

.form-section-heading {
font-size: 28px;
}

.thanks-main-title {
font-size: 32px;
}

.thanks-icon-circle {
width: 90px;
height: 90px;
}

.thanks-icon-circle i {
font-size: 48px;
}
}

.res-coming-soon {
min-height: calc(100vh - 85px);
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
position: relative;
overflow: hidden;
}

.res-coming-soon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(0,255,136,0.06) 0%, transparent 70%);
animation: slowPulse 10s infinite;
}

@keyframes slowPulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.7; }
}

.coming-soon-wrapper {
position: relative;
z-index: 1;
text-align: center;
}

.coming-main {
font-family: var(--font-heading);
font-size: 180px;
font-weight: 900;
line-height: 1;
color: var(--color-accent);
letter-spacing: 8px;
margin-bottom: 48px;
text-shadow: 0 0 60px rgba(0,255,136,0.5), 0 0 120px rgba(0,255,136,0.3);
}

.coming-desc {
font-size: 24px;
line-height: 1.6;
color: var(--color-neutral);
max-width: 680px;
margin: 0 auto;
opacity: 0;
transform: translateY(20px);
transition: all 1s ease;
}

.coming-desc.visible {
opacity: 1;
transform: translateY(0);
}

@media (max-width: 1024px) {
.coming-main {
font-size: 140px;
letter-spacing: 6px;
}

.coming-desc {
font-size: 21px;
max-width: 600px;
}
}

@media (max-width: 768px) {
.coming-main {
font-size: 96px;
letter-spacing: 4px;
margin-bottom: 36px;
}

.coming-desc {
font-size: 18px;
max-width: 90%;
}
}

@media (max-width: 480px) {
.coming-main {
font-size: 72px;
letter-spacing: 3px;
margin-bottom: 28px;
}

.coming-desc {
font-size: 16px;
}
}