/* =====================================================
   NeoWave - Industrial IoT Connectivity Solutions
   CSS Stylesheet v1.0
   ===================================================== */

/* CSS Custom Properties */
:root {
    --color-bg: #0a0e14;
    --color-bg-alt: #0f1419;
    --color-bg-card: #141a22;
    --color-bg-elevated: #1a222d;
    --color-text: #e8edf4;
    --color-text-muted: #8b9ab0;
    --color-text-dim: #5a6a7d;
    --color-primary: #00d4aa;
    --color-primary-light: #00ffcc;
    --color-primary-dark: #00a888;
    --color-accent: #0088ff;
    --color-accent-light: #33a3ff;
    --color-border: #1e2a38;
    --color-border-light: #2a3847;
    --gradient-primary: linear-gradient(135deg, #00d4aa 0%, #0088ff 100%);
    --gradient-dark: linear-gradient(180deg, #0a0e14 0%, #0f1419 100%);
    --gradient-card: linear-gradient(145deg, #141a22 0%, #1a222d 100%);
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --max-width: 1280px;
    --header-height: 80px;
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(0, 212, 170, 0.15);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--color-text); background-color: var(--color-bg); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-light); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--color-text); }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); }

/* Header */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(10, 14, 20, 0.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--color-border); height: var(--header-height); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); }
.logo { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--color-text); text-decoration: none; }
.logo:hover { color: var(--color-text); }
.logo-icon { color: var(--color-primary); font-size: 1.75rem; }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); list-style: none; }
.nav-links a { font-family: var(--font-display); font-size: 0.9rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--gradient-primary); transition: width var(--transition-base); }
.nav-links a:hover, .nav-links a.active { color: var(--color-text); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { display: inline-flex; align-items: center; padding: 0.625rem 1.25rem; font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--color-bg); background: var(--gradient-primary); border-radius: var(--radius-md); text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.nav-cta:hover { color: var(--color-bg); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.mobile-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 4px; }
.mobile-toggle span { display: block; width: 100%; height: 2px; background: var(--color-text); transition: var(--transition-fast); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.75rem; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; text-decoration: none; border-radius: var(--radius-md); transition: all var(--transition-base); cursor: pointer; border: none; }
.btn-primary { color: var(--color-bg); background: var(--gradient-primary); box-shadow: 0 4px 15px rgba(0, 212, 170, 0.3); }
.btn-primary:hover { color: var(--color-bg); transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0, 212, 170, 0.4); }
.btn-secondary { color: var(--color-text); background: transparent; border: 1px solid var(--color-border-light); }
.btn-secondary:hover { color: var(--color-primary); border-color: var(--color-primary); background: rgba(0, 212, 170, 0.05); }
.btn-lg { padding: 1rem 2rem; font-size: 1rem; }

/* Hero */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-3xl); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 212, 170, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 170, 0.03) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, black, transparent); }
.pulse-ring { position: absolute; border-radius: 50%; border: 1px solid var(--color-primary); opacity: 0; animation: pulse-out 4s ease-out infinite; }
.pulse-1 { top: 30%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; }
.pulse-2 { top: 30%; left: 50%; width: 600px; height: 600px; margin: -300px 0 0 -300px; animation-delay: 1s; }
.pulse-3 { top: 30%; left: 50%; width: 800px; height: 800px; margin: -400px 0 0 -400px; animation-delay: 2s; }
@keyframes pulse-out { 0% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(1.2); opacity: 0; } }
.hero-content { text-align: center; max-width: 900px; margin: 0 auto; }
.hero-badge { display: inline-block; padding: 0.5rem 1rem; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary); background: rgba(0, 212, 170, 0.1); border: 1px solid rgba(0, 212, 170, 0.2); border-radius: var(--radius-xl); margin-bottom: var(--space-lg); }
.hero h1 { margin-bottom: var(--space-lg); }
.gradient-text { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-subtitle { font-size: 1.25rem; color: var(--color-text-muted); max-width: 700px; margin: 0 auto var(--space-xl); line-height: 1.8; }
.hero-actions { display: flex; gap: var(--space-md); justify-content: center; margin-bottom: var(--space-3xl); }
.hero-stats { display: flex; justify-content: center; gap: var(--space-3xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); }
.stat { text-align: center; }
.stat-value { display: block; font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--color-text); line-height: 1; margin-bottom: 0.5rem; }
.stat-label { font-size: 0.875rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* Page Hero */
.page-hero { position: relative; padding: calc(var(--header-height) + var(--space-3xl)) 0 var(--space-3xl); overflow: hidden; }
.page-hero .hero-bg { position: absolute; inset: 0; z-index: -1; }
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb span { color: var(--color-text-dim); }
.page-hero h1 { margin-bottom: var(--space-md); }
.page-subtitle { font-size: 1.25rem; color: var(--color-text-muted); max-width: 700px; line-height: 1.8; }

/* Sections */
section { padding: var(--space-3xl) 0; }
.section-header { text-align: center; max-width: 700px; margin: 0 auto var(--space-2xl); }
.section-tag { display: inline-block; font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-sm); }
.section-header h2 { margin-bottom: var(--space-md); }
.section-header p { color: var(--color-text-muted); font-size: 1.125rem; }
.alt-bg { background: var(--color-bg-alt); }

