:root {
       --bg: rgb(0, 0, 80);
       /* page background */
       --text: #e4d2d2;
       /* main text */
       --muted: #fff9c4;
       /* secondary text */
       --accent: #000000;
       /* your brand colour */
       --border: gold;
       --border-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
       /* gold glow */
   }

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

   html {
       scroll-behavior: smooth;
   }

   body {
       background: var(--bg);
       color: var(--text);
       font-family: sans-serif;
       /* swap this for your chosen font */
       font-size: 17px;
       line-height: 1.6;

   }

   .body-bg {
       position: fixed;
       /* stays in place as you scroll */
       inset: 0;
       /* covers top, right, bottom, left — full screen */
       background-image: url('Vector3.png');
       background-size: cover;
       background-position: center;
       filter: blur(8px);
       scale: 1.1;
       /* hides the blurry edges */
       z-index: -1;
   }

   .container {
       max-width: 800px;
       margin: 0 auto;
       padding: 0 24px;
   }

   /* ========================
       NAV
    ======================== */
   nav {
       padding: 20px 0;
       border-bottom: 1px solid var(--border);
       box-shadow: var(--border-shadow);
       position: sticky;
       top: 0;
       /* sticks to the very top of the viewport */
       z-index: 100;
       /* stays above everything else on the page */
       background: rgb(0, 0, 60);
   }

   nav .container {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .nav-logo {
       font-weight: bold;
       font-size: 24px;
   }

   .logo-icon {
       width: 2.3em;
       height: 2.3em;
       border-radius: 6px;
   }

   .nav-cta {
       background: gold;
       color: #000;
       padding: 8px 20px;
       border-radius: 8px;
       font-size: 15px;
       font-weight: bold;
       text-decoration: none;
       transition: opacity 0.2s;
   }

   .nav-cta:hover {
       opacity: 0.85;
   }

   /* ========================
       HERO
    ======================== */
   .hero {
       padding: 80px 0;
       text-align: center;
       /* remove if you want left-aligned */
   }

   .hero h1 {
       font-size: 48px;
       line-height: 1.1;
       margin-bottom: 20px;
   }

   .hero p {
       color: var(--muted);
       max-width: 800px;
       margin: 0 auto 32px;
   }

   /* ========================
       SCREENSHOT / PREVIEW
    ======================== */
   .preview {
       padding: 10px 0;
       text-align: center;
   }

   .preview img {
       max-width: 280px;
       /* phone screenshot width */
       border-radius: 30px;
       box-shadow: -10px 25px 50px rgba(0, 0, 0, 0.6);
   }

   /* ========================
       FEATURES
    ======================== */
   .feature-row {
       display: flex;
       gap: 40px;
       padding: 80px 24px;
       /* replaces the padding you had on .features */
       max-width: 1100px;
       margin: 0 auto;
       justify-content: space-between;
       align-items: stretch;
   }

   .features-column {
       width: 30%;
       /* each column takes equal space */
   }

   .features-column h2 {
       margin-bottom: 40px;
       font-size: 28px;
   }

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

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

   .feature-icon {
       font-size: 24px;
       flex-shrink: 0;
   }

   .feature-icon img {
       width: 1.2em;
       /* 1.2x whatever the font size is */
       height: 1.2em;
       border-radius: 6px;
       flex-shrink: 0;
   }

   .nav-brand {
       display: flex;
       align-items: center;
       gap: 8px;
       /* controls space between icon and name */
   }

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

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

   /* ========================
       PRICING
    ======================== */
   .pricing {
       height: 100%;
       /* fills the column height */
       padding: 40px 24px;
       text-align: center;
       border: 1px solid var(--border);
       box-shadow: var(--border-shadow);
       border-radius: 12px;
       overflow: hidden;
       /* clips anything that spills out */

       /* breaks long words if needed */
       min-width: 0;
   }

   .pricing h2 {
       font-size: 28px;
       margin-bottom: 12px;
   }

   .price {
       font-size: 52px;
       font-weight: bold;
       margin: 16px 0;
   }

   .pricing p {
       color: var(--muted);
       margin-bottom: 32px;
   }

   .feat2-icon {
       width: 1.7em;
       /* 1.2x whatever the font size is */
       height: 1.7em;
       border-radius: 6px;
       flex-shrink: 0;
   }

   .pricing-button {
       display: inline-block;
       background-color: gold;
       color: #000;
       padding: 12px 24px;
       border-radius: 8px;
       font-size: 16px;
       font-weight: bold;
       text-decoration: none;
       border: none;
       cursor: pointer;
       transition: opacity 0.2s;
   }

   .pricing-button:hover {
       opacity: 0.85;
   }

   /* ========================
       FOOTER
    ======================== */
   footer {
       padding: 32px 0;
       border-top: 1px solid var(--border);
       box-shadow: var(--border-shadow);
       text-align: center;
       font-size: 13px;
       color: var(--muted);
   }

   .icon-link {
       color: inherit;
       text-decoration: none;
       /* removes underline */
   }

   .icon-link:hover {
       color: gold;
       /* subtle hint they're clickable on hover */
       text-decoration: underline;
   }

   .footer-link {
       color: inherit;
       text-decoration: none;
   }

   .footer-link:hover {
       color: var(--text);
       /* slightly brighter than muted on hover */
       text-decoration: underline;
   }

   @media (max-width: 600px) {

       /* HERO */
       .hero h1 {
           font-size: 32px;
           /* too big on mobile otherwise */
       }

       /* FEATURES — stack columns vertically */
       .feature-row {
           flex-direction: column;
           /* changes from side by side to stacked */
           padding: 40px 24px;
           gap: 40px;
       }

       .features-column {
           width: 90%;
           text-align: left;
           /* content stays left-aligned */
       }

       .feature {
           justify-content: flex-start;
           /* icons and text start from the left */
           align-items: flex-start;
           /* icon pins to top of text, not middle */
       }

       .features-column h2 {
           text-align: center;
           /* just the header is centred */
       }

       /* PRICING cards same thing */
       .pricing {
           height: auto;
           /* fixed height looks odd when stacked */
       }

       .pricing h2 {
           font-size: 20px;
           /* smaller than the 28px default */
       }

       .price {
           font-size: 36px;
           /* smaller than the 52px default */
       }

       /* PREVIEW screenshot */
       .preview img {
           max-width: 80%;
           /* slightly wider on small screens */
       }

       /* NAV */
       .nav-logo {
           font-size: 15px;
           /* slightly smaller so it fits */
       }

   }