georges/MSPE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update team visibility and refresh premium UI styling

Browse Source
This commit is contained in:
Krikorios
2026-02-24 00:51:23 +02:00
parent e3a74b2d50
commit 00fda3e045
14 changed files with 299 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
404.html
+4 -4
View File
@@ -91,13 +91,13 @@
Oops! The page you're looking for doesn't exist or has been moved.
Let's get you back on track.
</p>
<a href="index.html" class="btn">
<a href="/index.html" class="btn">
<i class="fas fa-home"></i> Back to Homepage
</a>
<div class="links">
<a href="services.html">Services</a>
<a href="about.html">About Us</a>
<a href="contact.html">Contact</a>
<a href="/services.html">Services</a>
<a href="/about.html">About Us</a>
<a href="/contact.html">Contact</a>
</div>
</div>
</body>
about.html
+2 -63
View File
@@ -218,7 +218,7 @@
</section>
<!-- Team Section -->
<section class="team-section section" id="team">
<section class="team-section section" id="team" hidden>
<div class="container">
<div class="section-header">
<span class="section-label">Our People</span>
@@ -226,68 +226,7 @@
<p class="section-description">Experts dedicated to building resilient, future-ready systems</p>
</div>
<div class="team-grid" id="team-grid" data-team-grid="true">
<div class="team-card">
<div class="team-image">
<!-- Replace with real photo -->
<img src="images/team/member-1.svg" alt="Founder & CEO" width="400" height="400">
<div class="team-social">
<a href="https://www.linkedin.com/company/mspe-pro" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>
<a href="mailto:info@mspe.pro" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="team-info">
<h4>Kareem Mansour</h4>
<p>Founder & CEO</p>
<small style="font-size: 0.78rem; color: #64748b; line-height: 1.5; margin-top: 0.4rem; display: block;">Network &amp; infrastructure specialist · 12+ yrs across enterprise and SMB environments.</small>
</div>
</div>
<div class="team-card">
<div class="team-image">
<!-- Replace with real photo -->
<img src="images/team/member-2.svg" alt="CTO" width="400" height="400">
<div class="team-social">
<a href="https://www.linkedin.com/company/mspe-pro" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>
<a href="mailto:info@mspe.pro" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="team-info">
<h4>Nour Haddad</h4>
<p>Chief Technology Officer</p>
<small style="font-size: 0.78rem; color: #64748b; line-height: 1.5; margin-top: 0.4rem; display: block;">Systems architect with deep expertise in cloud platforms and enterprise IT design.</small>
</div>
</div>
<div class="team-card">
<div class="team-image">
<!-- Replace with real photo -->
<img src="images/team/member-3.svg" alt="Security Lead" width="400" height="400">
<div class="team-social">
<a href="https://www.linkedin.com/company/mspe-pro" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>
<a href="mailto:info@mspe.pro" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="team-info">
<h4>Ranya Aziz</h4>
<p>Head of Cybersecurity</p>
<small style="font-size: 0.78rem; color: #64748b; line-height: 1.5; margin-top: 0.4rem; display: block;">Penetration tester and SIEM specialist · CEH certified and ISO 27001 lead auditor.</small>
</div>
</div>
<div class="team-card">
<div class="team-image">
<!-- Replace with real photo -->
<img src="images/team/member-4.svg" alt="Cloud Architect" width="400" height="400">
<div class="team-social">
<a href="https://www.linkedin.com/company/mspe-pro" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>
<a href="mailto:info@mspe.pro" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="team-info">
<h4>Elie Khoury</h4>
<p>Cloud Solutions Architect</p>
<small style="font-size: 0.78rem; color: #64748b; line-height: 1.5; margin-top: 0.4rem; display: block;">Azure &amp; AWS certified · specializes in cloud migration, hybrid infrastructure, and DevOps.</small>
</div>
</div>
</div>
<div class="team-grid" id="team-grid" data-team-grid="true"></div>
</div>
</section>
api/news.php
+5
View File
@@ -8,6 +8,11 @@ require_once 'config.php';
$method = $_SERVER['REQUEST_METHOD'];
$id = $_GET['id'] ?? null;
// CSRF protection for write operations
if ($method !== 'GET') {
requireSameOriginRequest();
}
switch ($method) {
case 'GET':
if ($id) {
api/pages.php
+5
View File
@@ -11,6 +11,11 @@ $method = $_SERVER['REQUEST_METHOD'];
$id = $_GET['id'] ?? null;
$type = $_GET['type'] ?? null; // 'global' for global sections
// CSRF protection for write operations
if ($method !== 'GET') {
requireSameOriginRequest();
}
switch ($method) {
case 'GET':
if ($type === 'global') {
api/portfolio.php
+5
View File
@@ -8,6 +8,11 @@ require_once 'config.php';
$method = $_SERVER['REQUEST_METHOD'];
$id = $_GET['id'] ?? null;
// CSRF protection for write operations
if ($method !== 'GET') {
requireSameOriginRequest();
}
switch ($method) {
case 'GET':
if ($id) {
api/services.php
+5
View File
@@ -8,6 +8,11 @@ require_once 'config.php';
$method = $_SERVER['REQUEST_METHOD'];
$id = $_GET['id'] ?? null;
// CSRF protection for write operations
if ($method !== 'GET') {
requireSameOriginRequest();
}
switch ($method) {
case 'GET':
if ($id) {
api/team.php
+5
View File
@@ -8,6 +8,11 @@ require_once 'config.php';
$method = $_SERVER['REQUEST_METHOD'];
$id = $_GET['id'] ?? null;
// CSRF protection for write operations
if ($method !== 'GET') {
requireSameOriginRequest();
}
switch ($method) {
case 'GET':
if ($id) {
api/testimonials.php
+5
View File
@@ -8,6 +8,11 @@ require_once 'config.php';
$method = $_SERVER['REQUEST_METHOD'];
$id = $_GET['id'] ?? null;
// CSRF protection for write operations
if ($method !== 'GET') {
requireSameOriginRequest();
}
switch ($method) {
case 'GET':
if ($id) {
css/header-fix.css
+1 -1
View File
@@ -19,7 +19,7 @@ body.premium-ui .header {
}
body.premium-ui .header.scrolled {
background: rgba(3, 7, 16, 0.97) !important;
background: rgba(14, 30, 52, 0.94) !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
}
css/pages.css
+16 -2
View File
@@ -53,6 +53,8 @@
position: relative;
z-index: 1;
text-align: center;
max-width: 900px;
margin: 0 auto;
}
.breadcrumb {
@@ -89,6 +91,7 @@
color: var(--text-white);
margin-bottom: 1rem;
line-height: 1.2;
text-wrap: balance;
}
.page-subtitle {
@@ -97,6 +100,7 @@
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
text-wrap: pretty;
}
/* ========================
@@ -747,7 +751,7 @@
margin-bottom: 2rem;
}
.service-features {
.service-content .service-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
@@ -1660,6 +1664,16 @@
gap: 1.5rem;
}
@media (min-width: 1201px) {
.contact-cards > :nth-child(5) {
grid-column: 2;
}
.contact-cards > :nth-child(6) {
grid-column: 3;
}
}
.contact-card {
background: var(--text-white);
padding: 2rem;
@@ -2197,7 +2211,7 @@
grid-template-columns: repeat(2, 1fr);
}
.service-features,
.service-content .service-features,
.service-features-grid {
grid-template-columns: 1fr;
}
css/style.css
+42 -4
View File
@@ -6,9 +6,9 @@
/* ==================== CSS Variables ==================== */
:root {
/* Primary Colors */
--primary: #0a1628;
--primary-light: #1a365d;
--primary-dark: #050d17;
--primary: #10223b;
--primary-light: #1f3f69;
--primary-dark: #0b1930;
/* Accent Colors */
--accent: #0ea5e9;
@@ -55,7 +55,7 @@
--text-muted: #94a3b8;
/* Background Colors */
--bg-dark: #0a1628;
--bg-dark: #122a47;
--bg-light: #f8fafc;
/* Border Color */
@@ -235,6 +235,7 @@ select {
color: var(--gray-900);
margin-bottom: var(--spacing-md);
line-height: 1.2;
text-wrap: balance;
}
.section-description {
@@ -256,10 +257,13 @@ select {
padding: 0.75rem 1.5rem;
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.2;
min-height: 44px;
border-radius: var(--radius-md);
transition: var(--transition-base);
cursor: pointer;
border: 2px solid transparent;
white-space: nowrap;
}
.btn-primary {
@@ -532,6 +536,10 @@ select {
gap: var(--spacing-md);
}
.nav-actions .btn {
min-width: 168px;
}
.nav-toggle {
display: none;
flex-direction: column;
@@ -641,6 +649,7 @@ select {
word-break: normal;
overflow-wrap: normal;
hyphens: none;
text-wrap: balance;
}
.hero-title .highlight {
@@ -1049,6 +1058,23 @@ select {
font-size: 0.75rem;
}
.frameworks-grid .service-title {
min-height: 2.8em;
}
.frameworks-grid .service-description {
min-height: 5.6em;
}
.frameworks-grid .service-features li {
align-items: flex-start;
}
.frameworks-grid .service-features li i {
margin-top: 0.35em;
flex-shrink: 0;
}
.service-link {
display: inline-flex;
align-items: center;
@@ -1073,6 +1099,13 @@ select {
color: var(--accent-light);
}
@media (max-width: 1200px) {
.frameworks-grid .service-title,
.frameworks-grid .service-description {
min-height: 0;
}
}
/* ==================== Why Us Section ==================== */
.why-us {
background: #050810;
@@ -1712,10 +1745,14 @@ select {
.footer-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
margin-bottom: var(--spacing-md);
margin-left: auto;
margin-right: auto;
text-decoration: none;
line-height: 1;
width: 100%;
}
.footer-logo img {
@@ -1723,6 +1760,7 @@ select {
height: 60px;
width: auto;
max-width: 220px;
margin: 0 auto;
}
.footer-logo .logo-text {
css/ultimate-ui.css
+4 -3
View File
@@ -107,10 +107,11 @@
/* Enhanced Body Background */
body {
background: #050810;
background: #0d2038;
background-image:
radial-gradient(ellipse at 0% 0%, rgba(0, 245, 255, 0.06) 0%, transparent 40%),
radial-gradient(ellipse at 100% 0%, rgba(181, 55, 242, 0.06) 0%, transparent 40%);
radial-gradient(ellipse at 0% 0%, rgba(0, 245, 255, 0.1) 0%, transparent 42%),
radial-gradient(ellipse at 100% 0%, rgba(181, 55, 242, 0.09) 0%, transparent 42%),
linear-gradient(180deg, #17335a 0%, #10223d 45%, #0d1d34 100%);
/* background-attachment: fixed removed — causes full repaint on every scroll */
position: relative;
min-height: 100vh;
js/main.js
+88 -2
View File
@@ -6,6 +6,22 @@
// API Base URL - adjust based on your hosting setup
const API_BASE_URL = '/api';
// Central icon map: change values here to swap icons site-wide where data-icon-key is used.
const ICON_CLASS_MAP = {
service_it_support: 'fas fa-headset',
service_cybersecurity: 'fas fa-shield-alt',
service_cloud: 'fas fa-cloud',
service_consulting: 'fas fa-chess-king',
framework_iso27001: 'fas fa-certificate',
framework_nist_csf: 'fas fa-sitemap',
framework_soc2: 'fas fa-user-shield',
framework_pci_dss: 'fas fa-credit-card',
framework_hipaa: 'fas fa-heartbeat',
framework_gdpr_ccpa: 'fas fa-scale-balanced',
framework_nist_800: 'fas fa-building-shield',
framework_cobit_telco: 'fas fa-network-wired'
};
/**
* Escape HTML special characters to prevent XSS when inserting into innerHTML.
* Use for ALL user/API data interpolated into template literals.
@@ -40,6 +56,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Initialize all modules
initPremiumExperience();
initSiteLinkEnhancements();
initReplaceableIcons();
optimizeImagesForCLS();
loadPublicSiteSettings();
initPreloader();
@@ -62,6 +79,50 @@ document.addEventListener('DOMContentLoaded', function() {
loadTeam();
});
function sanitizeIconClasses(iconClasses, fallback = 'fas fa-circle') {
const tokens = String(iconClasses || '')
.trim()
.split(/\s+/)
.filter(Boolean)
.filter(token => /^fa[a-z0-9-]+$/i.test(token));
if (!tokens.length) {
return fallback.split(/\s+/);
}
const hasStyleToken = tokens.some(token => /^(fas|far|fab|fal|fat|fa-solid|fa-regular|fa-brands)$/i.test(token));
if (!hasStyleToken) {
tokens.unshift('fas');
}
return tokens;
}
function initReplaceableIcons(scope = document) {
const iconNodes = scope.querySelectorAll('[data-icon-key], [data-icon]');
if (!iconNodes.length) return;
iconNodes.forEach(node => {
const targetIcon = node.matches('i') ? node : node.querySelector('i');
if (!targetIcon) return;
const explicitIcon = node.getAttribute('data-icon') || targetIcon.getAttribute('data-icon');
const iconKey = node.getAttribute('data-icon-key') || targetIcon.getAttribute('data-icon-key');
const mappedIcon = iconKey ? ICON_CLASS_MAP[iconKey] : '';
const selected = explicitIcon || mappedIcon;
if (!selected) return;
Array.from(targetIcon.classList).forEach(cls => {
if (/^fa/i.test(cls)) {
targetIcon.classList.remove(cls);
}
});
sanitizeIconClasses(selected).forEach(cls => targetIcon.classList.add(cls));
targetIcon.setAttribute('aria-hidden', 'true');
});
}
function initSiteLinkEnhancements() {
// Fallback social URLs: only used for placeholder links (href="#" or "javascript:void(0)").
// Preferred approach: set correct URLs directly in HTML. These are a safety net.
@@ -536,6 +597,7 @@ function animateCounter(element, target) {
}
/* ==================== Testimonials Slider ==================== */
let _testimonialInterval = null;
function initTestimonials() {
const testimonials = document.querySelectorAll('.testimonial-card');
const prevBtn = document.querySelector('.testimonial-prev');
@@ -544,8 +606,17 @@ function initTestimonials() {
if (!testimonials.length) return;
// Clear any previous interval to prevent stacking
if (_testimonialInterval) {
clearInterval(_testimonialInterval);
_testimonialInterval = null;
}
let currentIndex = 0;
// Clear previous dots before recreating
if (dotsContainer) dotsContainer.innerHTML = '';
// Create dots
testimonials.forEach((_, index) => {
const dot = document.createElement('span');
@@ -587,7 +658,7 @@ function initTestimonials() {
testimonialContainer.addEventListener('focusin', () => { testimonialPaused = true; });
testimonialContainer.addEventListener('focusout', () => { testimonialPaused = false; });
}
setInterval(() => {
_testimonialInterval = setInterval(() => {
if (!testimonialPaused) goToTestimonial(currentIndex + 1);
}, 8000);
}
@@ -951,7 +1022,7 @@ async function loadServices() {
return `
<div class="service-card" id="${escapeAttr(slug)}" data-aos="fade-up" data-aos-delay="${index * 100}">
<div class="service-icon">
<div class="service-icon" data-icon="${escapeAttr(icon)}">
<i class="fas ${escapeAttr(icon)}"></i>
</div>
<h3 class="service-title">${escapeHTML(service.name || 'Service')}</h3>
@@ -969,6 +1040,8 @@ async function loadServices() {
servicesGrids.forEach(grid => {
grid.innerHTML = servicesMarkup;
});
initReplaceableIcons();
} else {
// No API data returned — static fallback cards already rendered in HTML
}
@@ -981,9 +1054,15 @@ async function loadServices() {
/* ==================== Load Team from API ==================== */
async function loadTeam() {
const teamGrid = document.querySelector('[data-team-grid]');
const teamSection = teamGrid ? teamGrid.closest('.team-section') : null;
if (!teamGrid) return;
// Keep hidden until admin-managed content exists
if (teamSection) {
teamSection.hidden = true;
}
try {
const response = await fetch(`${API_BASE_URL}/team.php`);
const result = await response.json();
@@ -1018,8 +1097,15 @@ async function loadTeam() {
</div>
`;
}).join('');
if (teamSection) {
teamSection.hidden = false;
}
} else {
teamGrid.innerHTML = '';
}
} catch (error) {
teamGrid.innerHTML = '';
console.log('Using static team content or API unavailable');
}
}
services.html
+112 -4
View File
@@ -158,7 +158,7 @@
<div class="services-grid" data-services-grid="true">
<div class="service-card" id="it-support">
<div class="service-icon"><i class="fas fa-headset"></i></div>
<div class="service-icon" data-icon-key="service_it_support"><i class="fas fa-headset"></i></div>
<h3 class="service-title">IT Support &amp; Maintenance</h3>
<p class="service-description">Proactive managed IT support that keeps your systems running at peak performance. From helpdesk to infrastructure management, we handle it all.</p>
<ul class="service-features">
@@ -169,7 +169,7 @@
<a href="contact.html?service=it-support" class="service-link">Request Scope <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card" id="cybersecurity">
<div class="service-icon"><i class="fas fa-shield-alt"></i></div>
<div class="service-icon" data-icon-key="service_cybersecurity"><i class="fas fa-shield-alt"></i></div>
<h3 class="service-title">Cybersecurity Solutions</h3>
<p class="service-description">End-to-end security services to protect your business from evolving threats. Risk assessment, vulnerability management, and incident response.</p>
<ul class="service-features">
@@ -180,7 +180,7 @@
<a href="contact.html?service=cybersecurity" class="service-link">Request Scope <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card" id="cloud">
<div class="service-icon"><i class="fas fa-cloud"></i></div>
<div class="service-icon" data-icon-key="service_cloud"><i class="fas fa-cloud"></i></div>
<h3 class="service-title">Cloud Services</h3>
<p class="service-description">Cloud architecture, migration, and optimization. We design scalable, secure cloud environments tailored to your business needs.</p>
<ul class="service-features">
@@ -191,7 +191,7 @@
<a href="contact.html?service=cloud" class="service-link">Request Scope <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card" id="consulting">
<div class="service-icon"><i class="fas fa-chess-king"></i></div>
<div class="service-icon" data-icon-key="service_consulting"><i class="fas fa-chess-king"></i></div>
<h3 class="service-title">Strategic IT Consulting</h3>
<p class="service-description">Expert guidance to align technology with your business goals. We deliver roadmaps, vendor selection, and digital transformation strategies.</p>
<ul class="service-features">
@@ -205,6 +205,114 @@
</div>
</section>
<!-- Compliance & Frameworks Guide -->
<section class="services section" id="frameworks">
<div class="container">
<div class="section-header">
<span class="section-label">Compliance Guidance</span>
<h2 class="section-title">Which Security Framework Fits Your Industry?</h2>
<p class="section-description">Frameworks are not just checklists. They help you reduce risk, pass audits, and win client trust. We translate each framework into a practical roadmap your team can execute.</p>
</div>
<div class="services-grid frameworks-grid" aria-label="Cybersecurity frameworks explained">
<article class="service-card">
<div class="service-icon" data-icon-key="framework_iso27001"><i class="fas fa-certificate"></i></div>
<h3 class="service-title">ISO 27001</h3>
<p class="service-description"><strong>Best for:</strong> Organizations in regulated sectors or those selling B2B internationally.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Information Security Management System (ISMS)</li>
<li><i class="fas fa-check"></i> Strong governance and audit readiness</li>
<li><i class="fas fa-check"></i> Often required in enterprise procurement</li>
</ul>
</article>
<article class="service-card">
<div class="service-icon" data-icon-key="framework_nist_csf"><i class="fas fa-sitemap"></i></div>
<h3 class="service-title">NIST Cybersecurity Framework</h3>
<p class="service-description"><strong>Best for:</strong> Critical infrastructure, large organizations, and mature risk programs.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Identify, Protect, Detect, Respond, Recover</li>
<li><i class="fas fa-check"></i> Practical risk-based architecture</li>
<li><i class="fas fa-check"></i> Excellent baseline for long-term maturity</li>
</ul>
</article>
<article class="service-card">
<div class="service-icon" data-icon-key="framework_soc2"><i class="fas fa-user-shield"></i></div>
<h3 class="service-title">SOC 2</h3>
<p class="service-description"><strong>Best for:</strong> SaaS, MSPs, cloud service providers, and data-processing companies.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Trust criteria: Security, Availability, Confidentiality</li>
<li><i class="fas fa-check"></i> Frequently requested by enterprise customers</li>
<li><i class="fas fa-check"></i> Strong commercial trust signal</li>
</ul>
</article>
<article class="service-card">
<div class="service-icon" data-icon-key="framework_pci_dss"><i class="fas fa-credit-card"></i></div>
<h3 class="service-title">PCI DSS</h3>
<p class="service-description"><strong>Best for:</strong> Merchants and businesses that store, process, or transmit card data.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Payment card data protection controls</li>
<li><i class="fas fa-check"></i> Network segmentation and monitoring</li>
<li><i class="fas fa-check"></i> Mandatory for card-handling environments</li>
</ul>
</article>
<article class="service-card">
<div class="service-icon" data-icon-key="framework_hipaa"><i class="fas fa-heartbeat"></i></div>
<h3 class="service-title">HIPAA</h3>
<p class="service-description"><strong>Best for:</strong> Healthcare entities and vendors handling protected health information.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Administrative, technical, and physical safeguards</li>
<li><i class="fas fa-check"></i> Data privacy and breach response expectations</li>
<li><i class="fas fa-check"></i> Essential for U.S. healthcare-related operations</li>
</ul>
</article>
<article class="service-card">
<div class="service-icon" data-icon-key="framework_gdpr_ccpa"><i class="fas fa-scale-balanced"></i></div>
<h3 class="service-title">GDPR &amp; CCPA/CPRA</h3>
<p class="service-description"><strong>Best for:</strong> Organizations collecting personal data from EU or California residents.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Privacy-by-design and data subject rights</li>
<li><i class="fas fa-check"></i> Consent, retention, and transparency controls</li>
<li><i class="fas fa-check"></i> Reduces legal and reputational exposure</li>
</ul>
</article>
<article class="service-card">
<div class="service-icon" data-icon-key="framework_nist_800"><i class="fas fa-building-shield"></i></div>
<h3 class="service-title">NIST SP 800-53 / 800-171</h3>
<p class="service-description"><strong>Best for:</strong> Government suppliers and organizations handling controlled data.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Structured control catalog for federal ecosystems</li>
<li><i class="fas fa-check"></i> Required in many public-sector contracts</li>
<li><i class="fas fa-check"></i> Strong alignment with secure architecture practices</li>
</ul>
</article>
<article class="service-card">
<div class="service-icon" data-icon-key="framework_cobit_telco"><i class="fas fa-network-wired"></i></div>
<h3 class="service-title">COBIT / Telecom Frameworks</h3>
<p class="service-description"><strong>Best for:</strong> Telecom, utilities, and governance-heavy environments.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Governance, control objectives, and accountability</li>
<li><i class="fas fa-check"></i> Useful for board-level reporting and assurance</li>
<li><i class="fas fa-check"></i> Helps connect cyber risk with business outcomes</li>
</ul>
</article>
</div>
<div class="section-cta" style="margin-top: 2rem; text-align: center;">
<p style="margin-bottom: 1rem; color: var(--gray-500);">Not sure which framework applies to your business? We can map your obligations and priorities in one session.</p>
<a href="contact.html?service=cybersecurity" class="btn btn-primary">Get My Compliance Roadmap <i class="fas fa-arrow-right"></i></a>
</div>
<p style="margin-top: 1rem; text-align: center; font-size: 0.9rem; color: var(--gray-500);">Educational guidance only. Regulatory and legal requirements vary by jurisdiction and contract terms.</p>
</div>
</section>
<!-- Pricing -->
<section class="pricing section">
<div class="container">