:root {
	--bg: #fbfcff;
	--surface: #fff;
	--soft: #f6f8ff;
	--ink: #111b34;
	--muted: #697691;
	--line: #e7ebf4;
	--blue: #287df2;
	--purple: #713cf0;
	--green: #10b981;
	--orange: #f59e0b;
	--shadow: 0 30px 90px rgba(52, 68, 125, .13);
	--shadow-sm: 0 14px 40px rgba(52, 68, 125, .08);
	--radius: 24px;
}

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

html {
	scroll-behavior: smooth
}

body {
	font-family: Inter, system-ui, sans-serif;
	color: var(--ink);
	background: var(--bg);
	line-height: 1.65;
	overflow-x: hidden
}

a {
	text-decoration: none;
	color: inherit
}

button {
	font: inherit
}

.container {
	width: min(1180px, calc(100% - 48px));
	margin: auto
}

.skip-link {
	position: fixed;
	left: 12px;
	top: -60px;
	z-index: 100;
	padding: 10px 14px;
	background: #111b34;
	color: #fff;
	border-radius: 8px
}

.skip-link:focus {
	top: 12px
}

.ambient {
	position: fixed;
	border-radius: 50%;
	filter: blur(110px);
	pointer-events: none;
	z-index: -2;
	opacity: .23
}

.ambient-a {
	width: 480px;
	height: 480px;
	background: #7865ff;
	right: -180px;
	top: -180px
}

.ambient-b {
	width: 430px;
	height: 430px;
	background: #50c8ff;
	left: -180px;
	bottom: -180px
}

.dot-field {
	position: fixed;
	inset: 0;
	z-index: -3;
	opacity: .25;
	pointer-events: none;
	background-image: radial-gradient(#aeb9d5 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: linear-gradient(#000, transparent 65%)
}

/* Header */
.header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(251, 252, 255, .76);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(224, 229, 240, .72)
}

.nav {
	min-height: 82px;
	display: flex;
	align-items: center;
	gap: 28px
}

.brand,
.footer-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-right: auto
}

.brand-logo {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	color: #fff;
	font: 800 12px "Space Grotesk";
	background: linear-gradient(135deg, var(--blue), var(--purple));
	box-shadow: 0 12px 28px rgba(85, 76, 228, .25)
}

.brand-copy strong,
.brand-copy small,
.footer-brand b,
.footer-brand small {
	display: block
}

.brand-copy strong {
	font: 700 16px "Space Grotesk"
}

.brand-copy small {
	color: var(--muted);
	font-size: 11px;
	margin-top: -3px
}

.nav-links {
	display: flex;
	gap: 25px;
	align-items: center
}

.nav-links a {
	font-size: 13px;
	font-weight: 650;
	color: #27324b;
	transition: .2s
}

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

.header-cta {
	padding: 11px 17px;
	border: 1px solid var(--line);
	border-radius: 13px;
	background: #fff;
	box-shadow: var(--shadow-sm);
	font-size: 12px;
	font-weight: 750
}

.header-cta span {
	color: var(--purple);
	margin-left: 6px
}

.nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	border: 0;
	background: transparent
}

.nav-toggle i {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ink);
	margin: 5px auto;
	border-radius: 4px
}

/* General */
.section {
	padding: 80px 0;
	position: relative
}

.soft {
	background: linear-gradient(180deg, rgba(246, 248, 255, .82), rgba(251, 252, 255, .94));
	border-block: 1px solid rgba(226, 231, 242, .7)
}

.section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 52px
}

.section-head small,
.about-copy>small,
.contact-box>div>small {
	display: block;
	color: #7180a1;
	font-size: 10px;
	font-weight: 850;
	letter-spacing: .14em;
	margin-bottom: 12px
}

.section-head h2,
.about-copy h2,
.contact-box h2 {
	font: 700 clamp(35px, 4.2vw, 56px)/1.06 "Space Grotesk";
	letter-spacing: -.055em
}

.section-head h2 span,
.about-copy h2 span,
.contact-box h2 span {
	color: transparent;
	background: linear-gradient(90deg, var(--blue), var(--purple));
	-webkit-background-clip: text;
	background-clip: text
}

.section-head>p {
	max-width: 440px;
	color: var(--muted);
	font-size: 13px
}

/* Hero */
.hero {
	padding: 82px 0 60px;
	min-height: 820px;
	/* display: flex; */
	align-items: center
}

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

.eyebrow {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 8px 13px;
	border: 1px solid #e5e8f5;
	background: #f5f5ff;
	border-radius: 999px;
	color: #5c6797;
	font-size: 11px;
	font-weight: 750;
	margin-bottom: 23px
}

.eyebrow span {
	color: var(--purple)
}

.hero h1 {
	font: 700 clamp(47px, 5.4vw, 78px)/1.02 "Space Grotesk";
	letter-spacing: -.065em;
	max-width: 700px
}

.hero h1 span {
	color: transparent;
	background: linear-gradient(90deg, var(--blue), var(--purple));
	-webkit-background-clip: text;
	background-clip: text
}

.hero-lead {
	color: var(--muted);
	font-size: 16px;
	max-width: 620px;
	margin-top: 25px
}

.hero-buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 30px
}

.button {
	min-height: 51px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 0 20px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 750;
	transition: transform .2s, box-shadow .2s
}

.button:hover {
	transform: translateY(-2px)
}

.button.primary {
	color: #fff;
	background: linear-gradient(100deg, var(--blue), var(--purple));
	box-shadow: 0 18px 35px rgba(77, 76, 230, .22)
}

.button.secondary {
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm)
}

.stats {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 43px
}

.stats strong {
	display: block;
	font: 700 21px "Space Grotesk"
}

.stats span {
	display: block;
	color: var(--muted);
	font-size: 10px;
	margin-top: 1px
}

.stats>b {
	width: 1px;
	height: 29px;
	background: #dfe4ef
}

/* Hero dashboard */
.hero-visual {
	position: relative;
	min-height: 520px;
	display: grid;
	place-items: center
}

