:root {
        	--blue: #22c7df;
        	--blue-dark: #087f9b;
        	--blue-deep: #075985;
        	--blue-soft: #e9fbff;
        	--cyan: #f4fdff;
        	--ink: #102a33;
        	--muted: #55707a;
        	--line: #d7eef3;
        	--white: #fff;
        	--shadow: 0 24px 70px rgba(8, 127, 155, .14);
        	--radius: 24px;
        }
        
        * {
        	box-sizing: border-box
        }
        
        html {
        	scroll-behavior: smooth
        }
        
        body {
        	margin: 0;
        	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        	color: var(--ink);
        	background: linear-gradient(180deg, #fff 0%, #f6fff9 100%);
        	line-height: 1.55
        }
        
        a {
        	text-decoration: none;
        	color: inherit
        }
        
        .wrap {
        	width: min(1160px, calc(100% - 36px));
        	margin: auto
        }
        
        .menu {
        	display: flex;
        	align-items: center;
        	gap: 22px;
        	font-weight: 700;
        	color: #26352c
        }
        
        .menu a {
        	opacity: .86
        }
        
        .menu a:hover {
        	color: var(--blue);
        	opacity: 1
        }
        
        .dropdown {
        	position: relative
        }
        
        .dropdown>span {
        	cursor: default
        }
        
        .dropdown-content {
        	display: none;
        	position: absolute;
        	top: 34px;
        	left: 0;
        	min-width: 260px;
        	background: #fff;
        	border: 1px solid var(--line);
        	border-radius: 18px;
        	box-shadow: var(--shadow);
        	padding: 10px
        }
        
        .dropdown:hover .dropdown-content {
        	display: grid;
        	gap: 4px
        }
        
        .dropdown-content a {
        	padding: 11px 12px;
        	border-radius: 12px
        }
        
        .dropdown-content a:hover {
        	background: var(--blue-soft)
        }
        
        .btn {
        	display: inline-flex;
        	align-items: center;
        	justify-content: center;
        	gap: 8px;
        	padding: 13px 18px;
        	border-radius: 999px;
        	font-weight: 850;
        	border: 1px solid transparent;
        	transition: .18s ease;
        	white-space: nowrap
        }
        
        .btn-primary {
        	background: var(--blue);
        	color: #fff;
        	box-shadow: 0 15px 35px rgba(34, 199, 223, .28)
        }
        
        .btn-primary:hover {
        	background: var(--blue-dark);
        	transform: translateY(-1px)
        }
        
        .btn-ghost {
        	border-color: var(--line);
        	background: #fff;
        	color: var(--blue-dark)
        }
        
        .hero {
        	padding: 82px 0 54px;
        	position: relative;
        	overflow: hidden
        }
        
        .hero:before {
        	content: "";
        	position: absolute;
        	right: -160px;
        	top: -180px;
        	width: 520px;
        	height: 520px;
        	background: radial-gradient(circle, #c8f7ff 0%, rgba(200, 247, 214, 0) 68%);
        	z-index: -1
        }
        
        .hero-grid {
        	display: grid;
        	grid-template-columns: 1.05fr .95fr;
        	gap: 52px;
        	align-items: center
        }
        
        .eyebrow {
        	display: inline-flex;
        	gap: 8px;
        	align-items: center;
        	padding: 8px 13px;
        	background: var(--blue-soft);
        	color: var(--blue-dark);
        	border: 1px solid #cceff6;
        	border-radius: 999px;
        	font-weight: 850;
        	font-size: .92rem
        }
        
        .hero h1 {
        	font-size: clamp(2.35rem, 5vw, 4.9rem);
        	line-height: .98;
        	margin: 18px 0 18px;
        	letter-spacing: -.055em
        }
        
        .hero p {
        	font-size: 1.18rem;
        	color: var(--muted);
        	max-width: 650px
        }
        
        .hero-actions {
        	display: flex;
        	gap: 12px;
        	flex-wrap: wrap;
        	margin: 28px 0
        }
        
        .trust {
        	display: grid;
        	grid-template-columns: repeat(3, 1fr);
        	gap: 12px;
        	margin-top: 26px
        }
        
        .trust div {
        	background: #fff;
        	border: 1px solid var(--line);
        	border-radius: 18px;
        	padding: 14px;
        	font-weight: 850
        }
        
        .trust span {
        	display: block;
        	color: var(--blue);
        	font-size: 1.45rem
        }
        
        .mockup {
        	background: #fff;
        	border: 1px solid var(--line);
        	border-radius: 32px;
        	box-shadow: var(--shadow);
        	padding: 18px
        }
        
        .screen {
        	border-radius: 24px;
        	background: linear-gradient(180deg, #f7fff9, #fff);
        	border: 1px solid var(--line);
        	padding: 22px
        }
        
        .screen-head {
        	display: flex;
        	justify-content: space-between;
        	align-items: center;
        	margin-bottom: 18px
        }
        
        .pill {
        	padding: 7px 11px;
        	border-radius: 999px;
        	background: var(--blue-soft);
        	color: var(--blue-dark);
        	font-weight: 850;
        	font-size: .8rem
        }
        
        .clock {
        	font-size: 2.8rem;
        	font-weight: 950;
        	letter-spacing: -.04em
        }
        
        .status {
        	color: var(--muted);
        	margin-bottom: 20px
        }
        
        .check-buttons {
        	display: grid;
        	grid-template-columns: 1fr 1fr;
        	gap: 12px
        }
        
        .check {
        	border-radius: 20px;
        	padding: 22px 10px;
        	text-align: center;
        	font-weight: 950;
        	color: #fff
        }
        
        .in {
        	background: var(--blue)
        }
        
        .out {
        	background: var(--blue-deep)
        }
        
        .activity {
        	margin-top: 18px;
        	display: grid;
        	gap: 10px
        }
        
        .row {
        	display: flex;
        	justify-content: space-between;
        	gap: 12px;
        	background: #fff;
        	border: 1px solid var(--line);
        	border-radius: 16px;
        	padding: 12px 14px;
        	color: var(--muted)
        }
        
        section {
        	padding: 70px 0
        }
        
        .section-title {
        	text-align: center;
        	max-width: 760px;
        	margin: 0 auto 38px
        }
        
        .section-title h2 {
        	font-size: clamp(2rem, 3vw, 3.1rem);
        	line-height: 1.05;
        	margin: 0 0 12px;
        	letter-spacing: -.035em
        }
        
        .section-title p {
        	color: var(--muted);
        	font-size: 1.07rem
        }
        
        .cards {
        	display: grid;
        	grid-template-columns: repeat(3, 1fr);
        	gap: 18px
        }
        
        .card {
        	background: #fff;
        	border: 1px solid var(--line);
        	border-radius: var(--radius);
        	padding: 26px;
        	box-shadow: 0 12px 38px rgba(8, 127, 155, .07)
        }
        
        .icon {
        	width: 48px;
        	height: 48px;
        	border-radius: 16px;
        	background: var(--blue-soft);
        	display: grid;
        	place-items: center;
        	color: var(--blue-dark);
        	font-size: 1.4rem;
        	font-weight: 900
        }
        
        .card h3 {
        	margin: 18px 0 8px;
        	font-size: 1.25rem
        }
        
        .card p {
        	color: var(--muted);
        	margin: 0
        }
        
        .split {
        	display: grid;
        	grid-template-columns: .9fr 1.1fr;
        	gap: 34px;
        	align-items: center;
        	background: var(--ink);
        	color: #fff;
        	border-radius: 34px;
        	padding: 42px;
        	overflow: hidden
        }
        
        .split p {
        	color: #c9d9cf
        }
        
        .list {
        	display: grid;
        	gap: 12px;
        	margin-top: 20px
        }
        
        .list div {
        	background: rgba(255, 255, 255, .08);
        	border: 1px solid rgba(255, 255, 255, .12);
        	border-radius: 16px;
        	padding: 14px
        }
        
        .steps {
        	display: grid;
        	grid-template-columns: repeat(4, 1fr);
        	gap: 16px;
        	counter-reset: step
        }
        
        .step {
        	background: var(--cyan);
        	border: 1px solid var(--line);
        	border-radius: 24px;
        	padding: 22px;
        	position: relative
        }
        
        .step:before {
        	counter-increment: step;
        	content: counter(step);
        	width: 38px;
        	height: 38px;
        	border-radius: 14px;
        	background: var(--blue);
        	color: #fff;
        	display: grid;
        	place-items: center;
        	font-weight: 950;
        	margin-bottom: 16px
        }
        
        .pricing {
        	display: grid;
        	grid-template-columns: repeat(3, 1fr);
        	gap: 18px
        }
        
        .price {
        	background: #fff;
        	border: 1px solid var(--line);
        	border-radius: 28px;
        	padding: 28px;
        	box-shadow: var(--shadow)
        }
        
        .price.featured {
        	border: 2px solid var(--blue);
        	transform: translateY(-8px)
        }
        
        .price h3 {
        	font-size: 1.4rem;
        	margin: 0 0 6px
        }
        
        .amount {
        	font-size: 2.4rem;
        	font-weight: 950;
        	margin: 16px 0
        }
        
        .price ul {
        	padding-left: 20px;
        	color: var(--muted)
        }
        
        .faq {
        	display: grid;
        	grid-template-columns: 1fr 1fr;
        	gap: 16px
        }
        
        .faq details {
        	background: #fff;
        	border: 1px solid var(--line);
        	border-radius: 18px;
        	padding: 18px
        }
        
        .faq summary {
        	font-weight: 900;
        	cursor: pointer
        }
		
		.footer {
			background: #061821;
			color: #dcf8ff;
			padding: 44px 0;
			margin-top: 30px
		}

		.footer-grid {
			display: flex;
			justify-content: space-between;
			gap: 24px;
			flex-wrap: wrap
		}

		.footer .brand {
			margin: 0
		}

		.footer p,
		.legal {
			color: #a8d7e1
		}

		.legal {
			display: flex;
			gap: 16px;
			flex-wrap: wrap
		}

		.legal a:hover {
			color: #fff
		}
        
        @media(max-width:900px) {
        	.hero-grid,
        	.split {
        		grid-template-columns: 1fr
        	}
        	.cards,
        	.pricing,
        	.steps,
        	.faq {
        		grid-template-columns: 1fr
        	}
        	.trust {
        		grid-template-columns: 1fr
        	}
        	.hero {
        		padding-top: 46px
        	}
        	.price.featured {
        		transform: none
        	}
        }