├── .eleventyignore
├── assets
    └── img
    │   ├── varro_money
    │       ├── Screenshot_20250827_000437.jpg
    │       ├── Screenshot_20250827_000450.jpg
    │       ├── Screenshot_20250827_000606.jpg
    │       ├── Screenshot_20250827_000800.jpg
    │       ├── Screenshot_20250827_000805.jpg
    │       ├── Screenshot_20250827_000822.jpg
    │       ├── Screenshot_20250827_000829.jpg
    │       ├── Screenshot_20250827_000839.jpg
    │       └── Screenshot_20250827_000949.jpg
    │   ├── GetItOnGooglePlay_Badge_Web_color_English.png
    │   └── download-app-store.svg
├── .gitignore
├── package.json
├── README.md
├── .eleventy.js
├── .github
    ├── workflows
    │   └── pages.yml
    └── copilot-instructions.md
├── index.njk
├── varro-money
    ├── privacy
    │   └── index.njk
    └── index.njk
└── _layouts
    └── base.njk


/.eleventyignore:
--------------------------------------------------------------------------------
1 | README.md
2 | .github/
3 | 


--------------------------------------------------------------------------------
/assets/img/varro_money/Screenshot_20250827_000437.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apeisa/varro-website/main/assets/img/varro_money/Screenshot_20250827_000437.jpg


--------------------------------------------------------------------------------
/assets/img/varro_money/Screenshot_20250827_000450.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apeisa/varro-website/main/assets/img/varro_money/Screenshot_20250827_000450.jpg


--------------------------------------------------------------------------------
/assets/img/varro_money/Screenshot_20250827_000606.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apeisa/varro-website/main/assets/img/varro_money/Screenshot_20250827_000606.jpg


--------------------------------------------------------------------------------
/assets/img/varro_money/Screenshot_20250827_000800.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apeisa/varro-website/main/assets/img/varro_money/Screenshot_20250827_000800.jpg


--------------------------------------------------------------------------------
/assets/img/varro_money/Screenshot_20250827_000805.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apeisa/varro-website/main/assets/img/varro_money/Screenshot_20250827_000805.jpg


--------------------------------------------------------------------------------
/assets/img/varro_money/Screenshot_20250827_000822.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apeisa/varro-website/main/assets/img/varro_money/Screenshot_20250827_000822.jpg


--------------------------------------------------------------------------------
/assets/img/varro_money/Screenshot_20250827_000829.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apeisa/varro-website/main/assets/img/varro_money/Screenshot_20250827_000829.jpg


--------------------------------------------------------------------------------
/assets/img/varro_money/Screenshot_20250827_000839.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apeisa/varro-website/main/assets/img/varro_money/Screenshot_20250827_000839.jpg


--------------------------------------------------------------------------------
/assets/img/varro_money/Screenshot_20250827_000949.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apeisa/varro-website/main/assets/img/varro_money/Screenshot_20250827_000949.jpg


--------------------------------------------------------------------------------
/assets/img/GetItOnGooglePlay_Badge_Web_color_English.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apeisa/varro-website/main/assets/img/GetItOnGooglePlay_Badge_Web_color_English.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Dependencies
 2 | node_modules/
 3 | 
 4 | # Build output
 5 | _site/
 6 | 
 7 | # OS / Editor files
 8 | .DS_Store
 9 | .vscode/
10 | 
11 | # Logs and env
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | .env
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "company-website",
 3 |   "version": "1.0.0",
 4 |   "description": "Basic Eleventy company website",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "npx eleventy --serve",
 8 |     "build": "npx eleventy"
 9 |   },
10 |   "devDependencies": {
11 |     "@11ty/eleventy": "^3.0.0"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Company Website (Eleventy)
 2 | 
 3 | This is a basic static site structure using Eleventy (11ty).
 4 | 
 5 | ## Structure
 6 | - `.eleventy.js`: Eleventy configuration
 7 | - `package.json`: Project metadata and scripts
 8 | - `_layouts/base.njk`: Main layout template
 9 | - `index.njk`: Homepage
10 | 
11 | ## Getting Started
12 | 1. Install dependencies:
13 |    ```bash
14 |    npm install
15 |    ```
16 | 2. Start the development server:
17 |    ```bash
18 |    npm start
19 |    ```
20 | 3. Build the site:
21 |    ```bash
22 |    npm run build
23 |    ```
24 | 
25 | Customize layouts and content as needed for your company.
26 | 


--------------------------------------------------------------------------------
/.eleventy.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(eleventyConfig) {
 2 |   // Copy static assets (images, etc.) to the output as-is
 3 |   eleventyConfig.addPassthroughCopy({ "assets": "assets" });
 4 |   eleventyConfig.addWatchTarget("assets");
 5 | 
 6 |   // Using a custom domain on GitHub Pages: keep root path prefix
 7 |   const pathPrefix = "/";
 8 | 
 9 |   return {
10 |     pathPrefix,
11 |     dir: {
12 |       input: '.',
13 |       includes: '_includes',
14 |       layouts: '_layouts',
15 |       output: '_site'
16 |     },
17 |     templateFormats: ["njk", "html", "md"],
18 |     htmlTemplateEngine: "njk",
19 |     markdownTemplateEngine: "njk",
20 |     dataTemplateEngine: "njk"
21 |   };
22 | };
23 | 


--------------------------------------------------------------------------------
/.github/workflows/pages.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy Eleventy to GitHub Pages
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ main ]
 6 |   workflow_dispatch:
 7 | 
 8 | permissions:
 9 |   contents: read
10 |   pages: write
11 |   id-token: write
12 | 
13 | concurrency:
14 |   group: "pages"
15 |   cancel-in-progress: true
16 | 
17 | jobs:
18 |   build:
19 |     runs-on: ubuntu-latest
20 |     steps:
21 |       - name: Checkout
22 |         uses: actions/checkout@v4
23 |       - name: Setup Node.js
24 |         uses: actions/setup-node@v4
25 |         with:
26 |           node-version: 20
27 |           cache: npm
28 |       - name: Install dependencies
29 |         run: npm ci
30 |       - name: Build site
31 |         run: npm run build
32 |       - name: Upload Pages artifact
33 |         uses: actions/upload-pages-artifact@v3
34 |         with:
35 |           path: _site
36 | 
37 |   deploy:
38 |     needs: build
39 |     runs-on: ubuntu-latest
40 |     environment:
41 |       name: github-pages
42 |       url: ${{ steps.deployment.outputs.page_url }}
43 |     steps:
44 |       - name: Deploy to GitHub Pages
45 |         id: deployment
46 |         uses: actions/deploy-pages@v4
47 | 


--------------------------------------------------------------------------------
/.github/copilot-instructions.md:
--------------------------------------------------------------------------------
 1 | <!-- Use this file to provide workspace-specific custom instructions to Copilot. For more details, visit https://code.visualstudio.com/docs/copilot/copilot-customization#_use-a-githubcopilotinstructionsmd-file -->
 2 | - [x] Verify that the copilot-instructions.md file in the .github directory is created.
 3 | 
 4 | - [x] Clarify Project Requirements
 5 | 	Project type: Eleventy static site for company website
 6 | 
 7 | - [x] Scaffold the Project
 8 | 	Basic Eleventy structure created: .eleventy.js, package.json, _layouts/base.njk, index.njk, README.md
 9 | 