.dashboard {
	width: min(100%, 560px);
	border: 1px solid rgba(222, 228, 241, .9);
	border-radius: 28px;
	background: rgba(255, 255, 255, .88);
	box-shadow: 0 38px 100px rgba(61, 72, 137, .17);
	overflow: hidden;
	backdrop-filter: blur(18px);
	transition: transform .2s ease
}

.dash-bar,
.dash-footer {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 19px;
	color: #7b86a0;
	font-size: 10px;
	border-bottom: 1px solid var(--line)
}

.dash-bar>span {
	margin-right: auto;
	font-weight: 650
}

.dash-bar small {
	display: flex;
	gap: 5px;
	align-items: center
}

.dash-bar small b {
	width: 6px;
	height: 6px;
	background: var(--green);
	border-radius: 50%
}

.browser-dots {
	display: flex;
	gap: 5px
}

.browser-dots i {
	width: 7px;
	height: 7px;
	background: #dce2ef;
	border-radius: 50%
}

.dash-body {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 17px;
	padding: 30px
}

.terminal {
	padding: 23px;
	border-radius: 20px;
	background: #0d1630;
	color: #bac7eb;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05)
}

.terminal-title {
	display: flex;
	justify-content: space-between;
	color: #66769e;
	font: 10px monospace;
	margin-bottom: 18px
}

.code {
	font: 11px/2 "SFMono-Regular", Consolas, monospace
}

.code em {
	color: #7ec8ff;
	font-style: normal
}

.code strong {
	color: #b795ff;
	font-weight: 500
}

.indent {
	padding-left: 17px
}

.analytics {
	padding: 19px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff
}

.analytics-head {
	display: flex;
	justify-content: space-between;
	color: var(--muted);
	font-size: 10px
}

.analytics-head strong {
	color: var(--green)
}

.ring {
	width: 108px;
	height: 108px;
	border: 10px solid #eef1ff;
	border-top-color: var(--purple);
	border-right-color: var(--blue);
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin: 22px auto
}

.ring span {
	font: 700 24px "Space Grotesk"
}

.ring small {
	font: 9px;
	color: var(--muted)
}

.health {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #eef1f6;
	padding: 9px 0;
	color: var(--muted);
	font-size: 9px
}

.health b {
	color: var(--ink)
}

.dash-footer {
	border-top: 1px solid var(--line);
	border-bottom: 0;
	justify-content: space-between
}

.dash-footer span {
	color: #5f6c84
}

.dash-footer span:first-letter {
	color: var(--green)
}

.orb {
	position: absolute;
	border-radius: 50%;
	animation: float 5s ease-in-out infinite
}

.orb-1 {
	width: 22px;
	height: 22px;
	right: 2%;
	top: 8%;
	background: #b9a9ff
}

.orb-2 {
	width: 13px;
	height: 13px;
	left: 1%;
	bottom: 18%;
	background: #65caff;
	animation-delay: -2s
}

.orb-3 {
	width: 15px;
	height: 15px;
	right: 8%;
	bottom: 10%;
	background: #cabaff;
	animation-delay: -4s
}

@keyframes float {
	50% {
		transform: translateY(-15px) translateX(6px)
	}
}

.trust {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 45px;
	color: var(--muted);
	font-size: 10px
}

.trust>span {
	font-weight: 800;
	margin-right: 5px
}

.trust div {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 12px
}

/* Services */
.service-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px
}

.service-card {
	padding: 27px;
	min-height: 285px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: rgba(255, 255, 255, .8);
	transition: .25s
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
	border-color: #dbe2f3
}

.service-icon {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	font-weight: 850;
	margin-bottom: 25px
}

.service-icon.blue {
	color: #1f72e8;
	background: #eaf3ff
}

.service-icon.purple {
	color: #7042e5;
	background: #f0eaff
}

.service-icon.green {
	color: #079c6e;
	background: #e7faf2
}

.service-icon.orange {
	color: #d88800;
	background: #fff3dc
}

.service-card h3 {
	font: 700 18px/1.2 "Space Grotesk";
	margin-bottom: 11px
}

.service-card p {
	font-size: 12px;
	color: var(--muted)
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 18px
}

.tags span {
	padding: 5px 8px;
	border-radius: 999px;
	background: #f3f5fa;
	color: #64708a;
	font-size: 8px;
	font-weight: 800
}

/* Work */
.work-grid {
	display: grid;
	/* grid-template-columns: 1.15fr 1fr; */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 15px;
	padding: 10px;
}

.work-card {
	border: 1px solid var(--line);
	border-radius: 23px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 30px rgba(52, 66, 112, .04)
}

.work-card.large {
	grid-row: span 2
}

.work-art {
	height: 220px;
	position: relative;
	overflow: hidden;
	padding: 25px
}

.work-card.large .work-art {
	height: 310px
}

.work-art>span {
	position: relative;
	z-index: 2;
	font: 700 30px "Space Grotesk";
	letter-spacing: -.04em;
	word-break: break-word;
    overflow-wrap: break-word;
}

.work-art>b {
	display: block;
	position: relative;
	z-index: 2;
	color: rgba(20, 30, 70, .5);
	font-size: 12px;
	letter-spacing: .13em;
	margin-top: 2px
}

.work-art i {
	position: absolute;
	border-radius: 50%;
	border: 22px solid rgba(255, 255, 255, .3);
	width: 300px;
	height: 300px;
	right: -85px;
	bottom: -130px;
	box-shadow: 0 0 0 25px rgba(255, 255, 255, .12), 0 0 0 50px rgba(255, 255, 255, .08)
}

