/* ========================================================
MF SYSTEMS - CYBERPUNK HIGH-TECH DESIGN SYSTEM
Base Dark: #030509 | Neon Yellow: #FFD700 | Electric Cyan: #00E5FF
======================================================== */
:root {
--bg-dark: #030509;
--bg-card: rgba(8, 14, 26, 0.75);
--bg-card-hover: rgba(14, 22, 40, 0.9);
--border-color: rgba(0, 229, 255, 0.2);
--neon-cyan: #00E5FF;
--neon-yellow: #FFD700;
--neon-cyan-glow: 0 0 15px rgba(0, 229, 255, 0.6), 0 0 30px rgba(0, 229, 255, 0.2);
--neon-yellow-glow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.2);
--text-main: #E2E8F0;
--text-muted: #8492A6;
--font-heading: 'Orbitron', 'Rajdhani', sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-dark);
color: var(--text-main);
font-family: var(--font-body);
line-height: 1.6;
overflow-x: hidden;
position: relative;
background-image:
radial-gradient(circle at 15% 15%, rgba(0, 229, 255, 0.05) 0%, transparent 40%),
radial-gradient(circle at 85% 85%, rgba(255, 215, 0, 0.04) 0%, transparent 40%),
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
}
/* Typography Helpers */
h1, h2, h3, h4, .brand-title, .cyber-btn {
font-family: var(--font-heading);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.neon-cyan-text {
color: var(--neon-cyan);
text-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
}
.neon-yellow-text {
color: var(--neon-yellow);
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}
.text-green {
color: #00FF88;
text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}
/* Container */
.container, .section-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.section-container {
padding-top: 80px;
padding-bottom: 80px;
}
/* Navbar */
.cyber-navbar {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(3, 5, 9, 0.92);
backdrop-filter: blur(12px);
border-bottom: 2px solid;
border-image: linear-gradient(90deg, #00E5FF, #FFD700, #00E5FF, #00FFFF) 1;
box-shadow: 0 4px 25px rgba(0, 229, 255, 0.25), 0 2px 15px rgba(255, 215, 0, 0.2);
}
.nav-container {
max-width: 1380px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
}
.brand-badge {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
color: #fff;
}
.brand-logo-mark {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--neon-yellow);
box-shadow: var(--neon-yellow-glow);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: #000;
}
.gear-half { color: var(--neon-yellow); }
.circuit-half { color: var(--neon-cyan); margin-left: -4px; }
.brand-title {
font-size: 1.25rem;
font-weight: 900;
color: #FFFFFF;
letter-spacing: 0.1em;
}
.brand-tagline {
font-size: 0.65rem;
letter-spacing: 0.18em;
color: var(--neon-cyan);
display: block;
}
.nav-links {
display: flex;
align-items: center;
gap: 24px;
}
.nav-item {
color: var(--text-main);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.05em;
transition: all 0.2s ease;
background: transparent;
border: none;
cursor: pointer;
font-family: var(--font-heading);
}
.nav-item:hover, .nav-item.active {
color: var(--neon-cyan);
text-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
}
/* Dropdown */
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: #080E1A;
border: 1px solid var(--neon-cyan);
box-shadow: var(--neon-cyan-glow);
border-radius: 6px;
min-width: 250px;
display: none;
padding: 10px 0;
z-index: 100;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
color: var(--text-main);
text-decoration: none;
font-size: 0.85rem;
transition: background 0.2s ease;
}
.dropdown-menu a:hover {
background: rgba(0, 229, 255, 0.15);
color: var(--neon-cyan);
}
.dot-neon-cyan {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--neon-cyan);
box-shadow: 0 0 6px var(--neon-cyan);
}
.dot-neon-yellow {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--neon-yellow);
box-shadow: 0 0 6px var(--neon-yellow);
}
/* Controls & Avatar */
.nav-controls {
display: flex;
align-items: center;
gap: 16px;
}
.cyber-btn-icon {
background: rgba(0, 229, 255, 0.1);
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
transition: 0.2s ease;
}
.avatar-auth-trigger {
display: flex;
align-items: center;
gap: 10px;
background: transparent;
border: none;
cursor: pointer;
}
.avatar-ring {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--neon-cyan);
box-shadow: var(--neon-cyan-glow);
display: flex;
align-items: center;
justify-content: center;
background: #000;
color: var(--neon-cyan);
font-weight: 700;
font-family: var(--font-heading);
}
.avatar-online {
border-color: var(--neon-yellow);
box-shadow: var(--neon-yellow-glow);
color: var(--neon-yellow);
}
.auth-label {
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--neon-cyan);
}
.user-pill {
display: flex;
align-items: center;
gap: 10px;
}
.pill-badge {
font-size: 0.7rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
font-family: var(--font-heading);
}
.badge-admin {
background: rgba(255, 215, 0, 0.2);
color: var(--neon-yellow);
border: 1px solid var(--neon-yellow);
}
.badge-client {
background: rgba(0, 229, 255, 0.2);
color: var(--neon-cyan);
border: 1px solid var(--neon-cyan);
}
.logout-link {
color: #ff4757;
text-decoration: none;
font-weight: bold;
font-size: 1.1rem;
margin-left: 6px;
}
/* ========================================================
HYPERSPACE HERO BANNER
======================================================== */
.hyperspace-hero {
position: relative;
height: 82vh;
min-height: 580px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #000;
border-bottom: 2px solid rgba(0, 229, 255, 0.3);
}
#hyperspaceCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-overlay {
position: relative;
z-index: 2;
text-align: center;
pointer-events: none;
width: 100%;
}
.hero-content {
pointer-events: auto;
}
.cyber-status-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0, 229, 255, 0.1);
border: 1px solid var(--neon-cyan);
padding: 6px 14px;
border-radius: 20px;
font-size: 0.8rem;
font-family: var(--font-heading);
color: var(--neon-cyan);
margin-bottom: 20px;
}
.status-blink {
width: 8px;
height: 8px;
background: var(--neon-cyan);
border-radius: 50%;
animation: pulseGlow 1.2s infinite ease-in-out;
}
@keyframes pulseGlow {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.8); }
}
.hero-title {
font-size: 3.4rem;
font-weight: 900;
line-height: 1.15;
margin-bottom: 20px;
color: #FFF;
}
.hero-subtitle {
max-width: 780px;
margin: 0 auto 36px;
font-size: 1.15rem;
color: var(--text-muted);
}
.hero-actions {
display: flex;
gap: 18px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 30px;
}
.warp-control-panel {
display: inline-flex;
align-items: center;
gap: 14px;
background: rgba(3, 5, 9, 0.85);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 8px 18px;
border-radius: 30px;
font-family: var(--font-heading);
font-size: 0.8rem;
}
.warp-control-panel input[type="range"] {
accent-color: var(--neon-cyan);
cursor: pointer;
}
/* Cyber Buttons */
.cyber-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 26px;
border-radius: 4px;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid transparent;
}
.cyber-btn-cyan {
background: rgba(0, 229, 255, 0.15);
border-color: var(--neon-cyan);
color: var(--neon-cyan);
box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}
.cyber-btn-cyan:hover {
background: var(--neon-cyan);
color: #000;
box-shadow: var(--neon-cyan-glow);
}
.cyber-btn-yellow {
background: rgba(255, 215, 0, 0.15);
border-color: var(--neon-yellow);
color: var(--neon-yellow);
box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}
.cyber-btn-yellow:hover {
background: var(--neon-yellow);
color: #000;
box-shadow: var(--neon-yellow-glow);
}
.cyber-btn-warp {
background: linear-gradient(135deg, rgba(0, 229, 255, 0.3), rgba(255, 215, 0, 0.3));
border-color: #FFF;
color: #FFF;
}
.cyber-btn-warp:hover {
box-shadow: 0 0 25px #FFF;
transform: scale(1.05);
}
/* ========================================================
FEATURE MASONRY GRID (OPTION 2)
======================================================== */
.section-header {
margin-bottom: 48px;
}
.sub-header-tag {
font-family: var(--font-heading);
font-size: 0.8rem;
letter-spacing: 0.2em;
color: var(--neon-cyan);
margin-bottom: 8px;
}
.section-title {
font-size: 2.2rem;
color: #FFF;
margin-bottom: 12px;
}
.section-desc {
color: var(--text-muted);
font-size: 1.05rem;
max-width: 650px;
}
.masonry-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.feature-card {
background: var(--bg-card);
border-radius: 8px;
padding: 28px;
position: relative;
border: 1px solid var(--border-color);
backdrop-filter: blur(8px);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.feature-card:hover {
transform: translateY(-5px);
background: var(--bg-card-hover);
}
.border-cyan {
border-color: rgba(0, 229, 255, 0.3);
}
.border-cyan:hover {
border-color: var(--neon-cyan);
box-shadow: var(--neon-cyan-glow);
}
.border-yellow {
border-color: rgba(255, 215, 0, 0.3);
}
.border-yellow:hover {
border-color: var(--neon-yellow);
box-shadow: var(--neon-yellow-glow);
}
.card-icon-glass {
font-size: 2.4rem;
margin-bottom: 16px;
filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.4));
}
.card-badge {
position: absolute;
top: 24px;
right: 24px;
font-size: 0.68rem;
font-family: var(--font-heading);
padding: 4px 10px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--text-muted);
}
.feature-card h3 {
font-size: 1.35rem;
color: #FFF;
margin-bottom: 12px;
}
.feature-card p {
color: var(--text-muted);
font-size: 0.95rem;
margin-bottom: 20px;
}
.spec-list {
list-style: none;
margin-bottom: 20px;
}
.spec-list li {
font-size: 0.85rem;
color: #A0AEC0;
margin-bottom: 6px;
position: relative;
padding-left: 16px;
}
.spec-list li::before {
content: "▹";
position: absolute;
left: 0;
color: var(--neon-cyan);
}
.card-link {
color: var(--neon-cyan);
text-decoration: none;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
align-self: flex-start;
}
.card-link:hover {
text-decoration: underline;
}
.stat-box {
background: rgba(0, 0, 0, 0.4);
padding: 12px;
border-radius: 6px;
margin-bottom: 20px;
border-left: 3px solid var(--neon-yellow);
}
.stat-number {
display: block;
font-size: 1.5rem;
font-family: var(--font-heading);
font-weight: 700;
}
.stat-label {
font-size: 0.75rem;
color: var(--text-muted);
}
.cyber-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.cyber-tags span {
font-size: 0.75rem;
background: rgba(0, 229, 255, 0.1);
color: var(--neon-cyan);
padding: 3px 8px;
border-radius: 3px;
border: 1px solid rgba(0, 229, 255, 0.2);
}
/* ========================================================
INTERACTIVE QUOTE CALCULATOR
======================================================== */
.calculator-layout {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 36px;
background: rgba(8, 14, 26, 0.8);
border: 1px solid rgba(255, 215, 0, 0.3);
border-radius: 12px;
padding: 36px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.slider-group {
margin-bottom: 26px;
}
.slider-header {
display: flex;
justify-content: space-between;
font-family: var(--font-heading);
font-size: 0.95rem;
margin-bottom: 10px;
}
.cyber-slider {
width: 100%;
accent-color: var(--neon-cyan);
height: 6px;
background: #1A2234;
border-radius: 3px;
outline: none;
}
.toggle-group {
margin-bottom: 24px;
}
.toggle-group > label {
display: block;
font-family: var(--font-heading);
font-size: 0.9rem;
margin-bottom: 10px;
}
.radio-pill-group {
display: flex;
gap: 12px;
}
.radio-pill {
flex: 1;
cursor: pointer;
}
.radio-pill input {
display: none;
}
.radio-pill span {
display: block;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
font-size: 0.85rem;
text-align: center;
transition: 0.2s ease;
}
.radio-pill input:checked + span {
border-color: var(--neon-cyan);
background: rgba(0, 229, 255, 0.15);
color: var(--neon-cyan);
box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}
.calc-results-card {
background: #020306;
border: 1px solid var(--neon-yellow);
box-shadow: var(--neon-yellow-glow);
border-radius: 8px;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.result-header {
font-family: var(--font-heading);
font-size: 0.85rem;
color: var(--text-muted);
letter-spacing: 0.1em;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
margin-bottom: 16px;
}
.result-figures {
margin-bottom: 24px;
}
.figure-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 12px;
}
.figure-row strong {
font-size: 1.6rem;
font-family: var(--font-heading);
}
.cyber-input, .cyber-select, .cyber-textarea {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(0, 229, 255, 0.3);
color: #FFF;
padding: 12px 16px;
border-radius: 4px;
font-family: var(--font-body);
font-size: 0.95rem;
margin-bottom: 14px;
}
.cyber-input:focus, .cyber-select:focus, .cyber-textarea:focus {
border-color: var(--neon-cyan);
outline: none;
box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}
.cyber-alert {
padding: 12px;
border-radius: 4px;
font-size: 0.85rem;
margin-top: 14px;
}
.cyber-alert.success {
background: rgba(0, 255, 136, 0.15);
border: 1px solid #00FF88;
color: #00FF88;
}
/* ========================================================
SERVICE PAGES HERO & DETAIL
======================================================== */
.service-hero {
padding: 90px 24px 70px;
background: linear-gradient(180deg, #030509 0%, #080E1A 100%);
border-bottom: 2px solid;
text-align: center;
}
.border-glow-cyan { border-bottom-color: var(--neon-cyan); box-shadow: 0 4px 30px rgba(0, 229, 255, 0.2); }
.border-glow-yellow { border-bottom-color: var(--neon-yellow); box-shadow: 0 4px 30px rgba(255, 215, 0, 0.2); }
.service-hero-tag {
font-family: var(--font-heading);
font-size: 0.85rem;
letter-spacing: 0.2em;
color: var(--neon-yellow);
margin-bottom: 12px;
}
.service-title {
font-size: 2.8rem;
color: #FFF;
margin-bottom: 18px;
}
.service-lead {
max-width: 800px;
margin: 0 auto 30px;
font-size: 1.15rem;
color: var(--text-muted);
}
.hero-cta-bar {
display: flex;
gap: 16px;
justify-content: center;
}
.service-detail-grid {
display: grid;
grid-template-columns: 1.4fr 0.6fr;
gap: 40px;
}
.detail-header {
font-size: 1.5rem;
color: #FFF;
margin-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}
.cyber-checklist {
list-style: none;
}
.cyber-checklist li {
margin-bottom: 16px;
font-size: 1rem;
color: var(--text-main);
padding-left: 28px;
position: relative;
}
.cyber-checklist li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--neon-cyan);
font-weight: bold;
}
.methodology-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.step-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 6px;
}
.step-num {
font-family: var(--font-heading);
font-size: 1.4rem;
color: var(--neon-yellow);
display: block;
margin-bottom: 8px;
}
.step-card h4 {
font-size: 1rem;
margin-bottom: 8px;
color: #FFF;
}
.step-card p {
font-size: 0.85rem;
color: var(--text-muted);
}
.specs-card {
background: #020306;
border-radius: 8px;
border: 1px solid var(--border-color);
padding: 24px;
position: sticky;
top: 90px;
}
.specs-header {
font-family: var(--font-heading);
font-size: 0.95rem;
color: var(--neon-yellow);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 12px;
margin-bottom: 16px;
}
.spec-block {
margin-bottom: 14px;
}
.spec-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
}
.spec-val {
font-family: var(--font-heading);
font-size: 0.95rem;
color: #FFF;
}
.specs-action {
margin-top: 24px;
}
/* ========================================================
TESTIMONIALS & CONTACT
======================================================== */
.testimonials-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.testimonial-card {
background: var(--bg-card);
border: 1px solid rgba(0, 229, 255, 0.2);
border-left: 4px solid var(--neon-cyan);
padding: 28px;
border-radius: 6px;
}
.testimonial-card p {
font-style: italic;
color: var(--text-main);
margin-bottom: 18px;
}
.author-name {
font-family: var(--font-heading);
font-weight: 700;
color: var(--neon-yellow);
display: block;
}
.author-role {
font-size: 0.8rem;
color: var(--text-muted);
}
.contact-box-wrapper {
background: rgba(8, 14, 26, 0.85);
border: 1px solid rgba(0, 229, 255, 0.3);
border-radius: 12px;
padding: 48px;
max-width: 900px;
margin: 0 auto;
}
.form-row {
display: flex;
gap: 16px;
}
.form-col {
flex: 1;
}
.form-col label, .form-group label {
display: block;
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 6px;
font-family: var(--font-heading);
}
/* ========================================================
ADMIN & CLIENT DASHBOARDS
======================================================== */
.admin-header-strip {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 36px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 20px;
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 36px;
}
.kpi-card {
background: var(--bg-card);
padding: 24px;
border-radius: 8px;
border: 1px solid var(--border-color);
}
.kpi-title {
font-size: 0.75rem;
color: var(--text-muted);
font-family: var(--font-heading);
display: block;
margin-bottom: 8px;
}
.kpi-val {
font-size: 2.2rem;
font-family: var(--font-heading);
font-weight: 900;
display: block;
}
.kpi-sub {
font-size: 0.8rem;
color: var(--text-muted);
}
.admin-grid-sections {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.admin-box {
background: var(--bg-card);
padding: 24px;
border-radius: 8px;
border: 1px solid var(--border-color);
}
.admin-box h3 {
margin-bottom: 18px;
font-size: 1.15rem;
color: #FFF;
}
.cyber-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.cyber-table th {
text-align: left;
padding: 10px;
color: var(--text-muted);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-family: var(--font-heading);
}
.cyber-table td {
padding: 12px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.log-tag {
background: rgba(0, 229, 255, 0.1);
color: var(--neon-cyan);
padding: 2px 6px;
border-radius: 3px;
font-size: 0.75rem;
}
/* ========================================================
SEO COMMAND CENTER STYLING
======================================================== */
.seo-layout-grid {
display: grid;
grid-template-columns: 320px 1fr;
gap: 32px;
}
.seo-page-list-card {
background: var(--bg-card);
border-radius: 8px;
padding: 24px;
border: 1px solid rgba(0, 229, 255, 0.3);
height: fit-content;
}
.seo-page-links {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.seo-nav-pill {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
text-decoration: none;
color: var(--text-main);
transition: 0.2s;
}
.seo-nav-pill:hover, .seo-nav-pill.active-pill {
background: rgba(0, 229, 255, 0.12);
border-color: var(--neon-cyan);
color: #FFF;
}
.dot-status { width: 8px; height: 8px; border-radius: 50%; }
.dot-green { background: #00FF88; box-shadow: 0 0 6px #00FF88; }
.dot-red { background: #FF4757; box-shadow: 0 0 6px #FF4757; }
.pill-names strong { display: block; font-size: 0.85rem; font-family: var(--font-heading); }
.pill-names small { font-size: 0.72rem; color: var(--text-muted); }
/* Live Google SERP Simulation */
.serp-preview-card {
background: #020306;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
padding: 20px;
margin-bottom: 28px;
font-family: Arial, sans-serif;
}
.serp-label {
font-family: var(--font-heading);
font-size: 0.75rem;
color: var(--neon-yellow);
letter-spacing: 0.1em;
margin-bottom: 10px;
}
.serp-url { color: #BDC1C6; font-size: 13px; margin-bottom: 4px; }
.serp-title { color: #8AB4F8; font-size: 19px; font-weight: 400; line-height: 1.3; cursor: pointer; text-decoration: none; }
.serp-title:hover { text-decoration: underline; }
.serp-desc { color: #BDC1C6; font-size: 14px; line-height: 1.5; margin-top: 6px; }
.label-with-counter { display: flex; justify-content: space-between; align-items: baseline; }
.char-count { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; }
.field-hint { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: -8px; margin-bottom: 14px; }
.checkbox-align { display: flex; align-items: center; }
.checkbox-container { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.88rem; }
.checkbox-container input { width: 18px; height: 18px; accent-color: var(--neon-cyan); }
.font-mono { font-family: 'Courier New', Courier, monospace; font-size: 0.85rem; }
/* ========================================================
MODAL DIALOG
======================================================== */
.cyber-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(3, 5, 9, 0.88) !important;
backdrop-filter: blur(12px) !important;
z-index: 999999 !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
}
.cyber-modal.open {
display: flex !important;
}
.modal-card {
background: #080E1A;
border: 1px solid var(--neon-cyan);
box-shadow: var(--neon-cyan-glow);
border-radius: 10px;
width: 90%;
max-width: 480px;
padding: 36px;
position: relative;
}
.modal-close {
position: absolute;
top: 18px;
right: 18px;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 1.4rem;
cursor: pointer;
}
.modal-header {
text-align: center;
margin-bottom: 24px;
}
.neon-shield {
font-size: 2.6rem;
margin-bottom: 10px;
filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.7));
}
.auth-role-tabs {
display: flex;
margin-bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
}
.tab-btn {
flex: 1;
padding: 10px;
background: transparent;
border: none;
color: var(--text-muted);
font-family: var(--font-heading);
font-size: 0.85rem;
cursor: pointer;
transition: 0.2s;
}
.tab-btn.active {
background: var(--neon-cyan);
color: #000;
font-weight: 700;
}
.quick-demo-fill {
display: flex;
gap: 10px;
margin-bottom: 18px;
}
.demo-btn {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px dashed rgba(255, 255, 255, 0.2);
color: var(--text-muted);
padding: 6px;
border-radius: 4px;
font-size: 0.75rem;
cursor: pointer;
}
.demo-btn:hover {
color: #FFF;
border-color: #FFF;
}
/* ========================================================
FOOTER
======================================================== */
.cyber-footer {
background: #020306;
border-top: 1px solid rgba(0, 229, 255, 0.2);
padding: 60px 24px 30px;
font-size: 0.9rem;
}
.footer-grid {
max-width: 1280px;
margin: 0 auto 40px;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: 36px;
}
.hex-codes-showcase {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.chip-hex {
font-size: 0.75rem;
font-family: var(--font-heading);
padding: 4px 8px;
border-radius: 4px;
border: 1px solid;
}
.chip-blue { border-color: var(--neon-cyan); color: var(--neon-cyan); background: rgba(0, 229, 255, 0.1); }
.chip-yellow { border-color: var(--neon-yellow); color: var(--neon-yellow); background: rgba(255, 215, 0, 0.1); }
.chip-bg { border-color: #333; color: #aaa; background: #000; }
.footer-col h4 {
color: #FFF;
font-size: 0.95rem;
margin-bottom: 16px;
border-left: 2px solid var(--neon-yellow);
padding-left: 8px;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 8px;
}
.footer-col ul li a {
color: var(--text-muted);
text-decoration: none;
transition: 0.2s;
}
.footer-col ul li a:hover {
color: var(--neon-cyan);
}
.footer-bottom {
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 24px;
color: var(--text-muted);
font-size: 0.8rem;
}
.w-full { width: 100%; }
/* Responsive adjustments */
@media (max-width: 992px) {
.masonry-grid, .calculator-layout, .service-detail-grid, .admin-grid-sections, .footer-grid, .kpi-grid, .seo-layout-grid {
grid-template-columns: 1fr;
}
.hero-title { font-size: 2.2rem; }
.methodology-steps { grid-template-columns: 1fr; }
.nav-links { display: none; }
}
/* ========================================================
GLOBAL FOOTER CTA BANNER WITH NEON DOTTED WORLD MAP
======================================================== */
/* ========================================================
GLOBAL FOOTER CTA BANNER WITH NEON DOTTED WORLD MAP
======================================================== */
.global-cta-banner {
position: relative;
overflow: hidden;
background: radial-gradient(circle at 50% 50%, rgba(20, 14, 34, 0.96) 0%, rgba(10, 7, 20, 0.98) 60%, #030509 100%);
border-top: 1px solid rgba(0, 229, 255, 0.3);
border-bottom: 1px solid rgba(255, 215, 0, 0.2);
padding: 90px 24px 80px;
text-align: center;
}
/* Framed World Map: Sized to be 100% visible without cropping */
.world-map-bg-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.85;
z-index: 1;
overflow: hidden;
}
.world-map-svg-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: drop-shadow(0 0 25px rgba(0, 229, 255, 0.35));
}
.cta-content-box {
position: relative;
z-index: 2;
max-width: 820px;
margin: 0 auto;
}
.cta-bold-headline {
font-size: 3.4rem;
font-weight: 900;
font-family: var(--font-heading);
color: #FFFFFF;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 20px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9), 0 0 35px rgba(0, 229, 255, 0.35);
}
.cta-statement {
font-size: 1.18rem;
color: #E2E8F0;
line-height: 1.65;
margin: 0 auto 34px;
font-weight: 400;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
max-width: 720px;
}
.cta-btn-wrapper {
margin-bottom: 24px;
}
/* High-Energy Pulsing Neon Pill Button (Electric Cyan & Gold Aura) */
.cta-neon-pill-btn {
background: linear-gradient(135deg, #00E5FF 0%, #0099FF 100%);
color: #030509;
font-family: var(--font-heading);
font-weight: 900;
font-size: 0.98rem;
letter-spacing: 0.1em;
padding: 16px 42px;
border-radius: 40px;
border: 2px solid #FFFFFF;
box-shadow: 0 0 25px rgba(0, 229, 255, 0.7), 0 0 50px rgba(0, 229, 255, 0.35);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Continuous Luminous Pulse Animation */
.pulse-glow-btn {
animation: ctaPulseAura 2.2s infinite ease-in-out;
}
@keyframes ctaPulseAura {
0% {
box-shadow: 0 0 20px rgba(0, 229, 255, 0.6), 0 0 40px rgba(0, 229, 255, 0.25);
transform: scale(1);
}
50% {
box-shadow: 0 0 35px rgba(0, 229, 255, 0.95), 0 0 70px rgba(0, 229, 255, 0.5), 0 0 15px #FFFFFF;
transform: scale(1.038);
border-color: #FFD700;
}
100% {
box-shadow: 0 0 20px rgba(0, 229, 255, 0.6), 0 0 40px rgba(0, 229, 255, 0.25);
transform: scale(1);
}
}
.cta-neon-pill-btn:hover {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
color: #030509;
border-color: #FFFFFF;
box-shadow: 0 0 40px rgba(255, 215, 0, 0.95), 0 0 80px rgba(255, 215, 0, 0.5);
transform: translateY(-3px) scale(1.05);
animation: none;
}
.cta-sub-perks {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
font-size: 0.85rem;
color: #94A3B8;
margin-top: 18px;
font-family: var(--font-heading);
}
.cta-sub-perks span {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--neon-cyan);
}
@media (max-width: 768px) {
.cta-bold-headline { font-size: 2.3rem; }
.cta-statement { font-size: 1.02rem; }
.global-cta-banner { padding: 65px 20px 55px; }
.world-map-svg-img { max-height: 260px; }
.cta-sub-perks { flex-direction: column; gap: 8px; }
.cta-neon-pill-btn { padding: 14px 28px; font-size: 0.88rem; }
}
/* ========================================================
HOLOGRAPHIC WHATSAPP COMM-LINK STYLES
======================================================== */
.holo-commlink-container {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 1500;
font-family: var(--font-body);
}
.holo-beacon-trigger {
background: rgba(3, 5, 9, 0.9);
border: 1px solid rgba(0, 229, 255, 0.4);
box-shadow: 0 0 20px rgba(0, 229, 255, 0.35), 0 10px 30px rgba(0, 0, 0, 0.8);
border-radius: 40px;
padding: 8px 18px 8px 8px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
position: relative;
backdrop-filter: blur(10px);
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.holo-beacon-trigger:hover {
border-color: var(--neon-cyan);
box-shadow: var(--neon-cyan-glow), 0 0 35px rgba(0, 229, 255, 0.5);
transform: translateY(-4px) scale(1.03);
}
.holo-projector-emitter {
position: relative;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.holo-core-orb {
width: 44px;
height: 44px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #00FF88, #057a44);
box-shadow: 0 0 16px rgba(0, 255, 136, 0.8);
display: flex;
align-items: center;
justify-content: center;
color: #030509;
position: relative;
z-index: 2;
}
.holo-wa-icon {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.holo-orbit-ring {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.ring-1 {
width: 58px;
height: 58px;
border: 1px dashed rgba(0, 229, 255, 0.6);
animation: rotateHolo 6s linear infinite;
}
.ring-2 {
width: 68px;
height: 68px;
border: 1px solid rgba(255, 215, 0, 0.4);
border-left-color: transparent;
border-right-color: transparent;
animation: rotateHoloRev 4s linear infinite;
}
@keyframes rotateHolo {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes rotateHoloRev {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
.holo-beacon-label {
text-align: left;
display: flex;
flex-direction: column;
}
.label-status {
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 800;
color: var(--neon-cyan);
letter-spacing: 0.08em;
}
.label-sub {
font-size: 0.7rem;
color: var(--neon-yellow);
letter-spacing: 0.05em;
font-family: var(--font-heading);
}
.holo-hud-window {
position: absolute;
bottom: 74px;
right: 0;
width: 360px;
max-width: 90vw;
background: rgba(8, 14, 26, 0.94);
border: 1px solid var(--neon-cyan);
box-shadow: 0 0 30px rgba(0, 229, 255, 0.4), 0 20px 40px rgba(0, 0, 0, 0.9);
border-radius: 12px;
overflow: hidden;
backdrop-filter: blur(16px);
display: none;
flex-direction: column;
animation: holoPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background-image:
repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.03) 0px, rgba(0, 229, 255, 0.03) 1px, transparent 1px, transparent 3px);
}
.holo-hud-window.is-open {
display: flex;
}
@keyframes holoPop {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.holo-hud-header {
background: rgba(3, 5, 9, 0.95);
padding: 12px 16px;
border-bottom: 1px solid rgba(0, 229, 255, 0.3);
display: flex;
align-items: center;
justify-content: space-between;
}
.hud-status-strip {
display: flex;
align-items: center;
gap: 8px;
}
.hud-ping-dot {
width: 8px;
height: 8px;
background: #00FF88;
border-radius: 50%;
box-shadow: 0 0 8px #00FF88;
animation: pulseGlow 1.4s infinite;
}
.hud-telemetry {
font-family: var(--font-heading);
font-size: 0.68rem;
color: var(--neon-cyan);
letter-spacing: 0.08em;
}
.holo-hud-close {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 1.1rem;
cursor: pointer;
transition: 0.2s;
}
.holo-hud-close:hover {
color: #ff4757;
}
.holo-hud-body {
padding: 18px;
}
.hud-operator-card {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 14px;
}
.operator-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--neon-yellow);
background: #000;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}
.operator-info strong {
display: block;
font-family: var(--font-heading);
font-size: 0.88rem;
color: #FFF;
}
.operator-info small {
font-size: 0.72rem;
color: var(--text-muted);
}
.hud-prompt-text {
font-size: 0.82rem;
color: #CBD5E1;
margin-bottom: 14px;
line-height: 1.4;
}
.hud-quick-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.hud-btn {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(0, 229, 255, 0.25);
padding: 10px 14px;
border-radius: 6px;
text-decoration: none;
color: #FFF;
transition: all 0.2s ease;
}
.hud-btn:hover {
background: rgba(0, 229, 255, 0.15);
border-color: var(--neon-cyan);
box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
transform: translateX(4px);
}
.hud-btn-emergency {
border-color: rgba(255, 215, 0, 0.4);
}
.hud-btn-emergency:hover {
background: rgba(255, 215, 0, 0.15);
border-color: var(--neon-yellow);
box-shadow: 0 0 14px rgba(255, 215, 0, 0.4);
}
.hud-btn-icon {
font-size: 1.3rem;
}
.hud-btn-text strong {
display: block;
font-family: var(--font-heading);
font-size: 0.82rem;
}
.hud-btn-text small {
font-size: 0.7rem;
color: var(--text-muted);
}
.hud-direct-input-wrap {
display: flex;
gap: 8px;
}
.hud-input {
margin-bottom: 0 !important;
font-size: 0.8rem !important;
padding: 8px 12px !important;
}
.hud-send-btn {
padding: 8px 14px !important;
font-size: 0.78rem !important;
white-space: nowrap;
}
@media (max-width: 480px) {
.holo-commlink-container {
bottom: 16px;
right: 16px;
}
.holo-hud-window {
width: 320px;
bottom: 68px;
}
}
/* ========================================================
FULL-PAGE HORIZONTAL SCROLL: INTEL DISPATCHES (NEWS)
Inspired by edge-to-edge interactive horizontal showcase
======================================================== */
.intel-scroll-section {
padding: 90px 0 80px;
background: linear-gradient(180deg, #030509 0%, #060B14 50%, #030509 100%);
position: relative;
overflow: hidden;
border-top: 1px solid rgba(0, 229, 255, 0.2);
}
.intel-header-wrap {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 36px;
flex-wrap: wrap;
gap: 20px;
}
.intel-header-meta {
max-width: 650px;
}
.intel-nav-controls {
display: flex;
align-items: center;
gap: 12px;
}
.intel-nav-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(3, 5, 9, 0.8);
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}
.intel-nav-btn:hover {
background: var(--neon-cyan);
color: #030509;
box-shadow: var(--neon-cyan-glow);
transform: scale(1.08);
}
.intel-track-indicator {
font-family: var(--font-heading);
font-size: 0.85rem;
color: var(--neon-yellow);
letter-spacing: 0.1em;
margin-left: 8px;
font-weight: 700;
}
/* Full-width carousel viewport with visible edge cards */
.intel-carousel-viewport {
width: 100%;
overflow-x: auto;
padding: 20px 24px 40px;
cursor: grab;
user-select: none;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.intel-carousel-viewport:active {
cursor: grabbing;
}
.intel-carousel-viewport::-webkit-scrollbar {
display: none;
height: 0;
width: 0;
}
.intel-carousel-viewport::-webkit-scrollbar-track {
background: rgba(3, 5, 9, 0.8);
}
.intel-carousel-viewport::-webkit-scrollbar-thumb {
background: var(--neon-cyan);
border-radius: 3px;
box-shadow: 0 0 8px var(--neon-cyan);
}
.intel-carousel-track {
display: flex;
gap: 28px;
width: max-content;
padding-right: 40px;
}
/* Intel Dispatch Cards */
.intel-card {
width: 420px;
max-width: 85vw;
background: rgba(8, 14, 26, 0.85);
border-radius: 12px;
padding: 26px;
border: 1px solid var(--border-color);
backdrop-filter: blur(12px);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
flex-shrink: 0;
}
.intel-card:hover {
transform: translateY(-8px) scale(1.01);
}
.intel-card.border-cyan:hover {
border-color: var(--neon-cyan);
box-shadow: 0 10px 30px rgba(0, 229, 255, 0.3);
}
.intel-card.border-yellow:hover {
border-color: var(--neon-yellow);
box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}
.intel-card-glitch-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-size: 0.72rem;
letter-spacing: 0.12em;
color: var(--neon-cyan);
background: rgba(0, 229, 255, 0.1);
border: 1px solid rgba(0, 229, 255, 0.25);
padding: 4px 10px;
border-radius: 4px;
margin-bottom: 12px;
align-self: flex-start;
}
.intel-card-glitch-badge.badge-warning {
color: var(--neon-yellow);
background: rgba(255, 215, 0, 0.1);
border-color: rgba(255, 215, 0, 0.25);
}
.pulse-indicator {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--neon-cyan);
box-shadow: 0 0 6px var(--neon-cyan);
animation: pulseGlow 1.2s infinite;
}
.pulse-yellow {
background: var(--neon-yellow);
box-shadow: 0 0 6px var(--neon-yellow);
}
.intel-card-date {
font-size: 0.75rem;
color: var(--text-muted);
font-family: var(--font-heading);
margin-bottom: 16px;
}
/* Card Visual Screen Window */
.intel-card-visual {
height: 140px;
background: radial-gradient(circle at center, rgba(0, 229, 255, 0.15) 0%, rgba(3, 5, 9, 0.8) 100%);
border: 1px solid rgba(0, 229, 255, 0.2);
border-radius: 8px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.intel-card-visual.visual-yellow {
background: radial-gradient(circle at center, rgba(255, 215, 0, 0.15) 0%, rgba(3, 5, 9, 0.8) 100%);
border-color: rgba(255, 215, 0, 0.2);
}
.cyber-scanline-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0px, rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 3px);
pointer-events: none;
}
.visual-inner {
text-align: center;
position: relative;
z-index: 2;
}
.visual-symbol {
font-size: 2.8rem;
display: block;
filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.6));
margin-bottom: 6px;
}
.visual-tag {
font-family: var(--font-heading);
font-size: 0.7rem;
letter-spacing: 0.15em;
color: #FFF;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.6);
padding: 3px 8px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.intel-category {
font-family: var(--font-heading);
font-size: 0.75rem;
letter-spacing: 0.1em;
font-weight: 700;
display: block;
margin-bottom: 8px;
}
.cat-cyan { color: var(--neon-cyan); }
.cat-yellow { color: var(--neon-yellow); }
.intel-title {
font-size: 1.25rem;
color: #FFFFFF;
line-height: 1.35;
margin-bottom: 12px;
}
.intel-excerpt {
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.5;
margin-bottom: 22px;
}
.intel-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 14px;
}
.read-time {
font-family: var(--font-heading);
font-size: 0.7rem;
color: var(--text-muted);
}
/* News & Dispatches Admin Rows */
.news-list-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
transition: 0.2s;
margin-bottom: 8px;
}
.news-list-row:hover, .news-list-row.active-news-row {
background: rgba(0, 229, 255, 0.12);
border-color: var(--neon-cyan);
}
.news-row-meta {
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
}
.news-row-meta strong {
display: block;
font-size: 0.82rem;
font-family: var(--font-heading);
color: #FFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.news-row-meta small {
font-size: 0.7rem;
color: var(--text-muted);
}
.news-row-actions {
display: flex;
gap: 6px;
margin-left: 10px;
}
.mini-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 4px;
text-decoration: none;
font-size: 0.8rem;
border: 1px solid;
transition: 0.2s;
}
.edit-btn {
border-color: var(--neon-cyan);
color: var(--neon-cyan);
background: rgba(0, 229, 255, 0.1);
}
.edit-btn:hover {
background: var(--neon-cyan);
color: #000;
}
.del-btn {
border-color: #ff4757;
color: #ff4757;
background: rgba(255, 71, 87, 0.1);
}
.del-btn:hover {
background: #ff4757;
color: #FFF;
}
.file-input {
padding: 8px 12px !important;
cursor: pointer;
}
/* ========================================================
ADMIN CODE & FILE EDITOR WORKSPACE
======================================================== */
.editor-workspace-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 24px;
height: 720px;
margin-bottom: 40px;
}
.editor-file-explorer {
background: #080E1A;
border-radius: 8px;
border: 1px solid rgba(0, 229, 255, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
}
.explorer-header {
background: rgba(3, 5, 9, 0.95);
padding: 14px 18px;
border-bottom: 1px solid rgba(0, 229, 255, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
}
.explorer-header h3 {
font-size: 0.85rem;
color: #FFF;
margin: 0;
}
.file-count {
font-size: 0.7rem;
color: var(--neon-cyan);
font-family: var(--font-heading);
}
.file-tree-scroll {
overflow-y: auto;
padding: 12px;
flex: 1;
}
.explorer-tree-list {
list-style: none;
padding-left: 12px;
}
.explorer-tree-list:first-child {
padding-left: 0;
}
.folder-node {
margin-bottom: 6px;
}
.folder-name {
font-size: 0.78rem;
font-family: var(--font-heading);
color: var(--neon-yellow);
display: block;
margin-bottom: 4px;
}
.file-node {
margin-bottom: 3px;
}
.file-node a {
display: block;
padding: 5px 8px;
border-radius: 4px;
font-size: 0.76rem;
color: #CBD5E1;
text-decoration: none;
transition: 0.15s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-node a:hover {
background: rgba(0, 229, 255, 0.12);
color: var(--neon-cyan);
}
.file-node.active-file a {
background: rgba(0, 229, 255, 0.2);
border: 1px solid var(--neon-cyan);
color: #FFF;
font-weight: 700;
}
/* Editor Main Panel */
.editor-main-panel {
background: #020306;
border-radius: 8px;
border: 1px solid var(--neon-yellow);
box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
display: flex;
flex-direction: column;
overflow: hidden;
}
.editor-bar {
background: rgba(8, 14, 26, 0.95);
padding: 12px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.editor-file-info {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
}
.editor-file-info small {
color: var(--text-muted);
}
.editor-actions {
display: flex;
gap: 8px;
}
.editor-form {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
}
.code-area-container {
display: flex;
flex: 1;
background: #000205;
position: relative;
overflow: hidden;
}
.line-numbers {
width: 45px;
background: #040810;
color: #475569;
font-family: 'Courier New', Courier, monospace;
font-size: 0.82rem;
line-height: 1.5;
padding: 14px 6px 14px 0;
text-align: right;
user-select: none;
overflow: hidden;
border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.code-textarea {
flex: 1;
background: transparent;
color: #38BDF8;
border: none;
outline: none;
resize: none;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.84rem;
line-height: 1.5;
padding: 14px;
tab-size: 4;
overflow: auto;
white-space: pre;
}
.code-textarea:focus {
box-shadow: none;
}
.editor-bottom-bar {
background: #060A14;
padding: 12px 18px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.editor-tip {
font-size: 0.78rem;
color: var(--text-muted);
}
.editor-tip code {
background: rgba(255, 255, 255, 0.1);
padding: 2px 6px;
border-radius: 3px;
color: var(--neon-cyan);
}
@media (max-width: 992px) {
.editor-workspace-layout {
grid-template-columns: 1fr;
height: auto;
}
.editor-file-explorer {
height: 240px;
}
.code-area-container {
height: 480px;
}
}
/* ========================================================
GLOBAL SESSION & AUTH NOTIFICATION TOAST
======================================================== */
.cyber-global-toast {
position: relative;
z-index: 999;
padding: 12px 24px;
font-family: var(--font-heading);
font-size: 0.88rem;
letter-spacing: 0.05em;
animation: slideDownToast 0.3s ease;
}
@keyframes slideDownToast {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.toast-success {
background: rgba(0, 255, 136, 0.15);
border-bottom: 2px solid #00FF88;
color: #00FF88;
box-shadow: 0 4px 20px rgba(0, 255, 136, 0.25);
}
.toast-error {
background: rgba(255, 71, 87, 0.15);
border-bottom: 2px solid #FF4757;
color: #FF4757;
box-shadow: 0 4px 20px rgba(255, 71, 87, 0.25);
}
.toast-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.toast-icon {
font-size: 1.1rem;
}
.toast-text {
flex: 1;
}
.toast-close {
background: transparent;
border: none;
color: inherit;
font-size: 1.1rem;
cursor: pointer;
padding: 0 6px;
opacity: 0.8;
}
.toast-close:hover {
opacity: 1;
}
.cyber-btn-logout {
border-color: #ff4757 !important;
color: #ff4757 !important;
background: rgba(255, 71, 87, 0.12) !important;
box-shadow: 0 0 10px rgba(255, 71, 87, 0.2) !important;
}
.cyber-btn-logout:hover {
background: #ff4757 !important;
color: #FFFFFF !important;
box-shadow: 0 0 16px rgba(255, 71, 87, 0.6) !important;
}
/* ========================================================
CYBERPUNK SCI-FI PAGE TRANSITION OVERLAY (FIXED)
======================================================== */
.cyber-warp-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 999999;
pointer-events: none;
opacity: 0;
visibility: hidden;
background: radial-gradient(circle at center, rgba(3, 5, 9, 0.94) 0%, rgba(1, 2, 4, 0.98) 100%);
backdrop-filter: blur(10px);
transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.22s;
display: flex;
align-items: center;
justify-content: center;
}
.warp-laser-line {
position: absolute;
top: 0;
left: -120%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(0, 229, 255, 0.2) 50%,
rgba(0, 229, 255, 0.9) 80%,
#FFFFFF 94%,
rgba(255, 215, 0, 0.95) 98%,
transparent 100%
);
box-shadow: 0 0 45px var(--neon-cyan), 0 0 90px rgba(0, 229, 255, 0.7);
filter: brightness(1.4);
}
.warp-grid-matrix {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 229, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 229, 255, 0.08) 1px, transparent 1px);
background-size: 32px 32px;
opacity: 0.5;
}
.warp-telemetry-status {
display: none; /* Crucial: completely hidden until transition engages */
position: relative;
z-index: 2;
font-family: var(--font-heading);
font-size: 0.85rem;
letter-spacing: 0.22em;
color: var(--neon-cyan);
text-shadow: 0 0 12px var(--neon-cyan);
}
.cyber-warp-overlay.warp-active {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.cyber-warp-overlay.warp-active .warp-telemetry-status {
display: block;
animation: pulseGlow 1.2s infinite ease-in-out;
}
.cyber-warp-overlay.warp-active .warp-laser-line {
animation: warpSweepAcross 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes warpSweepAcross {
0% { left: -120%; transform: skewX(-20deg); }
100% { left: 130%; transform: skewX(-20deg); }
}
body.page-enter {
animation: cyberFadeIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cyberFadeIn {
0% { opacity: 0.2; transform: scale(0.994); filter: brightness(1.3) blur(4px); }
100% { opacity: 1; transform: none; filter: none; }
}
/* ========================================================
ENHANCED SERVICE HERO: THEMATIC HUD & RADAR MATRIX (HIGH CONTRAST)
======================================================== */
.service-hero {
position: relative;
padding: 110px 24px 85px;
text-align: center;
overflow: hidden;
background: #03060e !important;
border-bottom: 2px solid;
/* High-contrast Cyber Grid + Ambient Focal Glow */
background-image:
radial-gradient(circle at 50% 35%, rgba(0, 229, 255, 0.22) 0%, transparent 65%),
linear-gradient(rgba(0, 229, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 229, 255, 0.08) 1px, transparent 1px) !important;
background-size: 100% 100%, 42px 42px, 42px 42px !important;
}
/* Scanlines and Depth Grid */
.service-hero::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(3, 5, 9, 0.75) 0%, transparent 40%, rgba(3, 5, 9, 0.95) 100%),
repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0px, rgba(0, 0, 0, 0.35) 1px, transparent 1px, transparent 3px);
z-index: 1;
}
/* Bright Rotating Tactical Radar Beam */
.service-hero::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg at 50% 50%, rgba(0, 229, 255, 0.18) 0deg, transparent 55deg, transparent 360deg);
animation: radarSweep 12s linear infinite;
pointer-events: none;
z-index: 1;
}
@keyframes radarSweep {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.service-hero .container {
position: relative;
z-index: 2;
}
/* Gold Theme Hero Variant */
.service-hero.border-glow-yellow {
border-bottom-color: var(--neon-yellow) !important;
box-shadow: 0 4px 35px rgba(255, 215, 0, 0.25);
background-image:
radial-gradient(circle at 50% 35%, rgba(255, 215, 0, 0.22) 0%, transparent 65%),
linear-gradient(rgba(255, 215, 0, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 215, 0, 0.08) 1px, transparent 1px) !important;
}
.service-hero.border-glow-yellow::after {
background: conic-gradient(from 0deg at 50% 50%, rgba(255, 215, 0, 0.16) 0deg, transparent 55deg, transparent 360deg);
}
.service-hero.border-glow-cyan {
border-bottom-color: var(--neon-cyan) !important;
box-shadow: 0 4px 35px rgba(0, 229, 255, 0.25);
}
/* Framing Viewport Box */
.hero-inner {
position: relative;
max-width: 960px;
margin: 0 auto;
padding: 24px 32px;
}
/* Watermark Text: Supports BOTH Hyphens & Underscores in URL */
.hero-inner::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-heading);
font-size: clamp(2.4rem, 6.5vw, 4.8rem);
font-weight: 900;
letter-spacing: 0.18em;
white-space: nowrap;
pointer-events: none;
z-index: -1;
opacity: 0.12; /* Punchy high-contrast visibility */
}
/* Technical Support (Supports both technical-support and technical_support) */
body[data-page*="technical"] .hero-inner::before {
content: '24/7 NOC // TELEMETRY ACTIVE';
color: var(--neon-yellow);
}
body[data-page*="cyber"] .hero-inner::before {
content: 'DEFENSE MATRIX // SOC 24/7';
color: var(--neon-yellow);
}
body[data-page*="ai"] .hero-inner::before {
content: 'NEURAL CLUSTER // vLLM NODE';
color: var(--neon-cyan);
}
body[data-page*="cabling"] .hero-inner::before {
content: 'OPTICAL FIBER // 10G BACKBONE';
color: var(--neon-cyan);
}
body[data-page*="business"] .hero-inner::before {
content: 'HYBRID CLUSTER // AZURE & SAN';
color: var(--neon-yellow);
}
body[data-page*="laptops"] .hero-inner::before,
body[data-page*="pcs"] .hero-inner::before {
content: 'HARDWARE FLEET // MDM PROVISION';
color: var(--neon-cyan);
}
body[data-page*="multimedia"] .hero-inner::before {
content: 'BOARDROOM AV // 4K DIGITAL';
color: var(--neon-cyan);
}
body[data-page*="cctv"] .hero-inner::before {
content: 'OPTICAL SURVEILLANCE // RAID NVR';
color: var(--neon-cyan);
}
body[data-page*="ecommerce"] .hero-inner::before,
body[data-page*="websites"] .hero-inner::before {
content: 'HIGH COMPUTE // CORE WEB VITALS';
color: var(--neon-yellow);
}
body[data-page*="contact"] .hero-inner::before {
content: 'GIBRALTAR HQ // DIRECT DISPATCH';
color: var(--neon-cyan);
}
/* Sci-Fi Corner Brackets */
.hero-inner::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.1);
border-left: 2px solid var(--neon-cyan);
border-right: 2px solid var(--neon-cyan);
clip-path: polygon(
0 0, 24px 0, 24px 100%, 0 100%, 0 0,
100% 0, calc(100% - 24px) 0, calc(100% - 24px) 100%, 100% 100%
);
pointer-events: none;
}
.border-glow-yellow .hero-inner::after {
border-left-color: var(--neon-yellow);
border-right-color: var(--neon-yellow);
}
/* ========================================================
3D REVOLVING COMPUTER HARDWARE CAROUSEL (WIDE BANNER)
======================================================== */
.hardware-3d-section {
position: relative;
padding: 70px 0 60px;
background: radial-gradient(circle at 50% 50%, rgba(8, 14, 26, 0.6) 0%, rgba(3, 5, 9, 0.95) 85%);
border-top: 1px solid rgba(0, 229, 255, 0.2);
border-bottom: 1px solid rgba(0, 229, 255, 0.2);
overflow: hidden;
}
.hardware-banner-container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.hardware-carousel-stage {
position: relative;
width: 100%;
max-width: 1100px;
height: 380px;
margin: 20px auto 10px;
perspective: 1000px;
perspective-origin: 50% 38%;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
user-select: none;
touch-action: pan-y;
}
.hardware-carousel-stage:active {
cursor: grabbing;
}
.carousel-ambient-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 550px;
height: 220px;
background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.18) 0%, rgba(255, 215, 0, 0.08) 50%, transparent 75%);
filter: blur(45px);
pointer-events: none;
z-index: 0;
}
.hardware-carousel-ring {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
display: flex;
align-items: center;
justify-content: center;
}
/* Individual 3D Card: Compact & Proportional */
.hardware-3d-card {
position: absolute;
width: 165px;
height: 220px;
top: calc(50% - 110px);
left: calc(50% - 82.5px);
will-change: transform, opacity;
border-radius: 16px;
cursor: pointer;
}
.card-inner-glass {
width: 100%;
height: 100%;
border-radius: 16px;
background: rgba(8, 14, 26, 0.92);
border: 1.5px solid rgba(0, 229, 255, 0.35);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 229, 255, 0.18);
backdrop-filter: blur(10px);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.hardware-3d-card:hover .card-inner-glass {
border-color: var(--neon-yellow);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.95), 0 0 25px rgba(255, 215, 0, 0.5);
transform: translateY(-5px);
}
.card-media-wrap {
position: relative;
width: 100%;
height: 135px;
background: #020306;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid rgba(0, 229, 255, 0.2);
}
.hardware-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.hardware-3d-card:hover .hardware-card-img {
transform: scale(1.08);
}
.card-corner-tag {
position: absolute;
top: 6px;
right: 6px;
background: rgba(3, 5, 9, 0.88);
border: 1px solid rgba(0, 229, 255, 0.5);
padding: 2px 6px;
border-radius: 4px;
font-family: var(--font-heading);
font-size: 0.6rem;
font-weight: 700;
color: var(--neon-cyan);
letter-spacing: 0.06em;
z-index: 2;
}
.card-caption {
padding: 8px 10px 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
background: linear-gradient(180deg, rgba(8, 14, 26, 0.95) 0%, rgba(3, 5, 9, 0.98) 100%);
}
.card-caption h4 {
font-size: 0.78rem;
color: #FFF;
margin-bottom: 2px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-caption small {
font-size: 0.68rem;
display: block;
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-specs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 229, 255, 0.12);
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
text-decoration: none;
font-family: var(--font-heading);
font-size: 0.64rem;
font-weight: 700;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s ease;
align-self: flex-start;
}
.card-specs-btn:hover {
background: var(--neon-cyan);
color: #030509;
box-shadow: 0 0 10px var(--neon-cyan);
}
/* Carousel HUD Controls & Status */
.carousel-hud-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 15px;
position: relative;
z-index: 10;
}
.carousel-status-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(8, 14, 26, 0.9);
border: 1px solid rgba(0, 229, 255, 0.4);
padding: 6px 14px;
border-radius: 20px;
font-family: var(--font-heading);
font-size: 0.72rem;
color: var(--neon-cyan);
letter-spacing: 0.08em;
}
.carousel-tip-hint {
margin-top: 8px;
text-align: center;
font-size: 0.72rem;
color: var(--text-muted);
font-family: var(--font-heading);
letter-spacing: 0.04em;
opacity: 0.85;
}
@media (max-width: 768px) {
.hardware-carousel-stage {
height: 320px;
}
.hardware-3d-card {
width: 140px;
height: 185px;
top: calc(50% - 92.5px);
left: calc(50% - 70px);
}
.card-media-wrap {
height: 110px;
}
}
/* ========================================================
COMPACT 9 SERVICES STRIP (BOTTOM OF ALL SERVICE PAGES)
======================================================== */
.services-compact-section {
padding: 60px 0 70px;
background: linear-gradient(180deg, rgba(8, 14, 26, 0.4) 0%, rgba(3, 5, 9, 0.95) 100%);
border-top: 1px solid rgba(0, 229, 255, 0.15);
position: relative;
z-index: 10;
}
.services-compact-header {
text-align: center;
margin-bottom: 35px;
}
.compact-section-title {
font-size: 1.8rem;
font-family: var(--font-heading);
color: #FFFFFF;
margin-bottom: 8px;
letter-spacing: 0.05em;
}
.compact-section-desc {
color: var(--text-muted);
font-size: 0.92rem;
max-width: 600px;
margin: 0 auto;
}
.services-compact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 1200px;
margin: 0 auto;
}
.service-compact-card {
background: rgba(8, 14, 26, 0.7);
border: 1px solid rgba(0, 229, 255, 0.2);
border-radius: 8px;
padding: 16px 18px;
text-decoration: none;
color: var(--text-main);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(8px);
}
.service-compact-card:hover {
transform: translateY(-4px);
background: rgba(14, 22, 40, 0.9);
}
.service-compact-card.border-cyan:hover {
border-color: var(--neon-cyan);
box-shadow: 0 8px 25px rgba(0, 229, 255, 0.3);
}
.service-compact-card.border-yellow:hover {
border-color: var(--neon-yellow);
box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}
.service-compact-card.current-active-service {
border-color: var(--neon-yellow);
background: rgba(255, 215, 0, 0.08);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
pointer-events: none;
}
.compact-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.compact-icon {
font-size: 1.5rem;
filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
}
.compact-tag {
font-family: var(--font-heading);
font-size: 0.62rem;
padding: 2px 7px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--text-muted);
letter-spacing: 0.06em;
}
.current-active-service .compact-tag {
border-color: var(--neon-yellow);
color: var(--neon-yellow);
}
.compact-title {
font-size: 1.05rem;
font-family: var(--font-heading);
color: #FFFFFF;
margin-bottom: 6px;
letter-spacing: 0.03em;
}
.compact-link-hint {
font-size: 0.75rem;
font-family: var(--font-heading);
color: var(--neon-cyan);
transition: color 0.2s ease;
}
.service-compact-card:hover .compact-link-hint {
color: var(--neon-yellow);
}
@media (max-width: 900px) {
.services-compact-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.services-compact-grid {
grid-template-columns: 1fr;
}
.compact-section-title {
font-size: 1.4rem;
}
}
/* ========================================================
LOGO 360 ROTATION & BRAND EMBLEM
======================================================== */
.brand-logo-mark {
width: 46px !important;
height: 46px !important;
border-radius: 50% !important;
border: 1.5px solid var(--neon-cyan) !important;
box-shadow: 0 0 15px rgba(0, 229, 255, 0.4), inset 0 0 10px rgba(255, 215, 0, 0.2) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #030509 !important;
overflow: hidden !important;
padding: 2px !important;
}
.brand-logo-svg-img {
width: 100%;
height: 100%;
display: block;
animation: rotateLogo360 22s linear infinite;
transform-origin: center center;
}
@keyframes rotateLogo360 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ========================================================
FORM FIXES: DARK DROPDOWN & NON-WHITE FILLED/AUTOFILL
======================================================== */
.cyber-select {
background-color: #080E1A !important;
color: #FFFFFF !important;
}
.cyber-select option {
background-color: #080E1A !important;
color: #00E5FF !important;
padding: 10px 14px !important;
}
.cyber-input,
.cyber-textarea,
.cyber-select {
background: #080E1A !important;
color: #E2E8F0 !important;
border: 1px solid rgba(0, 229, 255, 0.35) !important;
}
/* Chrome/Safari/Edge autofill override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill {
-webkit-text-fill-color: #00E5FF !important;
-webkit-box-shadow: 0 0 0px 1000px #080E1A inset !important;
box-shadow: 0 0 0px 1000px #080E1A inset !important;
transition: background-color 5000s ease-in-out 0s !important;
caret-color: #00E5FF !important;
}
/* When filled in (not empty) */
input:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
background-color: #060B14 !important;
color: #00E5FF !important;
border-color: rgba(0, 229, 255, 0.6) !important;
}
/* ========================================================
GLOBAL CTA: MAP VISIBILITY & NON-GREEN PULSING BUTTON
======================================================== */
.global-cta-banner {
position: relative !important;
padding: 80px 24px 75px !important;
background: radial-gradient(circle at 50% 50%, #150f28 0%, #0a0614 70%, #030509 100%) !important;
}
.world-map-bg-wrapper {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
transform: none !important;
opacity: 0.88 !important;
z-index: 1 !important;
overflow: hidden !important;
pointer-events: none !important;
display: block !important;
}
.world-map-svg-img {
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
display: block !important;
filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.45)) !important;
}
/* Ensure CTA button is Cyan/Yellow gradient & pulses - NEVER green */
.cta-neon-pill-btn,
a.cta-neon-pill-btn {
background: linear-gradient(135deg, #00E5FF 0%, #0088FF 100%) !important;
color: #030509 !important;
border: 2px solid #FFFFFF !important;
box-shadow: 0 0 25px rgba(0, 229, 255, 0.75), 0 0 50px rgba(0, 229, 255, 0.35) !important;
animation: ctaElectricPulse 2s infinite ease-in-out !important;
}
@keyframes ctaElectricPulse {
0%, 100% {
box-shadow: 0 0 20px rgba(0, 229, 255, 0.6), 0 0 40px rgba(0, 229, 255, 0.25);
transform: scale(1);
}
50% {
box-shadow: 0 0 35px rgba(0, 229, 255, 0.95), 0 0 70px rgba(0, 229, 255, 0.5), 0 0 15px #FFD700;
transform: scale(1.04);
border-color: #FFD700;
}
}
.cta-neon-pill-btn:hover {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
color: #030509 !important;
box-shadow: 0 0 40px rgba(255, 215, 0, 0.95) !important;
animation: none !important;
transform: translateY(-3px) scale(1.05) !important;
}
/* ========================================================
MOBILE NAVBAR & HAMBURGER DRAWER STYLING
======================================================== */
.mobile-hamburger-btn {
display: none;
flex-direction: column;
justify-content: space-between;
width: 38px;
height: 38px;
padding: 8px;
background: rgba(0, 229, 255, 0.1);
border: 1px solid var(--neon-cyan);
border-radius: 4px;
cursor: pointer;
}
.hamburger-bar {
display: block;
width: 100%;
height: 2px;
background-color: var(--neon-cyan);
border-radius: 2px;
transition: 0.2s ease;
}
.mobile-nav-drawer {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: rgba(3, 5, 9, 0.98);
backdrop-filter: blur(16px);
border-bottom: 2px solid var(--neon-cyan);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
display: none;
flex-direction: column;
padding: 20px 24px;
z-index: 1500;
}
.mobile-nav-drawer.is-open {
display: flex;
}
.mobile-drawer-content {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 75vh;
overflow-y: auto;
}
.mobile-nav-item {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: #FFF;
text-decoration: none;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
display: block;
}
.mobile-nav-item:hover {
color: var(--neon-cyan);
}
.mobile-dropdown-header {
font-family: var(--font-heading);
font-size: 0.75rem;
color: var(--neon-cyan);
letter-spacing: 0.15em;
margin-top: 10px;
margin-bottom: 4px;
text-transform: uppercase;
}
.mobile-sub-item {
font-size: 0.9rem;
color: var(--text-muted);
text-decoration: none;
padding: 6px 0 6px 12px;
border-left: 2px solid rgba(0, 229, 255, 0.3);
display: block;
transition: 0.2s;
}
.mobile-sub-item:hover {
color: var(--neon-cyan);
border-left-color: var(--neon-cyan);
padding-left: 16px;
}
@media (max-width: 992px) {
.nav-links {
display: none !important;
}
.mobile-hamburger-btn {
display: flex !important;
}
.brand-tagline {
font-size: 0.55rem;
letter-spacing: 0.1em;
white-space: nowrap;
}
}
@media (max-width: 768px) {
.global-cta-banner {
padding: 50px 16px 45px !important;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
}
.world-map-bg-wrapper {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
opacity: 0.65 !important;
overflow: hidden !important;
}
.world-map-svg-img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
transform: scale(1.25);
}
.cta-bold-headline {
font-size: 2.2rem !important;
}
.cta-statement {
font-size: 0.95rem !important;
margin-bottom: 24px !important;
}
.cta-neon-pill-btn {
padding: 12px 24px !important;
font-size: 0.82rem !important;
width: 100% !important;
max-width: 320px !important;
}
.cta-sub-perks {
font-size: 0.75rem !important;
gap: 8px !important;
}
}
.modal-card-wide {
max-width: 720px !important;
width: 95vw !important;
}
.ai-video-overlay-badge {
position: absolute;
top: 8px;
left: 8px;
background: rgba(3, 5, 9, 0.85);
border: 1px solid var(--neon-cyan);
color: var(--neon-cyan);
font-family: var(--font-heading);
font-size: 0.65rem;
padding: 2px 8px;
border-radius: 4px;
letter-spacing: 0.1em;
z-index: 2;
}
/* Enhanced Background Shading & Depth for All 9 Service Cards */
.feature-card {
background: linear-gradient(145deg, rgba(12, 20, 38, 0.95) 0%, rgba(5, 9, 18, 0.9) 100%) !important;
border: 1px solid rgba(0, 229, 255, 0.28) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}
.feature-card:hover {
transform: translateY(-6px) scale(1.01) !important;
background: linear-gradient(145deg, rgba(18, 28, 50, 0.98) 0%, rgba(8, 14, 26, 0.95) 100%) !important;
border-color: var(--neon-cyan) !important;
box-shadow: 0 14px 40px rgba(0, 229, 255, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
}
.feature-card.border-yellow:hover {
border-color: var(--neon-yellow) !important;
box-shadow: 0 14px 40px rgba(255, 215, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
}
/* Robot Head Icon & Hover Animation for Portal Circle */
.avatar-ring {
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.avatar-auth-trigger:hover .avatar-ring {
transform: scale(1.12) rotate(6deg) !important;
box-shadow: 0 0 25px rgba(0, 229, 255, 0.8), inset 0 0 10px rgba(0, 229, 255, 0.5) !important;
border-color: var(--neon-yellow) !important;
}
.avatar-auth-trigger .avatar-icon {
display: inline-block;
transition: transform 0.3s ease;
}
.avatar-auth-trigger:hover .avatar-icon {
transform: scale(1.15);
filter: drop-shadow(0 0 8px var(--neon-cyan));
}
/* Enhanced Mobile Navigation Drawer Container & Link Styling */
.mobile-nav-drawer {
position: absolute !important;
top: 100% !important;
left: 12px !important;
right: 12px !important;
width: auto !important;
max-width: 480px !important;
margin: 10px auto 0 !important;
background: rgba(6, 11, 22, 0.96) !important;
backdrop-filter: blur(18px) !important;
border: 1.5px solid var(--neon-cyan) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.95), 0 0 25px rgba(0, 229, 255, 0.3) !important;
border-radius: 12px !important;
display: none;
flex-direction: column;
padding: 20px !important;
z-index: 1600 !important;
}
.mobile-nav-drawer.is-open {
display: flex !important;
}
.mobile-drawer-content {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 72vh;
overflow-y: auto;
}
.mobile-nav-item {
font-family: var(--font-heading) !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
color: #FFFFFF !important;
text-decoration: none !important;
padding: 10px 14px !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(0, 229, 255, 0.2) !important;
border-radius: 6px !important;
display: block !important;
transition: all 0.2s ease !important;
}
.mobile-nav-item:hover {
color: var(--neon-cyan) !important;
background: rgba(0, 229, 255, 0.12) !important;
border-color: var(--neon-cyan) !important;
padding-left: 18px !important;
}
.mobile-dropdown-header {
font-family: var(--font-heading) !important;
font-size: 0.72rem !important;
color: var(--neon-yellow) !important;
letter-spacing: 0.18em !important;
margin-top: 14px !important;
margin-bottom: 6px !important;
text-transform: uppercase !important;
padding-left: 4px !important;
}
.mobile-sub-item {
font-size: 0.88rem !important;
color: #CBD5E1 !important;
text-decoration: none !important;
padding: 8px 12px 8px 16px !important;
background: rgba(255, 255, 255, 0.015) !important;
border-left: 3px solid var(--neon-cyan) !important;
border-radius: 0 6px 6px 0 !important;
display: block !important;
transition: all 0.2s ease !important;
margin-bottom: 4px !important;
}
.mobile-sub-item:hover {
color: var(--neon-cyan) !important;
background: rgba(0, 229, 255, 0.1) !important;
border-left-color: var(--neon-yellow) !important;
padding-left: 20px !important;
}
/* Yellow C-3PO Robot Hand Custom Cursor */
body, a, button, input, select, textarea, .feature-card, .hardware-3d-card, .intel-card {
cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important;
}
/* Hide SYSTEM OPERATIONAL // GIBRALTAR NODE badge on mobile screens */
@media (max-width: 992px) {
.cyber-status-tag {
display: none !important;
}
}
/* Mobile Hero Margins & Padding */
@media (max-width: 992px) {
.brand-title {
font-size: 0.95rem !important;
letter-spacing: 0.06em !important;
}
.brand-tagline {
font-size: 0.5rem !important;
}
.brand-badge {
gap: 8px !important;
}
.nav-controls {
gap: 8px !important;
}
}
/* Hide Header Sound Toggle on Mobile (Moved to Hamburger) */
@media (max-width: 992px) {
#soundToggle {
display: none !important;
}
}
/* Smaller Mobile CTA Assessment Button */
@media (max-width: 768px) {
.cta-neon-pill-btn {
padding: 10px 20px !important;
font-size: 0.78rem !important;
letter-spacing: 0.06em !important;
}
}
/* WhatsApp Floating Commlink Positioning on Mobile (Above Footer) */
@media (max-width: 768px) {
.holo-commlink-container {
bottom: 90px !important;
right: 16px !important;
z-index: 1200 !important;
}
}
/* WhatsApp Commlink Mobile Positioning (Safe above footer / corner) */
@media (max-width: 768px) {
.holo-commlink-container {
position: fixed !important;
bottom: 16px !important;
right: 16px !important;
z-index: 9999 !important;
}
.holo-beacon-trigger {
padding: 6px 12px 6px 6px !important;
transform: scale(0.9);
}
.holo-hud-window {
bottom: 60px !important;
right: 0 !important;
max-width: 92vw !important;
}
}
/* ========================================================
v50 — SERVICE CARD GRADIENTS (single source of truth)
ID selector so no older rule can override it.
======================================================== */
#services-masonry .feature-card,
.client-portal-wrapper .feature-card {
background:
radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.20) 0%, transparent 55%),
radial-gradient(circle at 100% 100%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
linear-gradient(145deg, #16305c 0%, #0b1730 45%, #04070f 100%) !important;
border: 1.5px solid rgba(0, 229, 255, 0.45) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 30px rgba(0, 229, 255, 0.06) !important;
}
#services-masonry .feature-card.border-yellow,
.client-portal-wrapper .feature-card.border-yellow {
background:
radial-gradient(circle at 0% 0%, rgba(255, 215, 0, 0.18) 0%, transparent 55%),
radial-gradient(circle at 100% 100%, rgba(0, 229, 255, 0.08) 0%, transparent 50%),
linear-gradient(145deg, #2a2a18 0%, #121424 45%, #04070f 100%) !important;
border-color: rgba(255, 215, 0, 0.5) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 30px rgba(255, 215, 0, 0.06) !important;
}
#services-masonry .feature-card:hover,
.client-portal-wrapper .feature-card:hover {
border-color: var(--neon-cyan) !important;
box-shadow: 0 18px 50px rgba(0, 229, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
transform: translateY(-6px) scale(1.01) !important;
}
#services-masonry .feature-card.border-yellow:hover,
.client-portal-wrapper .feature-card.border-yellow:hover {
border-color: var(--neon-yellow) !important;
box-shadow: 0 18px 50px rgba(255, 215, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
/* ========================================================
v50 — MOBILE HERO: grow with content instead of a fixed
height, so the title and the warp slider are never cut off.
======================================================== */
@media (max-width: 992px) {
.hyperspace-hero {
height: auto !important;
min-height: 0 !important;
margin: 16px 12px 24px !important;
padding: 56px 0 40px !important;
}
.hero-title {
margin-top: 0 !important;
font-size: 2rem !important;
}
.hero-subtitle {
font-size: 1rem !important;
margin-bottom: 28px !important;
}
.warp-control-panel {
margin-bottom: 0 !important;
}
}
/* ========================================================
v50 — SMALLER BUTTONS ON MOBILE
======================================================== */
@media (max-width: 768px) {
.cyber-btn {
padding: 9px 18px !important;
font-size: 0.78rem !important;
letter-spacing: 0.04em !important;
}
.hero-actions {
gap: 10px !important;
margin-bottom: 24px !important;
}
.hero-actions .cyber-btn {
min-width: 220px;
}
.warp-control-panel {
gap: 10px !important;
padding: 6px 14px !important;
font-size: 0.7rem !important;
}
.warp-control-panel input[type="range"] {
width: 110px;
}
}
/* ========================================================
v51 — "LET'S GET STARTED" WORLD MAP (single source of truth)
Real dotted world map, whole map visible on desktop,
centred on Gibraltar on mobile, text kept readable.
======================================================== */
.global-cta-banner .world-map-bg-wrapper {
inset: 0 !important;
opacity: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.global-cta-banner .world-map-svg-img {
width: 100% !important;
height: 100% !important;
max-width: 1500px !important;
max-height: none !important;
object-fit: contain !important;
object-position: 50% 50% !important;
transform: none !important;
filter: none !important;
opacity: 0.7;
}
/* soft dark halo behind the text so the dots never fight the copy */
.global-cta-banner .world-map-bg-wrapper::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(3, 5, 9, 0.78) 0%, rgba(3, 5, 9, 0.35) 55%, rgba(3, 5, 9, 0) 80%);
pointer-events: none;
}
@media (max-width: 768px) {
.global-cta-banner .world-map-svg-img {
object-fit: cover !important;
object-position: 47% 40% !important;
opacity: 0.6;
}
.global-cta-banner .world-map-bg-wrapper::after {
background: radial-gradient(ellipse 80% 55% at 50% 50%, rgba(3, 5, 9, 0.8) 0%, rgba(3, 5, 9, 0.4) 60%, rgba(3, 5, 9, 0.1) 100%);
}
}
/* ========================================================
v52 — ROTATING GLOBE in "Let's get started"
(canvas drawn by assets/js/globe.js; flat SVG map is the
fallback if JavaScript is off)
======================================================== */
.global-cta-banner .globe-canvas {
position: absolute;
inset: 0;
display: block;
pointer-events: none;
}
.global-cta-banner .world-map-bg-wrapper.globe-on .world-map-svg-img {
display: none !important;
}
.global-cta-banner .world-map-bg-wrapper.globe-on::after {
background: radial-gradient(ellipse 45% 50% at 50% 50%, rgba(3, 5, 9, 0.55) 0%, rgba(3, 5, 9, 0.2) 60%, rgba(3, 5, 9, 0) 85%) !important;
}
@media (max-width: 768px) {
.global-cta-banner .world-map-bg-wrapper.globe-on::after {
background: radial-gradient(ellipse 75% 50% at 50% 50%, rgba(3, 5, 9, 0.6) 0%, rgba(3, 5, 9, 0.25) 65%, rgba(3, 5, 9, 0) 100%) !important;
}
}
/* ========================================================
v52 — MOBILE HERO: full width, no frame line, stars run to
the end of the section and fade into the next one
======================================================== */
@media (max-width: 992px) {
.hyperspace-hero {
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}
.hyperspace-hero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 60px;
background: linear-gradient(180deg, rgba(3, 5, 9, 0) 0%, #030509 100%);
z-index: 1;
pointer-events: none;
}
.hyperspace-hero + .hardware-3d-section,
#hardware-3d-showcase {
border-top: 0 !important;
}
}
/* ========================================================
v52 — WHATSAPP BUTTON: compact round button, brand-styled,
hides while the footer is visible
======================================================== */
.holo-commlink-container {
transition: opacity 0.35s ease, transform 0.35s ease;
}
.holo-commlink-container.is-tucked {
opacity: 0;
transform: translateY(24px) scale(0.9);
pointer-events: none;
}
.holo-beacon-trigger {
padding: 6px !important;
gap: 0 !important;
border-radius: 50% !important;
}
.holo-beacon-trigger .holo-beacon-label {
display: none !important;
}
@media (min-width: 769px) {
.holo-commlink-container {
bottom: 24px !important;
right: 24px !important;
}
}
@media (max-width: 768px) {
.holo-commlink-container {
position: fixed !important;
bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
right: 14px !important;
}
.holo-beacon-trigger {
transform: scale(0.88) !important;
transform-origin: bottom right;
}
.holo-hud-window {
bottom: 64px !important;
right: 0 !important;
width: calc(100vw - 28px) !important;
max-width: 360px !important;
}
}
/* v54 — spam trap field (hidden from people, bots fill it in) */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
/* ========================================================
v55 — ADMIN DASHBOARD: clickable enquiries, pop-up, pager
======================================================== */
.enquiry-row { cursor: pointer; transition: background 0.2s ease; }
.enquiry-row:hover, .enquiry-row:focus { background: rgba(255, 215, 0, 0.07); outline: none; }
.enquiry-row:focus-visible { outline: 1px solid var(--neon-yellow); }
.enquiry-row td small { color: var(--text-muted); }
.enquiry-modal-card { max-width: 620px !important; width: 92% !important; max-height: 88vh; overflow-y: auto; text-align: left; border-color: var(--neon-yellow) !important; }
.enq-head { margin-bottom: 18px; padding-right: 30px; }
.enq-head h3 { margin: 10px 0 4px; font-size: 1.4rem; color: #fff; }
.enq-meta { color: var(--text-muted); font-size: 0.85rem; }
.enq-fields { display: grid; grid-template-columns: 120px 1fr; gap: 8px 14px; margin: 0 0 18px; }
.enq-fields dt { color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; }
.enq-fields dd { margin: 0; color: #E2E8F0; word-break: break-word; }
.enq-fields a { color: var(--neon-cyan); }
.enq-label { color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.enq-message { white-space: pre-wrap; word-break: break-word; background: rgba(0, 229, 255, 0.05); border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 6px; padding: 14px 16px; line-height: 1.6; color: #E2E8F0; max-height: 40vh; overflow-y: auto; }
.enq-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
@media (max-width: 560px) {
.enq-fields { grid-template-columns: 1fr; gap: 2px; }
.enq-fields dd { margin-bottom: 8px; }
}
.mf-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; flex-wrap: wrap; color: var(--text-muted); font-size: 0.85rem; }
.mf-pager .cyber-btn { padding: 6px 14px !important; font-size: 0.75rem !important; }
.mf-pager .is-disabled { opacity: 0.35; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.15); color: var(--text-muted); }
/* ========================================================
v56 — Admin dashboard KPI tiles: all 4 on one row on desktop,
2 per row on tablets, stacked on phones
======================================================== */
.admin-console-wrapper .kpi-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 18px !important;
}
.admin-console-wrapper .kpi-card { min-width: 0; }
.admin-console-wrapper .kpi-val { font-size: clamp(1.6rem, 2.4vw, 2.6rem); white-space: nowrap; }
@media (max-width: 1100px) {
.admin-console-wrapper .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
.admin-console-wrapper .kpi-grid { grid-template-columns: 1fr !important; }
}
/* ========================================================
v56 — Admin menu: its own single row at the top of every
admin page (scrolls sideways on small screens)
======================================================== */
.admin-header-strip {
flex-direction: column-reverse !important;
align-items: stretch !important;
gap: 22px;
}
.admin-header-strip > div { min-width: 0; }
.admin-top-menu-group {
flex-wrap: nowrap !important;
gap: 8px !important;
overflow-x: auto;
scrollbar-width: thin;
padding-bottom: 4px;
}
.admin-top-menu-group .cyber-btn {
flex: 1 1 0;
white-space: nowrap;
padding: 9px 14px !important;
font-size: 0.78rem !important;
justify-content: center;
}
.admin-top-menu-group .cyber-btn-logout { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 900px) {
.admin-top-menu-group .cyber-btn { flex: 0 0 auto; }
}
/* Logged-in header on phones: keep avatar + menu button inside the screen */
@media (max-width: 560px) {
.user-pill .pill-badge { display: none !important; }
.user-pill { gap: 6px !important; }
.nav-controls { gap: 6px !important; }
}
/* v56 — admin tables never push the page sideways on phones */
.admin-grid-sections > * { min-width: 0; }
.admin-box { min-width: 0; overflow-x: auto; }
@media (max-width: 560px) {
.admin-box { padding: 18px !important; }
.cyber-table th, .cyber-table td { padding: 8px 6px !important; font-size: 0.82rem; }
}
/* ========================================================
v57 — "LET'S GET STARTED": more breathing room so the
globe and its glow fit inside the section
======================================================== */
.global-cta-banner {
padding: 140px 24px 140px !important;
}
@media (max-width: 768px) {
.global-cta-banner { padding: 110px 16px 110px !important; }
}
/* ========================================================
v57 — "LET'S BUILD TOGETHER" section
======================================================== */
.build-together { position: relative; }
.build-box {
position: relative;
max-width: 1100px !important;
padding: 56px 52px !important;
border: 1px solid transparent !important;
border-radius: 16px !important;
background:
linear-gradient(rgba(6, 11, 22, 0.96), rgba(6, 11, 22, 0.96)) padding-box,
conic-gradient(from var(--bt-angle, 0deg), rgba(0,229,255,0.9), rgba(255,215,0,0.7), rgba(0,229,255,0.15), rgba(255,215,0,0.15), rgba(0,229,255,0.9)) border-box !important;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 229, 255, 0.08);
animation: btBorderSpin 8s linear infinite;
overflow: hidden;
}
.build-box::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(0,229,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,229,255,0.05) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
pointer-events: none;
}
.build-box::after {
content: "";
position: absolute; left: -20%; right: -20%; height: 120px; top: -140px;
background: linear-gradient(180deg, transparent, rgba(0,229,255,0.08), transparent);
animation: btScan 6s ease-in-out infinite;
pointer-events: none;
}
.build-box > * { position: relative; z-index: 1; }
@property --bt-angle { syntax: ""; initial-value: 0deg; inherits: false; }
@keyframes btBorderSpin { to { --bt-angle: 360deg; } }
@keyframes btScan { 0% { top: -140px; } 100% { top: 110%; } }
.bt-corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--neon-yellow); z-index: 2; opacity: .8; }
.bt-corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.bt-corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.bt-corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.bt-corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.bt-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #00FF88; box-shadow: 0 0 10px #00FF88; margin-right: 6px; animation: pulseGlow 1.4s infinite ease-in-out; vertical-align: middle; }
.bt-grid { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; margin-top: 8px; }
.bt-intel {
background: rgba(0, 229, 255, 0.04);
border: 1px solid rgba(0, 229, 255, 0.18);
border-radius: 12px;
padding: 24px;
display: flex; flex-direction: column; gap: 18px;
}
.bt-stat { display: flex; flex-direction: column; border-left: 3px solid var(--neon-yellow); padding-left: 12px; }
.bt-stat + .bt-stat { border-left-color: var(--neon-cyan); }
.bt-stat-val { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 900; line-height: 1.1; }
.bt-stat-label { color: var(--text-muted); font-size: 0.85rem; }
.bt-channels { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bt-channels li { display: flex; align-items: center; gap: 10px; color: #E2E8F0; font-size: 0.95rem; }
.bt-channels a { color: #E2E8F0; text-decoration: none; border-bottom: 1px dashed rgba(0,229,255,0.4); }
.bt-channels a:hover { color: var(--neon-cyan); }
.bt-ic { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(0,229,255,0.08); border: 1px solid rgba(0,229,255,0.25); font-size: 0.95rem; }
.bt-secure { color: var(--text-muted); font-size: 0.8rem; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px; }
.build-box .cyber-input, .build-box .cyber-textarea, .build-box select {
background: rgba(2, 5, 12, 0.85) !important;
border: 1px solid rgba(0, 229, 255, 0.22) !important;
transition: border-color .2s ease, box-shadow .2s ease;
}
.build-box .cyber-input:focus, .build-box .cyber-textarea:focus, .build-box select:focus {
border-color: var(--neon-cyan) !important;
box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15), 0 0 18px rgba(0, 229, 255, 0.25) !important;
outline: none;
}
.build-box .form-group, .build-box .form-row { margin-bottom: 16px; }
/* Pulsing DISPATCH TRANSMISSION button */
.dispatch-pulse-btn {
position: relative;
overflow: hidden;
padding: 16px 26px !important;
font-size: 0.95rem !important;
letter-spacing: 0.12em;
background: linear-gradient(135deg, #00E5FF 0%, #0088FF 100%) !important;
color: #030509 !important;
border: 0 !important;
animation: dispatchPulse 2s ease-in-out infinite;
}
.dispatch-pulse-btn span { position: relative; z-index: 1; font-weight: 800; }
.dispatch-pulse-btn::after {
content: "";
position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
transform: skewX(-20deg);
animation: dispatchShine 3s ease-in-out infinite;
}
.dispatch-pulse-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(0,229,255,0.2), 0 0 40px rgba(0,229,255,0.8) !important; }
.dispatch-pulse-btn:disabled { animation: none; opacity: .7; }
@keyframes dispatchPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.55), 0 0 18px rgba(0, 229, 255, 0.45); }
50% { box-shadow: 0 0 0 12px rgba(0, 229, 255, 0), 0 0 36px rgba(0, 229, 255, 0.85); }
}
@keyframes dispatchShine { 0% { left: -60%; } 60%, 100% { left: 130%; } }
@media (max-width: 900px) {
.bt-grid { grid-template-columns: 1fr; }
.build-box { padding: 40px 22px !important; }
}
@media (max-width: 600px) {
.build-box .form-row { flex-direction: column; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.build-box, .build-box::after, .dispatch-pulse-btn, .dispatch-pulse-btn::after { animation: none !important; }
}
/* v57 — hovered hardware card: stronger gold glow (card is enlarged by main.js) */
.hardware-3d-card:hover .card-inner-glass {
transform: none !important;
border-color: var(--neon-yellow) !important;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 215, 0, 0.55) !important;
}
/* ================================================================
v58 — WEB PORTFOLIO (services/websites-ecommerce.php + admin)
================================================================ */
.pf-section { padding: 90px 0 100px; position: relative; overflow: hidden; }
.pf-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.pf-tag { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 5px; color: #00E5FF; font-size: 0.9rem; }
.pf-h2 { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: 2px; color: #fff; margin: 8px 0 0; line-height: 1.15; }
.pf-h2 span { color: #00E5FF; text-shadow: 0 0 22px rgba(0,229,255,.6); }
.pf-h2-sm { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.pf-feat { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: center; margin-top: 36px; padding: 48px;
border-radius: 18px; border: 1px solid rgba(0,229,255,.25);
background: radial-gradient(ellipse at 30% 50%, rgba(0,229,255,.12), transparent 60%), linear-gradient(180deg, rgba(15,23,38,.85), rgba(6,10,18,.92)); }
.pf-stage { position: relative; display: block; padding: 0 60px 60px 0; text-decoration: none; }
.pf-browser { border-radius: 10px; overflow: hidden; background: #0b111d; border: 1px solid rgba(0,229,255,.25); box-shadow: 0 30px 80px rgba(0,0,0,.7); transition: transform .45s ease, box-shadow .45s ease; }
.pf-bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #0f1726; border-bottom: 1px solid rgba(0,229,255,.15); }
.pf-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; flex: none; }
.pf-bar i:nth-child(2) { background: #febc2e; } .pf-bar i:nth-child(3) { background: #28c840; }
.pf-url { margin-left: 10px; flex: 1; min-width: 0; height: 18px; line-height: 18px; border-radius: 9px; background: #070b14; color: #7f8ca3; font-size: 11px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Inter', sans-serif; }
.pf-shot { aspect-ratio: 16 / 10; overflow: hidden; background: #070b14; }
.pf-shot img, .pf-card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .6s ease; }
.pf-phone { position: absolute; right: 0; bottom: 0; width: 26%; min-width: 120px; aspect-ratio: 1 / 2; border-radius: 26px; border: 3px solid #1e2a40; background: #000; padding: 7px;
box-shadow: 0 20px 60px rgba(0,0,0,.8), 0 0 30px rgba(0,229,255,.25); transition: transform .45s ease; }
.pf-phone-scr { width: 100%; height: 100%; border-radius: 19px; overflow: hidden; background: #070b14; }
.pf-phone-scr img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pf-phone-scr img.pf-crop { object-position: top left; }
.pf-stage:hover .pf-browser { transform: translateY(-6px); box-shadow: 0 40px 90px rgba(0,0,0,.75), 0 0 40px rgba(0,229,255,.25); }
.pf-stage:hover .pf-shot img { transform: scale(1.03); }
.pf-stage:hover .pf-phone { transform: translateY(-12px) rotate(-2deg); }
.pf-badge { display: inline-block; background: #FFD700; color: #000; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 2px; padding: 6px 10px; border-radius: 4px; }
.pf-cat { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 5px; color: #00E5FF; font-size: .85rem; margin-top: 14px; }
.pf-info h3 { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: #fff; margin: 10px 0 12px; line-height: 1.2; }
.pf-info p { color: #8b98ad; line-height: 1.65; font-size: 1rem; margin: 0; }
.pf-kpis { display: flex; gap: 32px; margin: 24px 0 4px; flex-wrap: wrap; }
.pf-kpis b { display: block; font-family: 'Orbitron', sans-serif; font-size: 1.6rem; color: #00E5FF; text-shadow: 0 0 16px rgba(0,229,255,.45); }
.pf-kpis span { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: 2px; color: #8b98ad; text-transform: uppercase; }
.pf-techs { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 26px; }
.pf-techs span { font-size: 11px; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 1.5px; padding: 4px 9px; border-radius: 4px; background: rgba(255,215,0,.08); border: 1px solid rgba(255,215,0,.35); color: #FFD700; }
.pf-visit { display: inline-flex; align-items: center; gap: 8px; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: 2px; padding: 15px 24px; border-radius: 6px;
background: linear-gradient(135deg, #00E5FF, #0088FF); color: #030509 !important; text-decoration: none; box-shadow: 0 0 24px rgba(0,229,255,.5); transition: box-shadow .3s, transform .3s; }
.pf-visit:hover { box-shadow: 0 0 40px rgba(0,229,255,.8); transform: translateY(-2px); }
.pf-kpis + .pf-visit, .pf-info p + .pf-visit { margin-top: 24px; }
.pf-strip-head { display: flex; justify-content: space-between; align-items: flex-end; margin: 70px 0 24px; gap: 16px; }
.pf-arrows { display: flex; gap: 10px; }
.pf-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #00E5FF; background: rgba(0,229,255,.06); color: #00E5FF; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .25s, box-shadow .25s, opacity .25s; }
.pf-arrow:hover:not(:disabled) { background: rgba(0,229,255,.18); box-shadow: 0 0 18px rgba(0,229,255,.45); }
.pf-arrow:disabled { opacity: .3; cursor: default; }
.pf-strip { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 4px 16px; scrollbar-width: none; outline: none; }
.pf-strip::-webkit-scrollbar { display: none; }
.pf-card { flex: 0 0 calc((100% - 72px) / 4); min-width: 260px; scroll-snap-align: start; background: rgba(10,16,28,.9); border: 1px solid rgba(0,229,255,.2); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit;
display: flex; flex-direction: column; transition: transform .35s ease, border-color .35s, box-shadow .35s; }
.pf-card:hover, .pf-card:focus-visible { transform: translateY(-8px); border-color: #FFD700; box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 28px rgba(255,215,0,.2); }
.pf-card:hover .pf-card-shot img { transform: scale(1.05); }
.pf-card-shot { aspect-ratio: 16 / 10; overflow: hidden; background: #070b14; border-bottom: 1px solid rgba(0,229,255,.12); }
.pf-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.pf-card-body small { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 3px; color: #00E5FF; font-size: 11px; }
.pf-card-body h4 { font-family: 'Orbitron', sans-serif; color: #fff; font-size: 1rem; margin: 6px 0 8px; }
.pf-card-body p { color: #8b98ad; font-size: .85rem; line-height: 1.5; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: 'Rajdhani', sans-serif; font-weight: 600; color: #8b98ad; font-size: .85rem; }
.pf-card-foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-card-foot b { color: #00E5FF; font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
.pf-card:hover .pf-card-foot b { color: #FFD700; }
.pf-dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; min-height: 10px; }
.pf-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 5px; background: rgba(0,229,255,.25); cursor: pointer; transition: width .3s, background .3s; }
.pf-dots button.on { background: #00E5FF; width: 30px; }
@media (max-width: 1100px) {
.pf-card { flex-basis: calc((100% - 48px) / 3); }
}
@media (max-width: 960px) {
.pf-feat { grid-template-columns: 1fr; gap: 34px; padding: 28px; }
.pf-stage { padding: 0 40px 40px 0; }
.pf-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 600px) {
.pf-section { padding: 60px 0 70px; }
.pf-container { padding: 0 16px; }
.pf-feat { padding: 18px; border-radius: 14px; margin-top: 24px; }
.pf-stage { padding: 0 34px 34px 0; }
.pf-phone { width: 30%; min-width: 88px; border-radius: 16px; padding: 4px; border-width: 2px; }
.pf-phone-scr { border-radius: 12px; }
.pf-bar { height: 24px; } .pf-url { font-size: 10px; }
.pf-visit { width: 100%; justify-content: center; }
.pf-strip-head { margin-top: 50px; }
.pf-arrow { width: 40px; height: 40px; }
.pf-card { flex-basis: 82%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pf-strip { scroll-behavior: auto; }
.pf-browser, .pf-phone, .pf-card, .pf-shot img, .pf-card-shot img { transition: none; }
}
/* Admin: Web Portfolio */
.pf-admin-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pf-admin-head h3 { margin: 0; }
.pf-admin-thumb { width: 120px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid rgba(0,229,255,.25); display: block; }
.pf-admin-preview { display: block; margin-top: 10px; width: 220px; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid rgba(0,229,255,.25); }
.pf-admin-preview-mob { width: 90px; aspect-ratio: 1 / 2; }
.pf-inline { display: inline; margin: 0; }
.pf-order { white-space: nowrap; }
.pf-order .mini-btn:disabled { opacity: .25; cursor: default; }
.pf-actions { white-space: nowrap; }
.pf-actions .mini-btn, .pf-order .mini-btn { cursor: pointer; }
.pf-row-hidden td { opacity: .55; }
.pf-feat-badge { display: inline-block; margin-left: 8px; background: #FFD700; color: #000; font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 3px 7px; border-radius: 3px; vertical-align: middle; }
.pf-check { display: flex !important; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer; }
.pf-check input { width: 18px; height: 18px; accent-color: #00E5FF; }
.pf-order .mini-btn, .pf-actions button.mini-btn:not(.del-btn) { border-color: var(--neon-cyan); color: var(--neon-cyan); background: rgba(0,229,255,.1); font-family: inherit; }
.pf-actions .mini-btn, .pf-order .mini-btn { margin-right: 4px; }
/* ================================================================
v60 — PORTFOLIO SCROLL PREVIEW: tall (full-page) screenshots glide
from top to bottom on hover (desktop) or automatically while in
view on touch screens. --pf-dur is set per image by main.js.
================================================================ */
.pf-shot img, .pf-card-shot img, .pf-phone-scr img {
object-position: 50% 0%;
transition: object-position 1.1s cubic-bezier(.4,0,.2,1), transform .6s ease;
}
.pf-phone-scr img.pf-crop { object-position: 0% 0%; }
.pf-scroll-img { transform: none !important; }
@media (hover: hover) {
.pf-stage:hover .pf-scroll-img, .pf-card:hover .pf-scroll-img, .pf-card:focus-visible .pf-scroll-img {
object-position: 50% 100%;
transition: object-position var(--pf-dur, 6s) linear;
}
.pf-stage:hover .pf-phone-scr img.pf-crop.pf-scroll-img { object-position: 0% 100%; }
}
@keyframes pfAutoScroll {
0%, 12% { object-position: 50% 0%; }
88%, 100% { object-position: 50% 100%; }
}
@media (hover: none) {
.pf-autoplay .pf-scroll-img { animation: pfAutoScroll calc(var(--pf-dur, 6s) * 1.4) ease-in-out infinite alternate; }
}
/* "hover to scroll" hint on tall screenshots */
.pf-shot, .pf-card-shot { position: relative; }
.pf-tall::after {
content: "⇣ HOVER TO SCROLL"; position: absolute; right: 10px; bottom: 10px; z-index: 2;
font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 2px;
color: #030509; background: rgba(0,229,255,.9); padding: 4px 9px; border-radius: 4px;
box-shadow: 0 0 14px rgba(0,229,255,.5); pointer-events: none; transition: opacity .3s;
}
.pf-card-shot.pf-tall::after { font-size: 10px; padding: 3px 7px; }
.pf-stage:hover .pf-tall::after, .pf-card:hover .pf-tall::after { opacity: 0; }
.pf-stage .pf-tall::after { right: auto; left: 12px; }
@media (hover: none) { .pf-tall::after { display: none; } }
@media (prefers-reduced-motion: reduce) {
.pf-autoplay .pf-scroll-img { animation: none; }
.pf-shot img, .pf-card-shot img, .pf-phone-scr img { transition: none !important; }
.pf-tall::after { display: none; }
}
/* ================================================================
v61 — VIDEO BACKGROUND FOR SERVICE HERO (AI Software page)
Video sits under the scanlines / radar sweep; a dark tint keeps
the title readable.
================================================================ */
.service-hero.has-hero-video { background-color: #03060e !important; }
.hero-video-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-video-bg video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.hero-video-bg::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 45%, rgba(3,6,14,.45) 0%, rgba(3,6,14,.8) 75%),
linear-gradient(180deg, rgba(0,229,255,.08), rgba(3,6,14,.35));
}
.has-hero-video .service-title, .has-hero-video .service-lead, .has-hero-video .service-hero-tag { text-shadow: 0 2px 18px rgba(0,0,0,.85); }
@media (max-width: 600px) {
.hero-video-bg::after { background: rgba(3,6,14,.68); }
}
/* ================================================================
v61 — PORTFOLIO CARDS get the homepage service-card shading
(radial cyan/gold corner glows over a deep blue gradient);
every second card uses the gold variant, like the homepage mix.
================================================================ */
.pf-feat {
background:
radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.20) 0%, transparent 55%),
radial-gradient(circle at 100% 100%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
linear-gradient(145deg, #16305c 0%, #0b1730 45%, #04070f 100%);
border: 1.5px solid rgba(0, 229, 255, 0.45);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 30px rgba(0, 229, 255, 0.06);
}
.pf-card {
background:
radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.20) 0%, transparent 55%),
radial-gradient(circle at 100% 100%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
linear-gradient(145deg, #16305c 0%, #0b1730 45%, #04070f 100%);
border: 1.5px solid rgba(0, 229, 255, 0.45);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 30px rgba(0, 229, 255, 0.06);
}
.pf-card:nth-child(even) {
background:
radial-gradient(circle at 0% 0%, rgba(255, 215, 0, 0.18) 0%, transparent 55%),
radial-gradient(circle at 100% 100%, rgba(0, 229, 255, 0.08) 0%, transparent 50%),
linear-gradient(145deg, #2a2a18 0%, #121424 45%, #04070f 100%);
border-color: rgba(255, 215, 0, 0.5);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 30px rgba(255, 215, 0, 0.06);
}
.pf-card-shot { border-bottom-color: rgba(255, 255, 255, 0.08); }
.pf-card:hover, .pf-card:focus-visible {
border-color: var(--neon-cyan);
box-shadow: 0 18px 50px rgba(0, 229, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.pf-card:nth-child(even):hover, .pf-card:nth-child(even):focus-visible {
border-color: var(--neon-yellow);
box-shadow: 0 18px 50px rgba(255, 215, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.pf-card-body p { color: #a3b1c6; }
/* Admin: section switch (Web / AI) */
.pf-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; }
.pf-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; border: 1px solid rgba(0,229,255,.35);
color: var(--neon-cyan); text-decoration: none; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 1px; background: rgba(0,229,255,.05); }
.pf-tab span { background: rgba(0,229,255,.18); border-radius: 10px; padding: 1px 8px; font-size: .8rem; }
.pf-tab.on { background: var(--neon-yellow); color: #030509; border-color: var(--neon-yellow); }
.pf-tab.on span { background: rgba(0,0,0,.18); }
/* v62 — AI Software page: no rotating radar sweep over the video hero */
body[data-page="ai-software"] .service-hero::after { content: none !important; animation: none !important; display: none !important; }
/* ================================================================
v63 — Admin: "Import case studies" box on the Web portfolio tab
================================================================ */
.pf-import-box { margin: 0 0 18px; padding: 14px 16px; border: 1px dashed rgba(0,229,255,.45); border-radius: 10px; background: rgba(0,229,255,.05); }
.pf-import-box small { display: block; margin-top: 8px; color: var(--text-muted); line-height: 1.5; }
/* ================================================================
v64 — Recent Launches / Recent Deployments: room for the hover glow.
The strip scrolls sideways, which also clips anything that spills
above/below it, so the lifted card's glow was cut off. Pad the strip
on all sides (and pull it back with negative margins so the layout
doesn't move) so the glow has space to show.
================================================================ */
.pf-strip {
padding: 28px 24px 76px; /* sides = card gap, so no sliver of the next card peeks in */
margin: -28px -24px -60px;
scroll-padding-inline: 24px;
}
@media (max-width: 768px) {
.pf-strip { padding: 24px 16px 64px; margin: -24px -16px -48px; scroll-padding-inline: 16px; }
}
/* ================================================================
v65 — Websites & E-commerce hero: real work showcase
Title on the left, a 3D laptop / tablet / phone on the right showing
the published web projects scrolling (main.js v65 block). Replaces
the radar sweep and the big background word on this page only.
================================================================ */
body[data-page="websites-ecommerce"] .service-hero.wd-hero {
text-align: left;
padding: 120px 5vw 90px;
background-image:
radial-gradient(circle at 76% 48%, rgba(0,229,255,.16) 0%, transparent 55%),
radial-gradient(circle at 8% 92%, rgba(255,215,0,.09) 0%, transparent 45%),
linear-gradient(rgba(0,229,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,229,255,.045) 1px, transparent 1px) !important;
background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px !important;
}
body[data-page="websites-ecommerce"] .service-hero.wd-hero::after { content: none !important; animation: none !important; display: none !important; }
body[data-page="websites-ecommerce"] .service-hero.wd-hero::before {
background: linear-gradient(180deg, rgba(3,5,9,.7) 0%, transparent 30%, transparent 70%, rgba(3,5,9,.9) 100%);
}
.wd-hero-grid { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 70px; align-items: center; }
.wd-hero .hero-cta-bar { gap: 12px !important; flex-wrap: wrap; }
.wd-hero .hero-cta-bar .cyber-btn { white-space: nowrap; padding: 14px 18px !important; font-size: .74rem !important; }
.wd-copy { max-width: 580px; }
.wd-hero .service-hero-tag { margin-bottom: 16px; }
.wd-hero .service-title { font-size: clamp(2.1rem, 4.2vw, 3.6rem) !important; line-height: 1.08; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }
.wd-hero .service-title span { color: var(--neon-cyan); text-shadow: 0 0 22px rgba(0,229,255,.45); }
.wd-hero .service-lead { margin: 0 0 30px !important; max-width: 520px; }
.wd-hero .hero-cta-bar { justify-content: flex-start !important; }
.wd-hero .wd-work-btn { background: var(--neon-cyan) !important; color: #021018 !important; box-shadow: 0 0 22px rgba(0,229,255,.45); }
/* Devices */
.wd-stage { position: relative; width: 100%; aspect-ratio: 1.35; perspective: 1400px; margin-left: 20px; }
.wd-rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-16deg) rotateX(8deg); transition: transform .25s ease-out; }
.wd-lid { background: #0c1422; border: 1px solid rgba(0,229,255,.5); border-radius: 14px 14px 4px 4px; padding: 12px 12px 16px; box-shadow: 0 30px 80px rgba(0,0,0,.8), 0 0 40px rgba(0,229,255,.18); }
.wd-scr { position: relative; overflow: hidden; border-radius: 4px; background: #0a1322; aspect-ratio: 16 / 10; }
.wd-scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .9s ease; }
.wd-scr img.on { opacity: 1; animation: wdScroll 7s ease-in-out forwards; }
@keyframes wdScroll { 0%, 8% { object-position: 50% 0; } 92%, 100% { object-position: 50% 100%; } }
.wd-laptop { position: absolute; left: 4%; top: 8%; width: 80%; }
.wd-base { height: 16px; margin: 0 -7%; background: linear-gradient(#1b2638, #0a111c); border-radius: 0 0 18px 18px; border: 1px solid rgba(0,229,255,.3); }
.wd-tablet { position: absolute; right: 0; top: 30%; width: 30%; transform: translateZ(90px); }
.wd-tablet .wd-lid { border-radius: 16px; padding: 10px; }
.wd-tablet .wd-scr { aspect-ratio: 3 / 4; }
.wd-phone { position: absolute; left: 0; bottom: 0; width: 18%; transform: translateZ(150px); }
.wd-phone .wd-lid { border-radius: 20px; padding: 7px; border-color: rgba(255,215,0,.6); box-shadow: 0 20px 50px rgba(0,0,0,.8), 0 0 30px rgba(255,215,0,.2); }
.wd-phone .wd-scr { aspect-ratio: 9 / 19; border-radius: 14px; }
.wd-chip { position: absolute; right: 6%; bottom: -2%; transform: translateZ(200px); display: flex; gap: 10px; align-items: center; padding: 8px 16px; border-radius: 30px;
background: rgba(3,5,9,.88); border: 1px solid rgba(0,229,255,.5); color: #e6edf6; text-decoration: none; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 1px; white-space: nowrap; transition: border-color .3s; }
.wd-chip:hover { border-color: var(--neon-yellow); }
.wd-chip i { width: 8px; height: 8px; border-radius: 50%; background: #2ee66b; box-shadow: 0 0 10px #2ee66b; flex: none; }
.wd-chip small { color: #9fb0c6; font-weight: 500; }
.wd-dots { position: absolute; left: 0; bottom: -34px; display: flex; gap: 6px; }
.wd-dots b { width: 18px; height: 4px; border-radius: 3px; background: rgba(0,229,255,.25); transition: .4s; }
.wd-dots b.on { width: 34px; background: var(--neon-cyan); }
@media (max-width: 960px) {
body[data-page="websites-ecommerce"] .service-hero.wd-hero { text-align: center; padding: 100px 16px 70px; }
.wd-hero-grid { grid-template-columns: 1fr; gap: 30px; }
.wd-copy { max-width: none; }
.wd-hero .service-lead { margin: 0 auto 26px !important; }
.wd-hero .hero-cta-bar { justify-content: center !important; }
.wd-stage { width: min(84%, 600px); margin: 10px auto 34px; }
.wd-hero .hero-cta-bar .cyber-btn { white-space: normal; }
.wd-rig { transform: rotateY(-6deg) rotateX(4deg); }
.wd-chip { right: 0; font-size: .85rem; padding: 6px 12px; }
.wd-dots { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 520px) { .wd-chip small { display: none; } }
@media (prefers-reduced-motion: reduce) { .wd-scr img.on { animation: none; } .wd-rig { transition: none; } }
/* ================================================================
v66 — Header line animation, web hero tweaks, "show in header" admin
================================================================ */
/* The cyan / gold line under the site header now flows to the left */
.cyber-navbar { border-bottom: 0 !important; border-image: none !important; }
.cyber-navbar::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: none;
background: linear-gradient(90deg, #00E5FF, #FFD700, #00E5FF);
background-size: 50% 100%; background-repeat: repeat-x;
animation: mfNavLine 6s linear infinite;
}
@keyframes mfNavLine { from { background-position: 0 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .cyber-navbar::after { animation: none; } }
/* Admin: header showcase badge + toggle */
.pf-hero-badge { display: inline-block; margin-left: 8px; background: rgba(0,229,255,.15); color: #00E5FF; border: 1px solid rgba(0,229,255,.5); font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 2px 7px; border-radius: 3px; vertical-align: middle; }
.pf-hero-badge.warn { color: #ff9f43; border-color: rgba(255,159,67,.6); background: rgba(255,159,67,.1); }
.mini-btn.pf-hero-on { border-color: #00E5FF !important; background: rgba(0,229,255,.18) !important; box-shadow: 0 0 10px rgba(0,229,255,.4); }
/* Web hero: devices centred vertically in the section (the 3D tilt, label and dots made them sit low) */
body[data-page="websites-ecommerce"] .service-hero.wd-hero { padding-top: 105px; padding-bottom: 105px; }
@media (min-width: 961px) { .wd-stage { transform: translateY(-7%); } }
/* ================================================================
v67 — Admin portfolio: clear on / off switches (★ featured, screen = page header, eye = live)
================================================================ */
.pf-tog { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 4px; padding: 0; border-radius: 6px; cursor: pointer; vertical-align: middle;
border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: #4d5b6e; transition: all .2s; position: relative; }
.pf-tog svg { width: 18px; height: 18px; display: block; }
.pf-tog.off::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; background: #4d5b6e; transform: rotate(-35deg); border-radius: 2px; }
.pf-tog.off:hover { color: #9fb0c6; border-color: rgba(255,255,255,.35); }
.pf-tog.on { color: #00E5FF; border-color: #00E5FF; background: rgba(0,229,255,.16); box-shadow: 0 0 12px rgba(0,229,255,.45); }
.pf-tog.on.gold { color: #FFD700; border-color: #FFD700; background: rgba(255,215,0,.14); box-shadow: 0 0 12px rgba(255,215,0,.45); }
.pf-tog.on.green { color: #00FF88; border-color: #00FF88; background: rgba(0,255,136,.12); box-shadow: 0 0 12px rgba(0,255,136,.4); }
.pf-tog:focus-visible { outline: 2px solid #FFD700; outline-offset: 2px; }
.pf-actions { white-space: nowrap; }
.pf-legend .lg-ico { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; color: #00E5FF; }
.pf-legend .lg-ico.gold { color: #FFD700; } .pf-legend .lg-ico.green { color: #00FF88; }
.pf-legend .lg-ico svg { width: 16px; height: 16px; }
.pf-legend .lg-on { color: #00E5FF; } .pf-legend .lg-off { color: #6b7a8e; }
/* Web header with no projects switched on: text only, centred */
body[data-page="websites-ecommerce"] .wd-hero-solo .wd-hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
body[data-page="websites-ecommerce"] .wd-hero-solo .service-lead { margin: 0 auto 30px !important; }
body[data-page="websites-ecommerce"] .wd-hero-solo .hero-cta-bar { justify-content: center !important; }
/* ================================================================
v68 — Web hero devices with real thickness: 8–10 stacked layers behind
each device (translateZ) form solid edges when the devices tilt.
================================================================ */
.wd-laptop, .wd-tablet, .wd-phone, .wd-lid, .wd-base { transform-style: preserve-3d; }
.wd-lid, .wd-base { position: relative; }
.wd-lid > .wd-scr { transform: translateZ(1px); }
.wd-depth { position: absolute; inset: -1px; border-radius: inherit; transform-style: preserve-3d; pointer-events: none; }
.wd-depth i { position: absolute; inset: 0; border-radius: inherit;
transform: translateZ(calc(var(--i) * var(--wd-step, 1.4px) * -1));
background: linear-gradient(135deg, #1a2a40, #070c16);
border: 1px solid rgba(0,229,255,calc(.55 - var(--i) * .04)); }
.wd-depth i:last-child { background: #04070d; border-color: rgba(0,229,255,.12); box-shadow: 0 30px 60px rgba(0,0,0,.7); }
.wd-laptop .wd-lid { --wd-step: 1.4px; } /* ~14 px thick lid */
.wd-laptop .wd-base { --wd-step: 1.5px; } /* ~12 px thick base */
.wd-tablet { --wd-step: 1.2px; } /* ~10 px */
.wd-phone { --wd-step: 1.3px; } /* ~10 px, gold edges */
.wd-phone .wd-depth i { border-color: rgba(255,215,0,calc(.6 - var(--i) * .05)); background: linear-gradient(135deg, #2a2412, #0a0906); }
.wd-base .wd-depth i { background: linear-gradient(180deg, #1b2638, #0a111c); }
@media (prefers-reduced-motion: reduce) { .wd-depth { display: none; } }
/* ================================================================
v69 — Contact page: hero "We're on the Rock", what-happens-next
steps, smarter form (service tiles, follow-up questions, pills)
================================================================ */
.ct-hero { position: relative; overflow: hidden; padding: 90px 5vw 80px; border-bottom: 2px solid var(--neon-cyan);
background: radial-gradient(circle at 72% 50%, rgba(0,229,255,.14), transparent 55%), radial-gradient(circle at 5% 95%, rgba(255,215,0,.07), transparent 45%), #030509; }
.ct-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(rgba(0,229,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,.04) 1px, transparent 1px); background-size: 48px 48px; }
.ct-hero-grid { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 50px; align-items: center; }
.ct-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.08; text-transform: uppercase; color: #fff; margin: 14px 0 18px; letter-spacing: 1px; }
.ct-title span { color: var(--neon-cyan); text-shadow: 0 0 22px rgba(0,229,255,.45); }
.ct-lead { color: #9fb0c6; font-size: 1.08rem; line-height: 1.65; max-width: 540px; margin: 0; }
.ct-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.ct-btn { font-family: 'Orbitron', sans-serif; font-size: .74rem; letter-spacing: 1.5px; padding: 14px 18px; border-radius: 6px; border: 1px solid; text-decoration: none; transition: all .25s; white-space: nowrap; }
.ct-btn-green { border-color: #2ee66b; color: #2ee66b; background: rgba(46,230,107,.07); }
.ct-btn-gold { border-color: var(--neon-yellow); color: var(--neon-yellow); background: rgba(255,215,0,.07); }
.ct-btn-cyan { border-color: var(--neon-cyan); color: var(--neon-cyan); background: rgba(0,229,255,.07); }
.ct-btn:hover { transform: translateY(-2px); box-shadow: 0 0 18px currentColor; }
.ct-status { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 1px; color: #e6edf6;
background: rgba(3,5,9,.7); border: 1px solid rgba(46,230,107,.5); padding: 7px 14px; border-radius: 30px; }
.ct-status i { width: 9px; height: 9px; border-radius: 50%; background: #2ee66b; box-shadow: 0 0 10px #2ee66b; animation: ctBlink 1.6s infinite; flex: none; }
.ct-status small { color: #9fb0c6; font-weight: 500; }
.ct-status.closed { border-color: rgba(255,159,67,.55); }
.ct-status.closed i { background: #ff9f43; box-shadow: 0 0 10px #ff9f43; }
@keyframes ctBlink { 50% { opacity: .35; } }
.ct-map { position: relative; width: 100%; max-width: 540px; justify-self: center; aspect-ratio: 1; }
.ct-map svg { width: 100%; height: 100%; overflow: visible; display: block; }
.ct-ring { fill: none; stroke: #00E5FF; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ctRing 3.6s ease-out infinite; }
.ct-ring:nth-of-type(2) { animation-delay: 1.2s; } .ct-ring:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes ctRing { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(3); } }
.ct-pin { transform-box: fill-box; transform-origin: bottom; animation: ctBob 2.4s ease-in-out infinite; }
@keyframes ctBob { 50% { transform: translateY(-6px); } }
.ct-van { offset-path: path('M252 482 C 240 420, 262 330, 300 262'); animation: ctDrive 5s ease-in-out infinite; }
@keyframes ctDrive { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.ct-card { position: absolute; right: 0; top: 6%; background: rgba(3,5,9,.85); border: 1px solid rgba(0,229,255,.5); border-radius: 10px; padding: 12px 16px; font-family: 'Rajdhani', sans-serif; box-shadow: 0 0 24px rgba(0,229,255,.2); }
.ct-card b { font-family: 'Orbitron', sans-serif; color: var(--neon-cyan); font-size: 1.3rem; display: block; }
.ct-card span { color: #9fb0c6; letter-spacing: 1px; font-size: .9rem; }
.ct-card-l { right: auto; left: 0; top: auto; bottom: 18%; border-color: rgba(255,215,0,.5); }
.ct-card-l b { color: var(--neon-yellow); }
/* What happens next */
.ct-steps-wrap { padding: 60px 24px 10px; }
.ct-steps { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.ct-step { position: relative; padding: 26px 22px; border-radius: 14px; border: 1.5px solid rgba(0,229,255,.4);
background: radial-gradient(circle at 0% 0%, rgba(0,229,255,.18), transparent 55%), linear-gradient(145deg, #16305c, #0b1730 45%, #04070f); }
.ct-step:nth-child(2) { border-color: rgba(255,215,0,.5); background: radial-gradient(circle at 0% 0%, rgba(255,215,0,.16), transparent 55%), linear-gradient(145deg, #2a2a18, #121424 45%, #04070f); }
.ct-step span { font-family: 'Orbitron', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--neon-cyan); opacity: .9; }
.ct-step:nth-child(2) span { color: var(--neon-yellow); }
.ct-step h3 { font-family: 'Orbitron', sans-serif; font-size: 1rem; letter-spacing: 1px; color: #fff; margin: 10px 0 8px; text-transform: uppercase; }
.ct-step p { color: #a3b1c6; margin: 0; line-height: 1.6; }
.ct-step:not(:last-child)::after { content: "→"; position: absolute; right: -17px; top: 50%; transform: translateY(-50%); color: var(--neon-cyan); font-size: 1.2rem; z-index: 1; }
/* Smarter form */
.ct-form-intro { color: #9fb0c6; margin: 8px 0 0; }
.ct-fs { border: 1px solid rgba(0,229,255,.2); border-radius: 12px; padding: 18px 18px 8px; margin: 0 0 20px; background: rgba(0,229,255,.02); min-width: 0; }
.ct-fs legend { font-family: 'Orbitron', sans-serif; font-size: .8rem; letter-spacing: 1.5px; color: var(--neon-yellow); padding: 0 8px; text-transform: uppercase; }
.ct-fs legend small { color: #9fb0c6; text-transform: none; font-family: 'Inter', sans-serif; letter-spacing: 0; }
.ct-svc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.ct-svc input, .ct-pill input { position: absolute; opacity: 0; pointer-events: none; }
.ct-svc span { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 6px; border-radius: 10px; cursor: pointer; height: 100%;
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.02); color: #c9d4e3; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: .92rem; line-height: 1.15; transition: all .2s; }
.ct-svc span i { font-style: normal; font-size: 1.5rem; }
.ct-svc:hover span { border-color: rgba(0,229,255,.5); }
.ct-svc input:checked + span { border-color: var(--neon-cyan); background: rgba(0,229,255,.14); color: #fff; box-shadow: 0 0 16px rgba(0,229,255,.35); }
.ct-svc input:focus-visible + span, .ct-pill input:focus-visible + span { outline: 2px solid var(--neon-yellow); outline-offset: 2px; }
.ct-qs { animation: ctIn .3s ease; }
@keyframes ctIn { from { opacity: 0; transform: translateY(-6px); } }
.ct-q { margin: 0 0 14px; }
.ct-q-label { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .5px; color: #e6edf6; margin-bottom: 8px; }
.ct-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-pill { position: relative; }
.ct-pill span { display: inline-block; padding: 8px 14px; border-radius: 30px; cursor: pointer; border: 1px solid rgba(255,255,255,.15); color: #c9d4e3; font-size: .9rem; transition: all .2s; }
.ct-pill:hover span { border-color: rgba(255,215,0,.6); }
.ct-pill input:checked + span { border-color: var(--neon-yellow); background: rgba(255,215,0,.14); color: #fff; box-shadow: 0 0 12px rgba(255,215,0,.3); }
.ct-form label small { color: #9fb0c6; font-weight: 400; }
.ct-privacy { color: #7f8ea3; font-size: .85rem; text-align: center; margin: 10px 0 0; }
@media (max-width: 1100px) { .ct-svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
.ct-hero { padding: 60px 16px 60px; text-align: center; }
.ct-hero-grid { grid-template-columns: 1fr; gap: 30px; }
.ct-lead { margin: 0 auto; }
.ct-btns { justify-content: center; }
.ct-map { max-width: 420px; }
.ct-steps { grid-template-columns: 1fr; }
.ct-step:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -19px; transform: translateX(50%); }
}
@media (max-width: 520px) { .ct-svc-grid { grid-template-columns: repeat(2, 1fr); } .ct-card { font-size: .85rem; padding: 8px 12px; } .ct-card b { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .ct-ring, .ct-pin, .ct-van, .ct-status i { animation: none; } .ct-van { display: none; } }
.ct-steps-head { max-width: 1180px; margin: 0 auto 16px; }
/* ================================================================
v70 — Opening hours in the footer + contact hero, full-width contact form
================================================================ */
.footer-hours { margin-top: 14px; color: #c9d4e3; font-size: .92rem; line-height: 1.5; }
.footer-hours span { display: block; font-family: 'Orbitron', sans-serif; font-size: .7rem; letter-spacing: 2px; color: var(--neon-yellow); margin-bottom: 4px; text-transform: uppercase; }
.ct-hours { margin-top: 10px; color: #9fb0c6; font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: .5px; }
.ct-form-wrap { max-width: 1180px; margin: 0 auto; }
.ct-form-wrap .contact-box-wrapper { max-width: 100% !important; }
.hours-form .form-row { margin-bottom: 10px; }
.hours-form .form-col > label:only-child { margin: 0 0 12px; color: #e6edf6; font-weight: 700; }
/* v70 — "View all features" list under the featured portfolio project */
.pf-feats { margin: 4px 0 18px; border: 1px solid rgba(0,229,255,.3); border-radius: 10px; background: rgba(3,5,9,.45); }
.pf-feats summary { cursor: pointer; list-style: none; padding: 10px 14px; font-family: 'Orbitron', sans-serif; font-size: .72rem; letter-spacing: 1.5px; color: var(--neon-cyan); display: flex; justify-content: space-between; }
.pf-feats summary::-webkit-details-marker { display: none; }
.pf-feats[open] summary span { transform: rotate(180deg); }
.pf-feats summary span { transition: transform .2s; }
.pf-feats ul { margin: 0; padding: 4px 16px 14px 32px; max-height: 320px; overflow-y: auto; }
.pf-feats li { color: #c9d4e3; font-size: .9rem; line-height: 1.5; margin: 0 0 7px; }
.pf-feats li b { color: #fff; }
.pf-feats li::marker { color: var(--neon-yellow); }