10 | - [ ] Customize the Project
11 | 	Ready for further customization as per user requirements.
12 | 
13 | - [ ] Install Required Extensions
14 | 	No extensions needed for Eleventy basic setup.
15 | 
16 | - [ ] Compile the Project
17 | 	Run `npm install` to install dependencies and `npm start` to serve locally.
18 | 
19 | - [ ] Create and Run Task
20 | 	No custom tasks required for basic Eleventy setup.
21 | 
22 | - [ ] Launch the Project
23 | 	Run `npm start` to launch the local server.
24 | 
25 | - [x] Ensure Documentation is Complete
26 | 	README.md created and up to date.
27 | 
28 | ## Execution Guidelines
29 | - Work through each checklist item systematically.
30 | - Keep communication concise and focused.
31 | - Follow development best practices.
32 | 


--------------------------------------------------------------------------------
/index.njk:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Varro Software
 3 | layout: base.njk
 4 | ---
 5 | 
 6 | <section class="section hero">
 7 |     <div class="container">
 8 |         <span class="pill">Varro Software</span>
 9 |         <h1>Apps that make your day simpler.</h1>
10 |         <p>Varro Software is a small software studio building focused productivity and life management apps. We obsess over
11 |             clarity, speed, and joy—so you can focus on what matters.</p>
12 |     <p class="cta">
13 |             <a class="btn" href="{{ '/varro-money/' | url }}"><span>Learn more about Varro Money →</span></a>
14 |         </p>
15 |     </div>
16 | </section>
17 | <section class="section">
18 |     <div class="container">
19 |         <h2>Products</h2>
20 |         <p>Our products are designed to be fast, private, and delightful, with an emphasis on strong visual design and
21 |             effortless workflows.</p>
22 |         <div class="products">
23 |             <a class="card card--highlight card--click" href="{{ '/varro-money/' | url }}">
24 |                 <div class="card__inner">
25 |                     <h3>Varro Money</h3>
26 |                     <p>A simple expense tracking and budgeting app for iOS and Android. Stay on top of spending with zero clutter and a
27 |                         clean, friendly design.</p>
28 |                     <p class="link-underline">Read more →</p>
29 |                 </div>
30 |             </a>
31 |         </div>
32 |     </div>
33 | </section>


--------------------------------------------------------------------------------
/varro-money/privacy/index.njk:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: base.njk
 3 | title: Varro Money — Privacy Policy
 4 | ---
 5 | 
 6 | <section class="section policy">
 7 |   <div class="container">
 8 |     <h1>Varro Money – Privacy Policy</h1>
 9 |     <p>Varro Money helps you track income and expenses. Your data primarily lives on your device. If you enable Google Sheets sync, the app accesses your Google account to create and update a spreadsheet in your Google Drive.</p>
10 | 
11 |     <h2>What we collect</h2>
12 |     <ul>
13 |       <li><strong>On-device data:</strong> transactions and categories are stored locally on your device.</li>
14 |       <li><strong>If you enable sync:</strong> the app uses your Google account to create and write to a spreadsheet you own. We request these scopes: email and spreadsheets.</li>
15 |     </ul>
16 | 
17 |     <h2>How your data is used</h2>
18 |     <ul>
19 |       <li>On-device data is used solely to power app features.</li>
20 |       <li>If sync is enabled, the app writes and updates rows in your Google Sheets spreadsheet to back up and restore your data between devices.</li>
21 |     </ul>
22 | 
23 |     <h2>What we don’t do</h2>
24 |     <ul>
25 |       <li>We don't have any access to your data.</li>
26 |       <li>Therefore no selling or sharing of your data with third parties.</li>
27 |       <li>No analytics SDKs. We don't follow how you are using this app.</li>
28 |     </ul>
29 | 
30 |     <h2>Data retention and deletion</h2>
31 |     <ul>
32 |       <li>Delete data by removing it in the app. To remove synced data, delete the spreadsheet from your Google Drive.</li>
33 |       <li>You can disconnect Google Sheets sync at any time from Settings.</li>
34 |     </ul>
35 | 
36 |     <h2>Security</h2>
37 |     <p>Google Sign-In is used to authenticate and obtain a short‑lived access token. Data in Google Sheets is protected by your Google account.</p>
38 | 
39 |     <h2>Contact</h2>
40 |     <p>For questions or requests, contact: <a href="mailto:support@varrosoftware.com">support@varrosoftware.com</a></p>
41 | 
42 |   <p><a href="{{ '/varro-money/' | url }}">Back to Varro Money</a></p>
43 |   </div>
44 | </section>
45 | 


--------------------------------------------------------------------------------
/varro-money/index.njk:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: base.njk
  3 | title: Varro Money — Simple Expense Tracking
  4 | ---
  5 | 
  6 | <section class="section hero">
  7 |     <div class="container">
  8 |         <span class="pill">Varro Money</span>
  9 |         <h1>Simple expense tracking and budgeting.</h1>
 10 |         <p>Track spending in seconds and stay on budget—without the overwhelm. Varro Money is designed to help you to
 11 |             <span class="marker">change your spending habits</span>.</p>
 12 |     </div>
 13 | </section>
 14 | 
 15 | <section class="section">
 16 |     <div class="container">
 17 |         <h2>You need to change your spending habits</h2>
 18 |         <p>Change starts in the moment you spend. Varro Money puts your attention right at the point of purchase so every quick
 19 |             entry builds awareness and real control. You'll get hooked on improving your saving percentage—watch it climb as small,
 20 |             everyday decisions compound week after week.</p>
 21 |         <p>Tracking shouldn’t feel like work. We make it fast, friendly, and even a little fun—so you actually enjoy keeping up
 22 |             with it. You’ll get a clear picture of where your money goes—no fog, no guesswork.</p>
 23 |         <p>When most people earn more they start immediatly spending more, staying paycheck to paycheck. It doesn’t have to be
 24 |             that way. Build the habit, shift the pattern, and keep more of what you make.</p>
 25 |     </div>
 26 | </section>
 27 | 
 28 | <!-- Store buttons after "You need to change your spending habits" section -->
 29 | <section class="section">
 30 |     <div class="container">
 31 |     <div class="store-buttons store-buttons--center">
 32 |             <a class="store-badge" href="#" rel="noopener" aria-label="Download on the App Store">
 33 |                 <img alt="Download on the App Store" src="{{ '/assets/img/download-app-store.svg' | url }}" height="44"/>
 34 |             </a>
 35 |             <a class="store-badge" href="#" rel="noopener" aria-label="Get it on Google Play">
 36 |                 <img alt="Get it on Google Play" src="{{ '/assets/img/GetItOnGooglePlay_Badge_Web_color_English.png' | url }}" height="44"/>
 37 |             </a>
 38 |         </div>
 39 |     </div>
 40 | </section>
 41 | 
 42 | <section class="section">
 43 |     <div class="container container--full">
 44 |         <div class="gallery" aria-label="App screenshots">
 45 |             <div class="gallery__track">
 46 |                 <div class="gallery__item"><img class="gallery__img" src="{{ '/assets/img/varro_money/Screenshot_20250827_000437.jpg' | url }}" alt="Varro Money screenshot 1" loading="lazy"></div>
 47 |                 <div class="gallery__item"><img class="gallery__img" src="{{ '/assets/img/varro_money/Screenshot_20250827_000450.jpg' | url }}" alt="Varro Money screenshot 2" loading="lazy"></div>
 48 |                 <div class="gallery__item"><img class="gallery__img" src="{{ '/assets/img/varro_money/Screenshot_20250827_000606.jpg' | url }}" alt="Varro Money screenshot 3" loading="lazy"></div>
 49 |                 <div class="gallery__item"><img class="gallery__img" src="{{ '/assets/img/varro_money/Screenshot_20250827_000800.jpg' | url }}" alt="Varro Money screenshot 4" loading="lazy"></div>
 50 |                 <div class="gallery__item"><img class="gallery__img" src="{{ '/assets/img/varro_money/Screenshot_20250827_000805.jpg' | url }}" alt="Varro Money screenshot 5" loading="lazy"></div>
 51 |                 <div class="gallery__item"><img class="gallery__img" src="{{ '/assets/img/varro_money/Screenshot_20250827_000822.jpg' | url }}" alt="Varro Money screenshot 6" loading="lazy"></div>
 52 |                 <div class="gallery__item"><img class="gallery__img" src="{{ '/assets/img/varro_money/Screenshot_20250827_000829.jpg' | url }}" alt="Varro Money screenshot 7" loading="lazy"></div>
 53 |                 <div class="gallery__item"><img class="gallery__img" src="{{ '/assets/img/varro_money/Screenshot_20250827_000839.jpg' | url }}" alt="Varro Money screenshot 8" loading="lazy"></div>
 54 |                 <div class="gallery__item"><img class="gallery__img" src="{{ '/assets/img/varro_money/Screenshot_20250827_000949.jpg' | url }}" alt="Varro Money screenshot 9" loading="lazy"></div>
 55 |             </div>
 56 |         </div>
 57 |     </div>
 58 | </section>
 59 | 
 60 | <section class="section">
 61 |     <div class="container">
 62 |         <h2>It's not about tracking every penny, it is about changing your habits</h2>
 63 |         We don’t automate bank imports for a reason. Manually adding spending builds awareness and control—and it must be
 64 |                         dead simple. Varro Money makes capture fast and frictionless so the habit sticks.
 65 |     </div>
 66 | </section>
 67 | 
 68 | <section class="section">
 69 |     <div class="container container--wide">
 70 |         <div class="features-grid">
 71 |             <div class="card">
 72 |                 <div class="card__inner">
 73 |                     <h3>Saving percentage is all we focus</h3>
 74 |                     <p>What matters is how much of your income you can save toward targets—investments, loans, or savings goals. You don’t need to chase every penny; shift habits and the numbers follow.</p>
 75 |                 </div>
 76 |             </div>
 77 |             <div class="card">
 78 |                 <div class="card__inner">
 79 |                     <h3>Simple expense and income tracking</h3>
 80 |                     <p>Lightning‑fast entry with a friendly flow keeps you motivated day after day.</p>
 81 |                 </div>
 82 |             </div>
 83 |             <div class="card">
 84 |                 <div class="card__inner">
 85 |                     <h3>Expense categories and budgets</h3>
 86 |                     <p>Understand spending right when it happens. See budget status as you log expenses—no surprises at month end.</p>
 87 |                 </div>
 88 |             </div>
 89 |             <div class="card">
 90 |                 <div class="card__inner">
 91 |                     <h3>Visual graphs</h3>
 92 |                     <p>Clear visuals help you see patterns quickly—and make the change.</p>
 93 |                 </div>
 94 |             </div>
 95 |             <div class="card">
 96 |                 <div class="card__inner">
 97 |                     <h3>No recurring fees</h3>
 98 |                     <p>Own your tools. Keep your budget without another monthly charge.</p>
 99 |                 </div>