.art-blue {
	background: linear-gradient(135deg, #dff4ff, #6f8bff)
}

.art-purple {
	background: linear-gradient(135deg, #f0e7ff, #a477ff)
}

.art-green {
	background: linear-gradient(135deg, #e1faf1, #67d5ae)
}

.art-yellow {
	background: linear-gradient(135deg, #e1faf1, #bdd567)
}

.art-red {
	background: linear-gradient(135deg, #e1faf1, #d56b67)
}

.work-content {
	padding: 23px;
	word-break: break-word;
    overflow-wrap: break-word;
}

.work-content small {
	color: #6f7b95;
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em
}

.work-content h3 {
	font: 700 21px "Space Grotesk";
	margin: 7px 0;
	word-break: break-word;
    overflow-wrap: break-word;
}

.work-content p {
	color: var(--muted);
	font-size: 11px
}

/* Products */
.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px
}

.product-card {
	border: 1px solid var(--line);
	border-radius: 23px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 35px rgba(52, 66, 112, .04);
	transition: .25s
}

.product-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-sm)
}

.product-cover {
	height: 225px;
	position: relative;
	overflow: hidden;
	padding: 24px
}

.product-cover>span {
	display: grid;
	place-items: center;
	width: 45px;
	height: 45px;
	border-radius: 13px;
	background: rgba(255, 255, 255, .72);
	font: 700 13px "Space Grotesk";
	position: relative;
	z-index: 2
}

.product-cover>b {
	position: absolute;
	right: 23px;
	top: 27px;
	font-size: 10px;
	letter-spacing: .13em;
	color: rgba(20, 30, 70, .5)
}

.product-cover i {
	position: absolute;
	inset: auto -40px -120px auto;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 55px solid rgba(255, 255, 255, .3);
	box-shadow: 0 0 0 25px rgba(255, 255, 255, .1)
}

.cover-one {
	background: linear-gradient(135deg, #dff4ff, #6d8bff)
}

.cover-two {
	background: linear-gradient(135deg, #f0e7ff, #a477ff)
}

.cover-three {
	background: linear-gradient(135deg, #e1faf1, #67d5ae)
}

.product-body {
	padding: 23px
}

.product-body>small {
	color: #6f7b95;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
}

.product-body h3 {
	font: 700 20px "Space Grotesk";
	margin: 7px 0
}

.product-body p {
	color: var(--muted);
	font-size: 14px
}

.product-body a {
	display: inline-flex;
	gap: 8px;
	margin-top: 18px;
	color: #5458d9;
	font-size: 11px;
	font-weight: 800
}

/* Resources / articles */
.resource-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px
}

.resource {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #fff;
	transition: .2s
}

.resource:hover {
	transform: translateX(4px);
	box-shadow: var(--shadow-sm)
}

.resource>span {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: linear-gradient(135deg, #edf5ff, #f2ebff);
	color: #5c58d6;
	font-weight: 800
}

.resource div {
	margin-right: auto
}

.resource b,
.resource small {
	display: block
}

.resource b {
	font-size: 14px
}

.resource small {
	color: var(--muted);
	font-size: 9px;
	margin-top: 2px
}

.resource>strong {
	color: #7c87a0
}

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

.article {
	padding: 28px;
	min-height: 250px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: #fff
}

.article>small {
	color: #5c60d8;
	font-size: 9px;
	font-weight: 850;
	letter-spacing: .09em
}

.article h3 {
	font: 700 20px/1.2 "Space Grotesk";
	margin: 18px 0 11px
}

.article p {
	color: var(--muted);
	font-size: 11px
}

.article a {
	display: inline-block;
	margin-top: 20px;
	color: #555bd7;
	font-size: 11px;
	font-weight: 800
}

/* About */
.about {
	background: #fff
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 90px;
	align-items: center
}

.about-copy h2 {
	margin-bottom: 24px
}

.about-copy p {
	color: var(--muted);
	font-size: 13px;
	margin-bottom: 14px;
	max-width: 590px
}

.about-copy .button {
	margin-top: 10px
}

.stack-panel {
	padding: 25px;
	border-radius: 24px;
	background: #101932;
	color: #dbe3ff;
	box-shadow: var(--shadow)
}

.stack-title {
	display: flex;
	justify-content: space-between;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	font: 10px monospace;
	color: #7e8caf
}

.stack-title b {
	color: var(--green)
}

.stack-row {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 12px;
	padding: 15px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.stack-row:last-child {
	border-bottom: 0
}

.stack-row small {
	color: #8d9abb;
	font-size: 9px
}

.stack-row div {
	display: flex;
	flex-wrap: wrap;
	gap: 5px
}

.stack-row b {
	padding: 5px 7px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .06);
	font-size: 10px;
	font-weight: 600
}

/* Contact */
.contact-section {
	padding-top: 95px
}

.contact-box {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr .85fr;
	gap: 55px;
	padding: 62px;
	border-radius: 32px;
	color: #fff;
	background: linear-gradient(115deg, #182654, #2d438f 56%, #7040df);
	box-shadow: 0 35px 90px rgba(40, 54, 130, .24)
}

.contact-box:after {
	content: "";
	position: absolute;
	width: 380px;
	height: 380px;
	right: -150px;
	bottom: -220px;
	border: 75px solid rgba(255, 255, 255, .08);
	border-radius: 50%
}

.contact-box>div:first-child {
	position: relative;
	z-index: 2
}

.contact-box>div>small {
	color: #b4c0e0
}

.contact-box h2 {
	color: #fff
}

.contact-box p {
	max-width: 520px;
	color: #cbd4eb;
	font-size: 13px;
	margin-top: 19px
}

.contact-links {
	display: grid;
	gap: 11px;
	align-content: center;
	position: relative;
	z-index: 2
}

.contact-links a,
.contact-location {
	padding: 18px 20px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 16px;
	background: rgba(255, 255, 255, .08)
}

.contact-links small {
	display: block;
	color: #b4c0e0;
	font-size: 9px
}

.contact-links b {
	display: block;
	font-size: 12px;
	margin-top: 3px
}

.contact-links a span {
	float: right;
	margin-top: -25px;
	color: #c5d0ff
}

.contact-location {
	color: #fff
}

/* Notice / Footer */
.notice {
	padding: 18px 20px;
	margin-bottom: 30px;
	border: 1px solid #e7ebf4;
	border-radius: 16px;
	background: #fff;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--muted);
	font-size: 12px
}

.notice strong {
	color: var(--ink);
	white-space: nowrap
}

.footer {
	border-top: 1px solid var(--line);
	padding: 33px 0;
	background: #fff
}

.footer-inner {
	display: flex;
	align-items: center;
	gap: 25px
}

.footer-brand {
	gap: 9px
}

.footer-brand .brand-logo {
	width: 36px;
	height: 36px;
	border-radius: 11px;
	font-size: 10px
}

.footer-brand b {
	font-size: 12px
}

.footer-brand small {
	font-size: 12px;
	color: var(--muted)
}

.footer-links {
	display: flex;
	gap: 18px
}

.footer-links a,
.copyright {
	color: var(--muted);
	font-size: 12px
}

.footer-links a:hover {
	color: var(--purple)
}

.copyright {
	margin-left: auto
}

/* Animation */
.reveal {
	opacity: 0;
	/* transform: translateY(18px); */
	transition: opacity .7s ease, transform .7s ease
}

.reveal.is-visible {
	opacity: 1;
	transform: none
}

.delay {
	transition-delay: .1s
}

@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto
	}

	.reveal {
		opacity: 1;
		transform: none
	}

	.orb {
		animation: none
	}

	.dashboard {
		transition: none
	}
}

/* Responsive */
@media(max-width:1050px) {
	.nav-links {
		gap: 15px
	}

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

	.hero-grid {
		gap: 40px
	}

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

	.product-card:last-child {
		grid-column: 1/-1
	}
}

@media(max-width:800px) {
	.container {
		width: min(100% - 32px, 650px)
	}

	.nav {
		min-height: 72px
	}

	.nav-toggle {
		display: block
	}

	.nav-links {
		display: none;
		position: absolute;
		top: 72px;
		left: 16px;
		right: 16px;
		padding: 9px;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: rgba(255, 255, 255, .97);
		border: 1px solid var(--line);
		border-radius: 18px;
		box-shadow: var(--shadow);
		backdrop-filter: blur(18px)
	}

	.nav-links.open {
		display: flex
	}

	.nav-links a {
		padding: 12px;
		border-radius: 9px
	}

	.nav-links a:hover {
		background: #f4f6fb
	}

	.header-cta {
		display: none
	}

	.hero {
		padding-top: 58px;
		min-height: auto
	}

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

	.hero h1 {
		font-size: clamp(45px, 11vw, 66px)
	}

	.hero-visual {
		min-height: 430px
	}

	.section {
		padding: 86px 0
	}

	.section-head {
		display: block
	}

	.section-head>p {
		margin-top: 17px
	}

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

	.work-card.large {
		grid-row: auto
	}

	.work-card.large .work-art {
		height: 250px
	}

	.about-grid,
	.contact-box {
		grid-template-columns: 1fr
	}

	.about-grid {
		gap: 45px
	}

	.contact-box {
		padding: 43px 28px
	}

	.footer-inner {
		flex-wrap: wrap
	}

	.footer-links {
		order: 3;
		width: 100%;
		justify-content: center
	}

	.copyright {
		margin-left: auto
	}
}

@media(max-width:560px) {
	.hero h1 {
		font-size: 45px
	}

	.hero-lead {
		font-size: 14px
	}

	.stats {
		gap: 12px
	}

	.stats strong {
		font-size: 17px
	}

	.stats span {
		font-size: 8px
	}

	.stats>b {
		height: 25px
	}

	.hero-visual {
		min-height: 300px
	}

	.dashboard {
		transform: none
	}

	.dash-body {
		grid-template-columns: 1fr;
		padding: 19px
	}

	.analytics {
		display: none
	}

	.terminal {
		font-size: 10px;
		padding: 18px
	}

	.service-grid,
	.product-grid,
	.resource-grid,
	.article-grid {
		grid-template-columns: 1fr
	}

	.product-card:last-child {
		grid-column: auto
	}

	.product-cover {
		height: 200px
	}

	.stack-row {
		grid-template-columns: 1fr;
		gap: 8px
	}

	.notice {
		display: block
	}

	.notice span {
		display: block;
		margin-top: 7px
	}

	.footer-links {
		flex-wrap: wrap;
		justify-content: flex-start
	}

	.copyright {
		width: 100%;
		margin-left: 0
	}
}


/* =========================================================
   V3 MOTION SYSTEM
   ========================================================= */
body {
	cursor: default
}

.scroll-progress {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	z-index: 100;
	background: transparent;
	pointer-events: none
}

.scroll-progress span {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, #287df2, #713cf0, #c24dff);
	box-shadow: 0 0 12px rgba(103, 72, 240, .45)
}

.cursor-glow {
	position: fixed;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(91, 92, 246, .12), rgba(91, 92, 246, 0) 70%);
	opacity: 0;
	transition: opacity .25s
}

@media(pointer:fine) {
	.cursor-glow {
		opacity: 1
	}
}

.typing-wrap {
	display: inline-block;
	position: relative;
	white-space: nowrap
}

.typing-wrap #typed-word {
	color: transparent;
	background: linear-gradient(90deg, #287df2, #713cf0, #9b4cf2);
	-webkit-background-clip: text;
	background-clip: text
}

.typing-caret {
	display: inline-block;
	width: 4px;
	height: .72em;
	margin-left: 5px;
	vertical-align: -.04em;
	border-radius: 3px;
	background: #713cf0;
	animation: caretBlink .75s step-end infinite
}

@keyframes caretBlink {
	50% {
		opacity: 0
	}
}

.button {
	position: relative;
	overflow: hidden;
	isolation: isolate
}

.button:before {
	content: "";
	position: absolute;
	inset: -70%;
	background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .42) 50%, transparent 58%);
	transform: translateX(-65%) rotate(12deg);
	transition: transform .7s ease;
	z-index: -1
}

.button:hover:before {
	transform: translateX(65%) rotate(12deg)
}

.button.primary {
	animation: buttonBreath 3.2s ease-in-out infinite
}

.button.primary:hover {
	animation: none
}

@keyframes buttonBreath {
	50% {
		box-shadow: 0 20px 44px rgba(77, 76, 230, .30), 0 0 0 5px rgba(77, 76, 230, .035)
	}
}

.service-card,
.work-card,
.product-card,
.article,
.resource {
	position: relative;
	overflow: hidden;
	will-change: transform
}

.service-card:after,
.work-card:after,
.product-card:after,
.article:after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(95, 111, 255, .13), transparent 45%);
	transition: opacity .25s
}

