    /* ©¤©¤ Reset & Tokens ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    *,
    *::before,
    *::after {
    	box-sizing: border-box;
    	margin: 0;
    	padding: 0;
    }

    html {
    	scroll-behavior: smooth;
    	-webkit-text-size-adjust: 100%;
    }

    :root {
    	--green: #1a7a4a;
    	--green-light: #22a862;
    	--green-bg: #e8f5ee;
    	--ink: #0f2318;
    	--muted: #5a7060;
    	--line: #d4e4da;
    	--surface: #ffffff;
    	--soft: #f4faf6;
    	--gold: #e8a020;
    	--red: #c0392b;
    	--shadow-sm: 0 2px 12px rgba(15, 35, 24, .08);
    	--shadow-md: 0 8px 32px rgba(15, 35, 24, .12);
    	--r: 12px;
    }

    body {
    	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    	color: var(--ink);
    	background: #fafcfb;
    	line-height: 1.65;
    	font-size: 16px;
    }

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

    img {
    	display: block;
    	max-width: 100%;
    }

    /* ©¤©¤ Typography ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    h1 {
    	font-size: clamp(28px, 6vw, 52px);
    	line-height: 1.1;
    	font-weight: 800;
    	letter-spacing: -.02em;
    }

    h2 {
    	font-size: clamp(22px, 4vw, 36px);
    	line-height: 1.18;
    	font-weight: 700;
    	letter-spacing: -.01em;
    }

    h3 {
    	font-size: 18px;
    	font-weight: 700;
    	line-height: 1.3;
    }

    .eyebrow {
    	font-size: 12px;
    	font-weight: 800;
    	text-transform: uppercase;
    	letter-spacing: .08em;
    	color: var(--green-light);
    }

    /* ©¤©¤ Layout helpers ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    .wrap {
    	max-width: 1100px;
    	margin: 0 auto;
    	padding: 0 clamp(16px, 4vw, 56px);
    }

    .section {
    	padding: clamp(52px, 8vw, 88px) 0;
    }

    /* ©¤©¤ Header ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    .header {
    	position: sticky;
    	top: 0;
    	z-index: 100;
    	background: rgba(250, 252, 251, .94);
    	backdrop-filter: blur(14px);
    	border-bottom: 1px solid var(--line);
    }

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

    .logo {
    	display: flex;
    	align-items: center;
    	gap: 10px;
    }

    .logo-icon {
    	width: 38px;
    	height: 38px;
    	border-radius: 9px;
    	background: var(--green);
    	color: #fff;
    	display: grid;
    	place-items: center;
    	font-size: 18px;
    	font-weight: 900;
    	flex-shrink: 0;
    }

    .logo-text strong {
    	display: block;
    	font-size: 15px;
    	font-weight: 800;
    	line-height: 1.2;
    }

    .logo-text small {
    	display: block;
    	font-size: 11px;
    	color: var(--muted);
    }

    .nav-links {
    	display: flex;
    	gap: 4px;
    	list-style: none;
    }

    .nav-links a {
    	display: block;
    	padding: 8px 12px;
    	border-radius: 8px;
    	font-size: 14px;
    	font-weight: 600;
    	color: var(--muted);
    	transition: color .15s, background .15s;
    }

    .nav-links a:hover {
    	background: var(--soft);
    	color: var(--green);
    }

    .nav-cta {
    	background: var(--green);
    	color: #fff !important;
    	padding: 9px 18px !important;
    	border-radius: 8px !important;
    }

    .nav-cta:hover {
    	background: var(--green-light) !important;
    }

    /* ©¤©¤ Hero ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    .hero {
    	background:
    		linear-gradient(135deg, rgba(26, 122, 74, .07) 0%, transparent 50%),
    		linear-gradient(180deg, #ffffff 0%, #f2f9f5 100%);
    	padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 80px);
    }

    .hero-inner {
    	display: grid;
    	grid-template-columns: 1fr 1fr;
    	gap: clamp(28px, 5vw, 72px);
    	align-items: center;
    }

    .hero-badge {
    	display: inline-flex;
    	align-items: center;
    	gap: 6px;
    	background: var(--green-bg);
    	color: var(--green);
    	font-size: 12px;
    	font-weight: 700;
    	padding: 5px 12px;
    	border-radius: 999px;
    	margin-bottom: 16px;
    }

    .hero h1 {
    	color: var(--ink);
    }

    .hero h1 .accent {
    	color: var(--green);
    }

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

    .hero-actions {
    	display: flex;
    	flex-wrap: wrap;
    	gap: 10px;
    	margin-top: 28px;
    }

    .btn {
    	display: inline-flex;
    	align-items: center;
    	gap: 8px;
    	padding: 12px 22px;
    	border-radius: 10px;
    	font-weight: 700;
    	font-size: 15px;
    	border: 2px solid transparent;
    	cursor: pointer;
    	transition: all .15s;
    }

    .btn-primary {
    	background: var(--green);
    	color: #fff;
    }

    .btn-primary:hover {
    	background: var(--green-light);
    }

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

    .btn-outline:hover {
    	border-color: var(--green);
    	color: var(--green);
    }

    .hero-tags {
    	display: flex;
    	flex-wrap: wrap;
    	gap: 8px;
    	margin-top: 24px;
    }

    .tag {
    	background: #fff;
    	border: 1px solid var(--line);
    	color: var(--muted);
    	font-size: 13px;
    	font-weight: 600;
    	padding: 5px 12px;
    	border-radius: 999px;
    }

    /* Hero visual */
    .hero-visual {
    	position: relative;
    }

    .device-card {
    	background: #fff;
    	border-radius: 20px;
    	box-shadow: var(--shadow-md);
    	overflow: hidden;
    	border: 1px solid var(--line);
    }

    .device-card-top {
    	background: linear-gradient(135deg, #1a7a4a, #22a862);
    	padding: 28px 24px 36px;
    	color: #fff;
    	text-align: center;
    }

    .device-icon {
    	font-size: 64px;
    	line-height: 1;
    	display: block;
    	margin-bottom: 12px;
    }

    .device-card-top h3 {
    	color: #fff;
    	font-size: 20px;
    	margin-bottom: 4px;
    }

    .device-card-top p {
    	color: rgba(255, 255, 255, .8);
    	font-size: 14px;
    }

    .device-stats {
    	display: grid;
    	grid-template-columns: 1fr 1fr;
    	gap: 1px;
    	background: var(--line);
    }

    .device-stat {
    	background: #fff;
    	padding: 16px;
    	text-align: center;
    }

    .device-stat strong {
    	display: block;
    	font-size: 22px;
    	font-weight: 800;
    	color: var(--green);
    }

    .device-stat span {
    	font-size: 12px;
    	color: var(--muted);
    }

    .alert-preview {
    	margin: 16px;
    	background: #fff3cd;
    	border: 1px solid #ffc107;
    	border-radius: 10px;
    	padding: 12px 14px;
    	display: flex;
    	align-items: center;
    	gap: 10px;
    }

    .alert-preview .alert-icon {
    	font-size: 20px;
    }

    .alert-preview-text strong {
    	display: block;
    	font-size: 13px;
    	color: #664d03;
    }

    .alert-preview-text span {
    	font-size: 12px;
    	color: #856404;
    }

    .zalo-badge {
    	margin: 0 16px 16px;
    	background: var(--green-bg);
    	border-radius: 10px;
    	padding: 10px 14px;
    	display: flex;
    	align-items: center;
    	gap: 10px;
    }

    .zalo-badge .zalo-dot {
    	width: 32px;
    	height: 32px;
    	border-radius: 50%;
    	background: #0068ff;
    	color: #fff;
    	display: grid;
    	place-items: center;
    	font-weight: 800;
    	font-size: 13px;
    	flex-shrink: 0;
    }

    .zalo-badge-text strong {
    	display: block;
    	font-size: 13px;
    	color: var(--ink);
    }

    .zalo-badge-text span {
    	font-size: 11px;
    	color: var(--muted);
    }

    /* ©¤©¤ How it works ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    .how {
    	background: var(--soft);
    }

    .how-grid {
    	display: grid;
    	grid-template-columns: repeat(4, 1fr);
    	gap: 16px;
    	margin-top: 40px;
    }

    .how-step {
    	background: #fff;
    	border: 1px solid var(--line);
    	border-radius: var(--r);
    	padding: 24px;
    	position: relative;
    }

    .how-step::after {
    	content: "¡ú";
    	position: absolute;
    	right: -12px;
    	top: 50%;
    	transform: translateY(-50%);
    	color: var(--line);
    	font-size: 20px;
    	z-index: 1;
    }

    .how-step:last-child::after {
    	display: none;
    }

    .how-num {
    	width: 32px;
    	height: 32px;
    	border-radius: 50%;
    	background: var(--green-bg);
    	color: var(--green);
    	font-weight: 800;
    	font-size: 14px;
    	display: grid;
    	place-items: center;
    	margin-bottom: 14px;
    }

    .how-step h3 {
    	font-size: 15px;
    	margin-bottom: 6px;
    }

    .how-step p {
    	font-size: 13px;
    	color: var(--muted);
    }

    /* ©¤©¤ Features ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    .features-inner {
    	display: grid;
    	grid-template-columns: 1fr 1fr;
    	gap: clamp(28px, 5vw, 72px);
    	align-items: center;
    	margin-top: 0;
    }

    .features-heading {
    	margin-bottom: 32px;
    }

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

    .feature-item {
    	display: flex;
    	gap: 16px;
    }

    .feature-icon {
    	width: 44px;
    	height: 44px;
    	border-radius: 10px;
    	background: var(--green-bg);
    	color: var(--green);
    	display: grid;
    	place-items: center;
    	font-size: 20px;
    	flex-shrink: 0;
    }

    .feature-item h3 {
    	font-size: 16px;
    	margin-bottom: 4px;
    }

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

    .feature-visual {
    	background: var(--ink);
    	border-radius: 20px;
    	padding: 28px;
    	position: relative;
    	overflow: hidden;
    }

    .feature-visual::before {
    	content: "";
    	position: absolute;
    	inset: 0;
    	background: radial-gradient(circle at 20% 80%, rgba(26, 122, 74, .3), transparent 60%);
    }

    .notification-mockup {
    	position: relative;
    	z-index: 1;
    }

    .notif-phone {
    	background: #1a2520;
    	border-radius: 14px;
    	padding: 16px;
    	margin-bottom: 12px;
    }

    .notif-time {
    	color: rgba(255, 255, 255, .4);
    	font-size: 11px;
    	margin-bottom: 10px;
    }

    .notif-item {
    	background: rgba(255, 255, 255, .1);
    	border-radius: 10px;
    	padding: 12px;
    	margin-bottom: 8px;
    	display: flex;
    	gap: 10px;
    	align-items: flex-start;
    }

    .notif-item:last-child {
    	margin-bottom: 0;
    }

    .notif-logo {
    	width: 32px;
    	height: 32px;
    	border-radius: 8px;
    	background: #0068ff;
    	color: #fff;
    	display: grid;
    	place-items: center;
    	font-weight: 900;
    	font-size: 12px;
    	flex-shrink: 0;
    }

    .notif-logo.green {
    	background: var(--green);
    }

    .notif-content strong {
    	display: block;
    	color: #fff;
    	font-size: 12px;
    }

    .notif-content span {
    	color: rgba(255, 255, 255, .6);
    	font-size: 11px;
    }

    .notif-time-stamp {
    	color: rgba(255, 255, 255, .3);
    	font-size: 10px;
    	text-align: right;
    	margin-top: 4px;
    }

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

    .stat-box {
    	background: rgba(255, 255, 255, .07);
    	border-radius: 10px;
    	padding: 12px;
    	text-align: center;
    }

    .stat-box strong {
    	display: block;
    	color: #fff;
    	font-size: 20px;
    	font-weight: 800;
    }

    .stat-box span {
    	color: rgba(255, 255, 255, .5);
    	font-size: 11px;
    }

    /* ©¤©¤ Products ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    .products {
    	background: var(--soft);
    }

    .products-grid {
    	display: grid;
    	grid-template-columns: repeat(3, 1fr);
    	gap: 20px;
    	margin-top: 40px;
    }

    .product-card {
    	background: #fff;
    	border: 1px solid var(--line);
    	border-radius: var(--r);
    	overflow: hidden;
    	transition: box-shadow .2s;
    }

    .product-card:hover {
    	box-shadow: var(--shadow-md);
    }

    .product-img {
    	background: var(--green-bg);
    	height: 180px;
    	display: grid;
    	place-items: center;
    	font-size: 64px;
    }

    .product-body {
    	padding: 20px;
    }

    .product-body .tag {
    	margin-bottom: 10px;
    }

    .product-body h3 {
    	margin-bottom: 6px;
    }

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

    .product-price {
    	font-size: 22px;
    	font-weight: 800;
    	color: var(--green);
    }

    .product-price small {
    	font-size: 13px;
    	color: var(--muted);
    	font-weight: 400;
    }

    .product-actions {
    	display: flex;
    	gap: 8px;
    	margin-top: 12px;
    }

    .btn-sm {
    	padding: 8px 14px;
    	font-size: 13px;
    	border-radius: 8px;
    	font-weight: 700;
    	border: 2px solid transparent;
    	cursor: pointer;
    }

    .btn-sm.primary {
    	background: var(--green);
    	color: #fff;
    }

    .btn-sm.outline {
    	border-color: var(--line);
    	color: var(--ink);
    	background: transparent;
    }

    /* ©¤©¤ Company ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    .company-inner {
    	display: grid;
    	grid-template-columns: 1fr 1fr;
    	gap: clamp(28px, 5vw, 64px);
    	align-items: start;
    }

    .company-lead {
    	margin-top: 16px;
    	color: var(--muted);
    }

    .company-dl {
    	background: #fff;
    	border: 1px solid var(--line);
    	border-radius: var(--r);
    	overflow: hidden;
    	margin-top: 28px;
    }

    .company-dl .row {
    	display: grid;
    	grid-template-columns: 140px 1fr;
    	gap: 12px;
    	padding: 14px 20px;
    	border-bottom: 1px solid var(--line);
    }

    .company-dl .row:last-child {
    	border-bottom: none;
    }

    .company-dl dt {
    	font-size: 13px;
    	color: var(--muted);
    	font-weight: 600;
    	padding-top: 1px;
    }

    .company-dl dd {
    	font-size: 14px;
    	font-weight: 700;
    	color: var(--ink);
    }

    .cert-box {
    	background: linear-gradient(135deg, var(--green), #22a862);
    	border-radius: var(--r);
    	padding: 32px;
    	color: #fff;
    }

    .cert-box h3 {
    	color: #fff;
    	font-size: 22px;
    	margin-bottom: 8px;
    }

    .cert-box p {
    	color: rgba(255, 255, 255, .8);
    	font-size: 14px;
    	margin-bottom: 24px;
    }

    .cert-items {
    	display: flex;
    	flex-direction: column;
    	gap: 12px;
    }

    .cert-item {
    	display: flex;
    	align-items: center;
    	gap: 10px;
    	background: rgba(255, 255, 255, .12);
    	border-radius: 8px;
    	padding: 12px 14px;
    	font-size: 14px;
    	font-weight: 600;
    	color: #fff;
    }

    .cert-item .ci {
    	font-size: 20px;
    }

    /* ©¤©¤ Contact ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    .contact {
    	background: linear-gradient(135deg, #e8f5ee, #fff8e6);
    }

    .contact-inner {
    	display: grid;
    	grid-template-columns: 1fr 1fr;
    	gap: clamp(28px, 5vw, 64px);
    	align-items: center;
    }

    .contact-lead {
    	margin-top: 16px;
    	color: var(--muted);
    }

    .contact-card {
    	background: #fff;
    	border: 1px solid var(--line);
    	border-radius: var(--r);
    	padding: 28px;
    	box-shadow: var(--shadow-sm);
    }

    .contact-item {
    	display: flex;
    	align-items: center;
    	gap: 12px;
    	padding: 14px 0;
    	border-bottom: 1px solid var(--line);
    }

    .contact-item:last-child {
    	border-bottom: none;
    	padding-bottom: 0;
    }

    .contact-icon {
    	width: 40px;
    	height: 40px;
    	border-radius: 10px;
    	background: var(--green-bg);
    	color: var(--green);
    	display: grid;
    	place-items: center;
    	font-size: 18px;
    	flex-shrink: 0;
    }

    .contact-item strong {
    	display: block;
    	font-size: 13px;
    	color: var(--muted);
    	font-weight: 600;
    }

    .contact-item a,
    .contact-item span {
    	font-size: 15px;
    	font-weight: 700;
    	color: var(--ink);
    }

    /* ©¤©¤ Payment Section ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    .payment {
    	background: #fff;
    }

    .payment-inner {
    	display: grid;
    	grid-template-columns: 1fr 1fr;
    	gap: clamp(28px, 5vw, 64px);
    	align-items: center;
    }

    .payment h2 {
    	margin-top: 12px;
    }

    .payment-lead {
    	margin-top: 12px;
    	color: var(--muted);
    	font-size: 15px;
    }

    .payment-methods {
    	display: flex;
    	flex-wrap: wrap;
    	gap: 8px;
    	margin-top: 20px;
    }

    .pm-badge {
    	background: var(--soft);
    	border: 1px solid var(--line);
    	border-radius: 8px;
    	padding: 8px 12px;
    	font-size: 13px;
    	font-weight: 700;
    	color: var(--muted);
    	display: flex;
    	align-items: center;
    	gap: 6px;
    }

    .payment-qr-box {
    	background: var(--ink);
    	border-radius: 20px;
    	padding: 32px;
    	text-align: center;
    }

    .qr-placeholder {
    	width: 160px;
    	height: 160px;
    	background: #fff;
    	border-radius: 12px;
    	margin: 0 auto 16px;
    	display: grid;
    	place-items: center;
    	font-size: 12px;
    	color: var(--muted);
    	border: 3px solid var(--green);
    }

    .qr-placeholder svg {
    	width: 120px;
    	height: 120px;
    }

    .payment-qr-box p {
    	color: rgba(255, 255, 255, .7);
    	font-size: 14px;
    }

    .zalopay-logo {
    	display: inline-flex;
    	align-items: center;
    	gap: 6px;
    	background: #0068ff;
    	color: #fff;
    	padding: 8px 16px;
    	border-radius: 8px;
    	font-weight: 800;
    	font-size: 14px;
    	margin-top: 12px;
    }

    /* ©¤©¤ Footer ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    .footer {
    	background: var(--ink);
    	color: rgba(255, 255, 255, .6);
    	padding: clamp(32px, 5vw, 56px) 0 24px;
    }

    .footer-grid {
    	display: grid;
    	grid-template-columns: 2fr 1fr 1fr;
    	gap: 40px;
    	padding-bottom: 32px;
    	border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .footer-brand .logo-icon {
    	background: rgba(255, 255, 255, .1);
    }

    .footer-brand .logo-text strong {
    	color: #fff;
    }

    .footer-brand .logo-text small {
    	color: rgba(255, 255, 255, .5);
    }

    .footer-desc {
    	margin-top: 14px;
    	font-size: 14px;
    	line-height: 1.7;
    }

    .footer-col h4 {
    	color: rgba(255, 255, 255, .9);
    	font-size: 14px;
    	margin-bottom: 14px;
    }

    .footer-col ul {
    	list-style: none;
    	display: flex;
    	flex-direction: column;
    	gap: 8px;
    }

    .footer-col ul a {
    	font-size: 14px;
    	transition: color .15s;
    }

    .footer-col ul a:hover {
    	color: rgba(255, 255, 255, .9);
    }

    .footer-legal {
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    	align-items: flex-start;
    	gap: 12px;
    	margin-top: 24px;
    	font-size: 13px;
    }

    .footer-legal .legal-line {
    	line-height: 1.8;
    }

    .footer-legal .legal-line strong {
    	color: rgba(255, 255, 255, .8);
    }

    /* ©¤©¤ Section headings ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    .section-head {
    	margin-bottom: 40px;
    }

    .section-head .eyebrow {
    	margin-bottom: 6px;
    }

    .section-head p {
    	margin-top: 12px;
    	color: var(--muted);
    	max-width: 520px;
    }

    /* ©¤©¤ Responsive ©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤©¤ */
    @media (max-width: 900px) {

    	.hero-inner,
    	.features-inner,
    	.company-inner,
    	.contact-inner,
    	.payment-inner {
    		grid-template-columns: 1fr;
    	}

    	.hero-visual {
    		order: -1;
    	}

    	.device-card {
    		max-width: 400px;
    		margin: 0 auto;
    	}

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

    	.how-step::after {
    		display: none;
    	}

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

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

    	.footer-brand {
    		grid-column: 1 / -1;
    	}
    }

    @media (max-width: 600px) {
    	.nav-links {
    		display: none;
    	}

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

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

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

    	.company-dl .row {
    		grid-template-columns: 1fr;
    		gap: 2px;
    	}

    	.company-dl dt {
    		font-size: 12px;
    	}
    }