/* RobIT company website - static, editable, no framework needed */
:root {
	--ink: #191a1e;
	--muted: #65666e;
	--red: #d50c21;
	--red-dark: #af0719;
	--line: #e9e9eb;
	--off: #f7f7f5;
	--white: #fff;
	--green: #238a61;
	--lime: #c9f33b;
	--warm: #f7f5f0;
	--radius: 22px;
	--shadow: 0 20px 70px rgba(21,23,30,.10)
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px
}

body {
	margin: 0;
	font-family: Inter,"Segoe UI",Arial,Helvetica,sans-serif;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased
}

	body.menu-open {
		overflow: hidden
	}

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

button {
	font: inherit
}

p {
	line-height: 1.7
}

img {
	max-width: 100%;
	height: auto
}

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

.section-space {
	padding: 110px 0
}

.skip-link {
	position: absolute;
	left: 12px;
	top: -100px;
	padding: 12px;
	background: white;
	z-index: 100
}

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255,255,255,.96);
	border-bottom: 1px solid #eee;
	backdrop-filter: blur(14px)
}

.header-inner {
	height: 82px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px
}

.brand img {
	display: block;
	width: 216px;
	max-height: 50px;
	object-fit: contain;
	object-position: left center
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-left: auto
}

	.main-nav a {
		font-size: 13px;
		font-weight: 650;
		white-space: nowrap;
		color: #34343a;
		transition: color .2s
	}

		.main-nav a.active, .main-nav a:hover {
			color: var(--red)
		}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 15px 23px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 750;
	white-space: nowrap;
	transition: transform .2s,background .2s,box-shadow .2s;
	border: 1px solid transparent
}

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

	.btn:focus-visible, .main-nav a:focus-visible, .menu-toggle:focus-visible {
		outline: 3px solid #e87784;
		outline-offset: 4px
	}

.btn-red {
	background: var(--red);
	color: white;
	box-shadow: 0 9px 21px rgba(213,12,33,.16)
}

	.btn-red:hover {
		background: var(--red-dark)
	}

.btn-outline {
	border-color: #d9d9dc;
	color: var(--ink);
	background: white
}

	.btn-outline:hover {
		border-color: #989a9d
	}

.btn-lg {
	padding: 17px 25px
}

.menu-toggle, .nav-mobile-cta {
	display: none !important
}
/* Hero */
.hero {
	overflow: hidden;
	position: relative;
	background: linear-gradient(120deg,#fbfbfa 0%,#f9f9f7 50%,#f0f0ef 100%)
}

.hero-grid {
	min-height: 585px;
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	align-items: center;
	gap: 30px
}

.hero-copy {
	padding: 65px 0 80px;
	position: relative;
	z-index: 2
}

.eyebrow, .section-kicker {
	font-size: 11px;
	font-weight: 830;
	letter-spacing: .15em;
	color: var(--red)
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 11px;
	color: #7c373e
}

.dot {
	width: 8px;
	height: 8px;
	background: var(--red);
	border-radius: 50%;
	flex-shrink: 0
}

.hero h1 {
	font-size: clamp(45px,4.95vw,76px);
	line-height: 1.09;
	letter-spacing: -.058em;
	font-weight: 860;
	margin: 22px 0 25px;
	max-width: 660px
}

	.hero h1 em {
		font-style: normal;
		color: var(--red);
		white-space: nowrap
	}

.hero-lead {
	font-size: 17px;
	max-width: 525px;
	color: #55575d;
	margin: 0
}

	.hero-lead strong {
		color: var(--ink)
	}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 33px
}

.hero-footnote {
	font-size: 12px;
	color: #727479;
	margin-top: 32px;
	display: flex;
	align-items: center;
	gap: 9px
}

.mini-check {
	color: var(--red);
	border: 1px solid #efc6ca;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: inline-grid;
	place-items: center
}

.hero-graphic {
	position: relative;
	height: 520px;
	align-self: end;
	min-width: 0
}

