/* BERLIN NJ PAGE */

:root {
 --navy: #081a2f;
 --blue: #126dff;
 --cyan: #17c7d6;
 --violet: #755bff;
 --text: #1f2e42;
 --muted: #65748a;
 --bg: #f5f8fc;
 --border: #dee7f0;
 --shadow: 0 20px 55px rgba(8, 26, 47, .10)
}
* {
	box-sizing: border-box
}
html {
	scroll-behavior: smooth
}
body {
	overflow-x: hidden;
	color: var(--text)
}
a {
	text-decoration: none
}
.page-progress {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--blue), var(--cyan), var(--violet))
}
.floating-contact {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 999px;
	color: #fff;
	background: var(--navy);
	box-shadow: 0 14px 32px rgba(8, 26, 47, .22);
	font-weight: 700
}
.floating-contact:hover {
	color: #fff;
	background: var(--blue)
}
.berlin360-section {
	position: relative;
	min-height: 820px;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 110px 0 55px;
	color: #fff;
	background: radial-gradient(circle at 15% 15%, rgba(117, 91, 255, .22), transparent 30%), radial-gradient(circle at 85% 75%, rgba(23, 199, 214, .20), transparent 28%), linear-gradient(135deg, #061526, #0b2746 55%, #0c345e)
}
.berlin360-section:before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .3;
	background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 46px 46px
}
.berlin360-wrap {
	position: relative;
	z-index: 2
}
.berlin360-bg-glow {
	position: absolute;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .22
}
.berlin360-glow-left {
	left: -160px;
	top: -180px;
	background: var(--violet)
}
.berlin360-glow-right {
	right: -180px;
	bottom: -180px;
	background: var(--cyan)
}
.berlin360-content {
	position: relative;
	z-index: 3;
	max-width: 1020px;
	margin: auto
}
.berlin360-kicker, .ms-berlin-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border: 1px solid rgba(18, 109, 255, .18);
	border-radius: 999px;
	color: var(--blue);
	background: rgba(18, 109, 255, .06);
 font-size: .75rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase
}
.berlin360-kicker {
	color: #dff7ff;
	border-color: rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .07)
}
.berlin360-title {
	margin: 26px 0 0;
	font-size: clamp(2.8rem, 5vw, 4.5rem);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -.04em;
	color:#fff;
}
.berlin360-title span {
	display: block;
	color: transparent;
	background: linear-gradient(90deg, #fff, #79d8ff, #67f3d6);
	-webkit-background-clip: text;
	background-clip: text
}
.berlin360-divider {
	width: 86px;
	height: 4px;
	margin: 28px auto;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--blue), var(--cyan))
}
.berlin360-tagline {
	font-size: 1.25rem;
	font-weight: 800
}
.berlin360-copy {
	max-width: 820px;
	margin: auto;
	color: #c9d8e8;
	font-size: 1.02rem
}
.berlin360-btn-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 30px
}
.berlin360-btn-primary, .berlin360-btn-secondary, .ms-berlin-btn-dark, .ms-berlin-btn-light, .berlin-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 52px;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 800;
 transition: .3s
}
.berlin360-btn-primary {
	color: #fff;
	background: linear-gradient(90deg, var(--blue), var(--violet))
}
.berlin360-btn-secondary {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(255, 255, 255, .07)
}
.berlin360-btn-primary:hover, .berlin360-btn-secondary:hover, .ms-berlin-btn-dark:hover, .ms-berlin-btn-light:hover {
	transform: translateY(-3px)
}
.berlin360-floating-card {
	position: absolute;
	z-index: 4;
	width: 240px;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 15px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 18px;
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(15px);
	animation: float 5s ease-in-out infinite
}
.berlin360-card-left {
	left: 0;
	top: 7%
}
.berlin360-card-right {
	right: 0;
	top: 39%;
	animation-delay: -2s
}
.berlin360-card-icon {
	min-width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	color: var(--navy);
	background: #fff
}
.berlin360-floating-card h4 {
	margin: 0 0 3px;
	color:#fff;
}
.berlin360-floating-card p {
	margin: 0;
	color: #c5d6e7;
 font-size: .73rem
}
.berlin360-orbit {
	position: absolute;
	left: 50%;
	top: 48%;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 50%;
	transform: translate(-50%, -50%)
}
.berlin360-orbit-one {
	width: 720px;
	height: 720px;
	animation: spin 34s linear infinite
}
.berlin360-orbit-two {
	width: 520px;
	height: 520px;
	border-style: dashed;
	animation: spin2 26s linear infinite
}
.berlin360-services {
	position: relative;
	z-index: 4;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin-top: 58px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 22px;
	background: rgba(255, 255, 255, .06)
}
.berlin360-service-item {
	min-height: 112px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 18px 12px;
	border-right: 1px solid rgba(255, 255, 255, .1);
	text-align: center
}
.berlin360-service-item:last-child {
	border-right: 0
}
.berlin360-service-item i {
	margin-bottom: 8px;
	color: #7bdfff
}
.berlin360-service-item span {
	color: #afc1d5;
 font-size: .7rem
}
.ms-berlin-intro, .ms-berlin-why, .ms-berlin-approach, .ms-berlin-white, .ms-berlin-funnel, .ms-berlin-faq {
	padding: 95px 0
}
.ms-berlin-intro, .ms-berlin-white, .ms-berlin-approach {
	background: #fff
}
.ms-berlin-why, .ms-berlin-funnel {
	background: var(--bg)
}
.narrow {
	max-width: 1650px
}
.ms-berlin-intro h2, .ms-berlin-heading h2, .ms-berlin-approach h2, .ms-berlin-dark h2, .ms-berlin-market h2, .berlin-cta h2 {
	margin: 14px 0 18px;
	color: var(--navy);
	font-size: clamp(2rem, 4vw, 2.5rem);
	line-height: 1.12;
	font-weight: 800
}
.ms-berlin-intro p, .ms-berlin-heading p, .ms-berlin-approach p, .ms-berlin-white p, .ms-berlin-why p, .ms-berlin-funnel p {
	color: var(--muted)
}
.ms-berlin-heading {
	max-width: 1650px;
	margin: 0 auto 48px
}
.ms-berlin-section-copy {
	max-width: 1650px;
	margin-left: auto;
	margin-right: auto
}
.ms-berlin-benefit-card, .simple-card, .strategy-card, .solution-card {
	height: 100%;
	padding: 28px;
	border: 1px solid var(--border);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 14px 32px rgba(8, 26, 47, .05);
 transition: .3s
}
.ms-berlin-benefit-card:hover, .simple-card:hover, .strategy-card:hover, .solution-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow)
}
.ms-berlin-benefit-card>i {
	color: var(--blue);
	font-size: 1.4rem
}
.ms-berlin-benefit-card h3, .strategy-card h3, .solution-card h3 {
	margin: 18px 0 0;
	color: var(--navy);
	font-size: 1.3rem
}
.strategy-card p, .solution-card p {
	margin: 8px 0 0
}
.ms-berlin-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 760px;
	margin: 34px auto 0;
	padding: 16px 20px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: #fff;
	font-weight: 700
}
.ms-berlin-note i {
	color: var(--blue)
}
.visual-card {
	border-radius: 28px;
	box-shadow: var(--shadow)
}
.search-ecosystem {
	position: relative;
	min-height: 500px;
	overflow: hidden;
	border: 1px solid var(--border);
	background: radial-gradient(circle at 50% 50%, rgba(18, 109, 255, .12), transparent 40%), linear-gradient(135deg, #eef6ff, #f9fcff)
}
.search-core {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	width: 190px;
	height: 190px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 22px 55px rgba(8, 26, 47, .16);
	transform: translate(-50%, -50%);
	text-align: center
}
.search-core i {
	color: var(--blue);
	font-size: 1.8rem
}
.search-core small {
	max-width: 145px;
	margin-top: 5px;
	color: var(--muted);
 font-size: .65rem
}
.search-node {
	position: absolute;
	z-index: 4;
	padding: 10px 14px;
	border-radius: 999px;
	color: #fff;
	background: var(--navy);
	font-weight: 800
}
.node-seo {
	left: 13%;
	top: 22%
}
.node-aeo {
	right: 12%;
	top: 27%
}
.node-geo {
	left: 42%;
	bottom: 12%
}
.search-orbit {
	position: absolute;
	left: 50%;
	top: 50%;
	border: 1px dashed rgba(18, 109, 255, .22);
	border-radius: 50%;
	transform: translate(-50%, -50%)
}
.orbit-one {
	width: 360px;
	height: 360px
}
.orbit-two {
	width: 440px;
	height: 440px
}
.ms-berlin-stack {
	display: grid;
	gap: 12px;
	margin: 24px 0
}
.ms-berlin-stack>div {
	display: flex;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--bg)
}
.ms-berlin-stack>div>i {
	margin-top: 5px;
	color: var(--blue);
	font-size: 1.2rem
}
.ms-berlin-stack h3 {
	margin: 0 0 5px;
	color: var(--navy);
	font-size: 1.05rem
}
.ms-berlin-stack p {
	margin: 0 0 8px
}
.ms-berlin-stack ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px 14px;
	margin: 10px 0;
	padding-left: 18px;
	color: var(--muted);
 font-size: .85rem
}
.ms-berlin-btn-dark {
	color: #fff;
	background: var(--navy)
}
.ms-berlin-btn-dark:hover {
	color: #fff;
	background: var(--blue)
}
.ms-berlin-btn-light {
	color: var(--navy);
	background: #fff
}
.ms-berlin-btn-light:hover {
	color: #fff;
	background: var(--blue)
}
.ms-berlin-dark {
	padding: 100px 0;
	color: #fff;
	background: radial-gradient(circle at 85% 15%, rgba(23, 199, 214, .16), transparent 25%), linear-gradient(135deg, #071728, #0b2b4d)
}
.ms-berlin-dark h2 {
	color: #fff
}
.ms-berlin-dark p {
	color: #bed0e2
}
.ms-berlin-pill.light {
	color: #d8f7ff;
	border-color: rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .08)
}
.dark-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 24px 0
}
.dark-grid>div {
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 13px;
	background: rgba(255, 255, 255, .06);
 font-size: 1rem;
	font-weight: 700
}
.paid-visual {
	min-height: 430px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .12);
	background: radial-gradient(circle, rgba(117, 91, 255, .22), transparent 38%), rgba(255, 255, 255, .04);
	text-align: center
}
.paid-visual i {
	color: var(--cyan);
	font-size: 2.3rem
}
.paid-visual strong {
	margin-top: 12px;
	font-size: 1.2rem
}
.paid-visual span {
	margin-top: 5px;
	color: #bed0e2;
 font-size: .75rem
}
.funnel-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 35px 0
}
.funnel-grid>div {
	padding: 22px 15px;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(8, 26, 47, .05);
	font-weight: 800
}
.simple-card {
	text-align: center;
	font-weight: 800
}
.ms-berlin-market {
	color: #fff;
	background: var(--navy)
}
.ms-berlin-market-content {
	min-height: 590px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 80px max(7vw, 42px)
}
.ms-berlin-market h2 {
	color: #fff
}
.ms-berlin-market p {
	color: #bed0e2
}
.imetadex-visual {
	min-height: 590px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 50%, rgba(23, 199, 214, .28), transparent 38%), linear-gradient(135deg, #0d4f75, #081a2f)
}
.imetadex-visual i {
	color: #8be8f2;
	font-size: 2.4rem
}
.imetadex-visual strong {
	margin-top: 12px;
	font-size: 1.1rem
}
.imetadex-visual span {
	margin-top: 5px;
	color: #bed0e2;
 font-size: .75rem
}
.expansion-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 32px 0
}
.expansion-row span {
	padding: 10px 13px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--bg);
 font-size: .8rem;
	font-weight: 700
}
.expansion-row i {
	color: var(--blue)
}
.core-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px
}
.core-grid>div {
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: 18px;
	background: rgba(255, 255, 255, .06)
}
.core-grid h3 {
	color: #fff;
	font-size: 1.2rem
}
.core-grid p {
	margin: 0;
 font-size: 1rem
}
.location-card {
	max-width: 820px;
	margin: 34px auto;
	padding: 30px;
	border: 1px solid var(--border);
	border-radius: 22px;
	background: #fff;
	box-shadow: var(--shadow)
}
.location-card i {
	color: var(--blue);
	font-size: 1.8rem
}
.location-card h3 {
	margin: 14px 0 8px;
	color: var(--navy)
}
.ms-berlin-faq {
	background: #fff
}
.ms-berlin-accordion {
	max-width: 940px;
	margin: auto
}
.ms-berlin-accordion .accordion-item {
	overflow: hidden;
	margin-bottom: 12px;
	border: 1px solid var(--border);
	border-radius: 15px !important
}
.ms-berlin-accordion .accordion-button {
	padding: 20px 22px;
	color: var(--navy);
	background: #fff;
	box-shadow: none;
	font-weight: 800
}
 .ms-berlin-accordion .accordion-button:not(.collapsed) {
 color: #fff;
 background: linear-gradient(90deg, var(--blue), var(--violet))
}
 .ms-berlin-accordion .accordion-button:not(.collapsed)::after {
 filter: brightness(0) invert(1)
}
.ms-berlin-accordion .accordion-body {
	padding: 21px 22px;
	color: var(--muted)
}
.berlin-cta {
	padding: 85px 0;
	background: var(--bg)
}
.berlin-cta-box {
	padding: 65px 28px;
	border-radius: 30px;
	color: #fff;
	text-align: center;
	background: radial-gradient(circle at 15% 15%, rgba(23, 199, 214, .18), transparent 25%), radial-gradient(circle at 85% 80%, rgba(117, 91, 255, .20), transparent 28%), linear-gradient(135deg, #071728, #0b2c4f);
	box-shadow: 0 28px 70px rgba(8, 26, 47, .2)
}
.berlin-cta h2 {
	max-width: 900px;
	margin: 15px auto;
	color: #fff
}
.berlin-cta p {
	max-width: 820px;
	margin: 0 auto 12px;
	color: #c4d5e6
}
.berlin-cta-btn {
	margin-top: 18px;
	color: var(--navy);
	background: #fff
}
.berlin-cta-btn:hover {
	color: #fff;
	background: var(--blue)
}
 @keyframes float {
 0%,  100% {
 transform: translateY(0)
}
 50% {
 transform: translateY(-11px)
}
}
 @keyframes spin {
 to {
 transform: translate(-50%, -50%) rotate(360deg)
}
}
 @keyframes spin2 {
 to {
 transform: translate(-50%, -50%) rotate(-360deg)
}
}
 @media(max-width:1199.98px) {
 .berlin360-floating-card {
 display: none
}
 .berlin360-services {
 grid-template-columns: repeat(3, 1fr)
}
 .funnel-grid {
 grid-template-columns: repeat(2, 1fr)
}
}
 @media(max-width:991.98px) {
 .berlin360-section {
 min-height: auto;
 padding: 100px 0 80px
}
 .ms-berlin-intro,  .ms-berlin-why,  .ms-berlin-approach,  .ms-berlin-white,  .ms-berlin-funnel,  .ms-berlin-faq,  .ms-berlin-dark {
 padding: 75px 0
}
 .ms-berlin-market-content,  .imetadex-visual {
 min-height: 500px
}
}
 @media(max-width:767.98px) {
 .floating-contact span {
 display: none
}
 .floating-contact {
 width: 50px;
 height: 50px;
 justify-content: center;
 padding: 0
}
 .berlin360-services {
 grid-template-columns: repeat(2, 1fr)
}
 .dark-grid,  .core-grid,  .funnel-grid,  .ms-berlin-stack ul {
 grid-template-columns: 1fr
}
 .search-ecosystem {
 min-height: 400px
}
 .ms-berlin-market-content {
 min-height: auto;
 padding: 65px 24px
}
 .imetadex-visual {
 min-height: 420px
}
}
 @media(max-width:575.98px) {
 .berlin360-btn-row {
 flex-direction: column
}
 .berlin360-btn-primary,  .berlin360-btn-secondary {
 width: 100%
}
 .search-core {
 width: 155px;
 height: 155px
}
 .orbit-one {
 width: 280px;
 height: 280px
}
 .orbit-two {
 width: 340px;
 height: 340px
}
 .node-seo {
 left: 5%;
 top: 18%
}
 .node-aeo {
 right: 4%;
 top: 23%
}
 .node-geo {
 left: 39%;
 bottom: 9%
}
 .berlin-cta {
 padding: 55px 0
}
 .berlin-cta-box {
 padding: 50px 20px
}
}
 @media(prefers-reduced-motion:reduce) {
 *,  *::before,  *::after {
 animation-duration: .01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: .01ms !important;
 scroll-behavior: auto !important
}
}