.service-card:hover:after,
.work-card:hover:after,
.product-card:hover:after,
.article:hover:after {
	opacity: 1
}

.card-shine {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: inherit;
	opacity: 0;
	background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .25) 45%, transparent 65%);
	transform: translateX(-80%);
	transition: opacity .25s, transform .7s ease
}

.service-card:hover .card-shine,
.work-card:hover .card-shine,
.product-card:hover .card-shine,
.article:hover .card-shine {
	opacity: 1;
	transform: translateX(80%)
}

.service-card,
.product-card,
.work-card,
.article {
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease
}

.service-card:hover {
	transform: translateY(-10px) scale(1.012);
	box-shadow: 0 28px 60px rgba(52, 68, 125, .14)
}

.product-card:hover,
.article:hover {
	transform: translateY(-9px) scale(1.008);
	box-shadow: 0 28px 60px rgba(52, 68, 125, .14)
}

.work-card:hover {
	transform: translateY(-7px);
	box-shadow: 0 28px 60px rgba(52, 68, 125, .13)
}

.service-icon {
	transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s
}

.service-card:hover .service-icon {
	transform: rotate(-8deg) scale(1.13);
	box-shadow: 0 10px 25px rgba(76, 91, 224, .13)
}

.resource {
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
}

.resource:hover {
	transform: translateX(7px) translateY(-2px);
	box-shadow: 0 18px 38px rgba(52, 68, 125, .11);
	border-color: #dbe1f4
}