.graphic-grid {
	position: absolute;
	inset: 45px -90px 5px 0;
	background-image: radial-gradient(#c9c9ce 1px,transparent 1px);
	background-size: 27px 27px;
	opacity: .27;
	mask-image: radial-gradient(ellipse,#000 30%,transparent 75%)
}

.halo {
	position: absolute;
	border-radius: 50%;
	left: 50%;
	top: 49%;
	transform: translate(-50%,-50%)
}

.halo-one {
	width: 440px;
	height: 440px;
	background: #e8e8e8;
	border: 1px solid #ececee
}

.halo-two {
	width: 330px;
	height: 330px;
	border: 1px dashed rgba(156,154,157,.55);
	background: linear-gradient(140deg,#fff,rgba(255,255,255,.2))
}

.robot-base {
	position: absolute;
	width: 325px;
	height: 32px;
	border-radius: 50%;
	bottom: 61px;
	left: 50%;
	transform: translateX(-50%);
	background: #b0adb1;
	filter: blur(22px);
	opacity: .25
}

.hero-robot {
	position: absolute;
	z-index: 2;
	width: 330px;
	height: 330px;
	object-fit: contain;
	left: 50%;
	top: 46%;
	transform: translate(-50%,-50%);
	filter: drop-shadow(0 27px 17px rgba(0,0,0,.12));
	border-radius: 50%
}

.floating-card {
	position: absolute;
	z-index: 5;
	background: rgba(255,255,255,.96);
	box-shadow: 0 14px 45px rgba(39,35,39,.11);
	border: 1px solid #f2f2f2;
	padding: 14px 15px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 232px
}

	.floating-card span:nth-child(2) {
		display: flex;
		flex-direction: column;
		gap: 4px
	}

	.floating-card b {
		font-size: 12px
	}

	.floating-card small {
		font-size: 10px;
		color: #777
	}

.floating-top {
	top: 91px;
	right: -6px;
	transform: rotate(3deg)
}

.floating-bottom {
	bottom: 90px;
	left: -19px;
	transform: rotate(-3deg)
}

.card-icon {
	width: 31px;
	height: 31px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	flex-shrink: 0;
	font-size: 17px;
	font-weight: 900
}

.phone-icon {
	background: #fbe2e5;
	color: var(--red)
}

.spark-icon {
	background: #efeff1;
	color: #28282e
}

.check-circle {
	margin-left: auto;
	color: #2b8d62;
	font-weight: 800
}

.float-spark {
	position: absolute;
	color: var(--red);
	z-index: 3
}

.float-spark-one {
	font-size: 30px;
	top: 65px;
	left: 35px
}

.float-spark-two {
	font-size: 26px;
	bottom: 120px;
	right: 6px
}

.graphic-stamp {
	position: absolute;
	right: 0;
	bottom: 45px;
	font-size: 9px;
	letter-spacing: .06em;
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	transform: rotate(-10deg);
	color: #b3b3b5
}

	.graphic-stamp strong {
		font-size: 20px;
		letter-spacing: -.02em;
		color: #aaaab0
	}
/* Value strip */
.value-strip {
	border-bottom: 1px solid var(--line);
	background: #fff
}

.value-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr)
}

.value-item {
	padding: 28px 27px;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 108px
}

	.value-item:not(:last-child) {
		border-right: 1px solid var(--line)
	}

	.value-item:first-child {
		padding-left: 0
	}

.value-icon {
	flex: 0 0 43px;
	width: 43px;
	height: 43px;
	display: grid;
	place-items: center;
	background: #f4f4f5;
	border-radius: 50%;
	font-size: 24px;
	font-weight: 600
}

.value-item p {
	font-size: 13px;
	line-height: 1.45;
	margin: 0;
	color: #54565d
}

.value-item b {
	display: block;
	color: #222328
}
/* HeloMi area */
.helomi-section {
	background: var(--warm);
	overflow: hidden
}

.helomi-grid {
	display: grid;
	grid-template-columns: 1fr .94fr;
	align-items: center;
	gap: 65px
}

.green-kicker {
	color: var(--green)
}

.helomi-wordmark {
	width: 245px;
	height: auto;
	margin-top: 12px;
	margin-bottom: 13px;
	display: block;
	mix-blend-mode: multiply
}

.helomi-copy h2, .section-heading h2, .how-layout h2, .upcoming-layout h2, .about-layout h2, .contact-inner h2 {
	letter-spacing: -.045em;
	font-weight: 815;
	line-height: 1.15
}

.helomi-copy h2 {
	font-size: clamp(35px,3.4vw,49px);
	margin: 13px 0 24px
}

	.helomi-copy h2 span {
		color: var(--green)
	}

.helomi-copy > p {
	font-size: 16px;
	color: #5d5e60;
	max-width: 520px
}

.feature-list {
	padding: 0;
	list-style: none;
	margin: 22px 0 31px;
	display: grid;
	gap: 15px
}

	.feature-list li {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		color: #33393a;
		font-size: 14px
	}

		.feature-list li span {
			flex: 0 0 24px;
			width: 24px;
			height: 24px;
			display: grid;
			place-items: center;
			border-radius: 50%;
			background: #dbefe4;
			color: var(--green);
			font-weight: 800
		}

.product-actions {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap
}

.btn-green {
	background: var(--green);
	color: white
}

	.btn-green:hover {
		background: #186d49
	}

.product-status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: #5d6960
}

	.product-status span {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #82c6a0
	}