/* Solutions Grid */
.solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
.solution-card { display: flex; flex-direction: column; padding: var(--space-xl); background: var(--gradient-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; transition: all var(--transition-base); }
.solution-card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: var(--shadow-glow); }
.solution-icon { width: 56px; height: 56px; margin-bottom: var(--space-md); color: var(--color-primary); }
.solution-icon svg { width: 100%; height: 100%; }
.solution-card h3 { margin-bottom: var(--space-sm); color: var(--color-text); }
.solution-card p { color: var(--color-text-muted); flex-grow: 1; margin-bottom: var(--space-md); }
.solution-link { font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--color-primary); }

/* Why Grid */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
.why-content .section-tag { display: block; text-align: left; margin-bottom: var(--space-sm); }
.why-content h2 { text-align: left; margin-bottom: var(--space-lg); }
.why-content > p { color: var(--color-text-muted); margin-bottom: var(--space-xl); }
.why-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-lg); }
.why-list li { display: flex; gap: var(--space-md); }
.why-icon { color: var(--color-primary); font-size: 1rem; flex-shrink: 0; margin-top: 0.25rem; }
.why-list strong { display: block; margin-bottom: 0.25rem; color: var(--color-text); }
.why-list p { color: var(--color-text-muted); font-size: 0.9375rem; }
.tech-diagram { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-xl); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.diagram-node { padding: 0.75rem 1.5rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; color: var(--color-text); }
.diagram-node.node-rms, .diagram-node.node-router { border-color: var(--color-primary); box-shadow: 0 0 15px rgba(0, 212, 170, 0.1); }
.diagram-line { width: 2px; height: 24px; background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-border-light) 100%); }
.diagram-branches { display: flex; gap: var(--space-xl); }
.branch { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.branch::before { content: ''; width: 2px; height: 16px; background: var(--color-border-light); }

/* Use Cases */
.use-cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-lg); }
.use-case { padding: var(--space-xl); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--transition-base); }
.use-case:hover { border-color: var(--color-border-light); }
.use-case-icon { font-size: 2rem; margin-bottom: var(--space-md); }
.use-case h3 { margin-bottom: var(--space-sm); }
.use-case p { color: var(--color-text-muted); font-size: 0.9375rem; }

/* CTA Section */
.cta-section { background: var(--gradient-card); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.cta-content { text-align: center; max-width: 600px; margin: 0 auto; }
.cta-content h2 { margin-bottom: var(--space-md); }
.cta-content > p { color: var(--color-text-muted); font-size: 1.125rem; margin-bottom: var(--space-xl); }
.cta-actions { margin-bottom: var(--space-lg); }
.cta-contact span { font-family: var(--font-display); font-weight: 500; color: var(--color-text-muted); }

/* Intro Section */
.intro-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-3xl); align-items: start; }
.intro-content h2 { margin-bottom: var(--space-lg); }
.intro-content p { color: var(--color-text-muted); font-size: 1.0625rem; line-height: 1.8; }
.intro-features { display: flex; flex-direction: column; gap: var(--space-lg); }
.feature-item { padding: var(--space-lg); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.feature-number { display: block; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-sm); }
.feature-item h3 { margin-bottom: var(--space-xs); font-size: 1.125rem; }
.feature-item p { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: 0; }