100 |             </div>
101 |             <div class="card">
102 |                 <div class="card__inner">
103 |                     <h3>Google Sheets Sync</h3>
104 |                     <p>Backup and restore across devices with a simple spreadsheet you control.</p>
105 |                 </div>
106 |             </div>
107 |         </div>
108 |     </div>
109 | </section>
110 | <section class="section">
111 |     <div class="container">
112 |         <div class="store-buttons store-buttons--center" style="margin-bottom: 1rem;">
113 |             <a class="store-badge" href="#" rel="noopener" aria-label="Download on the App Store">
114 |                 <img alt="Download on the App Store" src="{{ '/assets/img/download-app-store.svg' | url }}" height="44"/>
115 |             </a>
116 |             <a class="store-badge" href="#" rel="noopener" aria-label="Get it on Google Play">
117 |                 <img alt="Get it on Google Play" src="{{ '/assets/img/GetItOnGooglePlay_Badge_Web_color_English.png' | url }}" height="44"/>
118 |             </a>
119 |         </div>
120 |         <p class="center">
121 |             <a href="{{ '/varro-money/privacy/' | url }}">Privacy Policy</a>
122 |         </p>
123 |     </div>
124 | </section>


--------------------------------------------------------------------------------
/assets/img/download-app-store.svg:
--------------------------------------------------------------------------------
 1 | <svg id="livetype" xmlns="http://www.w3.org/2000/svg" width="119.66407" height="40" viewBox="0 0 119.66407 40">
 2 |   <title>Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917</title>
 3 |   <g>
 4 |     <g>
 5 |       <g>
 6 |         <path d="M110.13477,0H9.53468c-.3667,0-.729,0-1.09473.002-.30615.002-.60986.00781-.91895.0127A13.21476,13.21476,0,0,0,5.5171.19141a6.66509,6.66509,0,0,0-1.90088.627A6.43779,6.43779,0,0,0,1.99757,1.99707,6.25844,6.25844,0,0,0,.81935,3.61816a6.60119,6.60119,0,0,0-.625,1.90332,12.993,12.993,0,0,0-.1792,2.002C.00587,7.83008.00489,8.1377,0,8.44434V31.5586c.00489.3105.00587.6113.01515.9219a12.99232,12.99232,0,0,0,.1792,2.0019,6.58756,6.58756,0,0,0,.625,1.9043A6.20778,6.20778,0,0,0,1.99757,38.001a6.27445,6.27445,0,0,0,1.61865,1.1787,6.70082,6.70082,0,0,0,1.90088.6308,13.45514,13.45514,0,0,0,2.0039.1768c.30909.0068.6128.0107.91895.0107C8.80567,40,9.168,40,9.53468,40H110.13477c.3594,0,.7246,0,1.084-.002.3047,0,.6172-.0039.9219-.0107a13.279,13.279,0,0,0,2-.1768,6.80432,6.80432,0,0,0,1.9082-.6308,6.27742,6.27742,0,0,0,1.6172-1.1787,6.39482,6.39482,0,0,0,1.1816-1.6143,6.60413,6.60413,0,0,0,.6191-1.9043,13.50643,13.50643,0,0,0,.1856-2.0019c.0039-.3106.0039-.6114.0039-.9219.0078-.3633.0078-.7246.0078-1.0938V9.53613c0-.36621,0-.72949-.0078-1.09179,0-.30664,0-.61426-.0039-.9209a13.5071,13.5071,0,0,0-.1856-2.002,6.6177,6.6177,0,0,0-.6191-1.90332,6.46619,6.46619,0,0,0-2.7988-2.7998,6.76754,6.76754,0,0,0-1.9082-.627,13.04394,13.04394,0,0,0-2-.17676c-.3047-.00488-.6172-.01074-.9219-.01269-.3594-.002-.7246-.002-1.084-.002Z" style="fill: #a6a6a6"/>
 7 |         <path d="M8.44483,39.125c-.30468,0-.602-.0039-.90429-.0107a12.68714,12.68714,0,0,1-1.86914-.1631,5.88381,5.88381,0,0,1-1.65674-.5479,5.40573,5.40573,0,0,1-1.397-1.0166,5.32082,5.32082,0,0,1-1.02051-1.3965,5.72186,5.72186,0,0,1-.543-1.6572,12.41351,12.41351,0,0,1-.1665-1.875c-.00634-.2109-.01464-.9131-.01464-.9131V8.44434S.88185,7.75293.8877,7.5498a12.37039,12.37039,0,0,1,.16553-1.87207,5.7555,5.7555,0,0,1,.54346-1.6621A5.37349,5.37349,0,0,1,2.61183,2.61768,5.56543,5.56543,0,0,1,4.01417,1.59521a5.82309,5.82309,0,0,1,1.65332-.54394A12.58589,12.58589,0,0,1,7.543.88721L8.44532.875H111.21387l.9131.0127a12.38493,12.38493,0,0,1,1.8584.16259,5.93833,5.93833,0,0,1,1.6709.54785,5.59374,5.59374,0,0,1,2.415,2.41993,5.76267,5.76267,0,0,1,.5352,1.64892,12.995,12.995,0,0,1,.1738,1.88721c.0029.2832.0029.5874.0029.89014.0079.375.0079.73193.0079,1.09179V30.4648c0,.3633,0,.7178-.0079,1.0752,0,.3252,0,.6231-.0039.9297a12.73126,12.73126,0,0,1-.1709,1.8535,5.739,5.739,0,0,1-.54,1.67,5.48029,5.48029,0,0,1-1.0156,1.3857,5.4129,5.4129,0,0,1-1.3994,1.0225,5.86168,5.86168,0,0,1-1.668.5498,12.54218,12.54218,0,0,1-1.8692.1631c-.2929.0068-.5996.0107-.8974.0107l-1.084.002Z"/>
 8 |       </g>
 9 |       <g id="_Group_" data-name="&lt;Group&gt;">