.helomi-visual {
	position: relative;
	min-height: 425px;
	display: grid;
	place-items: center
}

.helomi-soft-orb {
	width: 430px;
	height: 430px;
	border-radius: 50%;
	position: absolute;
	background: linear-gradient(145deg,#e0eee2,#e5eacb 63%,transparent);
	transform: translate(30px,5px)
}

.helomi-phone-card {
	position: relative;
	z-index: 2;
	width: min(390px,95%);
	border-radius: 24px;
	background: linear-gradient(160deg,#212629,#171b1f);
	color: white;
	box-shadow: 0 27px 65px rgba(12,45,31,.2);
	overflow: hidden;
	transform: rotate(-3deg)
}

.phone-top {
	padding: 21px 22px;
	font-size: 11px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #c7d2cb;
	border-bottom: 1px solid #343b3b
}

.phone-indicator {
	width: 9px;
	height: 9px;
	background: var(--lime);
	border-radius: 50%
}

.phone-status {
	margin-left: auto;
	color: var(--lime);
	font-size: 10px
}

.phone-main {
	text-align: center;
	padding: 28px 15px 17px;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 10px
}

.caller-avatar {
	width: 53px;
	height: 53px;
	border-radius: 50%;
	background: var(--lime);
	display: grid;
	place-items: center;
	font-size: 24px;
	color: #191b1f
}

.phone-main small {
	font-size: 10px;
	letter-spacing: .13em;
	color: #b8c0bc
}

.phone-main strong {
	font-size: 20px;
	letter-spacing: -.025em
}

.phone-main > span:last-child {
	font-size: 12px;
	color: #e4eee7
}

.sound-bars {
	height: 55px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px
}

	.sound-bars i {
		width: 5px;
		height: 13px;
		border-radius: 5px;
		background: var(--lime);
		opacity: .85;
		animation: wave 1.5s ease-in-out infinite alternate
	}

		.sound-bars i:nth-child(2n) {
			height: 31px;
			animation-delay: .4s
		}

		.sound-bars i:nth-child(3n) {
			height: 43px;
			animation-delay: .1s
		}

		.sound-bars i:nth-child(5n) {
			height: 22px;
			animation-delay: .25s
		}

@keyframes wave {
	to {
		height: 7px;
		opacity: .4
	}
}

.phone-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #333c3a;
	margin: 12px 22px 0;
	padding: 19px 0;
	color: #adb7b0;
	font-size: 10px
}

	.phone-bottom b {
		color: var(--lime)
	}

.appointment-toast {
	z-index: 3;
	position: absolute;
	bottom: 15px;
	right: -30px;
	display: flex;
	gap: 11px;
	align-items: center;
	background: #fff;
	padding: 13px 17px;
	border-radius: 12px;
	box-shadow: 0 17px 45px rgba(0,0,0,.11);
	transform: rotate(3deg)
}

.toast-badge {
	display: grid;
	place-items: center;
	background: #d9f3e6;
	border-radius: 50%;
	color: var(--green);
	width: 30px;
	height: 30px;
	font-weight: 850
}

.appointment-toast div {
	display: flex;
	flex-direction: column;
	gap: 3px
}

.appointment-toast b {
	font-size: 11px
}

.appointment-toast small {
	font-size: 10px;
	color: #858585
}

.helomi-decoration {
	position: absolute;
	color: var(--green);
	font-size: 45px;
	left: -20px;
	bottom: 30px
}
/* Services */
.services-section {
	background: #fff
}

.section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 70px;
	margin-bottom: 38px
}

	.section-heading h2, .how-layout h2, .upcoming-layout h2 {
		font-size: clamp(32px,3.65vw,50px);
		margin: 16px 0 0
	}

		.section-heading h2 span, .how-layout h2 span, .upcoming-layout h2 span {
			color: #909097
		}

	.section-heading > p {
		max-width: 337px;
		margin: 0 0 6px;
		color: var(--muted);
		font-size: 14px
	}

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

