:root {
         --bg: #0f172a;
         --bg-soft: #f8fafc;
         --text: #0f172a;
         --text-muted: #475569;
         --white: #ffffff;
         --border: #e2e8f0;
         --primary: #111827;
         --accent: #2563eb;
         --accent-hover: #1d4ed8;
         --success: #16a34a;
         --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
         --radius: 18px;
         --max: 1200px;
     }

     * { box-sizing: border-box; }
     html { scroll-behavior: smooth; }
     body {
         margin: 0;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
         color: var(--text);
         background: var(--white);
         line-height: 1.6;
     }

     a { text-decoration: none; color: inherit; }
     img { max-width: 100%; display: block; }

     .container {
         width: min(100% - 2rem, var(--max));
         margin-inline: auto;
     }

     .section {
         padding: 5rem 0;
     }

     .section-sm {
         padding: 3rem 0;
     }

     .eyebrow {
         display: inline-block;
         font-size: 0.85rem;
         font-weight: 700;
         letter-spacing: 0.04em;
         text-transform: uppercase;
         color: var(--accent);
         margin-bottom: 0.85rem;
     }

     h1, h2, h3 {
         line-height: 1.15;
         margin: 0 0 1rem;
     }

     h1 {
         font-size: clamp(2.3rem, 5vw, 4.4rem);
         letter-spacing: -0.04em;
     }

     h2 {
         font-size: clamp(1.8rem, 3vw, 3rem);
         letter-spacing: -0.03em;
     }

     h3 {
         font-size: 1.2rem;
     }

     p {
         margin: 0 0 1rem;
         color: var(--text-muted);
     }

     .btn-row {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
         margin-top: 1.5rem;
     }

     .btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         padding: 0.95rem 1.35rem;
         border-radius: 999px;
         font-weight: 700;
         transition: 0.2s ease;
         border: 1px solid transparent;
     }

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

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

     .btn-secondary {
         background: var(--white);
         color: var(--text);
         border-color: var(--border);
     }

     .btn-secondary:hover {
         background: #f8fafc;
     }

     .topbar {
         position: sticky;
         top: 0;
         z-index: 100;
         background: rgba(255,255,255,0.92);
         backdrop-filter: blur(8px);
         border-bottom: 1px solid rgba(226, 232, 240, 0.9);
     }

     .nav {
         min-height: 72px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 1rem;
     }

     .brand {
         font-size: 1.25rem;
         font-weight: 800;
         letter-spacing: -0.03em;
     }

     .nav-links {
         display: flex;
         gap: 1.25rem;
         align-items: center;
         flex-wrap: wrap;
     }

     .nav-links a {
         color: var(--text-muted);
         font-weight: 600;
     }

     .hero {
         background:
             radial-gradient(circle at top left, rgba(37,99,235,0.12), transparent 28%),
             linear-gradient(180deg, #f8fbff 0%, #ffffff 55%);
         padding: 4.5rem 0 5.5rem;
     }

     .hero-grid {
         display: grid;
         grid-template-columns: 1.15fr 0.85fr;
         gap: 2rem;
         align-items: center;
     }

     .hero-card {
         background: var(--white);
         border: 1px solid var(--border);
         border-radius: 24px;
         box-shadow: var(--shadow);
         overflow: hidden;
     }

     .hero-image {
         min-height: 480px;
         background:
             linear-gradient(rgba(15,23,42,.18), rgba(15,23,42,.18)),
             url('/images/mobile-app-ui.png')
             center/cover no-repeat;
     }

     .hero-badges {
         display: flex;
         gap: 0.85rem;
         flex-wrap: wrap;
         margin-top: 1rem;
         color: var(--text-muted);
         font-size: 0.95rem;
         font-weight: 600;
     }

     .trusted {
         margin-top: 2rem;
         font-size: 0.95rem;
         font-weight: 600;
         color: var(--text-muted);
     }

     .grid-2, .grid-3, .grid-4 {
         display: grid;
         gap: 1.25rem;
     }

     .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
     .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
     .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

     .card {
         background: var(--white);
         border: 1px solid var(--border);
         border-radius: var(--radius);
         padding: 1.5rem;
         box-shadow: var(--shadow);
     }

     .card.soft {
         background: var(--bg-soft);
         box-shadow: none;
     }

     .muted-center {
         text-align: center;
         max-width: 760px;
         margin: 0 auto 2.5rem;
     }

     .split {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 2rem;
         align-items: center;
     }

     .feature-list {
         padding-left: 1.1rem;
         margin: 1rem 0 0;
         color: var(--text-muted);
     }

     .feature-list li {
         margin-bottom: 0.6rem;
     }

     .image-panel {
         min-height: 420px;
         border-radius: 24px;
         overflow: hidden;
         box-shadow: var(--shadow);
         background:
             linear-gradient(rgba(15,23,42,.12), rgba(15,23,42,.12)),
             url('/images/laptop-app-ui.png')
             center/cover no-repeat;
     }

     .before-after {
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 1rem;
     }

     .compare {
         border: 1px solid var(--border);
         border-radius: var(--radius);
         padding: 1.25rem;
         background: var(--white);
     }

     .compare strong {
         display: block;
         font-size: 1.05rem;
         margin-bottom: 0.4rem;
     }

     .steps .step-number {
         width: 48px;
         height: 48px;
         border-radius: 50%;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         background: #dbeafe;
         color: var(--accent);
         font-weight: 800;
         margin-bottom: 1rem;
     }

     .testimonials blockquote {
         margin: 0 0 1rem;
         color: var(--text);
         font-size: 1.02rem;
     }

     .person {
         font-weight: 800;
         margin-bottom: 0.2rem;
     }

     .role {
         color: var(--text-muted);
         font-size: 0.95rem;
     }

     .pricing-card.featured {
         border: 2px solid var(--accent);
         position: relative;
     }

     .badge {
         display: inline-block;
         padding: 0.35rem 0.65rem;
         border-radius: 999px;
         background: #dbeafe;
         color: var(--accent);
         font-size: 0.8rem;
         font-weight: 800;
         margin-bottom: 1rem;
     }

     .price {
         font-size: 2.25rem;
         font-weight: 800;
         margin: 0.25rem 0 0.75rem;
     }

     .cta-band {
         background: var(--bg);
         color: var(--white);
         border-radius: 28px;
         padding: 3rem;
         text-align: center;
     }

     .cta-band p {
         color: rgba(255,255,255,0.8);
     }

     footer {
         padding: 2rem 0 3rem;
         border-top: 1px solid var(--border);
     }

     .footer-row {
         display: flex;
         justify-content: space-between;
         gap: 1rem;
         flex-wrap: wrap;
         color: var(--text-muted);
     }

     .footer-links {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
     }

     @media (max-width: 960px) {
         .hero-grid,
         .split,
         .grid-4,
         .grid-3,
         .grid-2,
         .before-after {
             grid-template-columns: 1fr;
         }

         .nav {
             flex-direction: column;
             align-items: flex-start;
             padding: 0.85rem 0;
         }

         .hero-image,
         .image-panel {
             min-height: 300px;
         }

         .cta-band {
             padding: 2rem 1.25rem;
         }
     }
	 /* NAV CONTAINER */
	 .nav {
	     display: flex;
	     align-items: center;
	     justify-content: space-between;
	 }

	 /* BRAND (logo + text inline) */
	 .brand {
	     display: flex;
	     align-items: center;
	     gap: 8px;
	     text-decoration: none;
	 }

	 /* LOGO */
	 .brand-logo {
	     height: 30px;
	     width: auto;
	 }

	 /* TEXT */
	 .brand-name {
	     font-weight: 600;
	     font-size: 1.2rem;
	     display: flex;
	     align-items: center;
	     gap: 6px;
	 }

	 /* SMALL "Pilot" */
	 .brand-name small {
	     font-size: 0.75rem;
	     opacity: 0.7;
	 }

	 /* NAV LINKS */
	 .nav-links {
	     display: flex;
	     align-items: center;
	     gap: 20px;
	 }

	 /* 🔥 MOBILE FIX */
	 @media (max-width: 768px) {
	     
	     .nav {
	         flex-direction: column;
	         align-items: flex-start;
	         gap: 12px;
	     }

	     .nav-links {
	         flex-direction: column;
	         align-items: flex-start;
	         width: 100%;
	         gap: 12px;
	     }

	     .nav-links a {
	         width: 100%;
	     }

	     .nav-links .btn {
	         width: 100%;
	     }
	 }