10 |         <g id="_Group_2" data-name="&lt;Group&gt;">
11 |           <g id="_Group_3" data-name="&lt;Group&gt;">
12 |             <path id="_Path_" data-name="&lt;Path&gt;" d="M24.76888,20.30068a4.94881,4.94881,0,0,1,2.35656-4.15206,5.06566,5.06566,0,0,0-3.99116-2.15768c-1.67924-.17626-3.30719,1.00483-4.1629,1.00483-.87227,0-2.18977-.98733-3.6085-.95814a5.31529,5.31529,0,0,0-4.47292,2.72787c-1.934,3.34842-.49141,8.26947,1.3612,10.97608.9269,1.32535,2.01018,2.8058,3.42763,2.7533,1.38706-.05753,1.9051-.88448,3.5794-.88448,1.65876,0,2.14479.88448,3.591.8511,1.48838-.02416,2.42613-1.33124,3.32051-2.66914a10.962,10.962,0,0,0,1.51842-3.09251A4.78205,4.78205,0,0,1,24.76888,20.30068Z" style="fill: #fff"/>
13 |             <path id="_Path_2" data-name="&lt;Path&gt;" d="M22.03725,12.21089a4.87248,4.87248,0,0,0,1.11452-3.49062,4.95746,4.95746,0,0,0-3.20758,1.65961,4.63634,4.63634,0,0,0-1.14371,3.36139A4.09905,4.09905,0,0,0,22.03725,12.21089Z" style="fill: #fff"/>
14 |           </g>
15 |         </g>
16 |         <g>
17 |           <path d="M42.30227,27.13965h-4.7334l-1.13672,3.35645H34.42727l4.4834-12.418h2.083l4.4834,12.418H43.438ZM38.0591,25.59082h3.752l-1.84961-5.44727h-.05176Z" style="fill: #fff"/>
18 |           <path d="M55.15969,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238H48.4302v1.50586h.03418a3.21162,3.21162,0,0,1,2.88281-1.60059C53.645,21.34766,55.15969,23.16406,55.15969,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C52.30227,29.01563,53.24953,27.81934,53.24953,25.96973Z" style="fill: #fff"/>
19 |           <path d="M65.12453,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238H58.395v1.50586h.03418A3.21162,3.21162,0,0,1,61.312,21.34766C63.60988,21.34766,65.12453,23.16406,65.12453,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C62.26711,29.01563,63.21438,27.81934,63.21438,25.96973Z" style="fill: #fff"/>
20 |           <path d="M71.71047,27.03613c.1377,1.23145,1.334,2.04,2.96875,2.04,1.56641,0,2.69336-.80859,2.69336-1.91895,0-.96387-.67969-1.541-2.28906-1.93652l-1.60937-.3877c-2.28027-.55078-3.33887-1.61719-3.33887-3.34766,0-2.14258,1.86719-3.61426,4.51855-3.61426,2.624,0,4.42285,1.47168,4.4834,3.61426h-1.876c-.1123-1.23926-1.13672-1.9873-2.63379-1.9873s-2.52148.75684-2.52148,1.8584c0,.87793.6543,1.39453,2.25488,1.79l1.36816.33594c2.54785.60254,3.60645,1.626,3.60645,3.44238,0,2.32324-1.85059,3.77832-4.79395,3.77832-2.75391,0-4.61328-1.4209-4.7334-3.667Z" style="fill: #fff"/>
21 |           <path d="M83.34621,19.2998v2.14258h1.72168v1.47168H83.34621v4.99121c0,.77539.34473,1.13672,1.10156,1.13672a5.80752,5.80752,0,0,0,.61133-.043v1.46289a5.10351,5.10351,0,0,1-1.03223.08594c-1.833,0-2.54785-.68848-2.54785-2.44434V22.91406H80.16262V21.44238H81.479V19.2998Z" style="fill: #fff"/>
22 |           <path d="M86.065,25.96973c0-2.84863,1.67773-4.63867,4.29395-4.63867,2.625,0,4.29492,1.79,4.29492,4.63867,0,2.85645-1.66113,4.63867-4.29492,4.63867C87.72609,30.6084,86.065,28.82617,86.065,25.96973Zm6.69531,0c0-1.9541-.89551-3.10742-2.40137-3.10742s-2.40039,1.16211-2.40039,3.10742c0,1.96191.89453,3.10645,2.40039,3.10645S92.76027,27.93164,92.76027,25.96973Z" style="fill: #fff"/>
23 |           <path d="M96.18606,21.44238h1.77246v1.541h.043a2.1594,2.1594,0,0,1,2.17773-1.63574,2.86616,2.86616,0,0,1,.63672.06934v1.73828a2.59794,2.59794,0,0,0-.835-.1123,1.87264,1.87264,0,0,0-1.93652,2.083v5.37012h-1.8584Z" style="fill: #fff"/>
24 |           <path d="M109.3843,27.83691c-.25,1.64355-1.85059,2.77148-3.89844,2.77148-2.63379,0-4.26855-1.76465-4.26855-4.5957,0-2.83984,1.64355-4.68164,4.19043-4.68164,2.50488,0,4.08008,1.7207,4.08008,4.46582v.63672h-6.39453v.1123a2.358,2.358,0,0,0,2.43555,2.56445,2.04834,2.04834,0,0,0,2.09082-1.27344Zm-6.28223-2.70215h4.52637a2.1773,2.1773,0,0,0-2.2207-2.29785A2.292,2.292,0,0,0,103.10207,25.13477Z" style="fill: #fff"/>
25 |         </g>
26 |       </g>
27 |     </g>
28 |     <g id="_Group_4" data-name="&lt;Group&gt;">
29 |       <g>
30 |         <path d="M37.82619,8.731a2.63964,2.63964,0,0,1,2.80762,2.96484c0,1.90625-1.03027,3.002-2.80762,3.002H35.67092V8.731Zm-1.22852,5.123h1.125a1.87588,1.87588,0,0,0,1.96777-2.146,1.881,1.881,0,0,0-1.96777-2.13379h-1.125Z" style="fill: #fff"/>
31 |         <path d="M41.68068,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C44.57522,13.99463,45.01369,13.42432,45.01369,12.44434Z" style="fill: #fff"/>
32 |         <path d="M51.57326,14.69775h-.92187l-.93066-3.31641h-.07031l-.92676,3.31641h-.91309l-1.24121-4.50293h.90137l.80664,3.436h.06641l.92578-3.436h.85254l.92578,3.436h.07031l.80273-3.436h.88867Z" style="fill: #fff"/>
33 |         <path d="M53.85354,10.19482H54.709v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915h-.88867V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
34 |         <path d="M59.09377,8.437h.88867v6.26074h-.88867Z" style="fill: #fff"/>
35 |         <path d="M61.21779,12.44434a2.13346,2.13346,0,1,1,4.24756,0,2.1338,2.1338,0,1,1-4.24756,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C64.11232,13.99463,64.5508,13.42432,64.5508,12.44434Z" style="fill: #fff"/>
36 |         <path d="M66.4009,13.42432c0-.81055.60352-1.27783,1.6748-1.34424l1.21973-.07031v-.38867c0-.47559-.31445-.74414-.92187-.74414-.49609,0-.83984.18213-.93848.50049h-.86035c.09082-.77344.81836-1.26953,1.83984-1.26953,1.12891,0,1.76563.562,1.76563,1.51318v3.07666h-.85547v-.63281h-.07031a1.515,1.515,0,0,1-1.35254.707A1.36026,1.36026,0,0,1,66.4009,13.42432Zm2.89453-.38477v-.37646l-1.09961.07031c-.62012.0415-.90137.25244-.90137.64941,0,.40527.35156.64111.835.64111A1.0615,1.0615,0,0,0,69.29543,13.03955Z" style="fill: #fff"/>
37 |         <path d="M71.34816,12.44434c0-1.42285.73145-2.32422,1.86914-2.32422a1.484,1.484,0,0,1,1.38086.79h.06641V8.437h.88867v6.26074h-.85156v-.71143h-.07031a1.56284,1.56284,0,0,1-1.41406.78564C72.0718,14.772,71.34816,13.87061,71.34816,12.44434Zm.918,0c0,.95508.4502,1.52979,1.20313,1.52979.749,0,1.21191-.583,1.21191-1.52588,0-.93848-.46777-1.52979-1.21191-1.52979C72.72121,10.91846,72.26613,11.49707,72.26613,12.44434Z" style="fill: #fff"/>
38 |         <path d="M79.23,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C82.12453,13.99463,82.563,13.42432,82.563,12.44434Z" style="fill: #fff"/>
39 |         <path d="M84.66945,10.19482h.85547v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915H87.605V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
40 |         <path d="M93.51516,9.07373v1.1416h.97559v.74854h-.97559V13.2793c0,.47168.19434.67822.63672.67822a2.96657,2.96657,0,0,0,.33887-.02051v.74023a2.9155,2.9155,0,0,1-.4834.04541c-.98828,0-1.38184-.34766-1.38184-1.21582v-2.543h-.71484v-.74854h.71484V9.07373Z" style="fill: #fff"/>
41 |         <path d="M95.70461,8.437h.88086v2.48145h.07031a1.3856,1.3856,0,0,1,1.373-.80664,1.48339,1.48339,0,0,1,1.55078,1.67871v2.90723H98.69v-2.688c0-.71924-.335-1.0835-.96289-1.0835a1.05194,1.05194,0,0,0-1.13379,1.1416v2.62988h-.88867Z" style="fill: #fff"/>
42 |         <path d="M104.76125,13.48193a1.828,1.828,0,0,1-1.95117,1.30273A2.04531,2.04531,0,0,1,100.73,12.46045a2.07685,2.07685,0,0,1,2.07617-2.35254c1.25293,0,2.00879.856,2.00879,2.27V12.688h-3.17969v.0498a1.1902,1.1902,0,0,0,1.19922,1.29,1.07934,1.07934,0,0,0,1.07129-.5459Zm-3.126-1.45117h2.27441a1.08647,1.08647,0,0,0-1.1084-1.1665A1.15162,1.15162,0,0,0,101.63527,12.03076Z" style="fill: #fff"/>
43 |       </g>
44 |     </g>
45 |   </g>
46 | </svg>
47 | 