.service-card {
	padding: 25px 23px 24px;
	border-radius: 18px;
	border: 1px solid #ededed;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 330px;
	transition: transform .2s,box-shadow .2s,border-color .2s
}

	.service-card:hover {
		transform: translateY(-5px);
		border-color: #dadada;
		box-shadow: 0 15px 30px rgba(0,0,0,.045)
	}

.service-icon {
	border-radius: 13px;
	width: 53px;
	height: 53px;
	background: #f2f2f3;
	display: grid;
	place-items: center;
	margin-bottom: 24px
}

	.service-icon svg {
		width: 30px;
		height: 30px;
		stroke: #24252b;
		stroke-width: 2.4;
		stroke-linecap: round;
		stroke-linejoin: round;
		fill: none
	}

.service-card .service-no {
	color: var(--red);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em
}

.service-card h3 {
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -.025em;
	margin: 10px 0 8px;
	min-height: 50px
}

.service-card p {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.7;
	margin: 0 0 25px
}

.service-tag {
	margin-top: auto;
	font-size: 10px;
	font-weight: 750;
	color: #a2414c;
	background: #fdf0f1;
	border-radius: 9px;
	padding: 9px 10px
}
/* How */
.how-section {
	padding: 77px 0;
	background: #f7f7f8;
	border-top: 1px solid #f1f1f1;
	border-bottom: 1px solid #f1f1f1
}

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

	.how-layout h2 {
		font-size: clamp(29px,3vw,39px)
	}

	.how-layout p {
		max-width: 450px;
		color: var(--muted);
		font-size: 14px
	}

.workflow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0
}

.flow-node {
	width: 135px;
	min-height: 135px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #fff;
	border: 1px solid #e9e9e9;
	border-radius: 15px;
	padding: 16px 9px;
	box-shadow: 0 8px 20px rgba(0,0,0,.025)
}

	.flow-node > span {
		font-size: 11px;
		font-weight: 850;
		color: var(--red)
	}

	.flow-node b {
		font-size: 12px;
		margin: 8px 0 6px;
		line-height: 1.35
	}

	.flow-node small {
		font-size: 10px;
		line-height: 1.4;
		color: var(--muted)
	}

.flow-featured {
	background: #26272b;
	border-color: #26272b;
	color: white;
	transform: translateY(-13px)
}

	.flow-featured small {
		color: #bcbec3
	}

	.flow-featured > span {
		color: #ff7b85
	}

.flow-link {
	flex: 1;
	min-width: 16px;
	height: 2px;
	background: var(--red);
	position: relative
}

	.flow-link i {
		position: absolute;
		right: 0;
		top: -3.5px;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--red);
		border-top: 2px solid var(--red);
		transform: rotate(45deg)
	}
/* Roadmap */
.upcoming-section {
	background: white
}

.upcoming-layout {
	display: grid;
	grid-template-columns: 1fr .92fr;
	gap: 100px;
	align-items: center
}

	.upcoming-layout > div:first-child > p {
		max-width: 525px;
		font-size: 15px;
		color: var(--muted)
	}

.roadmap-badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 25px
}

	.roadmap-badges span {
		font-size: 11px;
		border: 1px solid #e6e6e8;
		border-radius: 100px;
		padding: 9px 13px;
		color: #44454a
	}

