diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/css/style.css b/wpfiles/wp-content/themes/hogelandlinux/assets/css/style.css
new file mode 100644
index 0000000..07625a7
--- /dev/null
+++ b/wpfiles/wp-content/themes/hogelandlinux/assets/css/style.css
@@ -0,0 +1,1521 @@
+/* Reset and Base Styles */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ line-height: 1.6;
+ color: #1f2937;
+ background-color: #fff;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1rem;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+ font-weight: 600;
+ line-height: 1.2;
+ margin-bottom: 1rem;
+}
+
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.5rem; }
+
+p {
+ margin-bottom: 1rem;
+ color: #4b5563;
+}
+
+/* Navigation */
+.navbar {
+ background: #fff;
+ padding: 1rem 0;
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+ border-bottom: 3px solid #059669;
+}
+
+.nav-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1rem;
+ position: relative;
+}
+
+.nav-logo {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.nav-logo .tux-icon {
+ width: 2.5rem;
+ height: 2.5rem;
+ flex-shrink: 0;
+}
+
+.nav-logo h1 {
+ color: #047857;
+ font-size: 1.8rem;
+ margin: 0;
+ font-weight: 700;
+}
+
+.nav-logo a {
+ text-decoration: none;
+ color: inherit;
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: #374151;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ padding: 0.5rem 1rem;
+ border-radius: 6px;
+ position: relative;
+}
+
+.nav-links a:hover,
+.nav-links a.active {
+ color: #059669;
+ background: #ecfdf5;
+}
+
+
+
+/* Mobile Navigation */
+.mobile-menu-toggle {
+ display: none;
+ background: none;
+ border: none;
+ color: #374151;
+ font-size: 1.5rem;
+ cursor: pointer;
+ padding: 0.5rem;
+}
+
+.mobile-menu-toggle:hover {
+ color: #059669;
+}
+
+.mobile-menu {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: #fff;
+ border-top: 1px solid #e5e7eb;
+ z-index: 1000;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+}
+
+.mobile-menu.active {
+ display: block;
+}
+
+.mobile-menu a {
+ display: block;
+ padding: 1rem 1.5rem;
+ color: #374151;
+ text-decoration: none;
+ border-bottom: 1px solid #f3f4f6;
+}
+
+.mobile-menu a:hover,
+.mobile-menu a.active {
+ background: #ecfdf5;
+ color: #059669;
+}
+
+/* Hero Section */
+.hero {
+ background: linear-gradient(135deg, rgba(236, 253, 245, 0.85) 0%, rgba(209, 250, 229, 0.85) 100%), url('../images/TuxAinrom.webp');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ padding: 4rem 0;
+ display: flex;
+ align-items: center;
+ min-height: 80vh;
+ position: relative;
+}
+
+.hero-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+}
+
+.hero-content h2 {
+ font-size: 3rem;
+ color: #047857;
+ margin-bottom: 1rem;
+ text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
+}
+
+.hero-subtitle {
+ font-size: 1.25rem;
+ color: #374151;
+ margin-bottom: 2rem;
+ text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
+}
+
+.hero-buttons {
+ display: flex;
+ gap: 1rem;
+}
+
+/* Two-row hero button layout */
+.hero-buttons--stack {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+}
+
+.hero-buttons-row {
+ display: flex;
+ gap: 1rem;
+}
+
+.hero-buttons-row--secondary {
+ justify-content: center;
+}
+
+.hero-buttons-row--primary {
+ justify-content: center;
+}
+
+@media (max-width: 480px) {
+ .hero-buttons-row {
+ flex-direction: column;
+ width: 100%;
+ max-width: 320px;
+ }
+}
+
+/* Universal Card Base Class */
+.card {
+ background: white;
+ border-radius: 12px;
+ padding: 2rem;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ border: 1px solid transparent;
+ display: flex;
+ flex-direction: column;
+}
+
+.card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 30px rgba(5, 150, 105, 0.15);
+}
+
+.card h3 {
+ color: #047857;
+ margin-bottom: 1rem;
+}
+
+/* Card Variants */
+.card--benefit {
+ background: #f0fdf4;
+ border-color: #bbf7d0;
+ text-align: center;
+}
+
+.card--benefit:hover {
+ border-color: #34d399;
+}
+
+.card--service {
+ background: #f0fdf4;
+ border-left: 4px solid #059669;
+ border-radius: 12px;
+}
+
+.card--service:hover {
+ transform: translateY(-3px);
+}
+
+.card--distro {
+ background: white;
+ border-radius: 16px;
+ min-height: 400px;
+ position: relative;
+ overflow: hidden;
+}
+
+.card--distro::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background: linear-gradient(90deg, #059669, #10b981);
+}
+
+.card--distro:hover {
+ transform: translateY(-8px);
+ border-color: #a7f3d0;
+}
+
+.card--cta {
+ text-align: center;
+ border: 2px solid #bbf7d0;
+}
+
+/* Card Content Components */
+.card__icon {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.card--benefit .card__icon {
+ font-size: 3rem;
+}
+
+.card--cta .card__icon {
+ font-size: 3rem;
+}
+
+/* Clickable Card Utility */
+.card-link {
+ text-decoration: none;
+ color: inherit;
+ display: block;
+}
+
+/* Buttons */
+.btn {
+ padding: 12px 24px;
+ font-size: 1rem;
+ border-radius: 8px;
+ border: 2px solid transparent;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ text-decoration: none;
+ display: inline-block;
+ font-weight: 500;
+ text-align: center;
+ min-height: 44px;
+ min-width: 44px;
+ line-height: 1.5;
+}
+
+.btn-primary {
+ background: #059669;
+ color: white;
+}
+
+.btn-primary:hover {
+ background: #047857;
+ transform: translateY(-2px);
+}
+
+.btn-secondary {
+ background: transparent;
+ color: #059669;
+ border-color: #059669;
+}
+
+.btn-secondary:hover {
+ background: #059669;
+ color: white;
+}
+
+.btn-large {
+ padding: 16px 32px;
+ font-size: 1.1rem;
+}
+
+/* Universal Section Classes */
+.section {
+ padding: 3.5rem 0;
+}
+
+.section--light {
+ background: #fff;
+}
+
+.section--light-green {
+ background: #f9fafb;
+}
+
+/* Brand-tinted light background for callouts and CTAs */
+.section--brand {
+ background: #f0fdf4;
+}
+
+.section--hero {
+ padding: 4rem 0;
+ min-height: 80vh;
+}
+
+/* Section Headers */
+.section__title {
+ text-align: center;
+ margin-bottom: 3rem;
+ color: #047857;
+}
+
+.section__subtitle {
+ text-align: center;
+ font-size: 1.1rem;
+ color: #6b7280;
+ margin-bottom: 4rem;
+ max-width: 600px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* Universal Grid Classes */
+.grid {
+ display: grid;
+ gap: 2rem;
+}
+
+.grid--2-col {
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.grid--3-col {
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+
+.grid--responsive-cards {
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+
+/* Legacy Section Classes - Cleaned Up */
+
+.benefits h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+ color: #047857;
+}
+
+.benefits-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+/* Windows EOL Section */
+.windows-eol {
+ background: #fffbeb;
+ position: relative;
+ overflow: hidden;
+}
+
+.windows-eol::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-image:
+ radial-gradient(circle at 20% 30%, rgba(217, 119, 6, 0.05) 15%, transparent 15%),
+ radial-gradient(circle at 80% 70%, rgba(217, 119, 6, 0.05) 15%, transparent 15%),
+ radial-gradient(circle at 60% 20%, rgba(217, 119, 6, 0.03) 20%, transparent 20%),
+ radial-gradient(circle at 40% 80%, rgba(217, 119, 6, 0.03) 20%, transparent 20%);
+ pointer-events: none;
+ z-index: 1;
+}
+
+.windows-eol .container {
+ position: relative;
+ z-index: 2;
+}
+
+.windows-eol h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+ color: #d97706;
+ position: relative;
+}
+
+.eol-content {
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ gap: 3rem;
+ align-items: start;
+}
+
+.eol-main {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.eol-clippy-image {
+ text-align: center;
+ order: -1; /* Ensure Clippy appears first */
+}
+
+.eol-clippy-image img {
+ max-width: 350px;
+ max-height: 350px;
+ width: auto;
+ height: auto;
+ object-fit: contain;
+ overflow: hidden;
+}
+
+.eol-text {
+ order: 1; /* Ensure text appears after Clippy */
+}
+
+.eol-text ul {
+ list-style: none;
+ margin: 2rem 0;
+}
+
+.eol-text li {
+ padding: 0.5rem 0;
+ font-size: 1.1rem;
+}
+
+.highlight {
+ background: #dcfce7;
+ padding: 1.5rem;
+ border-radius: 8px;
+ border-left: 4px solid #16a34a;
+ font-weight: 500;
+ color: #166534;
+}
+
+.eol-stats {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+.stat {
+ text-align: center;
+ background: white;
+ padding: 2rem;
+ border-radius: 12px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+}
+
+.stat:hover {
+ transform: translateY(-5px);
+}
+
+.stat-icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.stat h3 {
+ font-size: 2rem;
+ color: #d97706;
+ margin-bottom: 0.5rem;
+}
+
+/* Distributions Section */
+
+.distros h2 {
+ text-align: center;
+ margin-bottom: 1rem;
+ color: #047857;
+}
+
+.section-subtitle {
+ text-align: center;
+ font-size: 1.1rem;
+ color: #6b7280;
+ margin-bottom: 4rem;
+ max-width: 600px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.distros-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ gap: 2rem;
+ margin-bottom: 4rem;
+ align-items: stretch;
+}
+
+.distro-header {
+ display: flex;
+ align-items: flex-start;
+ gap: 1rem;
+ margin-bottom: 1.5rem;
+ flex-shrink: 0;
+}
+
+.distro-logo {
+ font-size: 2.5rem;
+ min-width: 3rem;
+ flex-shrink: 0;
+}
+
+.distro-header-content {
+ flex: 1;
+ min-width: 0;
+}
+
+.distro-header h3 {
+ color: #047857;
+ margin: 0 0 0.5rem 0;
+ line-height: 1.2;
+}
+
+.distro-tag {
+ background: linear-gradient(135deg, #059669, #10b981);
+ color: white;
+ padding: 0.25rem 0.75rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 500;
+ white-space: nowrap;
+ display: inline-block;
+}
+
+.distro-description {
+ color: #4b5563;
+ margin-bottom: 1.5rem;
+ line-height: 1.6;
+ flex-grow: 1;
+}
+
+.distro-features {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-bottom: 1.5rem;
+ flex-shrink: 0;
+}
+
+.feature {
+ background: #ecfdf5;
+ color: #047857;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.85rem;
+ font-weight: 500;
+ border: 1px solid #bbf7d0;
+}
+
+.distro-ideal {
+ background: #f0f9ff;
+ border: 1px solid #bae6fd;
+ border-radius: 8px;
+ padding: 1rem;
+ margin: 0;
+ color: #0c4a6e;
+ font-size: 0.9rem;
+ margin-top: auto;
+ flex-shrink: 0;
+}
+
+.distro-ideal strong {
+ color: #0369a1;
+}
+
+.distro-cta {
+ text-align: center;
+ background: white;
+ padding: 3rem 2rem;
+ border-radius: 16px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ border: 2px solid #bbf7d0;
+}
+
+.distro-cta h3 {
+ color: #047857;
+ margin-bottom: 1rem;
+}
+
+.distro-cta p {
+ color: #6b7280;
+ margin-bottom: 2rem;
+ max-width: 500px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* Services Section */
+
+.services h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+ color: #047857;
+}
+
+.services-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+}
+
+/* Steps grid: balanced layout 3/2/1 across breakpoints */
+.steps-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2rem;
+}
+
+@media (max-width: 1024px) {
+ .steps-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (max-width: 640px) {
+ .steps-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* Distro tiles */
+.distro-tiles {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ gap: 1.5rem;
+}
+
+.distro-tile {
+ background: #fff;
+ border: 1px solid #e5e7eb;
+ border-radius: 12px;
+ padding: 1.25rem;
+ text-align: center;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.distro-tile:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 10px 20px rgba(5,150,105,0.12);
+}
+
+.distro-tile__img {
+ width: 72px;
+ height: 72px;
+ object-fit: contain;
+ margin-bottom: 0.75rem;
+}
+
+/* Linux Features Section */
+
+.linux-features h2 {
+ text-align: center;
+ margin-bottom: 1rem;
+ color: #047857;
+}
+
+.features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ gap: 3rem;
+ margin-top: 3rem;
+}
+
+.feature-showcase {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.feature-image {
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+ margin-bottom: 2rem;
+ overflow: hidden;
+ border: 1px solid #e5e7eb;
+ position: relative;
+ aspect-ratio: 16/10;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.feature-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 12px;
+}
+
+.image-caption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.9);
+ padding: 0.4rem 1rem;
+ border-radius: 0 0 12px 12px;
+ opacity: 0;
+ transform: translateY(100%);
+ transition: all 0.3s ease;
+}
+
+.feature-image:hover .image-caption {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.image-caption small {
+ color: white;
+ font-size: 0.8rem;
+}
+
+.image-caption a {
+ color: #a7f3d0;
+ text-decoration: none;
+}
+
+.image-caption a:hover {
+ color: white;
+ text-decoration: underline;
+}
+
+
+/* Intro GNOME section overrides */
+.intro-gnome .feature-image img {
+ width: 100%;
+ height: auto;
+ object-fit: contain;
+}
+
+.intro-gnome .feature-image {
+ aspect-ratio: auto;
+}
+
+
+
+.feature-showcase h3 {
+ color: #047857;
+ margin-bottom: 1rem;
+ font-size: 1.3rem;
+ min-height: 2.6rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.feature-showcase p {
+ color: #6b7280;
+ line-height: 1.6;
+ flex-grow: 1;
+ margin: 0;
+ min-height: 4rem;
+ display: flex;
+ align-items: center;
+}
+
+/* CTA Section */
+.cta {
+ background: linear-gradient(135deg, #059669 0%, #047857 100%);
+ color: white;
+ text-align: center;
+}
+
+.cta h2 {
+ color: white;
+ margin-bottom: 1rem;
+}
+
+.cta p {
+ color: #a7f3d0;
+ font-size: 1.1rem;
+ margin-bottom: 2rem;
+}
+
+/* Contact Page Styles */
+/* Deprecated: contact-hero replaced by .page-hero */
+
+/* Generic page hero reused across pages */
+.page-hero {
+ background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
+ padding: 2.25rem 0;
+ text-align: center;
+}
+
+/* Match heading color for reusable hero */
+.page-hero h1 {
+ color: #047857;
+ margin-bottom: 1rem;
+}
+
+/* Keep heading links visually identical to headings */
+h2 a {
+ text-decoration: none;
+ color: inherit;
+}
+
+/* Ensure card titles with links look identical to non-linked titles */
+.card h3 a,
+.card h3 a:visited,
+.card h3 a:hover,
+.card h3 a:active {
+ text-decoration: none;
+ color: inherit;
+}
+
+/* Reusable link wrapper to make whole cards clickable */
+.card-link {
+ text-decoration: none;
+ color: inherit;
+ display: block;
+}
+
+.contact-hero h1 {
+ color: #047857;
+ margin-bottom: 1rem;
+}
+
+.contact-content {
+ padding: 4rem 0;
+}
+
+.contact-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 4rem;
+}
+
+.contact-info {
+ background: #f0fdf4;
+ padding: 2rem;
+ border-radius: 12px;
+ border: 1px solid #bbf7d0;
+}
+
+.contact-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+.contact-icon {
+ font-size: 2rem;
+ min-width: 3rem;
+}
+
+.contact-item h3 {
+ margin-bottom: 0.5rem;
+ color: #047857;
+}
+
+.contact-item a {
+ color: #059669;
+ text-decoration: none;
+}
+
+.contact-item a:hover {
+ text-decoration: underline;
+}
+
+.contact-hours {
+ margin-top: 2rem;
+ padding-top: 2rem;
+ border-top: 1px solid #e2e8f0;
+}
+
+.contact-hours h3 {
+ color: #047857;
+ margin-bottom: 1rem;
+}
+
+/* Form Styles */
+.contact-form {
+ background: #fff;
+ padding: 2rem;
+ border-radius: 12px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+/* Alert Styles */
+.alert {
+ padding: 1rem 1.5rem;
+ border-radius: 8px;
+ margin-bottom: 1.5rem;
+ border: 1px solid;
+ font-size: 1rem;
+ line-height: 1.5;
+}
+
+.alert-error {
+ background-color: #fef2f2;
+ color: #dc2626;
+ border-color: #fecaca;
+}
+
+.alert-success {
+ background-color: #f0fdf4;
+ color: #16a34a;
+ border-color: #bbf7d0;
+}
+
+.alert strong {
+ font-weight: 600;
+ margin-right: 0.5rem;
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+ color: #374151;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+ padding: 12px 16px;
+ border: 2px solid #d1d5db;
+ border-radius: 8px;
+ font-size: 16px;
+ transition: border-color 0.3s ease;
+ width: 100%;
+ box-sizing: border-box;
+ min-height: 44px;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+ outline: none;
+ border-color: #059669;
+ box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+}
+
+.form-group textarea {
+ resize: vertical;
+ min-height: 120px;
+}
+
+
+.contact-cta h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+ color: #047857;
+}
+
+.cta-benefits {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+}
+
+/* Pricing/Tarieven benefit cards */
+.cta-benefit {
+ background: #fff;
+ border: 1px solid #e5e7eb;
+ border-radius: 12px;
+ padding: 1.5rem;
+ text-align: center;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.cta-benefit:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 10px 20px rgba(5,150,105,0.12);
+}
+
+.benefit-icon {
+ width: 56px;
+ height: 56px;
+ border-radius: 9999px;
+ background: #ecfdf5;
+ border: 2px solid #bbf7d0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto 0.75rem auto;
+}
+
+.benefit-icon__glyph {
+ font-weight: 700;
+ color: #047857;
+ font-size: 1.25rem;
+ line-height: 1;
+}
+
+/* Collapsible disclaimer styles */
+details.disclaimer {
+ margin-top: 0.5rem;
+}
+
+details.disclaimer summary {
+ cursor: pointer;
+ color: #047857;
+ font-weight: 600;
+}
+
+details.disclaimer .disclaimer-body {
+ background: #f9fafb;
+ border-left: 4px solid #059669;
+ padding: 1rem 1rem 1rem 1.25rem;
+ border-radius: 6px;
+ margin-top: 0.75rem;
+}
+
+/* Footer */
+footer {
+ background: #f9fafb;
+ color: #374151;
+ padding: 3rem 0 1rem;
+ border-top: 3px solid #059669;
+ margin-top: 2rem;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-bottom: 2rem;
+}
+
+.footer-section h3 {
+ color: #047857;
+ margin-bottom: 1rem;
+ font-weight: 600;
+}
+
+.footer-section a {
+ color: #059669;
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+.footer-section a:hover {
+ color: #047857;
+ text-decoration: underline;
+}
+
+.footer-bottom {
+ text-align: center;
+ padding-top: 2rem;
+ border-top: 1px solid #e5e7eb;
+ color: #6b7280;
+}
+
+/* About page */
+.section {
+ padding: 3.5rem 0;
+}
+
+.about-grid {
+ display: grid;
+ grid-template-columns: 1.5fr 1fr;
+ gap: 3rem;
+ align-items: start;
+}
+
+.about-text p {
+ margin: 1rem 0;
+ line-height: 1.8;
+ color: #374151;
+}
+
+.about-cta {
+ margin-top: 2rem;
+}
+
+.about-photo img {
+ width: 100%;
+ height: auto;
+ border-radius: 12px;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+}
+
+/* Photo visibility control */
+.about-photo-mobile {
+ display: none; /* Hidden on desktop */
+ margin: 2rem 0;
+}
+
+.about-photo-desktop {
+ display: block; /* Shown on desktop */
+}
+
+@media (max-width: 900px) {
+ .about-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .about-photo-mobile {
+ display: block; /* Show mobile photo after first paragraph */
+ }
+
+ .about-photo-desktop {
+ display: none; /* Hide desktop photo */
+ }
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+ .container {
+ padding: 0 1.5rem;
+ }
+
+ .hero-content {
+ gap: 2rem;
+ }
+
+ .benefits-grid {
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ }
+
+ .distros-grid {
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ }
+
+ .services-grid {
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ }
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .mobile-menu-toggle {
+ display: block;
+ }
+
+ .hero {
+ padding: 3rem 0;
+ background-size: cover;
+ background-position: center top;
+ }
+
+ .hero-content h2 {
+ font-size: 2.5rem;
+ line-height: 1.2;
+ }
+
+ .hero-subtitle {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ }
+
+ .hero-buttons {
+ justify-content: center;
+ gap: 1rem;
+ }
+
+ .benefits-grid {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ }
+
+
+
+ .eol-content {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ }
+
+ .distros-grid {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ }
+
+
+
+ .contact-grid {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ }
+
+ .services-grid {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ }
+
+ .features-grid {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ }
+
+ .cta-benefits {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ }
+
+ .footer-content {
+ grid-template-columns: 1fr;
+ text-align: center;
+ gap: 2rem;
+ }
+
+ /* Section padding adjustments */
+ .page-hero {
+ padding: 1.75rem 0;
+ }
+ .section {
+ padding: 2.25rem 0;
+ }
+
+ /* Typography adjustments */
+ h1 { font-size: 2.2rem; }
+ h2 { font-size: 1.8rem; }
+ h3 { font-size: 1.3rem; }
+
+
+}
+
+@media (max-width: 480px) {
+ .container {
+ padding: 0 1rem;
+ }
+
+ .hero {
+ padding: 2rem 0;
+ background-size: cover;
+ background-position: center top;
+ min-height: 60vh;
+ }
+
+ .hero-content h2 {
+ font-size: 2rem;
+ line-height: 1.3;
+ }
+
+ .hero-subtitle {
+ font-size: 1.1rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .hero-buttons {
+ flex-direction: column;
+ gap: 0.75rem;
+ }
+
+ .btn {
+ padding: 10px 20px;
+ font-size: 0.9rem;
+ width: 100%;
+ max-width: 300px;
+ }
+
+ /* Card padding adjustments */
+ .card {
+ padding: 1.25rem;
+ }
+
+ /* Icon size adjustments */
+ .card__icon {
+ font-size: 2.5rem;
+ }
+
+ /* Contact form improvements */
+ .contact-form {
+ padding: 1.5rem;
+ }
+
+ .form-group {
+ margin-bottom: 1.25rem;
+ }
+
+ .form-group label {
+ margin-bottom: 0.5rem;
+ font-size: 0.9rem;
+ }
+
+ /* Footer adjustments */
+ footer {
+ padding: 2rem 0 1rem;
+ }
+
+ .footer-content {
+ gap: 1.5rem;
+ }
+
+ .footer-section {
+ padding: 0 1rem;
+ }
+
+ /* Section padding for very small screens */
+ .page-hero {
+ padding: 1.5rem 0;
+ }
+ .section {
+ padding: 1.75rem 0;
+ }
+
+ /* Typography for very small screens */
+ h1 { font-size: 1.8rem; }
+ h2 { font-size: 1.5rem; }
+ h3 { font-size: 1.2rem; }
+
+ p {
+ font-size: 0.95rem;
+ }
+
+ /* Stats grid for mobile */
+ .eol-stats {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .stat {
+ padding: 1rem;
+ }
+
+ .stat h3 {
+ font-size: 1.8rem;
+ }
+
+ /* Distro features on mobile */
+ .distro-features {
+ gap: 0.5rem;
+ }
+
+ .feature {
+ padding: 0.4rem 0.8rem;
+ font-size: 0.8rem;
+ }
+
+ /* Feature image adjustments for mobile */
+ .feature-image {
+ aspect-ratio: 16/9;
+ margin-bottom: 1.5rem;
+ }
+
+ .feature-showcase h3 {
+ font-size: 1.2rem;
+ min-height: 2.4rem;
+ }
+
+ .feature-showcase p {
+ min-height: 3.5rem;
+ font-size: 0.95rem;
+ }
+}
+
+/* Landscape phone adjustments */
+@media (max-width: 768px) and (orientation: landscape) {
+ .hero {
+ padding: 2rem 0;
+ background-size: cover;
+ background-position: center center;
+ }
+
+ .hero-content h2 {
+ font-size: 2rem;
+ }
+
+ .hero-buttons {
+ justify-content: center;
+ }
+}
+
+/* Very small screens */
+@media (max-width: 360px) {
+ .hero-content h2 {
+ font-size: 1.7rem;
+ }
+
+ .hero-subtitle {
+ font-size: 1rem;
+ }
+
+ .card {
+ padding: 1rem;
+ }
+
+ .btn {
+ padding: 8px 16px;
+ font-size: 0.85rem;
+ }
+}
+
+/* Animations */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.card {
+ animation: fadeInUp 0.6s ease-out;
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+ * {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+
+ html {
+ scroll-behavior: auto;
+ }
+}
+
+/* Print Styles */
+@media print {
+ .navbar,
+ .hero-buttons,
+ .btn,
+ .contact-form {
+ display: none;
+ }
+
+ body {
+ font-size: 12pt;
+ line-height: 1.4;
+ }
+
+ .hero-content {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/DutchOpen2024.jpg b/wpfiles/wp-content/themes/hogelandlinux/assets/images/DutchOpen2024.jpg
new file mode 100644
index 0000000..67bff67
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/DutchOpen2024.jpg differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/GamingBenchmarkLinuxvsWindows.webp b/wpfiles/wp-content/themes/hogelandlinux/assets/images/GamingBenchmarkLinuxvsWindows.webp
new file mode 100644
index 0000000..cdf56a9
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/GamingBenchmarkLinuxvsWindows.webp differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/LinuxMintCinnamonSoftwareManager.webp b/wpfiles/wp-content/themes/hogelandlinux/assets/images/LinuxMintCinnamonSoftwareManager.webp
new file mode 100644
index 0000000..cadfcea
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/LinuxMintCinnamonSoftwareManager.webp differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/Tux.svg b/wpfiles/wp-content/themes/hogelandlinux/assets/images/Tux.svg
new file mode 100644
index 0000000..54b7a7d
--- /dev/null
+++ b/wpfiles/wp-content/themes/hogelandlinux/assets/images/Tux.svg
@@ -0,0 +1,363 @@
+
+
\ No newline at end of file
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/TuxAinrom.png b/wpfiles/wp-content/themes/hogelandlinux/assets/images/TuxAinrom.png
new file mode 100644
index 0000000..7bbbd35
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/TuxAinrom.png differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/TuxAinrom.webp b/wpfiles/wp-content/themes/hogelandlinux/assets/images/TuxAinrom.webp
new file mode 100644
index 0000000..da4a879
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/TuxAinrom.webp differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/Zorin-17-desktop.webp b/wpfiles/wp-content/themes/hogelandlinux/assets/images/Zorin-17-desktop.webp
new file mode 100644
index 0000000..2b0cdfa
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/Zorin-17-desktop.webp differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/android-chrome-192x192.png b/wpfiles/wp-content/themes/hogelandlinux/assets/images/android-chrome-192x192.png
new file mode 100644
index 0000000..483e958
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/android-chrome-192x192.png differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/android-chrome-512x512.png b/wpfiles/wp-content/themes/hogelandlinux/assets/images/android-chrome-512x512.png
new file mode 100644
index 0000000..146ff37
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/android-chrome-512x512.png differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/apple-touch-icon.png b/wpfiles/wp-content/themes/hogelandlinux/assets/images/apple-touch-icon.png
new file mode 100644
index 0000000..3776575
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/apple-touch-icon.png differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/clippy.png b/wpfiles/wp-content/themes/hogelandlinux/assets/images/clippy.png
new file mode 100644
index 0000000..1b91525
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/clippy.png differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/clippy_transparent.png b/wpfiles/wp-content/themes/hogelandlinux/assets/images/clippy_transparent.png
new file mode 100644
index 0000000..2029510
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/clippy_transparent.png differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/elementary.png b/wpfiles/wp-content/themes/hogelandlinux/assets/images/elementary.png
new file mode 100644
index 0000000..0c30e68
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/elementary.png differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/favicon-16x16.png b/wpfiles/wp-content/themes/hogelandlinux/assets/images/favicon-16x16.png
new file mode 100644
index 0000000..62fcab1
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/favicon-16x16.png differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/favicon-32x32.png b/wpfiles/wp-content/themes/hogelandlinux/assets/images/favicon-32x32.png
new file mode 100644
index 0000000..a82f89c
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/favicon-32x32.png differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/favicon.ico b/wpfiles/wp-content/themes/hogelandlinux/assets/images/favicon.ico
new file mode 100644
index 0000000..d55b9f5
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/favicon.ico differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/fedora.png b/wpfiles/wp-content/themes/hogelandlinux/assets/images/fedora.png
new file mode 100644
index 0000000..3e308b9
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/fedora.png differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/garuda.svg b/wpfiles/wp-content/themes/hogelandlinux/assets/images/garuda.svg
new file mode 100644
index 0000000..49087c2
--- /dev/null
+++ b/wpfiles/wp-content/themes/hogelandlinux/assets/images/garuda.svg
@@ -0,0 +1,3 @@
+
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/gnome.jpg b/wpfiles/wp-content/themes/hogelandlinux/assets/images/gnome.jpg
new file mode 100644
index 0000000..13820a8
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/gnome.jpg differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/gnome.webp b/wpfiles/wp-content/themes/hogelandlinux/assets/images/gnome.webp
new file mode 100644
index 0000000..98c49d2
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/gnome.webp differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/mint.svg b/wpfiles/wp-content/themes/hogelandlinux/assets/images/mint.svg
new file mode 100644
index 0000000..fd38dad
--- /dev/null
+++ b/wpfiles/wp-content/themes/hogelandlinux/assets/images/mint.svg
@@ -0,0 +1,3 @@
+
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/popos.svg b/wpfiles/wp-content/themes/hogelandlinux/assets/images/popos.svg
new file mode 100644
index 0000000..44628a2
--- /dev/null
+++ b/wpfiles/wp-content/themes/hogelandlinux/assets/images/popos.svg
@@ -0,0 +1 @@
+
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/qr.png b/wpfiles/wp-content/themes/hogelandlinux/assets/images/qr.png
new file mode 100644
index 0000000..48eeb3c
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/qr.png differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/qr.svg b/wpfiles/wp-content/themes/hogelandlinux/assets/images/qr.svg
new file mode 100644
index 0000000..48eeb3c
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/qr.svg differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/images/ubuntu.png b/wpfiles/wp-content/themes/hogelandlinux/assets/images/ubuntu.png
new file mode 100644
index 0000000..69fd1bd
Binary files /dev/null and b/wpfiles/wp-content/themes/hogelandlinux/assets/images/ubuntu.png differ
diff --git a/wpfiles/wp-content/themes/hogelandlinux/assets/js/main.js b/wpfiles/wp-content/themes/hogelandlinux/assets/js/main.js
new file mode 100644
index 0000000..a2b79df
--- /dev/null
+++ b/wpfiles/wp-content/themes/hogelandlinux/assets/js/main.js
@@ -0,0 +1,38 @@
+/**
+ * Front-end navigation: toggles the mobile menu and closes it on outside click.
+ */
+(function () {
+ 'use strict';
+
+ document.addEventListener('DOMContentLoaded', function () {
+ var toggle = document.querySelector('.mobile-menu-toggle');
+ var menu = document.getElementById('mobile-menu');
+
+ if (!toggle || !menu) {
+ return;
+ }
+
+ function openMenu() {
+ menu.classList.add('active');
+ }
+
+ function closeMenu() {
+ menu.classList.remove('active');
+ }
+
+ toggle.addEventListener('click', function (e) {
+ e.stopPropagation();
+ menu.classList.contains('active') ? closeMenu() : openMenu();
+ });
+
+ document.addEventListener('click', function (event) {
+ if (!menu.contains(event.target) && !toggle.contains(event.target)) {
+ closeMenu();
+ }
+ });
+
+ menu.querySelectorAll('a').forEach(function (link) {
+ link.addEventListener('click', closeMenu);
+ });
+ });
+})();
diff --git a/wpfiles/wp-content/themes/hogelandlinux/footer.php b/wpfiles/wp-content/themes/hogelandlinux/footer.php
new file mode 100644
index 0000000..c0b5581
--- /dev/null
+++ b/wpfiles/wp-content/themes/hogelandlinux/footer.php
@@ -0,0 +1,44 @@
+
+
+
+
+