--------------------------------------------------------------------------------
/_layouts/base.njk:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8"/>
  5 |         <meta name="viewport" content="width=device-width, initial-scale=1"/>
  6 |         <meta name="color-scheme" content="light dark"/>
  7 |         <title>{{ title or "Varro Software" }}</title>
  8 |         <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 |         <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
 11 |         <script>
 12 |             // Initialize theme ASAP to avoid flash of incorrect theme
 13 |             (function () {
 14 |                 try {
 15 |                     var stored = localStorage.getItem('theme');
 16 |                     var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 17 |                     var theme = stored || (
 18 |                         prefersDark
 19 |                         ? 'dark'
 20 |                         : 'light');
 21 |                     document.documentElement.setAttribute('data-theme', theme);
 22 |                 } catch (e) {}
 23 |             })();
 24 |         </script>
 25 |         <style>:root
 26 |         {
 27 |             --yellow: #FFD600;
 28 |             --black: #111111;
 29 |             --white: #ffffff;
 30 |             --gray: #BDBDBD;
 31 |         }
 32 |         html {
 33 |             color-scheme: light dark;
 34 |         }
 35 |         * {
 36 |             box-sizing: border-box;
 37 |         }
 38 |         html,
 39 |         body {
 40 |             min-height: 100%;
 41 |             background: var(--black);
 42 |         }
 43 |         body {
 44 |             margin: 0;
 45 |             font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 46 |             background: var(--white);
 47 |             color: var(--black);
 48 |             line-height: 1.4;
 49 |             text-rendering: optimizeLegibility;
 50 |             -webkit-font-smoothing: antialiased;
 51 |             -moz-osx-font-smoothing: grayscale;
 52 |         }
 53 |         main {
 54 |             background: var(--white);
 55 |         }
 56 |         /* Theme toggle button */
 57 |         .theme-toggle {
 58 |             position: fixed;
 59 |             top: 14px;
 60 |             right: 14px;
 61 |             width: 46px;
 62 |             height: 46px;
 63 |             display: grid;
 64 |             place-items: center;
 65 |             background: var(--yellow);
 66 |             color: var(--black);
 67 |             border: 3px solid var(--black);
 68 |             border-radius: 999px;
 69 |             cursor: pointer;
 70 |             z-index: 1000;
 71 |         }
 72 |         .theme-toggle:focus-visible {
 73 |             outline: 2px solid currentColor;
 74 |             outline-offset: 3px;
 75 |         }
 76 |         .theme-toggle svg {
 77 |             width: 22px;
 78 |             height: 22px;
 79 |         }
 80 |         /* Home link button (top-left) */
 81 |         .home-link {
 82 |             position: fixed;
 83 |             top: 14px;
 84 |             left: 14px;
 85 |             width: 46px;
 86 |             height: 46px;
 87 |             display: grid;
 88 |             place-items: center;
 89 |             background: var(--yellow);
 90 |             color: var(--black);
 91 |             border: 3px solid var(--black);
 92 |             border-radius: 999px;
 93 |             text-decoration: none;
 94 |             z-index: 1000;
 95 |         }
 96 |         .home-link:focus-visible {
 97 |             outline: 2px solid currentColor;
 98 |             outline-offset: 3px;
 99 |         }