/* Product Cards */
.product-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-lg); }
.product-card { display: flex; flex-direction: column; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--transition-base); }
.product-card:hover { border-color: var(--color-border-light); }
.product-card.featured { border-color: var(--color-primary); box-shadow: var(--shadow-glow); }
.product-badge { background: var(--gradient-primary); color: var(--color-bg); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5rem var(--space-lg); text-align: center; }
.product-header { padding: var(--space-lg) var(--space-lg) 0; }
.product-header h3 { margin-bottom: 0.25rem; }
.product-tagline { color: var(--color-primary); font-size: 0.875rem; font-weight: 500; }
.product-body { padding: var(--space-lg); flex-grow: 1; }
.product-body > p { color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.product-body h4 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-dim); margin-bottom: var(--space-sm); }
.product-features { list-style: none; margin-bottom: var(--space-lg); }
.product-features li { position: relative; padding-left: 1.25rem; color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: 0.5rem; }
.product-features li::before { content: '◆'; position: absolute; left: 0; color: var(--color-primary); font-size: 0.5rem; top: 0.5em; }
.product-footer { padding: var(--space-lg); border-top: 1px solid var(--color-border); }

/* Tech Section */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); }
.tech-article { padding: var(--space-xl); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.tech-article h3 { margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.tech-article p { color: var(--color-text-muted); font-size: 0.9375rem; }

/* Comparison Table */
.comparison-table-wrapper { overflow-x: auto; }
.comparison-table { width: 100%; border-collapse: collapse; background: var(--color-bg-card); border-radius: var(--radius-lg); overflow: hidden; }
.comparison-table th, .comparison-table td { padding: var(--space-md) var(--space-lg); text-align: left; border-bottom: 1px solid var(--color-border); }
.comparison-table th { background: var(--color-bg-elevated); font-family: var(--font-display); font-weight: 600; color: var(--color-text); }
.comparison-table th:last-child { color: var(--color-primary); }
.comparison-table td { color: var(--color-text-muted); font-size: 0.9375rem; }
.comparison-table td:last-child { color: var(--color-text); }
.comparison-table tr:last-child td { border-bottom: none; }

/* FAQ Section */
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--space-lg); }
.faq-item { padding: var(--space-lg); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.faq-item h3 { font-size: 1.0625rem; margin-bottom: var(--space-sm); }
.faq-item p { color: var(--color-text-muted); font-size: 0.9375rem; }

/* Brands Section */
.brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
.brand-card { padding: var(--space-xl); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.brand-logo { margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.brand-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-text); }
.brand-card > p { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: var(--space-md); }
.brand-highlights { list-style: none; }
.brand-highlights li { position: relative; padding-left: 1.25rem; color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: 0.375rem; }
.brand-highlights li::before { content: '◆'; position: absolute; left: 0; color: var(--color-primary); font-size: 0.5rem; top: 0.5em; }

/* Router Categories */
.router-categories { display: flex; flex-direction: column; gap: var(--space-xl); }
.router-category { padding: var(--space-xl); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.router-category h3 { margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.router-category > p { color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.router-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-md); }
.router-specs .spec { font-size: 0.875rem; color: var(--color-text-muted); }
.router-specs .spec strong { color: var(--color-text); }
.router-examples { font-size: 0.875rem; color: var(--color-text-dim); }
.router-examples strong { color: var(--color-text-muted); }

/* Features Grid */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-lg); }
.feature-card { padding: var(--space-xl); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.feature-card .feature-icon { width: 48px; height: 48px; margin-bottom: var(--space-md); color: var(--color-primary); }
.feature-card .feature-icon svg { width: 100%; height: 100%; }
.feature-card h3 { margin-bottom: var(--space-sm); }
.feature-card p { color: var(--color-text-muted); font-size: 0.9375rem; }

/* Guide Grid */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--space-lg); }
.guide-item { padding: var(--space-xl); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.guide-item h3 { font-size: 1.0625rem; margin-bottom: var(--space-sm); color: var(--color-primary); }
.guide-item p { color: var(--color-text-muted); font-size: 0.9375rem; }

/* Antenna Categories */
.antenna-categories { display: flex; flex-direction: column; gap: var(--space-xl); }
.antenna-category { padding: var(--space-xl); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.antenna-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); }
.antenna-icon { width: 64px; height: 64px; flex-shrink: 0; color: var(--color-primary); }
.antenna-icon svg { width: 100%; height: 100%; }
.antenna-header h3 { margin: 0; }
.antenna-category > p { color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.antenna-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); }
.spec-group h4 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-dim); margin-bottom: var(--space-sm); }
.spec-group ul { list-style: none; }
.spec-group li { position: relative; padding-left: 1.25rem; color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: 0.375rem; }
.spec-group li::before { content: '◆'; position: absolute; left: 0; color: var(--color-primary); font-size: 0.5rem; top: 0.5em; }

