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

 :root {
     --bg: #f0f5fe;
     --surface: #ffffff;
     --surface2: #1a4fa0;
     --border: rgba(255, 255, 255, 0.07);
     --border2: rgba(255, 255, 255, 0.12);
     --text: #dde2f0;
     --muted: #5a6075;
     --accent: #0d2d6b;
     --accent-dark: #000000;
     --accent-lt: rgba(0, 200, 255, 0.08);
     --accent-md: rgba(0, 200, 255, 0.2);
     --accent-glow: rgba(0, 200, 255, 0.25);
     --green: #00e676;
     --green-lt: rgba(0, 230, 118, 0.08);
     --amber: #ffab00;
     --amber-lt: rgba(255, 171, 0, 0.08);
 }

 html {
     scroll-behavior: smooth;
 }

 body {

     background: var(--bg);
     color: var(--text);
     overflow-x: hidden;
 }

 .inner {
     max-width: 1280px;
     margin: auto;
 }

 /* ── HERO ── */
 .hero {
     min-height: 50vh;
     position: relative;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     background:
         linear-gradient(rgba(8, 33, 61, 0.048), rgba(26, 79, 160, 0.075)),
         url(/assete/images/page-banner/gps.webp);
     background-size: cover;
     background-position: center;
 }

 /* Radar animation background */
 .hero-radar {
     position: absolute;
     width: 900px;
     height: 900px;
     top: 50%;
     right: -100px;
     transform: translateY(-50%);
     z-index: 0;
 }

 .radar-ring {
     position: absolute;
     border-radius: 50%;
     border: 1px solid rgba(0, 200, 255, 0.08);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .radar-ring:nth-child(1) {
     width: 200px;
     height: 200px;
     border-color: rgba(0, 200, 255, 0.18);
 }

 .radar-ring:nth-child(2) {
     width: 380px;
     height: 380px;
     border-color: rgba(0, 200, 255, 0.1);
 }

 .radar-ring:nth-child(3) {
     width: 560px;
     height: 560px;
 }

 .radar-ring:nth-child(4) {
     width: 740px;
     height: 740px;
     border-color: rgba(0, 200, 255, 0.05);
 }

 .radar-ring:nth-child(5) {
     width: 900px;
     height: 900px;
     border-color: rgba(0, 200, 255, 0.03);
 }

 .radar-sweep {
     position: absolute;
     width: 450px;
     height: 450px;
     top: 50%;
     left: 50%;
     transform-origin: 0 0;
     animation: sweep 4s linear infinite;
 }

 .radar-sweep::after {
     content: '';
     position: absolute;
     width: 0;
     height: 0;
     border-left: 450px solid transparent;
     border-top: 450px solid transparent;
     border-right: 0;
     background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 200, 255, 0.06) 60deg, transparent 60deg);
     border-radius: 50%;
     width: 450px;
     height: 450px;
     top: -450px;
     left: -450px;
 }

 @keyframes sweep {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 /* GPS dots */
 .gps-dot {
     position: absolute;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--accent);
     box-shadow: 0 0 8px var(--accent);
     animation: gpsBlink 3s ease-in-out infinite;
 }

 @keyframes gpsBlink {

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

     50% {
         opacity: 1;
         transform: scale(1.4);
     }
 }

 .hero-grid-bg {
     position: absolute;
     inset: 0;
     z-index: 0;
     background-image:
         linear-gradient(rgba(0, 200, 255, 0.03) 1px, transparent 1px),
         linear-gradient(90deg, rgba(0, 200, 255, 0.03) 1px, transparent 1px);
     background-size: 56px 56px;
 }

 .hero-glow {
     position: absolute;
     z-index: 0;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(0, 200, 255, 0.07) 0%, transparent 65%);
     top: 50%;
     left: 20%;
     transform: translate(-50%, -50%);
 }

 .hero-content {
     position: relative;
     z-index: 1;
     padding: 30px 72px 15px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: end;
     max-width: 1280px;
     margin: auto;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--accent-lt);
     border: 1px solid var(--accent-md);
     border-radius: 4px;
     padding: 5px 14px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 28px;
 }

 .hero-badge-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--accent);
     animation: gpsBlink 2s ease-in-out infinite;
 }

 .hero h1 {
     font-family: 'Syne', sans-serif;
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 700;
     line-height: 1.05;
     color: #ffffff;
     margin-bottom: 28px;
     text-transform: uppercase;
 }

 .hero h1 .line-accent {
     color: #ffffff;
     display: block;
 }

 .hero h1 .line-thin {
     font-weight: 400;
     color: rgba(0, 0, 0, 0.45);
     display: block;
     font-size: 0.52em;
     letter-spacing: 0.12em;
     margin-bottom: 8px;
 }

 .hero-desc {
     font-size: 16px;
     line-height: 1.8;
     color: #ffffff;
     max-width: 480px;
     font-weight: 300;
     margin-bottom: 36px;
 }

 .hero-desc strong {
     color: var(--text);
     font-weight: 500;
 }

 .hero-btns {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }

 .btn-cyan {
     background: var(--accent);
     color: var(--bg);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 14px 28px;
     border-radius: 5px;
     text-decoration: none;
     transition: all 0.25s;
 }

 .btn-cyan:hover {
     opacity: 0.85;
     transform: translateY(-2px);
     box-shadow: 0 8px 24px var(--accent-glow);
 }

 .btn-ghost {
     border: 1px solid var(--border2);
     color: #ffffff;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     padding: 14px 24px;
     border-radius: 5px;
     text-decoration: none;
     transition: all 0.25s;
     background: #2d659a;
 }

 .btn-ghost:hover {
     border-color: var(--accent);
     color: var(--accent);
 }

 /* Hero right: advantage cards */
 .hero-right-panel {
     padding-bottom: 0;
 }

 .adv-label {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: #ffffff;
     margin-bottom: 16px;
 }

 .adv-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .adv-item {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 14px 18px;
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.397);
     border: 1px solid var(--border);
     font-size: 14px;
     font-weight: 500;
     color: #000000;
     transition: all 0.2s;
     width: 415px;
 }

 .adv-item:hover {
     background: #fff;
     border-color: var(--accent-md);
     color: #000;
 }

 .adv-num {
     font-family: 'Syne', sans-serif;
     font-size: 20px;
     font-weight: 800;
     color: var(--accent);
     flex-shrink: 0;
     width: 28px;
     line-height: 1;
 }

 /* Stats bar */
 .hero-stats-bar {
     position: relative;
     z-index: 1;
     background: rgba(255, 255, 255, 0.02);
     border-top: 1px solid var(--border);
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     margin-top: 60px;
 }

 .hstat {
     padding: 24px 32px;
     border-right: 1px solid var(--border);
 }

 .hstat:last-child {
     border-right: none;
 }

 .hstat-n {
     font-family: 'Syne', sans-serif;
     font-size: 28px;
     font-weight: 800;
     color: var(--accent);
     line-height: 1;
     margin-bottom: 4px;
     text-transform: uppercase;
 }

 .hstat-l {
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.07em;
     text-transform: uppercase;
     color: var(--muted);
 }

 /* ── SECTION BASE ── */
 section {
     padding: 100px 72px;
 }

 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 17px;
     font-weight: 700;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     color: #000000;
     margin-bottom: 16px;
 }

 .light {
     color: #ffffff;
 }



 .sh {
     font-family: 'Syne', sans-serif;
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 800;
     line-height: 1;
     letter-spacing: -0.01em;
     text-transform: uppercase;
     color: #000000;
     margin-bottom: 18px;
 }

 .sh em {
     color: var(--accent);
     font-style: normal;
 }


 .shs {
     font-family: 'Syne', sans-serif;
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 800;
     line-height: 1;
     letter-spacing: -0.01em;
     text-transform: uppercase;
     color: #000000;
     margin-bottom: 18px;
 }

 .shs em {
     color: var(--accent);
     font-style: normal;
 }

 .sp {
     font-size: 16px;
     line-height: 1.85;
     color: var(--muted);
     max-width: 600px;
     font-weight: 300;
 }

 /* ── OVERVIEW ── */
 #overview {
     background: var(--surface);
 }

 .overview-layout {
     display: grid;
     grid-template-columns: 3fr 1fr;
     gap: 80px;
     align-items: center;
     margin-top: 56px;
 }

 .overview-text p {
     font-size: 16px;
     line-height: 1.9;
     color: var(--muted);
     font-weight: 300;
     margin-bottom: 20px;
 }

 .overview-text p strong {
     color: #000;
     font-weight: 500;
 }

 .tech-tags {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: 28px;
 }

 .tech-tag {
     background: var(--surface2);
     border: 1px solid var(--border2);
     border-radius: 6px;
     padding: 8px 16px;
     font-size: 12px;
     font-weight: 700;
     color: var(--text);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     transition: all 0.2s;
 }

 .tech-tag:hover {
     border-color: var(--accent);
     color: var(--accent);
     background: var(--accent-lt);
 }

 /* Device visual panel */
 .device-panel {
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 20px;
     /* padding: 40px 36px; */
     position: relative;
     overflow: hidden;
 }

 .device-panel::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--accent), var(--green));
 }

 .device-label {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 20px;
 }

 .device-title {
     font-family: 'Syne', sans-serif;
     font-size: 28px;
     font-weight: 800;
     color: #000000;
     text-transform: uppercase;
     letter-spacing: -0.01em;
     margin-bottom: 8px;
 }

 .device-sub {
     font-size: 13px;
     color: var(--muted);
     font-weight: 300;
     margin-bottom: 28px;
 }

 .device-specs {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .spec-row {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 12px 16px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid var(--border);
     transition: all 0.2s;
 }

 .spec-row:hover {
     background: var(--accent-lt);
     border-color: var(--accent-md);
 }

 .spec-icon {
     font-size: 16px;
     flex-shrink: 0;
 }

 .spec-text {
     font-size: 13px;
     font-weight: 500;
     color: var(--accent-dark);
 }

 /* ── FEATURES ── */
 #features {
     background: var(--bg);
 }

 .features-header {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: end;
     margin-bottom: 56px;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2px;
     background: var(--border);
     border-radius: 16px;
     overflow: hidden;
 }

 .feat {
     background: #0c2d6a;
     padding: 32px 26px;
     position: relative;
     overflow: hidden;
     transition: background 0.25s;
 }

 .feat:hover {
     background: var(--surface2);
 }

 .feat-line {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: var(--accent);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s;
 }

 .feat:hover .feat-line {
     transform: scaleX(1);
 }

 .feat-icon {
     width: 48px;
     height: 48px;
     border-radius: 10px;
     background: var(--accent-lt);
     border: 1px solid var(--accent-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     margin-bottom: 18px;
 }

 .feat h3 {
     font-size: 15px;
     font-weight: 700;
     color: var(--text);
     margin-bottom: 10px;
 }

 .feat p {
     font-size: 13px;
     line-height: 1.7;
     color: #fff;
     font-weight: 300;
     margin-bottom: 16px;
 }

 .feat-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 .feat-list li {
     font-size: 12px;
     color: #fff;
     padding-left: 14px;
     position: relative;
     line-height: 1.5;
 }

 .feat-list li::before {
     content: '→';
     position: absolute;
     left: 0;
     color: var(--accent);
     font-size: 11px;
     font-weight: 700;
 }

 /* ── ADVANTAGES ── */
 .adv-band {
     background: var(--surface);
     padding: 80px 72px;
 }

 .adv-band-header {
     margin-bottom: 48px;
 }

 .adv-band-header h2 {
     font-family: 'Syne', sans-serif;
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 800;
     text-transform: uppercase;
     color: #fff;
     line-height: 1;
     letter-spacing: -0.01em;
     margin-bottom: 12px;
 }

 .adv-band-header h2 em {
     color: var(--accent);
     font-style: normal;
 }

 .adv-band-header p {
     font-size: 15px;
     line-height: 1.8;
     color: #000000;
     font-weight: 300;
     max-width: 560px;
 }

 .adv-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 2px;
     background: var(--border);
     border-radius: 12px;
     overflow: hidden;
 }

 .adv-col {
     background: var(--bg);
     padding: 32px 24px;
     transition: background 0.25s;
 }

 .adv-col:hover {
     background: rgba(0, 200, 255, 0.06);
 }

 .adv-col-num {
     font-family: 'Syne', sans-serif;
     font-size: 48px;
     font-weight: 900;
     color: rgb(0, 200, 255);
     line-height: 1;
     margin-bottom: 16px;
 }

 .adv-col h4 {
     font-size: 14px;
     font-weight: 700;
     color: var(--accent-dark);
     margin-bottom: 8px;
     line-height: 1.2;
 }

 .adv-col p {
     font-size: 13px;
     line-height: 1.65;
     color: var(--muted);
     font-weight: 300;
 }

 /* ── INDUSTRIES ── */
 #industries {
     background: var(--bg);
 }

 .ind-layout {
     display: grid;
     grid-template-columns: 1fr 2fr;
     gap: 64px;
     align-items: start;
     margin-top: 56px;
 }

 .ind-sidebar {
     position: sticky;
     top: 100px;
     background: #0c2d6a;
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 32px 28px;
 }

 .ind-sidebar p {
     font-size: 14px;
     line-height: 1.75;
     color: #fff;
     font-weight: 300;
 }

 .ind-sidebar p strong {
     color: var(--text);
     font-weight: 500;
 }

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

 .ind-card {
     background: #0c2d6a;
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 28px 24px;
     transition: all 0.25s;
 }

 .ind-card:hover {
     border-color: var(--accent);
     transform: translateY(-3px);
     box-shadow: 0 10px 28px rgba(0, 200, 255, 0.08);
 }

 .ind-icon {
     font-size: 28px;
     margin-bottom: 12px;
     display: block;
 }

 .ind-card h3 {
     font-size: 14px;
     font-weight: 700;
     color: var(--text);
     margin-bottom: 6px;
 }

 .ind-card p {
     font-size: 13px;
     line-height: 1.6;
     color: #fff;
     font-weight: 300;
 }

 /* ── INTEGRATIONS ── */
 #integrations {
     background: var(--surface);
 }

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


 .int-grid {
     width: 100%;
     overflow: hidden;
 }

 .int-grid img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 10px;
 }

 .int-item {
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 18px 16px;
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 13px;
     font-weight: 500;
     color: var(--accent-dark);
     transition: all 0.2s;
 }

 .int-item:hover {
     border-color: var(--accent);
     color: var(--accent);
     background: var(--accent-lt);
 }

 .int-icon {
     font-size: 18px;
     flex-shrink: 0;
 }

 .int-text p {
     font-size: 15px;
     line-height: 1.85;
     color: #000000;
     font-weight: 300;
     margin-bottom: 20px;
 }

 .int-text p strong {
     color: #000;
     font-weight: 500;
 }

 .int-note {
     background: var(--bg);
     border: 1px solid rgba(0, 200, 255, 0.18);
     border-radius: 12px;
     padding: 22px 24px;
 }

 .int-note .lbl {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 8px;
 }

 .int-note p {
     font-size: 14px;
     line-height: 1.7;
     color: var(--muted);
     font-weight: 300;
 }

 /* ── FAQ ── */
 #faq {
     background: var(--bg);
 }

 .faq-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
     margin-top: 56px;
 }

 .faq-item {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 12px;
     overflow: hidden;
 }

 .faq-q {
     width: 100%;
     background: none;
     border: none;
     cursor: pointer;
     text-align: left;
     padding: 20px 22px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
     font-family: 'Inter', sans-serif;
     font-size: 14px;
     font-weight: 600;
     color: #000;
     transition: color 0.2s;
 }

 .faq-q:hover {
     color: #000000;
 }

 .faq-item.open .faq-q {
     color: #000000;
 }

 .faq-icon {
     flex-shrink: 0;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     border: 1px solid var(--border2);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     color: var(--accent);
     transition: transform 0.3s;
 }

 .faq-item.open .faq-icon {
     transform: rotate(45deg);
 }

 .faq-a {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease, padding 0.3s;
     padding: 0 22px;
     font-size: 14px;
     line-height: 1.8;
     color: #000000;
     font-weight: 300;
 }

 .faq-item.open .faq-a {
     max-height: 260px;
     padding: 0 22px 20px;
 }

 /* ── CTA ── */
 #cta {
     background: var(--surface);
     padding: 100px 72px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
     position: relative;
     overflow: hidden;
 }

 #cta::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(0, 200, 255, 0.06) 0%, transparent 65%);
 }

 .cta-left {
     position: relative;
     z-index: 1;
 }

 .cta-left h2 {
     font-family: 'Syne', sans-serif;
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 800;
     text-transform: uppercase;
     line-height: 1;
     letter-spacing: -0.01em;
     color: #fff;
     margin-bottom: 20px;
 }

 .cta-left h2 em {
     color: var(--accent);
     font-style: normal;
 }

 .cta-left p {
     font-size: 16px;
     line-height: 1.8;
     color: var(--muted);
     font-weight: 300;
     margin-bottom: 36px;
     max-width: 440px;
 }

 .cta-btns {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }

 .cta-note {
     margin-top: 16px;
     font-size: 12px;
     color: var(--muted);
 }

 .cta-right {
     position: relative;
     z-index: 1;
 }

 .cta-benefits {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .cta-benefit {
     display: flex;
     gap: 16px;
     align-items: flex-start;
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 20px 22px;
     transition: all 0.25s;
 }

 .cta-benefit:hover {
     border-color: var(--accent);
     background: var(--accent-lt);
 }

 .cb-icon {
     font-size: 22px;
     flex-shrink: 0;
 }

 .cb-text h4 {
     font-size: 14px;
     font-weight: 700;
     color: var(--accent-dark);
     margin-bottom: 3px;
 }

 .cb-text p {
     font-size: 13px;
     color: var(--muted);
     font-weight: 300;
     line-height: 1.5;
 }

 /* ── REVEAL ── */
 .reveal {
     opacity: 0;
     transform: translateY(24px);
     transition: opacity 0.65s ease, transform 0.65s ease;
 }

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

 .overview-img {
     width: 100%;
     max-width: 500px;
     height: auto;
     display: block;
     margin: 0 auto;
     border-radius: 16px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }

 /* ── RESPONSIVE ── */
 @media (max-width: 1100px) {


     section {
         padding: 80px 32px;
     }

     .hero-content {
         grid-template-columns: 1fr;
         padding: 50px 32px 0;
     }

     .hero-right-panel {
         display: none;
     }

     .hero-stats-bar {
         grid-template-columns: repeat(3, 1fr);
     }

     .overview-layout,
     .features-header,
     .int-layout {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .ind-layout {
         grid-template-columns: 1fr;
     }

     .ind-sidebar {
         position: static;
     }

     .adv-band {
         padding: 60px 32px;
     }

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

     .faq-layout {
         grid-template-columns: 1fr;
     }

     #cta {
         grid-template-columns: 1fr;
         padding: 80px 32px;
     }
 }

 @media (max-width: 640px) {

     section {
         padding: 60px 20px;
     }

     .hero-content {
         padding: 10px 20px 0;
     }

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

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

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

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

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

     .adv-band {
         padding: 48px 20px;
     }

     #cta {
         padding: 60px 20px;
     }

     .hero h1 .line-thin {
         letter-spacing: normal;
     }

     .hero-desc {
         line-height: normal;
         margin-bottom: 10px;
     }
 }