100 |         .home-link svg {
101 |             width: 22px;
102 |             height: 22px;
103 |         }
104 |         .icon {
105 |             display: none;
106 |         }
107 |         [data-theme="light"] .icon-moon {
108 |             display: block;
109 |         }
110 |         [data-theme="dark"] .icon-sun {
111 |             display: block;
112 |         }
113 |         .container {
114 |             width: 100%;
115 |             max-width: 1100px;
116 |             margin: 0 auto;
117 |             padding: 0 1.25rem;
118 |         }
119 |         .container--wide {
120 |             max-width: 1400px;
121 |         }
122 |         .container--full {
123 |             max-width: none;
124 |             width: 100%;
125 |             padding-left: 1rem;
126 |             padding-right: 1rem;
127 |         }
128 |         /* Header removed for a cleaner, hero-first layout */
129 |         /* Typography */
130 |         h1 {
131 |             font-size: clamp(2.75rem, 7.5vw, 5.5rem);
132 |             line-height: 1.05;
133 |             margin: 0 0 0.75rem;
134 |             font-weight: 700;
135 |         }
136 |         h2 {
137 |             font-size: clamp(1.75rem, 3.5vw, 2.5rem);
138 |             line-height: 1.1;
139 |             margin: 0 0 0.75rem;
140 |             font-weight: 700;
141 |         }
142 |         h3 {
143 |             font-size: clamp(1.25rem, 2.6vw, 1.75rem);
144 |             line-height: 1.15;
145 |             margin: 0 0 0.5rem;
146 |             font-weight: 700;
147 |         }
148 |         p {
149 |             font-size: clamp(1.125rem, 1.6vw, 1.25rem);
150 |             margin: 0.75rem 0;
151 |         }
152 |         ul,
153 |         ol,
154 |         li {
155 |             font-size: clamp(1.125rem, 1.6vw, 1.25rem);
156 |         }
157 |         /* Sections */
158 |         .section {
159 |             padding: 3rem 0;
160 |         }
161 |         .hero {
162 |             padding: 8rem 0 3rem;
163 |             text-align: center;
164 |             .feature {
165 |                 display: grid;
166 |                 gap: 1.5rem;
167 |                 align-items: start;
168 |             }
169 |         }
170 |         /* Privacy policy page: smaller headings */
171 |         .policy h1 {
172 |             font-size: clamp(1.75rem, 4vw, 3rem);
173 |         }
174 |         .policy h2 {
175 |             font-size: clamp(1.125rem, 2.5vw, 1.75rem);
176 |         }
177 |         /* Extra spacing above hero CTA */
178 |         .hero .cta {
179 |             margin-top: 1.5rem;
180 |         }
181 |         .accent {
182 |             color: var(--yellow);
183 |         }
184 |         /* Marker-style highlight */
185 |         .marker {
186 |             background: linear-gradient(transparent 62%, rgba(255, 214, 0, 0.55) 62%);
187 |             -webkit-box-decoration-break: clone;
188 |             box-decoration-break: clone;
189 |             padding: 0 0.12em;
190 |         }
191 |         .pill {
192 |             display: inline-block;
193 |             background: var(--black);
194 |             color: var(--white);
195 |             font-weight: 700;
196 |             padding: 0.6rem 1.1rem;
197 |             border-radius: 999px;
198 |             letter-spacing: 1.25px;
199 |             font-size: 1.35rem;
200 |             margin-bottom: 0.75rem;
201 |         }
202 |         /* Feature sections */
203 |         .features {
204 |             display: grid;
205 |             gap: 8rem;
206 |         }
207 |         .feature {
208 |             display: grid;
209 |             gap: 3rem;
210 |             align-items: start;
211 |         }
212 |         .feature__title {
213 |             margin: 0 0 2rem;
214 |             font-size: clamp(2.1rem, 3vw, 3.5rem);
215 |             line-height: 1.12;
216 |             text-wrap: balance;
217 |         }
218 |         .feature__content {
219 |             align-self: start;
220 |             font-size: clamp(1.35rem, 2.6vw, 1.7rem);
221 |             line-height: 1.55;
222 |         }
223 |         .feature__content >:first-child {
224 |             margin-top: 0;
225 |         }
226 |         .feature__content p {
227 |             margin: 0.5rem 0;
228 |         }
229 |         .feature__img {
230 |             display: grid;
231 |             place-items: center;
232 |             background: var(--yellow);
233 |             color: var(--black);
234 |             border: 3px solid var(--black);
235 |             border-radius: 14px;
236 |             box-shadow: 8px 8px 0 var(--black);
237 |             font-weight: 700;
238 |             letter-spacing: 0.5px;
239 |         }
240 |         .feature__img img {
241 |             width: 100%;
242 |             height: 100%;
243 |             object-fit: cover;
244 |             border-radius: 10px;
245 |             display: block;
246 |         }
247 |         /* Gallery (horizontal scroll) */
248 |         .gallery {
249 |             overflow-x: auto;
250 |             -webkit-overflow-scrolling: touch;
251 |             scroll-snap-type: x proximity;
252 |             padding: 0.25rem;
253 |         }
254 |         .gallery__item {
255 |             flex: 0 0 auto;
256 |             width: clamp(200px, 32vw, 320px);
257 |             border: 3px solid var(--black);
258 |             border-radius: 12px;
259 |             box-shadow: 6px 6px 0 var(--black);
260 |             background: var(--white);
261 |             overflow: hidden;
262 |             scroll-snap-align: start;
263 |         }
264 |         .gallery__img {
265 |             width: 100%;
266 |             height: 100%;
267 |             object-fit: cover;
268 |             display: block;
269 |         }
270 |         [data-theme="dark"] .gallery__item {
271 |             background: var(--black);
272 |             border-color: var(--white);
273 |             box-shadow: 6px 6px 0 var(--white);
274 |         }
275 |         /* Horizontal gallery */
276 |         .gallery {
277 |             margin: 1rem 0 2rem;
278 |         }
279 |         .gallery__track {
280 |             display: flex;
281 |             gap: 4rem;
282 |             overflow-x: auto;
283 |             padding-bottom: 0.5rem;
284 |             scroll-snap-type: x mandatory;
285 |             -webkit-overflow-scrolling: touch;
286 |         }
287 |         .gallery__track::-webkit-scrollbar {
288 |             height: 8px;
289 |         }
290 |         .gallery__track::-webkit-scrollbar-thumb {
291 |             background: var(--gray);
292 |             border-radius: 4px;
293 |         }
294 |         .gallery__item {
295 |             flex: 0 0 auto;
296 |             width: 260px;
297 |             border: 3px solid var(--black);
298 |             border-radius: 12px;
299 |             box-shadow: 8px 8px 0 var(--black);
300 |             background: var(--white);
301 |             scroll-snap-align: start;
302 |             overflow: hidden;
303 |         }
304 |         .gallery__img {
305 |             display: block;
306 |             width: 100%;
307 |             height: auto;
308 |         }
309 |         /* Text-only feature helper */
310 |         .feature--no-media .feature__media {
311 |             display: none;
312 |         }
313 |         @media(min-width: 720px) {
314 |             .feature--no-media .feature__title,
315 |             .feature--no-media .feature__content {
316 |                 grid-column: 1;
317 |             }
318 |         }
319 |         /* Dark theme adjustments for gallery */
320 |         [data-theme="dark"] .gallery__item {
321 |             border-color: var(--white);
322 |             box-shadow: 8px 8px 0 var(--white);
323 |             background: var(--black);
324 |         }
325 |         @media(min-width: 720px) {
326 |             .feature {
327 |                 grid-template-columns: 1fr 1fr;
328 |                 /* tighter vertical spacing between title and content */
329 |                 row-gap: 0.25rem;
330 |                 column-gap: 3rem;
331 |                 grid-auto-flow: dense;
332 |             }
333 |             /* Default layout: media left, text right */
334 |             .feature__media {
335 |                 grid-column: 1;
336 |                 grid-row: 1;
337 |             }
338 |             .feature__title {
339 |                 grid-column: 2;
340 |             }
341 |             .feature__content {
342 |                 grid-column: 2;
343 |                 grid-row: 1;
344 |                 padding-top: 0;
345 |             }
346 |             /* Alt layout: media right, text left */
347 |             .feature--alt .feature__media {
348 |                 grid-column: 2;
349 |                 grid-row: 1;
350 |             }
351 |             .feature--alt .feature__title {
352 |                 grid-column: 1;
353 |             }
354 |             .feature--alt .feature__content {
355 |                 grid-column: 1;
356 |                 grid-row: 1;
357 |                 padding-top: 0;
358 |             }
359 |             /* feature titles span the full text column */
360 |             /* When text column is on the left, drop left padding for a clean edge */
361 |             .feature--alt .feature__content {
362 |                 padding-left: 0;
363 |             }
364 |         }
365 |         /* Product card */
366 |         .products {
367 |             display: grid;
368 |             grid-template-columns: 1fr;
369 |             gap: 1.25rem;
370 |             margin-top: 2rem;
371 |         }
372 |         .card {
373 |             position: relative;
374 |             overflow: hidden;
375 |             border: 3px solid var(--black);
376 |             padding: 1.25rem;
377 |             border-radius: 14px;
378 |             box-shadow: 8px 8px 0 var(--yellow);
379 |             background: var(--white);
380 |             transition: transform 80ms ease, box-shadow 120ms ease, background-color 140ms ease, color 140ms ease;
381 |         }
382 |         .card__inner {
383 |             position: relative;
384 |             z-index: 1;
385 |         }
386 |         /* Sliding overlay for hover effect */
387 |         .card::before {
388 |             content: "";
389 |             position: absolute;
390 |             inset: 0;
391 |             background: var(--black);
392 |             transform: translateX(-105%);
393 |             transition: transform 260ms ease;
394 |             z-index: 0;
395 |         }
396 |         .card h3 {
397 |             font-size: clamp(1.35rem, 2.2vw, 1.75rem);
398 |             margin: 0 0 0.25rem;
399 |         }
400 |         .card p {
401 |             margin: 0.25rem 0;
402 |         }
403 |         .card--click {
404 |             display: block;
405 |             color: var(--black);
406 |             text-decoration: none;
407 |         }
408 |         .card--click:hover {
409 |             transform: none;
410 |             box-shadow: 12px 12px 0 var(--gray);
411 |         }
412 |         /* Highlighted product card (yellow base -> black on hover) */
413 |         .card--highlight {
414 |             background: var(--yellow);
415 |             color: var(--black);
416 |             box-shadow: 10px 10px 0 var(--black);
417 |             border-color: var(--black);
418 |         }
419 |         .card--highlight.card--click:hover {
420 |             color: var(--white);
421 |             box-shadow: 12px 12px 0 var(--gray);
422 |         }
423 |         .card--highlight.card--click:hover::before {
424 |             transform: translateX(0);
425 |         }
426 |         /* Ensure content sits above the overlay */
427 |         .card--click > * {
428 |             position: relative;
429 |             z-index: 1;
430 |         }
431 |         /* Motion preferences */
432 |         @media(prefers-reduced-motion: reduce) {
433 |             .card::before {
434 |                 transition: none;
435 |             }
436 |             .card--click:hover {
437 |                 transform: none;
438 |             }
439 |         }
440 |         @media(min-width: 720px) {
441 |             .products {
442 |                 grid-template-columns: repeat(2, 1fr);
443 |             }
444 |         }
445 |         /* Features grid (3-column responsive) */
446 |         .features-grid {
447 |             display: grid;
448 |             grid-template-columns: 1fr;
449 |             gap: 1.25rem;
450 |             margin-top: 2rem;
451 |         }
452 |         @media(min-width: 720px) {
453 |             .features-grid {
454 |                 grid-template-columns: repeat(2, 1fr);
455 |             }
456 |         }
457 |         @media(min-width: 1100px) {
458 |             .features-grid {
459 |                 grid-template-columns: repeat(3, 1fr);
460 |             }
461 |         }
462 |         /* Footer */
463 |         footer {
464 |             background: var(--yellow);
465 |             color: var(--black);
466 |             text-align: center;
467 |             padding: 1.5rem 0;
468 |             font-weight: 700;
469 |             font-size: 1.05rem;
470 |             border-top: 8px solid var(--black);
471 |         }
472 |         .footer-nav {
473 |             margin-bottom: 1rem;
474 |         }
475 |         .footer-nav a {
476 |             text-decoration: none;
477 |             font-weight: 700;
478 |             font-size: clamp(1.125rem, 2.2vw, 1.4rem);
479 |             letter-spacing: 0.5px;
480 |         }
481 |         .footer-nav a:hover {
482 |             text-decoration: underline;
483 |         }
484 |         footer p {
485 |             font-size: 0.9rem;
486 |             font-weight: 600;
487 |             margin: 0.25rem 0 0;
488 |         }
489 |         a {
490 |             color: var(--black);
491 |             text-decoration: underline;
492 |         }
493 |         .link-underline {
494 |             text-decoration: underline;
495 |             text-underline-offset: 3px;
496 |             text-decoration-thickness: 2px;
497 |         }
498 |         /* Buttons match highlighted card style */
499 |         .btn {
500 |             position: relative;
501 |             overflow: hidden;
502 |             display: inline-block;
503 |             background: var(--yellow);
504 |             color: var(--black);
505 |             text-decoration: none;
506 |             font-weight: 700;
507 |             padding: 0.9rem 1.15rem;
508 |             border-radius: 12px;
509 |             border: 3px solid var(--black);
510 |             box-shadow: 8px 8px 0 var(--black);
511 |             transition: box-shadow 120ms ease, color 140ms ease;
512 |         }
513 |         .btn::before {
514 |             content: "";
515 |             position: absolute;
516 |             inset: 0;
517 |             background: var(--black);
518 |             transform: translateX(-105%);
519 |             transition: transform 260ms ease;
520 |             z-index: 0;
521 |         }
522 |         .btn:hover {
523 |             box-shadow: 10px 10px 0 var(--gray);
524 |             color: var(--white);
525 |         }
526 |         .btn:hover::before {
527 |             transform: translateX(0);
528 |         }
529 |         .btn > * {
530 |             position: relative;
531 |             z-index: 1;
532 |         }
533 |         /* Brand-colored text selection */
534 |         ::selection {
535 |             background: var(--yellow);
536 |             color: var(--black);
537 |         }
538 |         ::-moz-selection {
539 |             background: var(--yellow);
540 |             color: var(--black);
541 |         }
542 |         /* Store buttons */
543 |         .store-buttons {
544 |             display: flex;
545 |             flex-wrap: wrap;
546 |             gap: 0.75rem;
547 |             align-items: center;
548 |         }
549 |         .store-buttons--center {
550 |             justify-content: center;
551 |         }
552 |         /* Approved badges should not be restyled; just size the container */
553 |         .store-badge {
554 |             display: inline-block;
555 |             line-height: 0;
556 |         }
557 |         .store-badge img {
558 |             height: 44px;
559 |             width: auto;
560 |             display: block;
561 |         }
562 |         .legal-notice {
563 |             font-size: 0.8rem;
564 |             opacity: 0.8;
565 |             margin-top: 0.5rem;
566 |         }
567 |         .center {
568 |             text-align: center;
569 |         }
570 |         /* Dark theme overrides */
571 |         [data-theme="dark"] {
572 |             /* Soften extremes for dark mode */
573 |             --black: #1e1e1e; /* softer near-black */
574 |             --white: #f2f2f2; /* softer near-white */
575 |             --gray: #9a9a9a; /* slightly lighter gray for contrast */
576 |         }
577 |         [data-theme="dark"] body {
578 |             background: var(--black);
579 |             color: var(--white);
580 |         }
581 |         [data-theme="dark"] main {
582 |             background: var(--black);
583 |         }
584 |         [data-theme="dark"] a {
585 |             color: var(--white);
586 |         }
587 |         /* Keep the home icon black in dark mode */
588 |         [data-theme="dark"] .home-link {
589 |             color: var(--black);
590 |         }
591 |         [data-theme="dark"] .pill {
592 |             background: var(--white);
593 |             color: var(--black);
594 |         }
595 |         [data-theme="dark"] .feature__img {
596 |             border-color: var(--white);
597 |             box-shadow: 8px 8px 0 #333333;
598 |         }
599 |         [data-theme="dark"] .card {
600 |             background: var(--black);
601 |             color: var(--white);
602 |             border-color: var(--white);
603 |             box-shadow: 8px 8px 0 var(--white);
604 |         }
605 |         [data-theme="dark"] .card--click {
606 |             color: var(--white);
607 |         }
608 |         [data-theme="dark"] .btn {
609 |             box-shadow: 8px 8px 0 var(--white);
610 |             color: var(--black);
611 |             border-color: var(--white);
612 |         }
613 |         /* Hover interaction: white surface, black text, gray shadow */
614 |         [data-theme="dark"] .btn:hover {
615 |             color: var(--black);
616 |             box-shadow: 10px 10px 0 var(--gray);
617 |             border-color: var(--white);
618 |         }
619 |         [data-theme="dark"] .btn::before {
620 |             background: var(--white);
621 |         }
622 |         [data-theme="dark"] .card::before {
623 |             background: var(--white);
624 |         }
625 |         [data-theme="dark"] .card--click:hover {
626 |             background: var(--white);
627 |             color: var(--black);
628 |             box-shadow: 12px 12px 0 var(--gray);
629 |         }
630 |         /* Keep highlighted product cards yellow in dark mode */
631 |         [data-theme="dark"] .card--highlight {
632 |             background: var(--yellow);
633 |             color: var(--black);
634 |             border-color: var(--white);
635 |             box-shadow: 10px 10px 0 var(--white);
636 |         }
637 |         [data-theme="dark"] .card--highlight.card--click {
638 |             color: var(--black);
639 |         }
640 |         [data-theme="dark"] .card--highlight.card--click:hover {
641 |             color: var(--black);
642 |         }
643 |         /* Keep footer brand colors in dark mode */
644 |         [data-theme="dark"] footer {
645 |             background: var(--yellow);
646 |             color: var(--black);
647 |             border-top-color: var(--black);
648 |         }
649 |         [data-theme="dark"] .footer-nav a {
650 |             color: var(--black);
651 |         }
652 |     </style>
653 | </head>
654 | <body>
655 |     <a href="{{ '/' | url }}" class="home-link" aria-label="Home" title="Home">
656 |         <svg
657 |             viewbox="0 0 24 24"
658 |             fill="none"
659 |             stroke="currentColor"
660 |             stroke-width="2"
661 |             stroke-linecap="round"
662 |             stroke-linejoin="round"
663 |             aria-hidden="true">
664 |             <path d="M3 11l9-8 9 8"></path>
665 |             <path d="M5 11v9h5v-6h4v6h5v-9"></path>
666 |         </svg>
667 |     </a>
668 |     <button
669 |         id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode" aria-pressed="false" title="Toggle theme">
670 |         <!-- Show moon in light mode, sun in dark mode -->
671 |         <svg
672 |             class="icon icon-moon"
673 |             viewbox="0 0 24 24"
674 |             aria-hidden="true"
675 |             fill="none"
676 |             stroke="currentColor"
677 |             stroke-width="2"
678 |             stroke-linecap="round"
679 |             stroke-linejoin="round">
680 |             <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z"></path>
681 |         </svg>
682 |         <svg
683 |             class="icon icon-sun"
684 |             viewbox="0 0 24 24"
685 |             aria-hidden="true"
686 |             fill="none"
687 |             stroke="currentColor"
688 |             stroke-width="2"
689 |             stroke-linecap="round"
690 |             stroke-linejoin="round">
691 |             <circle cx="12" cy="12" r="5"></circle>
692 |             <line x1="12" y1="1" x2="12" y2="3"></line>
693 |             <line x1="12" y1="21" x2="12" y2="23"></line>
694 |             <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
695 |             <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
696 |             <line x1="1" y1="12" x2="3" y2="12"></line>
697 |             <line x1="21" y1="12" x2="23" y2="12"></line>
698 |             <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
699 |             <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
700 |         </svg>
701 |     </button>
702 |     <!-- Top bar removed -->
703 |     <main>
704 |         {{ content | safe }}
705 |     </main>
706 |     <footer>
707 |         <div class="container">
708 |             <nav class="footer-nav">
709 |                 <a href="{{ '/' | url }}">Home</a>
710 |                 <span aria-hidden="true">&middot;</span>
711 |                 <a href="{{ '/varro-money/' | url }}">Varro Money</a>
712 |             </nav>
713 |             <p>&copy; 2025 Varro Software</p>
714 |         </div>
715 |     </footer>
716 |     <script>
717 |         (function () {
718 |             var btn = document.getElementById('theme-toggle');
719 |             if (! btn) 
720 |                 return;
721 |             
722 |             function getTheme() {
723 |                 return document.documentElement.getAttribute('data-theme') || 'light';
724 |             }
725 |             function setTheme(theme) {
726 |                 document.documentElement.setAttribute('data-theme', theme);
727 |                 try {
728 |                     localStorage.setItem('theme', theme);
729 |                 } catch (e) {}btn.setAttribute(
730 |                     'aria-pressed', theme === 'dark'
731 |                     ? 'true'
732 |                     : 'false');
733 |                 btn.title = theme === 'dark'
734 |                     ? 'Switch to light mode'
735 |                     : 'Switch to dark mode';
736 |             }
737 |             function userPrefSet() {
738 |                 try {
739 |                     return !!localStorage.getItem('theme');
740 |                 } catch (e) {
741 |                     return false;
742 |                 }
743 |             }
744 |             // Sync initial state
745 |             setTheme(getTheme());
746 |             // Follow system preference when no user preference is stored
747 |             var mq = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
748 |             function applySystemTheme(event) {
749 |                 if (! mq) 
750 |                     return;
751 |                 
752 |                 if (userPrefSet()) 
753 |                     return;
754 |                  // Respect explicit user choice
755 |                 var prefersDark = event && 'matches' in event
756 |                     ? event.matches
757 |                     : mq.matches;
758 |                 document.documentElement.setAttribute(
759 |                     'data-theme', prefersDark
760 |                     ? 'dark'
761 |                     : 'light');
762 |                 // Update control state without persisting
763 |                 btn.setAttribute(
764 |                     'aria-pressed', prefersDark
765 |                     ? 'true'
766 |                     : 'false');
767 |                 btn.title = prefersDark
768 |                     ? 'Switch to light mode'
769 |                     : 'Switch to dark mode';
770 |             }
771 |             applySystemTheme();
772 |             if (mq) {
773 |                 if (typeof mq.addEventListener === 'function') {
774 |                     mq.addEventListener('change', applySystemTheme);
775 |                 } else if (typeof mq.addListener === 'function') { // Safari <14 fallback
776 |                     mq.addListener(applySystemTheme);
777 |                 }
778 |             }
779 |             btn.addEventListener('click', function () {
780 |                 var next = getTheme() === 'dark'
781 |                     ? 'light'
782 |                     : 'dark';
783 |                 setTheme(next);
784 |             });
785 |         })();
786 |     </script>
787 | </body></html>


--------------------------------------------------------------------------------