/* Applications Grid */
.applications-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-lg); }
.application-card { padding: var(--space-xl); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.application-card h3 { margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.application-card p { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: var(--space-sm); }
.application-card p:last-child { margin-bottom: 0; }
.application-card strong { color: var(--color-text); }

/* Accessories Grid */
.accessories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); }
.accessory-item { padding: var(--space-lg); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.accessory-item h3 { font-size: 1.0625rem; margin-bottom: var(--space-sm); }
.accessory-item p { color: var(--color-text-muted); font-size: 0.9375rem; }

/* Services Section */
.service-blocks { display: flex; flex-direction: column; gap: var(--space-xl); }
.service-block { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.service-header { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xl); background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); }
.service-icon { width: 48px; height: 48px; flex-shrink: 0; color: var(--color-primary); }
.service-icon svg { width: 100%; height: 100%; }
.service-header h3 { margin: 0; }
.service-content { padding: var(--space-xl); }
.service-content > p { color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.service-content h4 { font-size: 1rem; margin-top: var(--space-lg); margin-bottom: var(--space-sm); color: var(--color-primary); }
.service-content h4:first-of-type { margin-top: 0; }

/* Packages Section */
.packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); }
.package-card { display: flex; flex-direction: column; padding: var(--space-xl); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); position: relative; }
.package-card.featured { border-color: var(--color-primary); box-shadow: var(--shadow-glow); }
.package-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gradient-primary); color: var(--color-bg); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; padding: 0.375rem 1rem; border-radius: var(--radius-xl); white-space: nowrap; }
.package-card h3 { margin-bottom: var(--space-xs); }
.package-desc { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); }
.package-features { list-style: none; flex-grow: 1; margin-bottom: var(--space-lg); }
.package-features li { position: relative; padding-left: 1.25rem; color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: 0.5rem; }
.package-features li::before { content: '◆'; position: absolute; left: 0; color: var(--color-primary); font-size: 0.5rem; top: 0.5em; }
.package-ideal { font-size: 0.875rem; color: var(--color-text-dim); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.package-ideal strong { color: var(--color-text-muted); }

/* Process Section */
.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); }
.process-step { padding: var(--space-xl); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); position: relative; }
.step-number { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--color-primary); opacity: 0.3; margin-bottom: var(--space-sm); }
.process-step h3 { margin-bottom: var(--space-sm); }
.process-step p { color: var(--color-text-muted); font-size: 0.9375rem; }

/* Footer */
.footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding: var(--space-3xl) 0 var(--space-xl); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--space-2xl); margin-bottom: var(--space-2xl); padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-border); }
.footer-brand .logo { margin-bottom: var(--space-md); }
.footer-brand p { color: var(--color-text-muted); font-size: 0.9375rem; }
.footer-links h4, .footer-contact h4 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text); margin-bottom: var(--space-md); }
.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: var(--color-text-muted); font-size: 0.9375rem; }
.footer-links a:hover { color: var(--color-primary); }
.footer-contact address { font-style: normal; color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.8; margin-bottom: var(--space-md); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { color: var(--color-text-dim); font-size: 0.875rem; margin: 0; }
.footer-tagline { font-family: var(--font-display); }

/* Responsive */
@media (max-width: 1024px) {
    .why-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .why-visual { order: -1; }
    .intro-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    :root { --space-3xl: 4rem; }
    .nav-links, .nav-cta { display: none; }
    .mobile-toggle { display: flex; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-stats { flex-direction: column; gap: var(--space-lg); }
    .solutions-grid, .use-cases-grid, .product-cards, .tech-grid, .faq-grid, .brands-grid, .features-grid, .guide-grid, .applications-grid, .accessories-grid, .packages-grid, .process-steps { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }
    .comparison-table th, .comparison-table td { padding: var(--space-sm); font-size: 0.875rem; }
}

@media (max-width: 480px) {
    :root { --space-3xl: 3rem; --space-2xl: 2.5rem; }
    h1 { font-size: 2rem; }
    .hero-subtitle, .page-subtitle { font-size: 1.0625rem; }
    .stat-value { font-size: 2rem; }
    .solution-card, .product-card, .package-card, .service-block, .router-category, .antenna-category { padding: var(--space-lg); }
}