.in-development {
	display: inline-block;
	margin-top: 24px;
	color: #8f6368;
	font-size: 11px;
	font-weight: 650
}

.secretary-card {
	box-shadow: 0 25px 90px rgba(0,0,0,.08);
	border: 1px solid #efefef;
	border-radius: 20px;
	overflow: hidden;
	transform: rotate(2deg)
}

.secretary-card-head {
	background: #232428;
	color: #fff;
	padding: 20px 22px;
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	letter-spacing: .08em;
	font-weight: 700
}

.head-dots {
	letter-spacing: .3em;
	color: #ff6876
}

.message-row {
	padding: 19px 18px;
	border-bottom: 1px solid #ededed;
	display: flex;
	align-items: center;
	gap: 13px
}

.message-avatar {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #fbe5e8;
	color: var(--red);
	display: grid;
	place-items: center;
	font-size: 17px;
	font-weight: 800
}

	.message-avatar.green {
		background: #dcefde;
		color: var(--green)
	}

	.message-avatar.muted {
		background: #ededf0;
		color: #4b4c52
	}

.message-row > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0
}

.message-row b {
	font-size: 12px
}

.message-row small {
	font-size: 10px;
	color: #999
}

.pill {
	font-size: 9px;
	padding: 7px 9px;
	border-radius: 20px;
	white-space: nowrap
}

	.pill.pending {
		background: #fff4e5;
		color: #96601f
	}

	.pill.done {
		background: #e2f6e9;
		color: #187948
	}

.secretary-card-footer {
	font-size: 10px;
	text-align: center;
	padding: 20px;
	background: #fbfbfb;
	color: #8d8d92
}
/* About */
.about-section {
	background: #f8f8f8;
	padding: 85px 0
}

.about-layout {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 75px;
	align-items: center;
	max-width: 970px
}

.about-icon {
	width: 235px;
	height: 235px;
	background: #fff;
	border: 1px solid #efefef;
	border-radius: 40px;
	display: grid;
	place-items: center;
	box-shadow: 0 18px 38px rgba(0,0,0,.035);
	transform: rotate(-7deg)
}

	.about-icon img {
		width: 160px;
		transform: rotate(7deg)
	}

.about-layout h2 {
	font-size: clamp(29px,3.3vw,45px);
	margin: 15px 0
}

.about-layout p {
	font-size: 15px;
	color: var(--muted)
}

.about-layout .tech-note {
	font-size: 12px;
	margin-top: 25px;
	padding-top: 20px;
	border-top: 1px solid #e2e2e2;
	color: #75767b
}
/* Contact */
.contact-section {
	background: #1e1f23;
	color: #fff;
	padding: 80px 0
}

.contact-inner {
	display: grid;
	grid-template-columns: 1.3fr .7fr;
	align-items: center;
	gap: 100px
}

.light-kicker {
	color: #fa757e
}

.contact-inner h2 {
	font-size: clamp(32px,3.65vw,51px);
	margin: 15px 0 17px;
	max-width: 700px
}

.contact-inner p {
	font-size: 14px;
	color: #bcbcbf;
	max-width: 550px
}

.contact-box {
	padding: 24px;
	border: 1px solid #44464c;
	background: #282a2f;
	border-radius: 18px
}

.contact-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--red);
	font-size: 22px;
	margin-bottom: 20px
}

.contact-box > b {
	font-size: 17px
}

.contact-box p {
	font-size: 12px
}