.resource>span {
	transition: transform .35s ease
}

.resource:hover>span {
	transform: rotate(8deg) scale(1.08)
}

.product-cover i {
	animation: coverFloat 8s ease-in-out infinite
}

@keyframes coverFloat {
	50% {
		transform: translate(-16px, -18px) rotate(5deg)
	}
}

.orb-1 {
	animation: float 5s ease-in-out infinite, orbGlow 3s ease-in-out infinite
}

.orb-2 {
	animation: float 5s ease-in-out infinite, orbGlow 4s ease-in-out infinite reverse
}

@keyframes orbGlow {
	50% {
		box-shadow: 0 0 28px rgba(105, 98, 241, .42)
	}
}

.hero-copy .eyebrow {
	animation: eyebrowIn .9s both
}

@keyframes eyebrowIn {
	from {
		opacity: 0;
		transform: translateY(10px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.hero h1 {
	animation: heroTextIn 1s .08s both
}

.hero-lead {
	animation: heroTextIn 1s .18s both
}

.hero-buttons {
	animation: heroTextIn 1s .27s both
}

.stats {
	animation: heroTextIn 1s .36s both
}

@keyframes heroTextIn {
	from {
		opacity: 0;
		transform: translateY(22px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.dashboard {
	animation: dashboardIn 1s .18s both, dashboardFloat 7s 1.4s ease-in-out infinite
}

@keyframes dashboardIn {
	from {
		opacity: 0;
		transform: translateY(35px) scale(.96)
	}

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

@keyframes dashboardFloat {
	50% {
		translate: 0 -7px
	}
}

.dashboard:hover {
	box-shadow: 0 42px 110px rgba(61, 72, 137, .22)
}

.ring {
	animation: ringPulse 2.6s ease-in-out infinite
}

@keyframes ringPulse {
	50% {
		box-shadow: 0 0 0 7px rgba(113, 60, 240, .04)
	}
}

.pulse-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	background: #10b981;
	border-radius: 50%;
	margin-right: 5px;
	vertical-align: 1px;
	box-shadow: 0 0 0 0 rgba(16, 185, 129, .55);
	animation: pulseDot 1.7s infinite
}

@keyframes pulseDot {
	70% {
		box-shadow: 0 0 0 7px rgba(16, 185, 129, 0)
	}

	100% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0)
	}
}

.live-stream {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 19px;
	background: #f8faff;
	border-top: 1px dashed #e4e8f2;
	color: #7b86a0;
	font-size: 8px
}

.live-stream .stream-label {
	font-weight: 850;
	letter-spacing: .1em;
	color: #5c67d5
}

.live-stream #build-message {
	margin-right: auto
}

.live-stream #build-status {
	padding: 4px 7px;
	border-radius: 999px;
	background: #eafaf4;
	color: #0a9a6d;
	font-size: 7px
}

.tech-marquee {
	overflow: hidden;
	border-block: 1px solid #e7ebf4;
	background: #fff;
	padding: 14px 0;
	white-space: nowrap
}

.marquee-track {
	display: inline-flex;
	align-items: center;
	gap: 25px;
	min-width: max-content;
	animation: marquee 28s linear infinite
}

.marquee-track span {
	font: 700 10px "Space Grotesk";
	color: #7a849b;
	letter-spacing: .12em
}

.marquee-track b {
	font-size: 9px;
	color: #7662eb
}

@keyframes marquee {
	to {
		transform: translateX(-50%)
	}
}

.tech-marquee:hover .marquee-track {
	animation-play-state: paused
}

.stats div {
	position: relative
}

.stats div:first-child strong {
	transition: color .25s
}

.stats div:hover strong {
	color: #5d55df
}

.footer-brand .brand-logo {
	transition: transform .35s ease
}

.footer-brand:hover .brand-logo {
	transform: rotate(-8deg) scale(1.08)
}

.nav-links a {
	position: relative
}

.nav-links a:after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -5px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #287df2, #713cf0);
	transition: right .25s
}

.nav-links a:hover:after,
.nav-links a.active:after {
	right: 0
}

.nav-links a.active {
	color: #4f56c9
}

@media(max-width:800px) {
	.dashboard {
		animation: dashboardIn 1s .18s both
	}

	.tech-marquee {
		margin-top: 20px
	}
}

@media(max-width:560px) {
	.typing-caret {
		width: 3px
	}

	.live-stream {
		font-size: 7px;
		padding: 9px 12px
	}

	.live-stream #build-message {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis
	}
}

