/* ============================================================
NetWebMedia — Global Styles (Gracker.ai inspired)
Dark premium design: black bg, blue/purple gradients
Note: Google Fonts are NOT @imported here — they were a render-
blocking single point of failure. Each HTML page now ships its
own + for Inter +
Poppins + Space Grotesk in . See index.html lines ~145–148.
============================================================ */
/* Skip-to-content accessibility link */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 10000;
background: #FF671F;
color: #fff;
padding: 12px 20px;
font-weight: 700;
text-decoration: none;
border-radius: 0 0 8px 0;
}
.skip-link:focus {
left: 0;
outline: 3px solid #fff;
}
/* ── CSS Variables — NWM Logo Brand Colors ── */
:root {
/* NWM Logo Palette */
--nwm-navy: #012169; /* Logo navy blue — primary bg */
--nwm-navy-dark: #010F3B; /* Darker navy for depth */
--nwm-navy-mid: #01306E; /* Mid navy for sections */
--nwm-orange: #FF671F; /* Logo orange — primary accent */
--nwm-orange-light: #FF8C42; /* Lighter orange tint */
--nwm-blue: #4A90D9; /* Logo text blue — secondary accent */
--bg-primary: #010F3B;
--bg-secondary: #011550;
--bg-card: rgba(255,255,255,0.06);
--bg-card-hover: rgba(255,255,255,0.10);
/* Legacy aliases for compatibility */
--gulf-orange: var(--nwm-orange);
--gulf-blue: var(--nwm-navy);
--gulf-mid-blue: var(--nwm-blue);
--accent-blue: var(--nwm-orange);
--accent-purple: var(--nwm-navy);
--accent-cyan: var(--nwm-orange-light);
--accent-pink: var(--nwm-blue);
--gradient-hero: linear-gradient(135deg, #FF671F 0%, #FF8C42 40%, #4A90D9 100%);
--gradient-text: linear-gradient(90deg, #FF671F, #FF8C42);
--gradient-btn: linear-gradient(135deg, #FF671F, #FF8A00);
--gradient-btn-blue: linear-gradient(135deg, #012169, #4A90D9);
--text-primary: #FFFFFF;
--text-secondary: #C8D4E6;
--text-muted: #7B8FAD;
--border-glass: rgba(255,255,255,0.10);
--border-accent: rgba(255,103,31,0.40);
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-pill: 9999px;
--font-main: 'Inter', sans-serif;
--font-display: 'Poppins', 'Space Grotesk', sans-serif;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--shadow-glow: 0 0 40px rgba(255,103,31,0.30);
--shadow-card: 0 4px 32px rgba(1,15,59,0.5);
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
font-family: var(--font-main);
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
ul { list-style: none; }
/* ── Language Bar ── */
.lang-bar {
background: rgba(255,255,255,0.03);
border-bottom: 1px solid var(--border-glass);
padding: 6px 0;
text-align: right;
position: relative;
z-index: 1001;
}
.lang-bar .container {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
}
.lang-bar .lang-client-login {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 12px;
padding: 5px 14px;
border-radius: var(--radius-pill);
background: rgba(255,103,31,0.15);
border: 1px solid var(--border-accent);
color: var(--text-primary);
font-size: 13px;
font-weight: 600;
transition: var(--transition);
}
.lang-bar .lang-client-login:hover {
background: var(--gulf-orange);
color: #fff;
transform: translateY(-1px);
}
.lang-btn {
display: flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-pill);
padding: 4px 12px;
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition);
font-family: var(--font-main);
}
.lang-btn:hover, .lang-btn.active {
background: rgba(255,103,31,0.15);
border-color: var(--border-accent);
color: var(--text-primary);
}
.lang-btn .flag {
width: 22px; height: 16px; border-radius: 3px; object-fit: cover;
box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
/* ── Promo Banner ── */
.promo-banner{background:linear-gradient(135deg,#FF6B00,#ff3d00);color:#fff;text-align:center;padding:12px 16px;font-weight:700;font-size:14px;letter-spacing:.3px;position:relative;z-index:50}
.promo-banner code{background:rgba(255,255,255,.22);padding:3px 10px;border-radius:6px;font-family:ui-monospace,monospace;font-weight:800;margin:0 4px}
/* ── Navigation ── */
.navbar {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: var(--transition);
background: rgba(1,15,59,0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* Legacy — no longer offsets since navbar is sticky */
.navbar.has-lang-bar { top: 0; }
/* ── Inline nav lang switcher ── */
.nav-lang {
display: flex;
align-items: center;
}
.lang-flag-only {
padding: 0 6px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
transition: var(--transition);
line-height: 0;
display: flex;
align-items: center;
height: 34px;
}
.lang-flag-only .flag {
width: 24px;
height: auto;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 3px;
display: block;
}
.lang-flag-only:hover {
border-color: rgba(255,255,255,0.25);
background: rgba(255,255,255,0.07);
transform: scale(1.1);
}
.navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0;
padding: 14px 0;
transition: var(--transition);
}
.nav-links {
flex: 1;
justify-content: center;
padding: 0 40px;
}
.navbar.scrolled .navbar-inner {
background: rgba(1,15,59,0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-glass);
padding: 12px 20px;
border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
text-decoration: none;
}
/* SVG logo lockup — sized for desktop nav */
.nav-logo-img {
height: 40px;
width: auto;
display: block;
vertical-align: middle;
}
.nav-logo img { height: 40px; width: auto; }
/* Inline text logo — Poppins Bold, Gulf Oil palette */
.logo-wordmark {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 26px;
letter-spacing: 1px;
line-height: 1;
text-decoration: none;
}
.logo-wordmark .logo-net,
.logo-wordmark .logo-media { color: #00AEEF; }
.logo-wordmark .logo-web { color: #FF6600; }
.nav-logo .logo-icon {
width: 40px;
height: 40px;
/* Gulf Oil circle logo style: orange circle with blue ring */
background: var(--gulf-orange);
border: 3px solid var(--gulf-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 0 20px rgba(255,103,31,0.4);
}
.nav-links {
display: flex;
align-items: center;
gap: 28px;
}
.nav-links a {
font-size: 15px;
font-weight: 500;
color: var(--text-secondary);
transition: var(--transition);
position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-hero);
transition: var(--transition);
border-radius: 2px;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-ctas { display: flex; align-items: center; gap: 10px; height: 34px; }
.nav-ctas .nav-lang { margin-left: 6px; height: 100%; display: flex; align-items: center; }
.btn-nav-outline {
padding: 9px 20px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: var(--radius-pill);
font-size: 14px;
font-weight: 500;
transition: var(--transition);
white-space: nowrap;
}
.btn-nav-outline:hover {
border-color: var(--text-primary);
background: rgba(255,255,255,0.05);
}
.btn-nav-solid {
padding: 0 16px;
height: 34px;
display: inline-flex;
align-items: center;
background: var(--gulf-orange);
color: #fff;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 600;
transition: var(--transition);
white-space: nowrap;
}
.btn-nav-solid:hover {
background: #e55a00;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(255,103,31,0.4);
}
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.hamburger span {
width: 24px;
height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile menu */
.mobile-menu {
display: none;
position: fixed;
top: 70px;
left: 0;
right: 0;
bottom: 0;
background: rgba(1,15,59,0.98);
z-index: 999;
flex-direction: column;
align-items: flex-start;
padding: 24px;
gap: 0;
overflow-y: auto;
backdrop-filter: blur(10px);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
width: 100%;
padding: 14px 16px;
font-size: 16px;
font-weight: 500;
color: var(--text-secondary);
transition: var(--transition);
border-radius: 8px;
display: block;
}
.mobile-menu a:hover {
background: rgba(255,255,255,0.08);
color: var(--text-primary);
}
/* ── Container ── */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* ── Buttons ──
CANONICAL CLASSES (no regressions allowed):
- .btn-primary → orange gradient, strongest CTA (hero, forms)
- .btn-secondary → transparent with border, secondary CTA
- .btn-white → solid white, highest contrast
- .btn-nav-solid → nav pill orange, inline nav CTAs
- .btn-nav-outline → nav outline pill, secondary nav links
Mapping: All ad-hoc inline gradients + scattered styles consolidated to
.btn-primary for consistency. These classes are the design system.
──────────────────────────────────────────────────────────────────── */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: var(--gradient-btn);
color: #fff;
border-radius: var(--radius-pill);
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.btn-primary:hover {
background: linear-gradient(135deg, #e55a15, #e07000);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(255,103,31,0.45);
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: transparent;
color: var(--text-primary);
border-radius: var(--radius-pill);
font-size: 16px;
font-weight: 600;
border: 1px solid rgba(255,255,255,0.2);
cursor: pointer;
transition: var(--transition);
}
.btn-secondary:hover {
border-color: rgba(255,255,255,0.5);
background: rgba(255,255,255,0.05);
transform: translateY(-2px);
}
.btn-white {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: #fff;
color: #000;
border-radius: var(--radius-pill);
font-size: 16px;
font-weight: 700;
border: none;
cursor: pointer;
transition: var(--transition);
}
.btn-white:hover {
background: #e5e7eb;
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(255,255,255,0.25);
}
/* ── Gradient Text ── */
.gradient-text {
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-text-purple {
background: linear-gradient(90deg, #010F3B, #FF671F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Section Utilities ── */
section { position: relative; }
.section-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gulf-orange);
margin-bottom: 16px;
}
.section-label::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gulf-orange);
}
.section-title {
font-family: var(--font-display);
font-size: clamp(32px, 5vw, 56px);
font-weight: 700;
line-height: 1.15;
margin-bottom: 20px;
}
.section-subtitle {
font-size: 18px;
color: var(--text-secondary);
max-width: 600px;
line-height: 1.7;
}
/* ── Glow Orbs (Background decoration) ── */
.glow-orb {
position: absolute;
border-radius: 50%;
filter: blur(100px);
pointer-events: none;
opacity: 0.35;
}
.glow-blue { background: var(--gulf-orange); }
.glow-purple{ background: var(--gulf-blue); }
.glow-cyan { background: var(--gulf-orange); }
/* ── Glass Card ── */
.glass-card {
background: var(--bg-card);
border: 1px solid var(--border-glass);
border-radius: var(--radius-md);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: var(--transition);
}
.glass-card:hover {
background: var(--bg-card-hover);
border-color: var(--border-accent);
box-shadow: var(--shadow-glow);
transform: translateY(-4px);
}
/* ── HERO SECTION ── */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 100px;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: rgba(255,103,31,0.12);
border: 1px solid rgba(255,103,31,0.35);
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 500;
color: #FF9A6C;
margin-bottom: 24px;
animation: fadeInUp 0.6s ease forwards;
}
.hero-badge::before {
content: '';
width: 6px;
height: 6px;
background: var(--gulf-orange);
border-radius: 50%;
animation: pulse 2s infinite;
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(40px, 6vw, 72px);
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
animation: fadeInUp 0.7s ease 0.1s both;
}
.hero-desc {
font-size: 18px;
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 36px;
max-width: 520px;
animation: fadeInUp 0.7s ease 0.2s both;
}
.hero-ctas {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 48px;
animation: fadeInUp 0.7s ease 0.3s both;
}
.hero-stats {
display: flex;
gap: 40px;
animation: fadeInUp 0.7s ease 0.4s both;
}
.hero-stat-num {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-stat-label { font-size: 13px; color: var(--text-muted); }
/* Floating squares visual (replicating gracker.ai) */
.hero-visual {
position: relative;
height: 500px;
animation: fadeIn 1s ease 0.5s both;
}
.squares-container {
position: absolute;
inset: 0;
overflow: hidden;
}
.sq {
position: absolute;
border: 2px solid;
border-radius: 4px;
animation: floatSq linear infinite;
opacity: 0.7;
}
/* ── CLIENTS / LOGOS ── */
.clients-section {
padding: 60px 0;
border-top: 1px solid var(--border-glass);
border-bottom: 1px solid var(--border-glass);
}
.clients-label {
text-align: center;
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 32px;
}
.clients-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 48px;
flex-wrap: wrap;
}
.client-logo {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
color: rgba(255,255,255,0.25);
letter-spacing: -0.5px;
transition: var(--transition);
}
.client-logo:hover { color: rgba(255,255,255,0.6); }
/* ── SERVICES SECTION ── */
.services-section { padding: 100px 0; }
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 24px;
margin-top: 60px;
}
.service-card {
padding: 32px;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-hero);
opacity: 0;
transition: var(--transition);
}
.service-card:hover::before { opacity: 1; }
.service-icon {
width: 52px;
height: 52px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 20px;
}
.service-icon-blue { background: rgba(255,103,31,0.15); }
.service-icon-purple { background: rgba(1,33,105,0.25); }
.service-icon-cyan { background: rgba(0,75,135,0.2); }
.service-icon-pink { background: rgba(255,140,66,0.15); }
.service-icon-green { background: rgba(16,185,129,0.15); }
.service-icon-orange { background: rgba(255,103,31,0.12); }
.service-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
}
.service-desc { font-size: 15px; color: var(--text-secondary); line-height: 1.7; }
.service-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: var(--gulf-orange);
margin-top: 20px;
transition: var(--transition);
}
.service-card:hover .service-arrow { gap: 10px; }
/* ── FEATURES TABS ── */
.features-section { padding: 100px 0; background: var(--bg-secondary); }
.features-tabs {
display: flex;
gap: 4px;
margin: 48px 0 40px;
background: rgba(255,255,255,0.04);
border-radius: var(--radius-pill);
padding: 4px;
width: fit-content;
}
.tab-btn {
padding: 10px 24px;
border-radius: var(--radius-pill);
font-size: 14px;
font-weight: 500;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: var(--transition);
font-family: var(--font-main);
}
.tab-btn.active {
background: var(--gradient-btn);
color: #fff;
box-shadow: 0 4px 16px rgba(255,103,31,0.4);
}
.tab-btn:hover:not(.active) { color: var(--text-primary); }
.features-content { display: none; }
.features-content.active { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feature-list { display: flex; flex-direction: column; gap: 20px; }
.feature-item {
display: flex;
gap: 16px;
padding: 20px;
border-radius: var(--radius-md);
transition: var(--transition);
cursor: pointer;
}
.feature-item:hover { background: var(--bg-card); }
.feature-item.active { background: var(--bg-card); border: 1px solid var(--border-accent); }
.feature-item-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(37,99,235,0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.feature-item-title { font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.feature-item-desc { font-size: 14px; color: var(--text-secondary); }
.features-visual {
background: var(--bg-card);
border: 1px solid var(--border-glass);
border-radius: var(--radius-lg);
padding: 40px;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 80px;
}
/* ── RESULTS / STATS ── */
.results-section {
padding: 100px 0;
background: linear-gradient(180deg, transparent 0%, rgba(255,103,31,0.05) 50%, transparent 100%);
}
.results-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
border: 1px solid var(--border-glass);
border-radius: var(--radius-lg);
overflow: hidden;
margin-top: 60px;
}
.result-card {
padding: 40px 32px;
background: var(--bg-card);
text-align: center;
transition: var(--transition);
position: relative;
}
.result-card:hover { background: var(--bg-card-hover); }
.result-number {
font-family: var(--font-display);
font-size: 52px;
font-weight: 800;
background: var(--gradient-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 8px;
}
.result-label { font-size: 14px; color: var(--text-secondary); }
.result-sublabel { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
/* ── TESTIMONIALS ── */
.testimonials-section { padding: 100px 0; }
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 60px;
}
.testimonial-card { padding: 32px; }
.testimonial-stars {
display: flex;
gap: 4px;
margin-bottom: 20px;
color: #FBBF24;
font-size: 16px;
}
.testimonial-text {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 24px;
font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--gulf-orange);
border: 2px solid var(--gulf-blue);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
}
.testimonial-name { font-weight: 600; font-size: 15px; }
.testimonial-role { font-size: 13px; color: var(--text-muted); }
/* ── PROCESS ── */
.process-section { padding: 100px 0; background: var(--bg-secondary); }
.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-top: 60px;
position: relative;
}
.process-steps::before {
content: '';
position: absolute;
top: 32px;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-blue), var(--accent-purple), transparent);
}
.process-step { text-align: center; position: relative; }
.step-number {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--gulf-orange);
border: 3px solid var(--gulf-blue);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
margin: 0 auto 20px;
position: relative;
z-index: 1;
box-shadow: 0 0 30px rgba(255,103,31,0.4);
}
.step-title { font-weight: 700; font-size: 18px; margin-bottom: 10px; }
.step-desc { font-size: 14px; color: var(--text-secondary); }
/* ── CTA SECTION ── */
.cta-section {
padding: 100px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-inner {
background: var(--bg-card);
border: 1px solid var(--border-glass);
border-radius: var(--radius-lg);
padding: 80px 60px;
position: relative;
overflow: hidden;
}
.cta-inner::before {
content: '';
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 300px;
background: var(--gradient-hero);
filter: blur(80px);
opacity: 0.15;
border-radius: 50%;
}
.cta-title {
font-family: var(--font-display);
font-size: clamp(32px, 5vw, 52px);
font-weight: 800;
margin-bottom: 20px;
}
.cta-subtitle { font-size: 18px; color: var(--text-secondary); margin-bottom: 40px; }
.cta-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cta-phone { font-size: 14px; color: var(--text-muted); margin-top: 20px; }
.cta-phone a { color: var(--accent-cyan); }
/* ── FOOTER ── */
footer {
background: var(--nwm-navy-dark);
border-top: 1px solid var(--border-glass);
padding: 80px 0 40px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 60px;
}
.footer-brand p {
font-size: 15px;
color: var(--text-secondary);
margin: 16px 0 24px;
line-height: 1.7;
max-width: 280px;
}
.footer-social {
display: flex;
gap: 12px;
}
.social-link {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-card);
border: 1px solid var(--border-glass);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: var(--transition);
}
.social-link:hover {
background: var(--accent-blue);
border-color: var(--accent-blue);
transform: translateY(-2px);
}
.footer-col h4 {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 20px;
color: var(--text-primary);
}
.footer-col li { margin-bottom: 12px; }
.footer-col a {
font-size: 14px;
color: var(--text-secondary);
transition: var(--transition);
}
.footer-col a:hover { color: var(--text-primary); }
.footer-bottom {
padding-top: 32px;
border-top: 1px solid var(--border-glass);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: gap;
gap: 16px;
}
.footer-bottom p { font-size: 13px; color: var(--text-muted); }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { font-size: 13px; color: var(--text-muted); transition: var(--transition); }
.footer-bottom-links a:hover { color: var(--text-secondary); }
/* ── ANIMATIONS ── */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.5; }
}
@keyframes floatSq {
0% { transform: translateY(0px) rotate(0deg); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { transform: translateY(-600px) rotate(180deg); opacity: 0; }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* === Futuristic 3D hero robot === */
.hero-robot-wrap {
position: relative;
width: 360px;
max-width: 100%;
text-align: center;
perspective: 1200px;
transform-style: preserve-3d;
}
.hero-robot-svg {
width: 280px;
height: auto;
display: block;
margin: 0 auto;
filter: drop-shadow(0 20px 40px rgba(255,103,31,0.25)) drop-shadow(0 0 60px rgba(34,211,238,0.18));
transform-style: preserve-3d;
animation: robotFloat 5s ease-in-out infinite, robotTilt 8s ease-in-out infinite;
position: relative;
z-index: 2;
}
@keyframes robotFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-18px); }
}
@keyframes robotTilt {
0%, 100% { transform: rotateY(-8deg) rotateX(2deg); }
50% { transform: rotateY(8deg) rotateX(-2deg); }
}
.hero-robot-svg .hero-robot-head {
transform-origin: 160px 90px;
animation: robotHeadBob 4s ease-in-out infinite;
}
@keyframes robotHeadBob {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
.hero-robot-svg .hero-robot-scan {
animation: robotScan 2.2s ease-in-out infinite;
}
@keyframes robotScan {
0% { transform: translateY(0); opacity: 0.9; }
50% { transform: translateY(28px); opacity: 0.35; }
100% { transform: translateY(0); opacity: 0.9; }
}
.hero-robot-halo {
position: absolute;
left: 50%;
top: 45%;
width: 420px;
height: 420px;
margin: -210px 0 0 -210px;
border-radius: 50%;
background: radial-gradient(circle at center,
rgba(255,103,31,0.35) 0%,
rgba(255,103,31,0.12) 25%,
rgba(34,211,238,0.10) 45%,
rgba(0,0,0,0) 70%);
filter: blur(20px);
z-index: 0;
animation: robotHaloPulse 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes robotHaloPulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.08); opacity: 1; }
}
.hero-orbit {
position: absolute;
left: 50%;
top: 45%;
width: 340px;
height: 340px;
margin: -170px 0 0 -170px;
border: 1px solid rgba(103, 232, 249, 0.35);
border-radius: 50%;
pointer-events: none;
z-index: 1;
}
.hero-orbit::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 50%;
border: 1px dashed rgba(255,103,31,0.25);
}
.hero-orbit-1 {
width: 320px; height: 120px;
margin: -60px 0 0 -160px;
transform: rotate(0deg);
animation: orbitSpin 14s linear infinite;
}
.hero-orbit-2 {
width: 380px; height: 150px;
margin: -75px 0 0 -190px;
transform: rotate(60deg);
animation: orbitSpin 22s linear infinite reverse;
border-color: rgba(255,103,31,0.35);
}
.hero-orbit-2::before { border-color: rgba(103,232,249,0.25); }
.hero-orbit-3 {
width: 440px; height: 180px;
margin: -90px 0 0 -220px;
transform: rotate(-30deg);
animation: orbitSpin 30s linear infinite;
border-color: rgba(196, 181, 253, 0.3);
}
.hero-orbit-dot {
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border-radius: 50%;
background: radial-gradient(circle, #FFF 0%, #FF671F 50%, rgba(255,103,31,0) 100%);
box-shadow: 0 0 16px #FF671F, 0 0 32px rgba(255,103,31,0.6);
}
.hero-orbit-2 .hero-orbit-dot {
background: radial-gradient(circle, #FFF 0%, #22D3EE 50%, rgba(34,211,238,0) 100%);
box-shadow: 0 0 16px #22D3EE, 0 0 32px rgba(34,211,238,0.6);
}
.hero-orbit-3 .hero-orbit-dot {
background: radial-gradient(circle, #FFF 0%, #C4B5FD 50%, rgba(196,181,253,0) 100%);
box-shadow: 0 0 16px #C4B5FD, 0 0 32px rgba(196,181,253,0.6);
}
@keyframes orbitSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Override combined rotate so each orbit keeps its tilt during spin */
.hero-orbit-1 { animation-name: orbitSpin1; }
.hero-orbit-2 { animation-name: orbitSpin2; }
.hero-orbit-3 { animation-name: orbitSpin3; }
@keyframes orbitSpin1 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes orbitSpin2 {
from { transform: rotate(60deg); }
to { transform: rotate(420deg); }
}
@keyframes orbitSpin3 {
from { transform: rotate(-30deg); }
to { transform: rotate(330deg); }
}
.hero-robot-label {
margin-top: 16px;
font-size: 14px;
color: var(--text-muted);
letter-spacing: 0.14em;
text-transform: uppercase;
position: relative;
z-index: 2;
text-shadow: 0 0 20px rgba(255,103,31,0.3);
}
@media (max-width: 768px) {
.hero-robot-svg { width: 220px; }
.hero-robot-halo { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
.hero-orbit-1 { width: 260px; height: 100px; margin: -50px 0 0 -130px; }
.hero-orbit-2 { width: 300px; height: 120px; margin: -60px 0 0 -150px; }
.hero-orbit-3 { width: 340px; height: 140px; margin: -70px 0 0 -170px; }
}
@keyframes counterUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.scroll-reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-reveal.revealed {
opacity: 1;
transform: translateY(0);
}
/* ── SERVICES PAGE SPECIFIC ── */
.page-hero {
padding: 180px 0 100px;
text-align: center;
}
.service-detail-section { padding: 80px 0; }
.service-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.service-detail-grid.reverse { direction: rtl; }
.service-detail-grid.reverse > * { direction: ltr; }
.service-features-list { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.service-features-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
color: var(--text-secondary);
}
.service-features-list li::before {
content: '✓';
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(37,99,235,0.15);
color: var(--accent-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
margin-top: 2px;
}
.service-visual {
background: var(--bg-card);
border: 1px solid var(--border-glass);
border-radius: var(--radius-lg);
padding: 60px 40px;
text-align: center;
font-size: 80px;
position: relative;
overflow: hidden;
}
.service-visual::before {
content: '';
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 200px;
background: var(--gradient-hero);
filter: blur(60px);
opacity: 0.1;
}
/* ── ABOUT PAGE ── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 60px; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.about-stat { background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 24px; }
.about-stat-num { font-family: var(--font-display); font-size: 36px; font-weight: 800; background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.about-stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 60px; }
.team-card { text-align: center; }
.team-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--gradient-btn); display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 16px; }
.team-name { font-weight: 700; margin-bottom: 4px; }
.team-role { font-size: 13px; color: var(--text-muted); }
/* ── CONTACT PAGE ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 60px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.form-control {
background: var(--bg-card);
border: 1px solid var(--border-glass);
border-radius: var(--radius-md);
padding: 14px 18px;
font-size: 15px;
color: var(--text-primary);
font-family: var(--font-main);
transition: var(--transition);
outline: none;
width: 100%;
}
.form-control:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.form-control::placeholder { color: var(--text-muted); }
textarea.form-control { resize: vertical; min-height: 140px; }
.contact-info { display: flex; flex-direction: column; gap: 32px; }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-info-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); background: rgba(37,99,235,0.15); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.contact-info-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 4px; }
.contact-info-value { font-size: 16px; font-weight: 500; }
/* ── BLOG PAGE ── */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 60px; }
.blog-card { overflow: hidden; }
.blog-card-img { height: 200px; background: var(--gradient-btn); display: flex; align-items: center; justify-content: center; font-size: 48px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.blog-card-body { padding: 24px; }
.blog-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-cyan); margin-bottom: 10px; }
.blog-title { font-weight: 700; font-size: 18px; line-height: 1.4; margin-bottom: 12px; }
.blog-title a:hover { color: var(--accent-blue); }
.blog-excerpt { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 16px; }
.blog-meta { font-size: 12px; color: var(--text-muted); }
/* AI Tools section */
.ai-tools-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 60px; }
.ai-tool-card { padding: 32px; border-radius: var(--radius-md); }
/* ── Dropdown ── */
.nav-item { position: relative; padding-bottom: 16px; margin-bottom: -16px; }
.nav-dropdown {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(1,15,59,0.98);
border: 1px solid var(--border-glass);
border-radius: var(--radius-md);
padding: 8px;
min-width: 220px;
max-height: calc(100vh - 160px);
overflow-y: auto;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 1100;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.nav-dropdown::before {
content: '';
position: absolute;
top: -16px;
left: 0;
right: 0;
height: 16px;
background: transparent;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.open .nav-dropdown { display: block; animation: fadeInUp 0.2s ease; }
.nav-dropdown a {
display: block;
padding: 10px 16px;
font-size: 14px;
color: var(--text-secondary);
border-radius: var(--radius-sm);
transition: var(--transition);
}
.nav-dropdown a:hover { background: var(--bg-card); color: var(--text-primary); }
/* ── Industries mega-dropdown ── */
.nav-dropdown-wide {
display: none;
min-width: 680px;
left: 50%;
transform: translateX(-60%);
padding: 16px;
display: none;
grid-template-columns: repeat(5, 1fr);
gap: 4px 12px;
}
.nav-item:hover .nav-dropdown-wide,
.nav-item:focus-within .nav-dropdown-wide,
.nav-item.open .nav-dropdown-wide {
display: grid;
animation: fadeInUp 0.2s ease;
}
.nav-dropdown-group { display: flex; flex-direction: column; }
.nav-dropdown-head {
font-size: 12px !important;
font-weight: 700 !important;
color: var(--gulf-orange) !important;
text-transform: uppercase;
letter-spacing: .05em;
padding: 6px 8px 4px !important;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 2px;
}
.nav-dropdown-head:hover { background: transparent !important; color: #fff !important; }
.nav-dropdown-group a:not(.nav-dropdown-head) {
font-size: 12px !important;
padding: 5px 8px !important;
color: var(--text-secondary);
}
/* ── Mobile sub-items ── */
.mobile-menu .mobile-sub {
padding-left: 40px;
font-size: 14px;
opacity: 0.6;
font-weight: 400;
}
.mobile-menu .mobile-sub:hover {
opacity: 1;
background: rgba(255,103,31,0.15);
}
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; gap: 48px; }
.hero-visual { height: 360px; }
.results-grid { grid-template-columns: repeat(2,1fr); }
.testimonials-grid { grid-template-columns: repeat(2,1fr); }
.process-steps { grid-template-columns: repeat(2,1fr); }
.process-steps::before { display: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.features-content.active { grid-template-columns: 1fr; }
.service-detail-grid { grid-template-columns: 1fr; }
.service-detail-grid.reverse { direction: ltr; }
.about-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: repeat(2,1fr); }
.blog-grid { grid-template-columns: repeat(2,1fr); }
.ai-tools-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.nav-links, .nav-ctas { display: none; }
.hamburger { display: flex; }
.hero-title { font-size: 36px; }
.hero-stats { gap: 24px; flex-wrap: wrap; }
.services-grid { grid-template-columns: 1fr; }
.results-grid { grid-template-columns: 1fr 1fr; }
.testimonials-grid { grid-template-columns: 1fr; }
.process-steps { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: 1fr 1fr; }
.blog-grid { grid-template-columns: 1fr; }
.cta-inner { padding: 48px 24px; }
.footer-bottom { flex-direction: column; text-align: center; }
.ai-tools-grid { grid-template-columns: 1fr; }
.pricing-tiers { grid-template-columns: 1fr !important; }
.cart-page-grid { grid-template-columns: 1fr !important; }
}
/* Small phones (iPhone SE, small Androids) */
@media (max-width: 480px) {
.container { padding-left: 16px !important; padding-right: 16px !important; }
.hero-title { font-size: 28px; line-height: 1.15; }
.hero-subtitle { font-size: 15px; }
.hero-stats { gap: 16px; justify-content: center; }
.hero-cta { flex-direction: column; width: 100%; }
.hero-cta .btn-primary, .hero-cta .btn-secondary { width: 100%; text-align: center; }
.results-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: 1fr; }
h1, .h1 { font-size: 28px !important; line-height: 1.15; }
h2, .h2 { font-size: 22px !important; }
h3, .h3 { font-size: 18px !important; }
.glass-card { padding: 18px !important; }
.service-card { padding: 18px !important; }
.pricing-tiers .tier, .plan { padding: 22px !important; }
.footer-col { margin-bottom: 20px; }
.nav-logo img { height: 40px !important; }
.btn-primary, .btn-secondary, .btn-nav-solid, .btn-nav-outline {
font-size: 14px !important;
padding: 12px 18px !important;
}
/* Safe-area padding for notched devices */
body { padding-bottom: env(safe-area-inset-bottom, 0px); }
.mobile-menu { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
/* Prevent horizontal overflow from absolute-positioned elements */
html, body { overflow-x: hidden; max-width: 100%; }
}
/* Extra-small phones (iPhone 5/SE 1st gen @ 320px) */
@media (max-width: 360px) {
.hero-title { font-size: 24px; }
h1, .h1 { font-size: 24px !important; }
h2, .h2 { font-size: 20px !important; }
.container { padding-left: 12px !important; padding-right: 12px !important; }
.btn-primary, .btn-secondary { font-size: 13px !important; padding: 10px 14px !important; }
}
/* ============================================================
Pricing Tiers (services.html)
============================================================ */
.service-sales-hook {
display: inline-block;
background: rgba(255,103,31,0.10);
border: 1px solid rgba(255,103,31,0.30);
color: #FFB082;
padding: 8px 16px;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 14px;
}
.pricing-tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 36px 0 24px;
}
.pricing-tier {
position: relative;
padding: 24px 22px;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.03);
border: 1px solid var(--border-glass);
display: flex;
flex-direction: column;
transition: var(--transition);
}
.pricing-tier:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,103,31,0.35);
transform: translateY(-3px);
}
.pricing-tier.featured {
background: linear-gradient(180deg, rgba(255,103,31,0.08), rgba(255,103,31,0.02));
border: 1px solid rgba(255,103,31,0.45);
box-shadow: 0 0 32px rgba(255,103,31,0.10);
}
.pricing-tier-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--gradient-btn);
color: #fff;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 6px 14px;
border-radius: var(--radius-pill);
box-shadow: 0 4px 16px rgba(255,103,31,0.35);
}
.pricing-tier-name {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
margin-bottom: 10px;
}
.pricing-tier-price {
font-family: var(--font-display);
font-size: 34px;
font-weight: 900;
color: var(--text-primary);
line-height: 1;
margin-bottom: 4px;
}
.pricing-tier-price .cents {
font-size: 18px;
vertical-align: top;
color: var(--text-secondary);
margin-left: 2px;
}
.pricing-tier-period {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 18px;
}
.pricing-tier-features {
font-size: 13.5px;
color: var(--text-secondary);
line-height: 1.65;
margin: 0 0 22px;
padding: 0;
list-style: none;
flex: 1;
}
.pricing-tier-features li {
padding: 5px 0 5px 22px;
position: relative;
}
.pricing-tier-features li::before {
content: "✓";
position: absolute;
left: 0;
top: 5px;
color: var(--nwm-orange);
font-weight: 800;
}
.btn-add-cart {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 18px;
border-radius: var(--radius-pill);
border: 1px solid var(--border-accent);
background: rgba(255,103,31,0.08);
color: #FFB082;
font-weight: 700;
font-size: 14px;
font-family: var(--font-main);
cursor: pointer;
transition: var(--transition);
}
.btn-add-cart:hover {
background: var(--gradient-btn);
color: #fff;
border-color: transparent;
transform: translateY(-1px);
}
.btn-add-cart.added {
background: rgba(16,185,129,0.15);
border-color: rgba(16,185,129,0.45);
color: #6EE7B7;
}
.pricing-tier.featured .btn-add-cart {
background: var(--gradient-btn);
color: #fff;
border-color: transparent;
}
.pricing-tier.featured .btn-add-cart:hover {
box-shadow: 0 10px 30px rgba(255,103,31,0.35);
}
/* ============================================================
Cart (nav badge + FAB + drawer + cart.html page)
============================================================ */
.nav-cart {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,0.05);
border: 1px solid var(--border-glass);
color: var(--text-primary);
margin-right: 0;
transition: var(--transition);
font-size: 16px;
}
.nav-cart:hover {
background: rgba(255,103,31,0.15);
border-color: var(--border-accent);
}
.nav-cart-count {
position: absolute;
top: -6px;
right: -6px;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 9999px;
background: var(--nwm-orange);
color: #fff;
font-size: 11px;
font-weight: 800;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(255,103,31,0.45);
}
.nav-cart-count.has-items {
display: inline-flex;
}
.cart-toast {
position: fixed;
bottom: 32px;
right: 32px;
z-index: 2000;
background: rgba(1,15,59,0.96);
border: 1px solid rgba(255,103,31,0.45);
backdrop-filter: blur(16px);
color: #fff;
padding: 14px 22px;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 600;
box-shadow: 0 20px 40px rgba(0,0,0,0.45);
opacity: 0;
transform: translateY(16px);
pointer-events: none;
transition: all 0.3s ease;
}
.cart-toast.show {
opacity: 1;
transform: translateY(0);
}
/* cart.html page */
.cart-page-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 32px;
align-items: flex-start;
margin-top: 40px;
}
.cart-items {
display: flex;
flex-direction: column;
gap: 14px;
}
.cart-item {
display: grid;
grid-template-columns: 56px 1fr auto auto;
gap: 18px;
align-items: center;
padding: 18px 20px;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-glass);
}
.cart-item-icon {
font-size: 32px;
width: 56px;
height: 56px;
border-radius: var(--radius-sm);
background: rgba(255,103,31,0.10);
display: flex;
align-items: center;
justify-content: center;
}
.cart-item-title {
font-weight: 700;
font-size: 15px;
color: var(--text-primary);
}
.cart-item-tier {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.cart-item-price {
font-weight: 800;
font-size: 18px;
color: var(--text-primary);
font-family: var(--font-display);
}
.cart-item-period {
display: block;
font-size: 11px;
color: var(--text-muted);
font-weight: 400;
text-align: right;
}
.cart-item-remove {
background: transparent;
border: 1px solid var(--border-glass);
color: var(--text-muted);
width: 32px;
height: 32px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: var(--transition);
}
.cart-item-remove:hover {
border-color: #EF4444;
color: #EF4444;
background: rgba(239,68,68,0.08);
}
.cart-summary {
padding: 28px;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-glass);
position: sticky;
top: 110px;
}
.cart-summary h3 {
font-family: var(--font-display);
font-size: 18px;
margin-bottom: 18px;
}
.cart-summary-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
font-size: 14px;
color: var(--text-secondary);
border-bottom: 1px dashed var(--border-glass);
}
.cart-summary-row.total {
border: none;
font-size: 18px;
font-weight: 800;
color: var(--text-primary);
padding-top: 18px;
}
.cart-empty {
text-align: center;
padding: 80px 20px;
color: var(--text-muted);
}
.cart-empty-icon {
font-size: 64px;
margin-bottom: 16px;
opacity: 0.5;
}
/* ============================================================
Blog Article (individual post pages)
============================================================ */
.article-hero {
padding: 140px 0 40px;
border-bottom: 1px solid var(--border-glass);
}
.article-hero .tag {
display: inline-block;
padding: 6px 14px;
border-radius: var(--radius-pill);
background: rgba(255,103,31,0.12);
border: 1px solid rgba(255,103,31,0.30);
color: #FFB082;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 18px;
}
.article-hero h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 4.2vw, 3.2rem);
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 18px;
max-width: 880px;
}
.article-meta {
color: var(--text-muted);
font-size: 14px;
margin-bottom: 28px;
}
.article-cover {
max-width: 900px;
min-height: 280px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 120px;
margin: 0 auto;
box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.article-body {
max-width: 760px;
margin: 0 auto;
padding: 60px 20px 80px;
font-size: 17px;
line-height: 1.85;
color: var(--text-secondary);
}
.article-body h2 {
font-family: var(--font-display);
font-size: 28px;
color: var(--text-primary);
margin: 40px 0 14px;
letter-spacing: -0.01em;
}
.article-body h3 {
font-family: var(--font-display);
font-size: 20px;
color: var(--text-primary);
margin: 28px 0 10px;
}
.article-body p { margin-bottom: 18px; }
.article-body ul, .article-body ol {
margin: 0 0 22px 22px;
padding: 0;
}
.article-body ul li {
list-style: disc;
margin-bottom: 8px;
}
.article-body ol li {
list-style: decimal;
margin-bottom: 8px;
}
.article-body strong { color: var(--text-primary); }
.article-body a {
color: #FFB082;
border-bottom: 1px dashed rgba(255,176,130,0.4);
}
.article-body blockquote {
border-left: 3px solid var(--nwm-orange);
padding: 10px 22px;
margin: 24px 0;
background: rgba(255,103,31,0.06);
color: var(--text-primary);
font-style: italic;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.article-body code {
background: rgba(255,255,255,0.06);
padding: 2px 8px;
border-radius: 6px;
font-size: 14px;
color: #FFB082;
font-family: 'Space Grotesk', monospace;
}
.article-cta-box {
margin: 50px 0;
padding: 30px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(255,103,31,0.12), rgba(1,33,105,0.20));
border: 1px solid rgba(255,103,31,0.35);
text-align: center;
}
.article-cta-box h3 {
margin-bottom: 10px;
}
.article-back {
display: inline-block;
margin-bottom: 24px;
color: var(--text-muted);
font-size: 14px;
}
.article-back:hover { color: #FFB082; }
/* ─────────────────────────────────────────────────────────────────────
Icon System — Replaces emoji UI with SVG masks (BRAND.md §)
Approved for Agent 1 + Agent 2 icon-replacement workflow
Pattern: Each icon uses mask-image with inline data URI.
Icons inherit text color via currentColor (works on dark + light).
───────────────────────────────────────────────────────────────────── */
.icon {
display: inline-block;
width: 1.1em;
height: 1.1em;
vertical-align: -0.15em;
background-color: currentColor;
-webkit-mask-image: var(--icon-svg);
mask-image: var(--icon-svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
flex-shrink: 0;
}
/* Building (hotel) */
.icon-hospitality {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 21V7l9-4 9 4v14h-6v-6h-6v6H3zm7-10h4v4h-4v-4zm-5 0h3v3H5v-3zm12 0h3v3h-3v-3z' fill='black'/%3E%3C/svg%3E");
}
/* Medical cross / healthcare */
.icon-healthcare {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9h-3V8h-1v3h-3v1h3v3h1v-3h3v-1z' fill='black'/%3E%3C/svg%3E");
}
/* Sparkle / beauty */
.icon-beauty {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L15.09 8.26H22L17.45 12.24L20.09 18.5L12 14.52L3.91 18.5L6.55 12.24L2 8.26H8.91L12 2z' fill='black'/%3E%3C/svg%3E");
}
/* Gavel / legal */
.icon-legal {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9h-7v2h7v-2z' fill='black'/%3E%3C/svg%3E");
}
/* House silhouette / real estate */
.icon-realestate {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z' fill='black'/%3E%3C/svg%3E");
}
/* Fork + knife / restaurants */
.icon-restaurants {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V21h2.5v-9.03C9.34 11.84 11 10.12 11 8V2h-2v7zm7-6v8.5c0 2.75-2.25 5-5 5s-5-2.25-5-5V3h2v8.5c0 1.65 1.35 3 3 3s3-1.35 3-3V3h2z' fill='black'/%3E%3C/svg%3E");
}
/* Dumbbell / fitness */
.icon-fitness {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 12l7.5 7.5c.39.39.39 1.02 0 1.41l-1.41 1.41c-.39.39-1.02.39-1.41 0L11 14.83 3.5 22.33c-.39.39-1.02.39-1.41 0l-1.41-1.41c-.39-.39-.39-1.02 0-1.41L8.68 12 1.68 5.02c-.39-.39-.39-1.02 0-1.41l1.41-1.41c.39-.39 1.02-.39 1.41 0l7.5 7.5 7.5-7.5c.39-.39 1.02-.39 1.41 0l1.41 1.41c.39.39.39 1.02 0 1.41L14 12z' fill='black'/%3E%3C/svg%3E");
}
/* Shopping bag / e-commerce */
.icon-ecommerce {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z' fill='black'/%3E%3C/svg%3E");
}
/* Wrench / home services */
.icon-home {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.6C.4 7 .9 10 2.9 12c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z' fill='black'/%3E%3C/svg%3E");
}
/* Chip / tech */
.icon-tech {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 2h-8L4 8v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-5 15h-2v2h2v-2zm4-8h-2V5h2v4z' fill='black'/%3E%3C/svg%3E");
}
/* Car silhouette / automotive */
.icon-auto {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.22.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm11 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM5 11l1.5-4.5h11L19 11H5z' fill='black'/%3E%3C/svg%3E");
}
/* Sparkles / events */
.icon-events {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2c-5.33 4.55-8 8.48-8 11.8 0 4.98 3.8 8.2 8 8.2s8-3.22 8-8.2c0-3.32-2.67-7.25-8-11.8zm0 18c-3.35 0-6-2.57-6-6.2 0-2.34 1.95-5.44 6-9.14 4.05 3.7 6 6.79 6 9.14 0 3.63-2.65 6.2-6 6.2zm3.5-9c0 1.93-1.57 3.5-3.5 3.5S8 12.93 8 11s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5z' fill='black'/%3E%3C/svg%3E");
}
/* Chart up / finance */
.icon-finance {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 6l2.29 2.29-4.58 4.58-4-4L2 16.86 3.41 18.27l6-6 4 4 6.3-6.29L22 12V6z' fill='black'/%3E%3C/svg%3E");
}
/* Graduation cap / education */
.icon-education {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6.18L23 9 12 3zM12 13.36L2.59 8.88 12 3.64l9.41 5.24L12 13.36z' fill='black'/%3E%3C/svg%3E");
}
/* Storefront / SMB */
.icon-smb {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 13h2v8H3zm4-8h2V4H7zm10 0h2V4h-2zM3 21h18v-2H3zm6-6h12V4H9zm11-5h-2v3h2v-3zm-4 0h-2v3h2v-3z' fill='black'/%3E%3C/svg%3E");
}
/* Wine bottle / wine & agriculture */
.icon-wine {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12v3h-1.5v2c0 2.21-1.79 4-4 4s-4-1.79-4-4V6H6V3zm5 13v-3h2v3h4v-2c0-2.21-1.79-4-4-4s-4 1.79-4 4v2h4zm3 2h-2v4h-2v-4h-2v4H7v-2H6v4h12v-4h-1v2h-2v-4z' fill='black'/%3E%3C/svg%3E");
}
/* Camera / location pin (local services) */
.icon-local {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c0 1.93-1.57 3.5-3.5 3.5s-3.5-1.57-3.5-3.5 1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5z' fill='black'/%3E%3C/svg%3E");
}
/* ─────────────────────────────────────────────────────────────────────
Social-platform icons (footer). Same mask-image pattern; brand-neutral
monochrome via currentColor — no platform color liabilities.
Sweep 2026-04-29: replaces emoji glyphs (📸 ▶ 🎵 📘) per BRAND.md.
───────────────────────────────────────────────────────────────────── */
.icon-instagram {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.85 5.85 0 0 0-2.13 1.38A5.85 5.85 0 0 0 .63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.73 1.46 1.38 2.13a5.85 5.85 0 0 0 2.13 1.38c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.85 5.85 0 0 0 2.13-1.38 5.85 5.85 0 0 0 1.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.85 5.85 0 0 0-1.38-2.13A5.85 5.85 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zm0 10.16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z' fill='black'/%3E%3C/svg%3E");
}
.icon-youtube {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.1-2.13C19.55 3.55 12 3.55 12 3.55s-7.55 0-9.4.52A3 3 0 0 0 .5 6.2C0 8.07 0 12 0 12s0 3.93.5 5.8a3 3 0 0 0 2.1 2.13c1.85.52 9.4.52 9.4.52s7.55 0 9.4-.52a3 3 0 0 0 2.1-2.13C24 15.93 24 12 24 12s0-3.93-.5-5.8zM9.6 15.57V8.43L15.82 12 9.6 15.57z' fill='black'/%3E%3C/svg%3E");
}
.icon-tiktok {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.6 6.32a5.46 5.46 0 0 1-3.36-1.13 5.46 5.46 0 0 1-2.16-3.7h-3.5v13.6a3.3 3.3 0 1 1-2.31-3.15V8.32a6.78 6.78 0 1 0 5.81 6.71V8.66a8.92 8.92 0 0 0 5.52 1.88V7.05a5.49 5.49 0 0 1 0-.73z' fill='black'/%3E%3C/svg%3E");
}
.icon-facebook {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z' fill='black'/%3E%3C/svg%3E");
}
.icon-linkedin {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z' fill='black'/%3E%3C/svg%3E");
}
.icon-x {
--icon-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644z' fill='black'/%3E%3C/svg%3E");
}
/* Footer social-link sizing override — emoji used to be 16px text glyphs;
icon mode needs the SVG to fill the 40x40 chip cleanly. */
.footer-social .social-link .icon {
width: 18px;
height: 18px;
vertical-align: middle;
}