.contact-form { display: grid; gap: 16px; margin-top: 20px; }
.contact-field { display: grid; gap: 7px; min-width: 0; }
.contact-field label { font-size: 13px; font-weight: 600; }
.contact-field input, .contact-field textarea {
	width: 100%; box-sizing: border-box; border: 1px solid #62656e; border-radius: 8px;
	padding: 11px 12px; font: inherit; font-size: 14px; background: #1e1f23; color: #fff;
}
.contact-field textarea { resize: vertical; min-height: 130px; }
.contact-field input:focus, .contact-field textarea:focus { outline: 2px solid #ff9ba2; outline-offset: 2px; }
.contact-field .input-validation-error { border-color: #ff9ba2; }
.contact-feedback { padding: 12px; border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }
.contact-feedback--success { margin-top: 16px; color: #dcfce7; background: #173e2b; }
.contact-feedback--error { color: #ffe0e3; background: #57212a; }
.contact-feedback ul { margin: 0; padding-left: 18px; }
.contact-feedback.validation-summary-valid { display: none; }
.contact-honeypot { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.contact-form button { width: 100%; justify-content: center; }
.contact-form button:disabled { opacity: .65; cursor: wait; }

.contact-placeholder {
	display: block;
	border-top: 1px solid #4b4d52;
	margin-top: 17px;
	padding-top: 15px;
	font-size: 11px;
	color: #ff9ba2
}

.site-footer {
	background: white;
	border-top: 1px solid #eee
}

.footer-inner {
	min-height: 110px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px
}

	.footer-inner a {
		max-width: 170px
	}

	.footer-inner img {
		width: 170px;
		height: auto;
		display: block
	}

	.footer-inner > span {
		font-size: 12px;
		color: #777
	}

	.footer-inner small {
		font-size: 11px;
		color: #999
	}

@media(max-width:1150px) {
	.main-nav {
		gap: 18px
	}

		.main-nav a {
			font-size: 12px
		}

	.header-cta {
		padding: 13px 17px
	}

	.hero-graphic {
		transform: scale(.91);
		transform-origin: center bottom
	}

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

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

	.service-card {
		min-height: 280px
	}

	.helomi-grid {
		gap: 28px
	}

	.upcoming-layout {
		gap: 60px
	}

	.how-layout {
		gap: 25px
	}
}

@media(max-width:850px) {
	.container {
		width: min(100% - 44px,720px)
	}

	.site-header {
		position: sticky
	}

	.header-inner {
		height: 72px
	}

	.brand img {
		width: 185px
	}

	.header-cta {
		margin-left: auto
	}

	.menu-toggle {
		display: flex !important;
		flex-direction: column;
		gap: 5px;
		border: 0;
		background: none;
		padding: 10px;
		z-index: 50
	}

		.menu-toggle span {
			display: block;
			width: 24px;
			height: 2px;
			background: #18191d;
			transition: transform .2s
		}

		.menu-toggle[aria-expanded=true] span:first-child {
			transform: translateY(7px) rotate(45deg)
		}

		.menu-toggle[aria-expanded=true] span:nth-child(2) {
			opacity: 0
		}

		.menu-toggle[aria-expanded=true] span:last-child {
			transform: translateY(-7px) rotate(-45deg)
		}

	.main-nav {
		display: none;
		position: absolute;
		top: 72px;
		left: 0;
		right: 0;
		background: #fff;
		padding: 22px;
		border-bottom: 1px solid #eee;
		box-shadow: 0 18px 40px rgba(0,0,0,.1);
		flex-direction: column;
		align-items: stretch;
		margin: 0;
		gap: 0
	}

		.main-nav.is-open {
			display: flex
		}

		.main-nav a {
			padding: 14px 5px;
			font-size: 15px;
			border-bottom: 1px solid #f4f4f4
		}

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

	.hero-copy {
		padding: 80px 0 15px
	}

	.hero h1 {
		font-size: clamp(49px,7vw,70px)
	}

	.hero-graphic {
		height: 445px;
		transform: none;
		max-width: 570px;
		width: 100%;
		justify-self: center
	}

	.halo-one {
		width: 385px;
		height: 385px
	}

	.halo-two {
		width: 295px;
		height: 295px
	}

	.hero-robot {
		width: 295px;
		height: 295px
	}

	.floating-top {
		right: 0
	}

	.floating-bottom {
		left: 0
	}

	.graphic-stamp {
		right: 5px;
		bottom: 25px
	}

	.value-item {
		padding: 20px 14px
	}

		.value-item p {
			font-size: 11px
		}

	.helomi-grid, .upcoming-layout, .contact-inner, .how-layout {
		grid-template-columns: 1fr
	}

	.helomi-grid {
		gap: 45px
	}

	.helomi-visual {
		max-width: 540px;
		width: 100%;
		justify-self: center
	}

	.section-space {
		padding: 82px 0
	}

	.section-heading {
		display: block
	}

		.section-heading > p {
			margin-top: 20px
		}

	.workflow {
		max-width: 575px
	}

	.upcoming-layout {
		gap: 43px
	}

	.secretary-card {
		max-width: 560px;
		transform: none
	}

	.about-layout {
		gap: 25px;
		grid-template-columns: 160px 1fr
	}

	.about-icon {
		width: 150px;
		height: 150px;
		border-radius: 30px
	}

		.about-icon img {
			width: 125px
		}

	.contact-inner {
		gap: 30px
	}

	.contact-box {
		max-width: 450px
	}
}

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

	.header-cta {
		display: none
	}

	.nav-mobile-cta {
		display: block !important
	}

	.brand img {
		width: 176px
	}

	.eyebrow {
		font-size: 9px;
		letter-spacing: .10em
	}

	.hero-copy {
		padding: 56px 0 3px
	}

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

		.hero h1 em {
			white-space: normal
		}

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

	.hero-actions {
		flex-direction: column;
		align-items: stretch
	}

		.hero-actions .btn {
			width: 100%;
			font-size: 12px
		}

	.hero-footnote {
		font-size: 11px
	}

	.hero-graphic {
		height: 350px
	}

	.halo-one {
		width: 320px;
		height: 320px
	}

	.halo-two {
		width: 248px;
		height: 248px
	}

	.hero-robot {
		width: 245px;
		height: 245px
	}

	.floating-card {
		padding: 9px;
		min-width: 0
	}

		.floating-card b {
			font-size: 10px
		}

		.floating-card small {
			font-size: 9px
		}

		.floating-card .card-icon {
			width: 24px;
			height: 24px;
			font-size: 13px
		}

	.floating-top {
		top: 33px;
		right: -5px
	}

	.floating-bottom {
		bottom: 44px;
		left: -3px
	}

	.graphic-stamp, .float-spark-one {
		display: none
	}

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

	.value-item {
		min-height: 72px;
		padding: 13px 0 !important;
		border: 0 !important;
		border-bottom: 1px solid #eee !important
	}

		.value-item:last-child {
			border-bottom: 0 !important
		}

		.value-item b {
			display: inline
		}

		.value-item p {
			font-size: 13px
		}

	.helomi-wordmark {
		width: 190px
	}

	.helomi-copy h2 {
		font-size: 34px
	}

	.helomi-copy > p {
		font-size: 14px
	}

	.helomi-visual {
		min-height: 385px
	}

	.helomi-soft-orb {
		width: 320px;
		height: 320px
	}

	.helomi-phone-card {
		width: 93%
	}

	.appointment-toast {
		right: 0;
		bottom: 5px
	}

	.product-actions {
		gap: 15px
	}

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

	.service-card {
		min-height: 0;
		padding: 23px
	}

		.service-card h3 {
			min-height: auto
		}

	.service-tag {
		margin-top: 7px
	}

	.section-heading h2, .how-layout h2, .upcoming-layout h2 {
		font-size: 34px
	}

	.workflow {
		gap: 0
	}

	.flow-node {
		width: 30%;
		min-height: 110px;
		padding: 8px 4px
	}

		.flow-node b {
			font-size: 10px
		}

		.flow-node small {
			font-size: 9px
		}

	.flow-link {
		min-width: 8px
	}

	.message-row {
		padding: 16px 9px;
		gap: 7px
	}

		.message-row b {
			font-size: 10px
		}

		.message-row small {
			font-size: 9px
		}

	.pill {
		font-size: 8px;
		padding: 6px
	}

	.about-layout {
		grid-template-columns: 1fr
	}

	.about-icon {
		width: 112px;
		height: 112px;
		border-radius: 25px
	}

		.about-icon img {
			width: 96px
		}

	.about-layout h2 {
		font-size: 35px
	}

	.contact-section {
		padding: 65px 0
	}

	.contact-inner h2 {
		font-size: 36px
	}

	.footer-inner {
		padding: 30px 0;
		flex-wrap: wrap
	}

		.footer-inner > span {
			display: none
		}

		.footer-inner small {
			width: 100%
		}
}

@media(prefers-reduced-motion:reduce) {
	*, *:before, *:after {
		scroll-behavior: auto !important;
		animation: none !important;
		transition: none !important
	}
}