@media(prefers-reduced-motion:reduce) {

	.dashboard,
	.button.primary,
	.marquee-track,
	.product-cover i,
	.ring,
	.pulse-dot,
	.hero-copy .eyebrow,
	.hero h1,
	.hero-lead,
	.hero-buttons,
	.stats {
		animation: none !important
	}

	.tech-marquee .marquee-track {
		transform: none
	}

	.typing-caret {
		animation: none
	}
}


/* =========================================================
   V4 READABILITY + LAYOUT CORRECTION
   ========================================================= */
.container {
	width: min(1180px, calc(100% - 48px));
	margin-inline: auto
}

.hero {
	padding: 72px 0 54px;
	min-height: auto;
	overflow: clip
}

.hero-grid {
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: 58px;
	align-items: center
}

.hero-copy {
	min-width: 0
}

.hero-visual {
	min-width: 0;
	width: 100%;
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible
}

.hero h1 {
	font-size: clamp(52px, 5.1vw, 74px);
	line-height: 1.01;
	max-width: 650px;
	overflow-wrap: normal
}

.hero-lead {
	font-size: 18px;
	line-height: 1.75;
	max-width: 590px;
	color: #64718f
}

.hero-buttons {
	margin-top: 32px
}

.button {
	min-height: 54px;
	padding-inline: 22px;
	font-size: 14px
}

.stats {
	margin-top: 42px;
	gap: 24px
}

.stats strong {
	font-size: 23px
}

.stats span {
	font-size: 12px;
	margin-top: 2px
}

.eyebrow {
	font-size: 12px;
	padding: 9px 14px;
	margin-bottom: 25px
}

.dashboard {
	width: min(100%, 520px);
	max-width: 520px;
	transform: none !important;
	transition: box-shadow .35s ease;
	animation: dashboardIn 1s .18s both, dashboardFloat 7s 1.4s ease-in-out infinite;
	will-change: translate
}

.dashboard:hover {
	transform: none !important;
	box-shadow: 0 38px 100px rgba(61, 72, 137, .17)
}

.dash-bar {
	font-size: 11px;
	padding: 16px 20px
}

.dash-body {
	padding: 28px;
	gap: 18px
}

.terminal {
	padding: 22px
}

.terminal-title {
	font-size: 11px
}

.code {
	font-size: 12px;
	line-height: 2.05
}

.analytics {
	padding: 20px
}

.analytics-head {
	font-size: 11px
}

.health {
	font-size: 10px
}

.ring {
	width: 112px;
	height: 112px
}

.ring span {
	font-size: 25px
}

.dash-footer {
	font-size: 11px;
	padding: 15px 20px
}

.live-stream {
	font-size: 10px;
	padding: 11px 20px
}

.live-stream #build-status {
	font-size: 9px
}

.trust {
	font-size: 12px;
	padding-top: 35px
}

.trust div {
	padding: 9px 14px
}

.section-head>p {
	font-size: 15px;
	line-height: 1.7
}

.section-head small,
.about-copy>small,
.contact-box>div>small {
	font-size: 11px
}

.service-card p {
	font-size: 14px;
	line-height: 1.65
}

.service-card h3 {
	font-size: 20px
}

.tags span {
	font-size: 11px
}

.work-content p {
	font-size: 14px;
	line-height: 1.65
}

.work-content small {
	font-size: 10px
}

.resource {
	font-size: 14px
}

.resource small {
	font-size: 12px
}

.article p {
	font-size: 14px;
	line-height: 1.65
}

/* Disable pointer-driven movement on the hero visual. It stays animated, but never jumps or clips. */
.hero-visual,
.dashboard {
	perspective: none
}

.contact-location span {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 0 0 14px 14px;
	animation: worldwidePop 1.5s ease-in-out infinite;
	transform-origin: center bottom;
	float: right;
	font-size: 12px;
}

@keyframes worldwidePop {

	0%,
	100% {
		transform: translateY(0);
		box-shadow: 0 0 0 rgba(255, 255, 255, 0);
	}

	30% {
		transform: translateY(-6px);
		box-shadow: 0 6px 18px rgba(255, 255, 255, 0.18);
	}

	50% {
		transform: translateY(0);
		box-shadow: 0 0 0 rgba(255, 255, 255, 0);
	}

	70% {
		transform: translateY(-3px);
	}
}

/* ------------------------------------------------------------------------------- */
/* =========================================================
   CONTACT POPUP
   ========================================================= */


/* ---------------------------------------------------------
   Hidden checkbox
   --------------------------------------------------------- */

.contact-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}


/* ---------------------------------------------------------
   Let's Talk Header Button
   --------------------------------------------------------- */

.lets-talk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 20px;
	background: #ffffff;
	color: #17213b;
	border: 1px solid #e3e7f2;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow:
		0 8px 25px rgba(49, 64, 100, 0.08);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.lets-talk-btn span {
	color: #7047ff;
	font-size: 17px;
	transition:
		transform 0.25s ease;
}

.lets-talk-btn:hover {
	transform: translateY(-2px);
	border-color: #d5d9eb;
	box-shadow:
		0 12px 30px rgba(49, 64, 100, 0.13);
}

.lets-talk-btn:hover span {
	transform: translate(3px, -3px);
}


/* ---------------------------------------------------------
   Overlay
   --------------------------------------------------------- */
.contact-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
	transition:
		opacity 0.35s ease,
		visibility 0.35s ease;
}

/* Background behind popup */

.contact-backdrop {
	position: absolute;

	inset: 0;

	background:
		rgba(12, 19, 42, 0.28);

	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);

	cursor: pointer;
}


/* ---------------------------------------------------------
   Bottom Contact Panel
   --------------------------------------------------------- */

.contact-panel {
	position: relative;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	background:
		linear-gradient(135deg,
			#ffffff 0%,
			#fafbff 55%,
			#f5f3ff 100%);
	border-top:
		1px solid rgba(255, 255, 255, 0.9);
	border-radius:
		30px 30px 0 0;
	box-shadow:
		0 -20px 70px rgba(35, 42, 76, 0.18);
	transform: translateY(100%);
	transition:
		transform 0.5s cubic-bezier(.22, .8, .25, 1);
}


/* ---------------------------------------------------------
   Open State
   --------------------------------------------------------- */

.contact-toggle:checked~.contact-overlay {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
}

.contact-toggle:checked~.contact-overlay .contact-panel {
	transform: translateY(0);
}


/* ---------------------------------------------------------
   Inner Content
   --------------------------------------------------------- */

.contact-panel-inner {
	width: min(1050px, calc(100% - 48px));

	margin: 0 auto;

	padding:
		42px 0 38px;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.contact-header {
	display: flex;

	align-items: flex-start;
	justify-content: space-between;

	gap: 30px;

	margin-bottom: 30px;
}


.contact-eyebrow {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	margin-bottom: 12px;

	font-size: 12px;
	font-weight: 700;

	color: #6250d8;

	letter-spacing: 0.01em;
}


.contact-dot {
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: #20b982;

	box-shadow:
		0 0 0 4px rgba(32, 185, 130, 0.10);

	animation: contactPulse 2s infinite;
}


@keyframes contactPulse {

	0%,
	100% {
		box-shadow:
			0 0 0 4px rgba(32, 185, 130, 0.10);
	}

	50% {
		box-shadow:
			0 0 0 7px rgba(32, 185, 130, 0.03);
	}
}


.contact-header h2 {
	margin: 0;

	color: #111a35;

	font-size: clamp(28px, 4vw, 42px);

	line-height: 1.1;

	letter-spacing: -0.035em;
}


.contact-header p {
	max-width: 620px;

	margin: 12px 0 0;

	color: #71809e;

	font-size: 15px;

	line-height: 1.7;
}


/* ---------------------------------------------------------
   Close Button
   --------------------------------------------------------- */

.contact-close {
	flex-shrink: 0;

	width: 42px;
	height: 42px;

	display: flex;

	align-items: center;
	justify-content: center;

	border-radius: 12px;

	background: #ffffff;

	border: 1px solid #e5e8f2;

	color: #5e6881;

	font-size: 26px;

	line-height: 1;

	cursor: pointer;

	transition:
		background 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.contact-close:hover {
	background: #f1efff;

	color: #6744e8;

	transform: rotate(5deg);
}


/* ---------------------------------------------------------
   Form
   --------------------------------------------------------- */

.contact-form {
	padding: 26px;

	background: rgba(255, 255, 255, 0.78);

	border: 1px solid rgba(222, 226, 240, 0.95);

	border-radius: 22px;

	box-shadow:
		0 15px 45px rgba(44, 54, 91, 0.07);
}


.contact-form-grid {
	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 18px;
}


.contact-field {
	display: flex;

	flex-direction: column;

	gap: 8px;

	margin-bottom: 18px;
}


.contact-field label {
	display: flex;

	align-items: center;

	gap: 7px;

	color: #27324d;

	font-size: 12px;

	font-weight: 700;
}


.contact-field label span {
	color: #9aa3b8;

	font-size: 10px;

	font-weight: 500;
}


/* ---------------------------------------------------------
   Inputs
   --------------------------------------------------------- */

.contact-field input,
.contact-field select,
.contact-field textarea {

	width: 100%;

	box-sizing: border-box;

	padding: 13px 15px;

	background: #ffffff;

	border: 1px solid #e1e5ef;

	border-radius: 12px;

	color: #17213b;

	font-family: inherit;

	font-size: 13px;

	outline: none;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
	color: #a3abc0;
}


.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {
	border-color: #cfd4e5;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {

	border-color: #7650ed;

	background: #ffffff;

	box-shadow:
		0 0 0 4px rgba(112, 71, 255, 0.09);
}


.contact-field textarea {
	resize: vertical;

	min-height: 110px;
}


/* ---------------------------------------------------------
   Form Footer
   --------------------------------------------------------- */

.contact-form-footer {

	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 20px;

	padding-top: 5px;
}


.contact-form-footer small {

	color: #8b94aa;

	font-size: 11px;

	line-height: 1.5;
}


/* ---------------------------------------------------------
   Submit Button
   --------------------------------------------------------- */

.contact-submit {

	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 12px;

	padding: 13px 21px;

	border: 0;

	border-radius: 12px;

	background:
		linear-gradient(135deg,
			#287cf5,
			#7040ee);

	color: #ffffff;

	font-family: inherit;

	font-size: 13px;

	font-weight: 700;

	cursor: pointer;

	box-shadow:
		0 10px 24px rgba(82, 70, 235, 0.22);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}


.contact-submit span {

	font-size: 17px;

	transition:
		transform 0.25s ease;
}


.contact-submit:hover {

	transform: translateY(-2px);

	box-shadow:
		0 14px 30px rgba(82, 70, 235, 0.30);
}


.contact-submit:hover span {
	transform: translateX(4px);
}


.contact-submit:active {
	transform: translateY(0);
}


/* ---------------------------------------------------------
   Floating Button
   --------------------------------------------------------- */

.contact-floating {

	position: fixed;

	right: 26px;
	bottom: 25px;

	z-index: 9998;

	display: flex;

	align-items: center;

	gap: 9px;

	padding: 11px 15px 11px 11px;

	background:
		linear-gradient(135deg,
			#287cf5,
			#7040ee);

	color: #ffffff;

	border: 1px solid rgba(255, 255, 255, 0.35);

	border-radius: 50px;

	box-shadow:
		0 12px 35px rgba(65, 60, 190, 0.28);

	cursor: pointer;

	font-size: 12px;

	font-weight: 700;

	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}


.contact-floating:hover {

	transform:
		translateY(-4px) scale(1.02);

	box-shadow:
		0 17px 40px rgba(65, 60, 190, 0.36);
}


/* Floating icon */

.floating-icon {

	width: 31px;
	height: 31px;

	display: flex;

	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background:
		rgba(255, 255, 255, 0.18);

	font-size: 14px;

	animation: floatingPulse 2.2s infinite;
}


@keyframes floatingPulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.12);
	}
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 700px) {

	.contact-panel {
		max-height: 94vh;

		border-radius:
			24px 24px 0 0;
	}


	.contact-panel-inner {

		width: min(100% - 28px,
				1050px);

		padding:
			30px 0 25px;
	}


	.contact-header {

		margin-bottom: 22px;
	}


	.contact-header h2 {

		font-size: 29px;
	}


	.contact-header p {

		font-size: 13px;
	}


	.contact-form {

		padding: 18px;

		border-radius: 18px;
	}


	.contact-form-grid {

		grid-template-columns: 1fr;

		gap: 0;
	}


	.contact-form-footer {

		align-items: flex-start;

		flex-direction: column;
	}


	.contact-submit {

		width: 100%;
	}


	.contact-floating {

		right: 16px;
		bottom: 16px;

		padding:
			10px 14px 10px 10px;
	}
}


/* Small mobile */

@media (max-width: 420px) {

	.contact-floating .floating-text {
		display: none;
	}

	.contact-floating {

		width: 48px;
		height: 48px;

		padding: 0;

		justify-content: center;
	}

	.floating-icon {

		width: 34px;
		height: 34px;
	}
}

.rocket-contact-btn {
	position: relative;

	display: inline-flex;
	align-items: center;
	gap: 9px;

	padding: 12px 18px;

	border-radius: 14px;

	background: linear-gradient(135deg,
			#287cf5,
			#7040ee);

	color: #fff;

	border: 1px solid rgba(255, 255, 255, 0.35);

	font-size: 13px;
	font-weight: 700;

	cursor: pointer;

	box-shadow:
		0 10px 25px rgba(74, 67, 220, 0.22);

	overflow: hidden;

	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}


/* Rocket */

.rocket-contact-btn .rocket {
	display: inline-block;

	font-size: 17px;

	transform: rotate(-8deg);

	animation: rocketFloat 1.8s ease-in-out infinite;
}


/* Rocket floating */

@keyframes rocketFloat {

	0%,
	100% {
		transform:
			translateY(0) rotate(-8deg);
	}

	50% {
		transform:
			translateY(-4px) rotate(-8deg);
	}
}


/* Exhaust glow */

.rocket-contact-btn::after {

	content: "";

	position: absolute;

	left: 19px;
	bottom: -7px;

	width: 8px;
	height: 14px;

	border-radius: 50%;

	background: rgba(255, 255, 255, 0.7);

	filter: blur(4px);

	opacity: 0.7;

	animation: rocketExhaust 0.6s ease-in-out infinite;
}


@keyframes rocketExhaust {

	0% {
		transform: scaleY(0.6);
		opacity: 0.3;
	}

	50% {
		transform: scaleY(1.2);
		opacity: 0.8;
	}

	100% {
		transform: scaleY(0.6);
		opacity: 0.3;
	}
}


/* Hover */

.rocket-contact-btn:hover {

	transform: translateY(-3px);

	box-shadow:
		0 15px 35px rgba(74, 67, 220, 0.35);
}


.rocket-contact-btn:hover .rocket {

	animation:
		rocketLaunch 0.7s ease forwards;
}


@keyframes rocketLaunch {

	0% {
		transform:
			translate(0, 0) rotate(-8deg);
	}

	50% {
		transform:
			translate(3px, -5px) rotate(-8deg);
	}

	100% {
		transform:
			translate(7px, -8px) rotate(-8deg);
	}
}


/* Shimmer */

.rocket-contact-btn::before {

	content: "";

	position: absolute;

	top: 0;
	left: -100%;

	width: 60%;
	height: 100%;

	background:
		linear-gradient(90deg,
			transparent,
			rgba(255, 255, 255, 0.22),
			transparent);

	transform: skewX(-20deg);

	animation: buttonShimmer 3s infinite;
}


@keyframes buttonShimmer {

	0% {
		left: -100%;
	}

	45%,
	100% {
		left: 150%;
	}
}

/* ------------------------------------------------------------------------------- */

@media(max-width:1100px) {
	.hero-grid {
		gap: 40px;
		grid-template-columns: minmax(0, 1fr) minmax(0, .95fr)
	}

	.hero h1 {
		font-size: clamp(48px, 5.3vw, 68px)
	}

	.hero-lead {
		font-size: 17px
	}
}

@media(max-width:900px) {
	.hero {
		padding-top: 58px;
		min-height: auto
	}

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

	.hero-copy {
		max-width: 760px
	}

	.hero h1 {
		max-width: 760px;
		font-size: clamp(50px, 8vw, 72px)
	}

	.hero-lead {
		max-width: 680px
	}

	.hero-visual {
		min-height: 460px
	}

	.dashboard {
		max-width: 600px
	}
}

@media(max-width:800px) {
	.container {
		width: min(calc(100% - 32px), 680px)
	}

	.hero h1 {
		font-size: clamp(44px, 10vw, 66px)
	}

	.hero-lead {
		font-size: 16px
	}

	.section-head>p {
		font-size: 14px
	}
}

@media(max-width:560px) {
	.container {
		width: calc(100% - 28px)
	}

	.hero {
		padding: 42px 0 35px
	}

	.eyebrow {
		font-size: 10px
	}

	.hero h1 {
		font-size: clamp(40px, 12.5vw, 54px);
		line-height: 1.03;
		letter-spacing: -.06em
	}

	.hero-lead {
		font-size: 15px;
		line-height: 1.7;
		margin-top: 20px
	}

	.hero-buttons {
		gap: 10px;
		margin-top: 25px
	}

	.button {
		width: 100%;
		font-size: 14px
	}

	.stats {
		gap: 11px;
		margin-top: 34px
	}

	.stats strong {
		font-size: 18px
	}

	.stats span {
		font-size: 10px
	}

	.stats>b {
		height: 27px
	}

	.hero-visual {
		min-height: 330px
	}

	.dashboard {
		max-width: 100%;
		border-radius: 22px
	}

	.dash-body {
		grid-template-columns: 1fr;
		padding: 18px
	}

	.analytics {
		display: none
	}

	.terminal {
		padding: 18px
	}

	.code {
		font-size: 11px
	}

	.dash-footer {
		font-size: 10px;
		padding: 13px 15px
	}

	.live-stream {
		font-size: 8px;
		padding: 9px 15px
	}

	.trust {
		font-size: 10px;
		padding-top: 25px
	}

	.trust div {
		padding: 8px 10px
	}
}