/* =============================================================================
   CELLFIRE TEMPLATE — template.css
   Dark high-tech portal theme for cellfire.io
   Palette: deep navy + cyan signal accents + signal green
   ============================================================================= */

/* -----------------------------------------------------------------------
   CSS Custom Properties
   ----------------------------------------------------------------------- */
:root {
	/* Background layers — deep navy */
	--cf-bg:          #070c14;
	--cf-bg-1:        #0d1421;
	--cf-bg-2:        #111d2e;
	--cf-bg-3:        #162338;
	--cf-bg-raised:   #1c2d42;

	/* Accent — cyan */
	--cf-accent:      #00c8ff;
	--cf-accent-2:    #38d9ff;
	--cf-accent-dim:  rgba(0, 200, 255, 0.10);
	--cf-accent-glow: rgba(0, 200, 255, 0.22);

	/* Signal green */
	--cf-signal:      #00e676;
	--cf-signal-dim:  rgba(0, 230, 118, 0.10);
	--cf-signal-glow: rgba(0, 230, 118, 0.20);

	/* Text */
	--cf-text:        #e8f0fe;
	--cf-text-2:      #8899b3;
	--cf-text-3:      #3d5068;

	/* Borders */
	--cf-border:      #162338;
	--cf-border-2:    #1e3050;

	/* Semantic */
	--cf-success:     #00e676;
	--cf-warning:     #ffba00;
	--cf-danger:      #ff4757;

	/* Radii */
	--cf-r-sm:        4px;
	--cf-r-md:        8px;
	--cf-r-lg:        12px;
	--cf-r-xl:        18px;
	--cf-r-full:      9999px;

	/* Shadows */
	--cf-shadow-sm:   0 1px 4px rgba(0,0,0,.6);
	--cf-shadow-md:   0 4px 20px rgba(0,0,0,.7);
	--cf-shadow-lg:   0 8px 48px rgba(0,0,0,.8);
	--cf-shadow-acc:  0 0 32px rgba(0,200,255,.22);
	--cf-shadow-sig:  0 0 24px rgba(0,230,118,.20);

	/* Layout */
	--cf-header-h:    64px;
	--cf-max-w:       1160px;

	/* Motion */
	--cf-ease:        0.18s ease;
	--cf-ease-long:   0.35s ease;
}

/* -----------------------------------------------------------------------
   Reset & Base
   ----------------------------------------------------------------------- */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	text-size-adjust: 100%;
}

body.cellfire-body {
	background-color: var(--cf-bg);
	color: var(--cf-text);
	font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.65;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--cf-accent);
	text-decoration: none;
	transition: color var(--cf-ease);
}
a:hover { color: var(--cf-accent-2); }

img, svg { max-width: 100%; height: auto; display: block; }

ul { list-style: none; }

/* Skip link */
.skip-link {
	position: absolute;
	top: -100%;
	left: 12px;
	background: var(--cf-accent);
	color: var(--cf-bg);
	padding: 8px 16px;
	border-radius: 0 0 var(--cf-r-sm) var(--cf-r-sm);
	font-size: 13px;
	font-weight: 600;
	z-index: 10000;
	transition: top var(--cf-ease);
}
.skip-link:focus { top: 0; color: var(--cf-bg); }

/* -----------------------------------------------------------------------
   Layout Utility
   ----------------------------------------------------------------------- */
.cf-container {
	max-width: var(--cf-max-w);
	margin: 0 auto;
	padding: 0 24px;
}

/* -----------------------------------------------------------------------
   Banner Strip
   ----------------------------------------------------------------------- */
.cf-banner {
	background: var(--cf-bg-2);
	border-bottom: 1px solid var(--cf-border);
	padding: 6px 0;
	font-size: 12px;
	color: var(--cf-text-2);
	text-align: center;
	letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------
   Header & Navigation
   ----------------------------------------------------------------------- */
.cf-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	height: var(--cf-header-h);
	display: flex;
	align-items: center;
	background: rgba(7, 12, 20, 0.88);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--cf-border);
	transition: background var(--cf-ease-long), border-color var(--cf-ease-long);
}
.cf-header.scrolled {
	background: rgba(7, 12, 20, 0.97);
	border-color: var(--cf-border-2);
}

.cf-nav {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 100%;
	width: 100%;
}

/* Logo */
.cf-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	text-decoration: none;
}
.cf-logo-img { height: 32px; width: auto; }
.cf-logo-text {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.4px;
	line-height: 1;
}
.cf-logo-cell  { color: var(--cf-text); }
.cf-logo-fire  { color: var(--cf-accent); }
.cf-logo-io    { color: var(--cf-text-3); font-size: 15px; }

/* Nav menu container */
.cf-nav-menu {
	flex: 1;
	display: flex;
	align-items: center;
}

/* Override Joomla menu module output */
.cf-nav-menu .nav,
.cf-nav-menu > ul,
.cf-nav-menu .mod-menu {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cf-nav-menu li { position: relative; }

.cf-nav-menu a {
	display: block;
	padding: 7px 13px;
	font-size: 13px;
	font-weight: 500;
	color: var(--cf-text-2);
	border-radius: var(--cf-r-sm);
	transition: background var(--cf-ease), color var(--cf-ease);
	white-space: nowrap;
	text-decoration: none;
}
.cf-nav-menu a:hover,
.cf-nav-menu .active > a,
.cf-nav-menu .current > a {
	color: var(--cf-text);
	background: var(--cf-bg-raised);
}
.cf-nav-menu .current > a,
.cf-nav-menu .active.current > a { color: var(--cf-accent); }

/* Dropdown */
.cf-nav-menu ul ul,
.cf-nav-menu .dropdown-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border-2);
	border-radius: var(--cf-r-md);
	padding: 6px;
	min-width: 170px;
	box-shadow: var(--cf-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: all var(--cf-ease);
	z-index: 200;
	list-style: none;
}
.cf-nav-menu li:hover > ul,
.cf-nav-menu li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Right side */
.cf-nav-right {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

/* Joomla login/register button overrides inside nav */
.cf-nav-user .btn,
.cf-nav-user a.btn,
.cf-nav-user button {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--cf-r-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--cf-ease);
	text-decoration: none;
	line-height: 1;
}
.cf-nav-user .btn-primary,
.cf-nav-user a.btn-primary {
	background: var(--cf-accent);
	color: var(--cf-bg) !important;
	border-color: var(--cf-accent);
}
.cf-nav-user .btn-primary:hover { background: var(--cf-accent-2); border-color: var(--cf-accent-2); }
.cf-nav-user .btn-secondary,
.cf-nav-user a.btn-secondary {
	background: transparent;
	color: var(--cf-text-2);
	border-color: var(--cf-border-2);
}
.cf-nav-user .btn-secondary:hover { color: var(--cf-text); border-color: var(--cf-text-3); }

/* Search in nav */
.cf-nav-search input[type="search"],
.cf-nav-search input[type="text"] {
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border-2);
	color: var(--cf-text);
	font-size: 13px;
	padding: 7px 12px;
	border-radius: var(--cf-r-sm);
	outline: none;
	width: 180px;
	transition: border-color var(--cf-ease), width var(--cf-ease-long);
}
.cf-nav-search input:focus { border-color: var(--cf-accent); width: 220px; }

/* Mobile hamburger */
.cf-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 6px;
	border-radius: var(--cf-r-sm);
	margin-left: auto;
}
.cf-hamburger span {
	display: block;
	height: 2px;
	background: var(--cf-text);
	border-radius: 2px;
	transition: transform var(--cf-ease), opacity var(--cf-ease);
	transform-origin: center;
}
.cf-hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.cf-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cf-hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* -----------------------------------------------------------------------
   Hero Section
   ----------------------------------------------------------------------- */
.cf-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: calc(100vh - var(--cf-header-h));
	padding: 80px 0 100px;
	overflow: hidden;
}

/* Animated grid background */
.cf-hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 200, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 200, 255, 0.04) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
	pointer-events: none;
}

/* Ambient glows */
.cf-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(90px);
}
.cf-glow--1 {
	width: 640px;
	height: 640px;
	top: -200px;
	left: -200px;
	background: radial-gradient(circle, rgba(0, 200, 255, 0.09) 0%, transparent 70%);
}
.cf-glow--2 {
	width: 500px;
	height: 500px;
	bottom: -80px;
	right: -120px;
	background: radial-gradient(circle, rgba(0, 230, 118, 0.07) 0%, transparent 70%);
}

.cf-hero .cf-container { position: relative; z-index: 2; }

.cf-hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.cf-hero-content { max-width: 520px; }

.cf-hero-badge {
	display: inline-block;
	padding: 4px 14px;
	background: var(--cf-accent-dim);
	border: 1px solid rgba(0, 200, 255, 0.28);
	color: var(--cf-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	border-radius: var(--cf-r-full);
	margin-bottom: 22px;
}

.cf-hero-title {
	font-size: clamp(38px, 5.5vw, 62px);
	font-weight: 700;
	letter-spacing: -1.5px;
	line-height: 1.08;
	margin-bottom: 22px;
	color: var(--cf-text);
}
.cf-accent { color: var(--cf-accent); }
.cf-accent-sig { color: var(--cf-signal); }

.cf-hero-subtitle {
	font-size: 17px;
	color: var(--cf-text-2);
	line-height: 1.75;
	margin-bottom: 38px;
	max-width: 460px;
}

.cf-hero-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---- Signal visual ---- */
.cf-hero-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 340px;
}

.cf-signal {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cf-signal-ring {
	position: absolute;
	border: 1px solid var(--cf-accent);
	border-radius: 50%;
	animation: cf-pulse 3.6s ease-out infinite;
}
.cf-signal-ring--1 { width: 90px;  height: 90px;  animation-delay: 0s;    opacity: 0.7; }
.cf-signal-ring--2 { width: 170px; height: 170px; animation-delay: 0.9s;  opacity: 0.4; }
.cf-signal-ring--3 { width: 260px; height: 260px; animation-delay: 1.8s;  opacity: 0.18; }

@keyframes cf-pulse {
	0%   { transform: scale(0.75); opacity: 0; }
	25%  { opacity: 1; }
	100% { transform: scale(1.25); opacity: 0; }
}

.cf-signal-core {
	width: 64px;
	height: 64px;
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 0 18px rgba(0, 200, 255, 0.65));
}

/* Floating stat chips */
.cf-hero-stat {
	position: absolute;
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border-2);
	border-radius: var(--cf-r-md);
	padding: 10px 16px;
	box-shadow: var(--cf-shadow-md);
	animation: cf-float 4s ease-in-out infinite;
}
.cf-hero-stat--tl { top: 32px;    left: 0; animation-delay: 0s; }
.cf-hero-stat--br { bottom: 32px; right: 0; animation-delay: 2s; }

@keyframes cf-float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-8px); }
}

.cf-stat-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cf-text-3);
	margin-bottom: 2px;
}
.cf-stat-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--cf-accent);
	font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------- */
.cf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--cf-r-md);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--cf-ease);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}

.cf-btn--primary {
	background: var(--cf-accent);
	color: var(--cf-bg) !important;
	border-color: var(--cf-accent);
}
.cf-btn--primary:hover {
	background: var(--cf-accent-2);
	border-color: var(--cf-accent-2);
	color: var(--cf-bg) !important;
	transform: translateY(-1px);
	box-shadow: 0 0 28px rgba(0,200,255,.35), 0 4px 16px rgba(0,0,0,.4);
}

.cf-btn--ghost {
	background: transparent;
	color: var(--cf-text);
	border-color: var(--cf-border-2);
}
.cf-btn--ghost:hover {
	border-color: var(--cf-accent);
	color: var(--cf-accent);
	transform: translateY(-1px);
	box-shadow: 0 0 16px rgba(0,200,255,.12);
}

.cf-btn--full { width: 100%; }

/* -----------------------------------------------------------------------
   Section Shared Styles
   ----------------------------------------------------------------------- */
.cf-section { padding: 100px 0; }

.cf-section-head {
	text-align: center;
	margin-bottom: 60px;
}
.cf-section-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--cf-accent);
	margin-bottom: 14px;
}
.cf-section-head h2 {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	letter-spacing: -0.8px;
	margin-bottom: 14px;
	line-height: 1.15;
}
.cf-section-head p {
	font-size: 17px;
	color: var(--cf-text-2);
	max-width: 480px;
	margin: 0 auto;
}

/* -----------------------------------------------------------------------
   Products Section
   ----------------------------------------------------------------------- */
.cf-products {
	background: var(--cf-bg-1);
	border-top: 1px solid var(--cf-border);
	border-bottom: 1px solid var(--cf-border);
}

.cf-products-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.cf-product-card {
	background: var(--cf-bg);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-r-xl);
	padding: 32px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	transition: border-color var(--cf-ease), transform var(--cf-ease-long), box-shadow var(--cf-ease-long);
}
.cf-product-card:hover {
	border-color: rgba(0, 200, 255, 0.45);
	transform: translateY(-5px);
	box-shadow: 0 0 40px rgba(0,200,255,.14), var(--cf-shadow-lg);
}
.cf-product-card--featured {
	border-color: rgba(0, 200, 255, 0.4);
	background: linear-gradient(160deg, var(--cf-bg-2) 0%, var(--cf-bg) 100%);
}
.cf-product-accent-bar {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--cf-accent), var(--cf-accent-2));
	border-radius: var(--cf-r-xl) var(--cf-r-xl) 0 0;
}

.cf-product-icon {
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
}
.cf-product-icon svg { width: 100%; height: 100%; }

.cf-product-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--cf-text-2);
	background: var(--cf-bg-raised);
	border-radius: var(--cf-r-full);
	padding: 3px 10px;
	margin-bottom: 14px;
	align-self: flex-start;
}
.cf-product-tag--accent {
	color: var(--cf-accent);
	background: var(--cf-accent-dim);
}

.cf-product-card h3 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.3px;
	margin-bottom: 10px;
}
.cf-product-card > p {
	font-size: 14px;
	color: var(--cf-text-2);
	line-height: 1.7;
	margin-bottom: 20px;
}

.cf-feature-list {
	margin-bottom: 26px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
}
.cf-feature-list li {
	font-size: 13px;
	color: var(--cf-text-2);
	padding-left: 20px;
	position: relative;
}
.cf-feature-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--cf-signal);
	font-weight: 700;
}

.cf-product-link {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--cf-accent);
	margin-top: auto;
	transition: color var(--cf-ease), gap var(--cf-ease);
	gap: 4px;
}
.cf-product-link:hover { color: var(--cf-accent-2); gap: 8px; }

/* -----------------------------------------------------------------------
   Pricing Section
   ----------------------------------------------------------------------- */
.cf-pricing {
	background: var(--cf-bg);
}

.cf-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: start;
}

.cf-pricing-card {
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-r-xl);
	padding: 32px;
	position: relative;
	transition: border-color var(--cf-ease), box-shadow var(--cf-ease-long);
}
.cf-pricing-card:hover { border-color: var(--cf-border-2); }
.cf-pricing-card--featured {
	border-color: rgba(0, 200, 255, 0.4);
	box-shadow: 0 0 40px rgba(0,200,255,.14), var(--cf-shadow-acc);
	transform: scale(1.03);
	position: relative;
	z-index: 1;
}
.cf-pricing-card--featured::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--cf-accent), var(--cf-accent-2));
	border-radius: var(--cf-r-xl) var(--cf-r-xl) 0 0;
}

.cf-pricing-popular {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--cf-accent);
	margin-bottom: 10px;
}
.cf-pricing-tier {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 18px;
}
.cf-pricing-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 10px;
}
.cf-price-amount {
	font-size: 42px;
	font-weight: 700;
	letter-spacing: -1.5px;
	color: var(--cf-text);
}
.cf-price-period {
	font-size: 15px;
	color: var(--cf-text-2);
}
.cf-pricing-desc {
	font-size: 13px;
	color: var(--cf-text-2);
	margin-bottom: 24px;
	line-height: 1.6;
}

.cf-pricing-features {
	margin-bottom: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cf-pricing-features li {
	font-size: 13px;
	color: var(--cf-text-2);
	padding-left: 20px;
	position: relative;
}
.cf-pricing-features li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--cf-signal);
	font-weight: 700;
}

/* -----------------------------------------------------------------------
   Feature Modules
   ----------------------------------------------------------------------- */
.cf-features {
	background: var(--cf-bg-1);
	border-top: 1px solid var(--cf-border);
	border-bottom: 1px solid var(--cf-border);
}
.cf-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.cf-feature-block {
	background: var(--cf-bg);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-r-lg);
	padding: 28px;
}

/* -----------------------------------------------------------------------
   Main Content Area
   ----------------------------------------------------------------------- */
.cf-main {
	flex: 1;
	padding: 48px 0 72px;
}

.cf-breadcrumbs {
	margin-bottom: 28px;
}
.cf-breadcrumbs ol,
.cf-breadcrumbs .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13px;
	color: var(--cf-text-2);
	padding: 0;
	margin: 0;
	list-style: none;
}
.cf-breadcrumbs li + li::before {
	content: '/';
	margin-right: 6px;
	color: var(--cf-text-3);
}
.cf-breadcrumbs a { color: var(--cf-text-2); }
.cf-breadcrumbs a:hover { color: var(--cf-accent); }
.cf-breadcrumbs .active { color: var(--cf-text-3); }

.cf-content-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
.cf-content-layout--sidebar {
	grid-template-columns: 1fr 280px;
}

.cf-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* -----------------------------------------------------------------------
   Joomla Component / Form Overrides
   ----------------------------------------------------------------------- */

/* Alerts / messages */
.alert, div.alert {
	border-radius: var(--cf-r-md);
	padding: 13px 18px;
	margin-bottom: 16px;
	font-size: 14px;
	border: 1px solid transparent;
}
.alert-success { background: rgba(0,230,118,.08);  border-color: rgba(0,230,118,.3);  color: var(--cf-text); }
.alert-warning  { background: rgba(255,186,0,.08);  border-color: rgba(255,186,0,.3);  color: var(--cf-text); }
.alert-danger,
.alert-error    { background: rgba(255,71,87,.08);   border-color: rgba(255,71,87,.3);  color: var(--cf-text); }
.alert-info,
.alert-primary  { background: var(--cf-accent-dim); border-color: rgba(0,200,255,.3);  color: var(--cf-text); }

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
	width: 100%;
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border-2);
	border-radius: var(--cf-r-md);
	color: var(--cf-text);
	font-family: inherit;
	font-size: 14px;
	padding: 10px 14px;
	transition: border-color var(--cf-ease), box-shadow var(--cf-ease);
	outline: none;
	appearance: none;
}
input:focus,
textarea:focus,
select:focus {
	border-color: var(--cf-accent);
	box-shadow: 0 0 0 3px var(--cf-accent-dim);
}
input::placeholder, textarea::placeholder { color: var(--cf-text-3); }

label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--cf-text-2);
	margin-bottom: 6px;
}

.control-group { margin-bottom: 18px; }

/* Login page */
.login {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
}
.login .login-form {
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border-2);
	border-radius: var(--cf-r-xl);
	padding: 40px;
	width: 100%;
	max-width: 420px;
	box-shadow: var(--cf-shadow-lg);
}
.login-form h2,
.login-form .h2 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 28px;
	color: var(--cf-text);
}
.login-form .btn-primary,
.login-form button[type="submit"] {
	display: block;
	width: 100%;
	padding: 11px;
	background: var(--cf-accent);
	color: var(--cf-bg);
	font-weight: 700;
	font-size: 14px;
	border: none;
	border-radius: var(--cf-r-md);
	cursor: pointer;
	transition: background var(--cf-ease);
}
.login-form .btn-primary:hover,
.login-form button[type="submit"]:hover { background: var(--cf-accent-2); }

/* Joomla Cassiopeia Bootstrap table overrides */
.table {
	color: var(--cf-text);
	border-color: var(--cf-border);
}
.table th { color: var(--cf-text-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.table td { border-color: var(--cf-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.02); }
.table-hover > tbody > tr:hover > * { background-color: rgba(0,200,255,0.04); }

/* Pagination */
.pagination .page-link {
	background: var(--cf-bg-2);
	border-color: var(--cf-border-2);
	color: var(--cf-text-2);
}
.pagination .page-link:hover { background: var(--cf-bg-raised); color: var(--cf-accent); }
.pagination .page-item.active .page-link {
	background: var(--cf-accent);
	border-color: var(--cf-accent);
	color: var(--cf-bg);
}
.pagination .page-item.disabled .page-link { opacity: 0.4; }

/* -----------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------- */
.cf-footer {
	background: var(--cf-bg-1);
	border-top: 1px solid var(--cf-border);
	padding: 64px 0 32px;
}

.cf-footer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
	margin-bottom: 48px;
}

.cf-footer-col h3,
.cf-footer-col h4 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cf-text);
	margin-bottom: 16px;
}
.cf-footer-col ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cf-footer-col a {
	font-size: 14px;
	color: var(--cf-text-2);
	transition: color var(--cf-ease);
}
.cf-footer-col a:hover { color: var(--cf-accent); }
.cf-footer-col p {
	font-size: 14px;
	color: var(--cf-text-2);
	line-height: 1.7;
}

.cf-footer-rule {
	border: none;
	border-top: 1px solid var(--cf-border);
	margin: 0 0 28px;
}

.cf-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.cf-footer-logo {
	font-size: 17px;
	font-weight: 700;
}
.cf-footer-copy {
	font-size: 13px;
	color: var(--cf-text-2);
}
.cf-footer-legal {
	display: flex;
	gap: 20px;
}
.cf-footer-legal a {
	font-size: 13px;
	color: var(--cf-text-2);
	transition: color var(--cf-ease);
}
.cf-footer-legal a:hover { color: var(--cf-accent); }

/* -----------------------------------------------------------------------
   Sub-page Hero (product/info pages)
   ----------------------------------------------------------------------- */
.cf-page-hero {
	position: relative;
	padding: 80px 0 90px;
	background: var(--cf-bg-1);
	border-bottom: 1px solid var(--cf-border);
	overflow: hidden;
}
.cf-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 200, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 200, 255, 0.035) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse 100% 100% at 30% 50%, black 20%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 100% 100% at 30% 50%, black 20%, transparent 80%);
	pointer-events: none;
}
/* Glow blobs on sub-page heroes */
.cf-page-hero::after {
	content: '';
	position: absolute;
	width: 500px;
	height: 500px;
	top: -200px;
	right: -100px;
	background: radial-gradient(circle, rgba(0,200,255,.06) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	filter: blur(60px);
}
.cf-page-hero .cf-container { position: relative; z-index: 2; }
.cf-page-hero-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--cf-accent);
	margin-bottom: 14px;
}
.cf-page-hero h1 {
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 700;
	letter-spacing: -1.2px;
	line-height: 1.08;
	margin-bottom: 18px;
}
.cf-page-hero p {
	font-size: 17px;
	color: var(--cf-text-2);
	line-height: 1.75;
	max-width: 560px;
	margin-bottom: 32px;
}
.cf-page-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Page content sections */
.cf-page-wrap { max-width: 100%; }

.cf-page-section {
	padding: 88px 0;
}
.cf-page-section--alt {
	background: var(--cf-bg-1);
	border-top: 1px solid var(--cf-border);
	border-bottom: 1px solid var(--cf-border);
}

/* Two-col split layout */
.cf-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.cf-split--flip { direction: rtl; }
.cf-split--flip > * { direction: ltr; }

.cf-split-text h2 {
	font-size: clamp(24px, 3.5vw, 36px);
	font-weight: 700;
	letter-spacing: -0.5px;
	margin-bottom: 14px;
	line-height: 1.15;
}
.cf-split-text p {
	font-size: 15px;
	color: var(--cf-text-2);
	line-height: 1.75;
	margin-bottom: 20px;
}
.cf-split-visual {
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border-2);
	border-radius: var(--cf-r-xl);
	aspect-ratio: 4/3;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cf-text-3);
	font-size: 13px;
}

/* Icon feature rows */
.cf-icon-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.cf-icon-grid--3 { grid-template-columns: repeat(3, 1fr); }

.cf-icon-feature {
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-r-lg);
	padding: 28px;
	transition: border-color var(--cf-ease), box-shadow var(--cf-ease-long), transform var(--cf-ease-long);
}
.cf-icon-feature:hover {
	border-color: rgba(0,200,255,.40);
	box-shadow: 0 0 28px rgba(0,200,255,.10), var(--cf-shadow-md);
	transform: translateY(-3px);
}
.cf-icon-feature-icon {
	width: 44px;
	height: 44px;
	background: var(--cf-accent-dim);
	border: 1px solid rgba(0,200,255,.18);
	border-radius: var(--cf-r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	font-size: 20px;
}
.cf-icon-feature h4 {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 8px;
}
.cf-icon-feature p {
	font-size: 13px;
	color: var(--cf-text-2);
	line-height: 1.65;
}

/* Step list */
.cf-steps {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.cf-step {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}
.cf-step-num {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cf-accent-dim);
	border: 1px solid rgba(0,200,255,.30);
	color: var(--cf-accent);
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cf-step-body h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.cf-step-body p  { font-size: 13px; color: var(--cf-text-2); line-height: 1.65; }

/* Download cards */
.cf-dl-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.cf-dl-card {
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-r-xl);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: border-color var(--cf-ease), box-shadow var(--cf-ease-long), transform var(--cf-ease-long);
}
.cf-dl-card:hover {
	border-color: rgba(0,200,255,.40);
	box-shadow: 0 0 36px rgba(0,200,255,.12), var(--cf-shadow-lg);
	transform: translateY(-3px);
}
.cf-dl-card-icon {
	width: 48px;
	height: 48px;
	background: var(--cf-accent-dim);
	border-radius: var(--cf-r-md);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cf-dl-card h3 { font-size: 18px; font-weight: 700; }
.cf-dl-card p  { font-size: 13px; color: var(--cf-text-2); line-height: 1.65; flex: 1; }
.cf-dl-card-meta { font-size: 11px; color: var(--cf-text-3); }

/* Platform badges */
.cf-store-badges {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}
.cf-store-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: var(--cf-bg-raised);
	border: 1px solid var(--cf-border-2);
	border-radius: var(--cf-r-md);
	color: var(--cf-text);
	font-size: 13px;
	font-weight: 600;
	transition: all var(--cf-ease);
	text-decoration: none;
}
.cf-store-badge:hover {
	border-color: var(--cf-accent);
	color: var(--cf-accent);
	box-shadow: 0 0 16px rgba(0,200,255,.14);
}

/* Requirements table */
.cf-req-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.cf-req-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--cf-border);
}
.cf-req-table td:first-child {
	color: var(--cf-text-2);
	width: 40%;
	font-weight: 500;
}
.cf-req-table tr:last-child td { border-bottom: none; }

/* About page */
.cf-about-stat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 60px;
}
.cf-about-stat {
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-r-lg);
	padding: 28px;
	text-align: center;
}
.cf-about-stat-value {
	font-size: 40px;
	font-weight: 700;
	color: var(--cf-accent);
	letter-spacing: -1px;
	margin-bottom: 6px;
}
.cf-about-stat-label {
	font-size: 13px;
	color: var(--cf-text-2);
}

/* Account page */
.cf-account-card {
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-r-xl);
	padding: 32px;
	margin-bottom: 20px;
}
.cf-account-card h3 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cf-border);
}

/* CTA band */
.cf-cta-band {
	background: linear-gradient(135deg, var(--cf-bg-3) 0%, var(--cf-bg-2) 60%, rgba(0,200,255,.04) 100%);
	border-top: 1px solid var(--cf-border-2);
	border-bottom: 1px solid var(--cf-border);
	padding: 80px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.cf-cta-band::before {
	content: '';
	position: absolute;
	width: 600px;
	height: 600px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(0,200,255,.06) 0%, transparent 65%);
	border-radius: 50%;
	pointer-events: none;
}
.cf-cta-band h2 {
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.6px;
	margin-bottom: 14px;
	position: relative;
}
.cf-cta-band p {
	font-size: 16px;
	color: var(--cf-text-2);
	margin-bottom: 32px;
	position: relative;
}
.cf-cta-band .cf-hero-actions { justify-content: center; position: relative; }

/* Responsive for sub-pages */
@media (max-width: 900px) {
	.cf-split { grid-template-columns: 1fr; gap: 40px; }
	.cf-split--flip { direction: ltr; }
	.cf-icon-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.cf-dl-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
	.cf-about-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.cf-icon-grid, .cf-icon-grid--3 { grid-template-columns: 1fr; }
	.cf-about-stat-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------
   Scroll Animations — staggered fade-up
   ----------------------------------------------------------------------- */
.cf-animate {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.cf-animate.cf-visible {
	opacity: 1;
	transform: translateY(0);
}
/* Stagger delays for grid children */
.cf-animate--d1 { transition-delay: 0.06s; }
.cf-animate--d2 { transition-delay: 0.12s; }
.cf-animate--d3 { transition-delay: 0.18s; }
.cf-animate--d4 { transition-delay: 0.24s; }
.cf-animate--d5 { transition-delay: 0.30s; }
.cf-animate--d6 { transition-delay: 0.36s; }

/* -----------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
	.cf-hero-inner { grid-template-columns: 1fr; }
	.cf-hero-visual { display: none; }

	.cf-products-grid,
	.cf-pricing-grid,
	.cf-features-grid {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
	}
	.cf-pricing-card--featured { transform: none; }

	.cf-content-layout--sidebar { grid-template-columns: 1fr; }
	.cf-sidebar { order: -1; }

	.cf-footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 768px) {
	:root { --cf-header-h: 56px; }

	/* Remove backdrop-filter on mobile — it creates a fixed-position containing block
	   in Chromium, which causes position:fixed children (the nav menu) to be sized
	   relative to the header instead of the viewport, collapsing to zero height. */
	.cf-header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.cf-nav-menu,
	.cf-nav-right {
		display: none;
	}
	.cf-nav-menu.is-open {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: var(--cf-header-h);
		left: 0;
		width: 100%;
		height: calc(100dvh - var(--cf-header-h));
		background: var(--cf-bg);
		border-top: 1px solid var(--cf-border);
		padding: 20px 16px;
		z-index: 9999;
		overflow-y: auto;
		box-sizing: border-box;
	}
	.cf-nav-menu.is-open .nav,
	.cf-nav-menu.is-open > ul,
	.cf-nav-menu.is-open .mod-menu {
		flex-direction: column;
		gap: 4px;
		width: 100%;
	}
	.cf-nav-menu.is-open a {
		font-size: 16px;
		padding: 12px 14px;
	}

	.cf-hamburger { display: flex; }

	.cf-hero { min-height: auto; padding: 60px 0; }
	.cf-hero-title { font-size: 34px; letter-spacing: -0.5px; }
	.cf-hero-actions { flex-direction: column; align-items: flex-start; }
	.cf-hero-actions .cf-btn { width: 100%; justify-content: center; }

	.cf-section { padding: 72px 0; }
	.cf-page-section { padding: 64px 0; }

	.cf-footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.cf-footer-bottom {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}
}

@media (max-width: 480px) {
	.cf-container { padding: 0 16px; }
	.cf-product-card, .cf-pricing-card { padding: 24px; }
}


/* ===== Cellfire Pricing Page ===== */
.pricing-wrapper{font-family:inherit;padding:2rem 0}
.pricing-toggle{display:flex;justify-content:center;gap:.5rem;margin-bottom:2.5rem;flex-wrap:wrap}
.ptbtn{padding:.5rem 1.5rem;border-radius:2rem;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s;border:1px solid}
.ptbtn-active{background:#2563eb;color:#fff;border-color:#2563eb}
.ptbtn-inactive{background:transparent;color:#94a3b8;border-color:#334155}
.badge-save{font-size:.7rem;background:#16a34a;color:#fff;padding:.15rem .5rem;border-radius:1rem;vertical-align:middle;margin-left:.3rem}
.pricing-cards{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.25rem;max-width:1200px;margin:0 auto}
.pcard{background:#0f172a;border:1px solid #1e293b;border-radius:1rem;padding:1.75rem 1.25rem;position:relative;transition:transform .2s,border-color .2s}
.pcard:hover{transform:translateY(-4px);border-color:#2563eb}
.pcard.featured{border-color:#2563eb;background:#0c1a3a}
.badge-pop{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);background:#2563eb;color:#fff;font-size:.72rem;font-weight:700;padding:.2rem 1rem;border-radius:2rem;letter-spacing:.05em;white-space:nowrap}
.plan-name{font-size:1rem;font-weight:700;color:#e2e8f0;margin-bottom:.2rem}
.plan-tag{font-size:.78rem;color:#64748b;margin-bottom:1.1rem}
.plan-price{font-size:2.4rem;font-weight:800;color:#f8fafc;line-height:1}
.plan-price sup{font-size:1.1rem;font-weight:600;vertical-align:top;margin-top:.35rem}
.plan-period{font-size:.78rem;color:#64748b;margin-bottom:1.4rem}
.plan-feats{list-style:none;padding:0;margin:0 0 1.5rem 0;font-size:.84rem;color:#94a3b8}
.plan-feats li{padding:.3rem 0;display:flex;align-items:flex-start;gap:.45rem}
.plan-feats li::before{content:"OK";font-size:0;color:#2563eb;font-weight:700;flex-shrink:0;width:1em;display:inline-block}
.plan-feats li::before{content:"\2713";color:#2563eb;font-weight:700;flex-shrink:0}
.plan-feats li.na{color:#475569}
.plan-feats li.na::before{content:"\2013";color:#475569}
.bsub{display:block;width:100%;padding:.7rem;border-radius:.5rem;font-weight:700;font-size:.88rem;text-align:center;cursor:pointer;transition:all .2s;text-decoration:none;border:none}
.bsub-primary{background:#2563eb;color:#fff}
.bsub-primary:hover{background:#1d4ed8;color:#fff}
.bsub-outline{background:transparent;color:#94a3b8;border:1px solid #334155}
.bsub-outline:hover{background:#1e293b;color:#e2e8f0;border-color:#475569}
.pricing-note{text-align:center;color:#475569;font-size:.8rem;margin-top:1.75rem}
.pricing-note a{color:#2563eb}

/* ===== Homepage Pricing Teaser ===== */
.hp-price-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:2rem 0 2.5rem}
.hp-pc{background:#0f172a;border:1px solid #1e293b;border-radius:.85rem;padding:1.25rem 1.5rem;min-width:155px;text-align:center;position:relative;transition:transform .2s,border-color .2s}
.hp-pc:hover{transform:translateY(-3px);border-color:#2563eb}
.hp-pc-hot{background:#0c1a3a;border-color:#2563eb;border-width:2px}
.hp-pc-badge{position:absolute;top:-.6rem;left:50%;transform:translateX(-50%);background:#2563eb;color:#fff;font-size:.62rem;font-weight:700;padding:.15rem .7rem;border-radius:2rem;white-space:nowrap;letter-spacing:.05em}
.hp-pc-name{color:#94a3b8;font-size:.8rem;font-weight:600;margin-bottom:.35rem}
.hp-pc-price{color:#f8fafc;font-size:1.6rem;font-weight:800;line-height:1}
.hp-pc-price span{color:#64748b;font-size:.82rem;font-weight:400}
.hp-pc-yr{color:#475569;font-size:.72rem;margin-top:.3rem}
.hp-price-cta{text-align:center;margin-top:1rem}
.hp-price-note{color:#475569;font-size:.8rem;margin-top:.85rem}
.hp-price-note a{color:#2563eb}

/* -----------------------------------------------------------------------
   Phone Mockup Frame (Cellfire App page)
   ----------------------------------------------------------------------- */
.cf-phone-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 0;
}
.cf-phone-frame {
	position: relative;
	width: 260px;
	background: var(--cf-bg-3);
	border: 2px solid var(--cf-border-2);
	border-radius: 36px;
	padding: 16px 10px;
	box-shadow:
		0 0 0 6px var(--cf-bg-2),
		0 0 0 8px var(--cf-border-2),
		0 40px 80px rgba(0,0,0,.7),
		0 0 60px rgba(0,200,255,.08);
}
/* Notch */
.cf-phone-frame::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 6px;
	background: var(--cf-bg);
	border-radius: 3px;
	z-index: 3;
}
.cf-phone-screen {
	background: var(--cf-bg);
	border-radius: 26px;
	overflow: hidden;
	min-height: 480px;
	display: flex;
	flex-direction: column;
}
/* Status bar */
.cf-phone-statusbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 16px 6px;
	font-size: 10px;
	font-weight: 600;
	color: var(--cf-text-2);
}
/* App content area */
.cf-phone-content {
	flex: 1;
	padding: 10px 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Metric row in phone mockup */
.cf-phone-metric {
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border);
	border-radius: 10px;
	padding: 10px 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cf-phone-metric-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--cf-text-3);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
.cf-phone-metric-val {
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.cf-phone-metric-val--green  { color: var(--cf-signal); }
.cf-phone-metric-val--cyan   { color: var(--cf-accent); }
.cf-phone-metric-val--yellow { color: var(--cf-warning); }
/* Mini map placeholder in phone */
.cf-phone-map {
	background: #0a1a12;
	border: 1px solid rgba(0,230,118,.2);
	border-radius: 10px;
	height: 140px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cf-phone-map-label {
	font-size: 10px;
	color: var(--cf-signal);
	font-weight: 600;
	letter-spacing: 0.5px;
}
/* Grid lines inside map */
.cf-phone-map::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0,230,118,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,230,118,.06) 1px, transparent 1px);
	background-size: 20px 20px;
}
/* Pulsing dot on map */
.cf-phone-map::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background: var(--cf-signal);
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(0,230,118,.2), 0 0 12px var(--cf-signal);
	animation: cf-dot-pulse 2s ease-in-out infinite;
	z-index: 2;
}
@keyframes cf-dot-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(0,230,118,.25), 0 0 10px var(--cf-signal); }
	50%       { box-shadow: 0 0 0 7px rgba(0,230,118,.08), 0 0 18px var(--cf-signal); }
}
/* Pill badge on top of phone */
.cf-phone-badge {
	position: absolute;
	top: 20px;
	right: -20px;
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border-2);
	border-radius: var(--cf-r-md);
	padding: 8px 14px;
	box-shadow: var(--cf-shadow-md);
	animation: cf-float 4s ease-in-out infinite;
}
.cf-phone-badge-val {
	font-size: 16px;
	font-weight: 700;
	color: var(--cf-signal);
}
.cf-phone-badge-lbl {
	font-size: 9px;
	font-weight: 600;
	color: var(--cf-text-3);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
/* Signal strength bar */
.cf-signal-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 14px;
}
.cf-signal-bars span {
	width: 3px;
	background: var(--cf-signal);
	border-radius: 1px;
	opacity: 0.4;
}
.cf-signal-bars span:nth-child(1) { height: 30%; opacity: 1; }
.cf-signal-bars span:nth-child(2) { height: 50%; opacity: 1; }
.cf-signal-bars span:nth-child(3) { height: 70%; opacity: 1; }
.cf-signal-bars span:nth-child(4) { height: 90%; opacity: 0.6; }
.cf-signal-bars span:nth-child(5) { height: 100%; opacity: 0.3; }

/* -----------------------------------------------------------------------
   Browser / Viewer Mockup Frame
   ----------------------------------------------------------------------- */
.cf-browser-frame {
	background: var(--cf-bg-3);
	border: 1px solid var(--cf-border-2);
	border-radius: 14px;
	overflow: hidden;
	box-shadow:
		0 40px 80px rgba(0,0,0,.65),
		0 0 60px rgba(0,200,255,.07);
}
.cf-browser-bar {
	background: var(--cf-bg-raised);
	border-bottom: 1px solid var(--cf-border);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.cf-browser-dots {
	display: flex;
	gap: 5px;
}
.cf-browser-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
.cf-browser-dot--r { background: #ff5f57; }
.cf-browser-dot--y { background: #febc2e; }
.cf-browser-dot--g { background: #28c840; }
.cf-browser-url {
	flex: 1;
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border);
	border-radius: 6px;
	padding: 4px 12px;
	font-size: 11px;
	color: var(--cf-text-3);
	font-family: 'SF Mono', 'Fira Code', monospace;
}
.cf-browser-content {
	background: #0a1520;
	min-height: 320px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Map grid in browser */
.cf-browser-mapgrid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0,200,255,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,200,255,.04) 1px, transparent 1px);
	background-size: 32px 32px;
}
/* Heatmap dots */
.cf-heatmap-dot {
	position: absolute;
	border-radius: 50%;
	filter: blur(20px);
}
.cf-heatmap-dot--1 {
	width: 120px; height: 120px;
	top: 30%; left: 40%;
	background: rgba(0,230,118,.25);
}
.cf-heatmap-dot--2 {
	width: 80px; height: 80px;
	top: 20%; left: 60%;
	background: rgba(0,200,255,.20);
}
.cf-heatmap-dot--3 {
	width: 60px; height: 60px;
	top: 55%; left: 25%;
	background: rgba(255,186,0,.18);
}
.cf-heatmap-dot--4 {
	width: 50px; height: 50px;
	top: 65%; left: 70%;
	background: rgba(255,71,87,.15);
}
/* Tower pin */
.cf-tower-pin {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cf-accent);
	box-shadow: 0 0 0 3px rgba(0,200,255,.2), 0 0 12px var(--cf-accent);
	z-index: 3;
}
.cf-tower-pin--1 { top: 42%; left: 48%; }
.cf-tower-pin--2 { top: 28%; left: 65%; }
.cf-tower-pin--3 { top: 60%; left: 30%; }
/* PCI label */
.cf-pci-label {
	position: absolute;
	background: rgba(13,20,33,.85);
	border: 1px solid rgba(0,200,255,.3);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 9px;
	font-weight: 700;
	color: var(--cf-accent);
	z-index: 4;
	white-space: nowrap;
}
.cf-pci-label--1 { top: calc(42% - 20px); left: calc(48% + 8px); }
.cf-pci-label--2 { top: calc(28% - 20px); left: calc(65% + 8px); }
.cf-pci-label--3 { top: calc(60% + 14px); left: calc(30% + 8px); }
/* Viewer sidebar overlay */
.cf-viewer-sidebar {
	position: absolute;
	right: 0; top: 0; bottom: 0;
	width: 160px;
	background: rgba(7,12,20,.88);
	border-left: 1px solid var(--cf-border);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	backdrop-filter: blur(8px);
}
.cf-viewer-sidebar-title {
	font-size: 10px;
	font-weight: 700;
	color: var(--cf-accent);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 4px;
}
.cf-viewer-stat {
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border);
	border-radius: 6px;
	padding: 8px 10px;
}
.cf-viewer-stat-label {
	font-size: 9px;
	color: var(--cf-text-3);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 2px;
}
.cf-viewer-stat-val {
	font-size: 13px;
	font-weight: 700;
	color: var(--cf-text);
}
.cf-viewer-stat-val--g { color: var(--cf-signal); }
.cf-viewer-stat-val--c { color: var(--cf-accent); }
/* RSRP gradient bar */
.cf-rsrp-bar {
	height: 10px;
	border-radius: 5px;
	background: linear-gradient(90deg, #ff4757 0%, #ffba00 40%, #00c8ff 70%, #00e676 100%);
	margin: 4px 0;
}
.cf-rsrp-labels {
	display: flex;
	justify-content: space-between;
	font-size: 8px;
	color: var(--cf-text-3);
}

/* =============================================================================
   GALLERY / SLIDESHOW
   ============================================================================= */

/* Tab row */
.cf-gtabs {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.cf-gtab {
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border);
	color: var(--cf-text-2);
	padding: 7px 20px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.cf-gtab:hover  { background: var(--cf-bg-3); color: var(--cf-text); }
.cf-gtab.active { background: var(--cf-accent-dim); border-color: var(--cf-accent); color: var(--cf-accent); }

/* Slideshow container */
.cf-slideshow        { display: none; position: relative; overflow: hidden; }
.cf-slideshow.active { display: block; }

/* Slide track — shifts via transform; parent clips */
.cf-slide-track {
	display: flex;
	border-radius: 10px;
}
.cf-slide {
	min-width: 100%;
	flex-shrink: 0;
	transition: none;
}
.cf-slide img {
	width: 100%;
	max-height: 480px;
	object-fit: contain;
	border-radius: 10px;
	background: var(--cf-bg-1);
	display: block;
}

/* Arrows */
.cf-slide-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,.55);
	border: 1px solid rgba(255,255,255,.12);
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}
.cf-slide-arrow:hover  { background: rgba(0,200,255,.3); }
.cf-slide-prev         { left: 10px; }
.cf-slide-next         { right: 10px; }

/* Dots */
.cf-slide-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}
.cf-slide-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cf-border);
	cursor: pointer;
	transition: background .15s, transform .15s;
}
.cf-slide-dot.active {
	background: var(--cf-accent);
	transform: scale(1.3);
}

/* ── Built Different diff layout ────────────────────────────────────────── */
.cf-diff-vs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 40px;
}
.cf-diff-vs-body {
	width: 100%;
	max-width: 680px;
}
.cf-diff-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
	margin-top: 24px;
}
@media (max-width: 700px) {
	.cf-diff-cols { grid-template-columns: 1fr; }
}
.cf-diff-col {
	background: var(--cf-bg-1);
	border: 1px solid var(--cf-border);
	border-radius: 14px;
	padding: 28px;
}
.cf-diff-col--bad  { border-color: rgba(255,80,80,.25); background: rgba(255,80,80,.04); }
.cf-diff-col--good { border-color: rgba(0,230,118,.25); background: rgba(0,230,118,.04); }
.cf-diff-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .5px;
	margin-bottom: 16px;
}
.cf-diff-label--bad  { color: #ff5050; }
.cf-diff-label--good { color: var(--cf-signal); }
.cf-diff-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cf-diff-list li {
	font-size: 14px;
	color: var(--cf-text-2);
	padding-left: 20px;
	position: relative;
	line-height: 1.5;
}
.cf-diff-col--bad  .cf-diff-list li::before { content: '✕'; position: absolute; left: 0; color: #ff5050; font-weight: 700; }
.cf-diff-col--good .cf-diff-list li::before { content: '✓'; position: absolute; left: 0; color: var(--cf-signal); font-weight: 700; }
.cf-diff-vs-label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--cf-text-3);
	border: 1px solid var(--cf-border);
	border-radius: 20px;
	padding: 4px 12px;
}
.cf-diff-vs-body {
	background: var(--cf-bg-2);
	border: 1px solid var(--cf-border);
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cf-diff-vs-body p {
	font-size: 12px;
	color: var(--cf-text-2);
	line-height: 1.6;
	margin: 0;
}
.cf-diff-vs-body ol {
	font-size: 12px;
	color: var(--cf-text-2);
	line-height: 1.6;
	margin: 0;
	padding-left: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cf-diff-vs-body ol li strong {
	color: var(--cf-text);
}
.cf-diff-vs-emphasis {
	font-size: 12px !important;
	color: var(--cf-accent) !important;
	font-weight: 600;
	border-top: 1px solid var(--cf-border);
	padding-top: 12px;
}
.cf-diff-footnote {
	margin-top: 32px;
	text-align: center;
	font-size: 14px;
	color: var(--cf-text-2);
	font-style: italic;
}

/* ── Persona cards (Who Uses) ──────────────────────────────────────────── */
.cf-persona-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 48px;
}
.cf-persona-card {
	background: var(--cf-bg-1);
	border: 1px solid var(--cf-border);
	border-radius: 14px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: border-color .2s, transform .2s;
}
.cf-persona-card:hover {
	border-color: var(--cf-accent);
	transform: translateY(-2px);
}
.cf-persona-header {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.cf-persona-icon {
	font-size: 28px;
	line-height: 1;
	flex-shrink: 0;
}
.cf-persona-role {
	font-size: 15px;
	font-weight: 700;
	color: var(--cf-text);
	line-height: 1.3;
}
.cf-persona-sub {
	font-size: 11px;
	color: var(--cf-accent);
	margin-top: 3px;
	letter-spacing: .3px;
}
.cf-persona-card > p {
	font-size: 14px;
	color: var(--cf-text-2);
	line-height: 1.6;
	margin: 0;
}
.cf-persona-workflow {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 1px solid var(--cf-border);
	padding-top: 14px;
}
.cf-persona-workflow li {
	font-size: 13px;
	color: var(--cf-text-2);
	padding-left: 18px;
	position: relative;
	line-height: 1.5;
}
.cf-persona-workflow li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--cf-accent);
	font-weight: 700;
}

/* Empty gallery placeholder */
.cf-gallery-empty {
	text-align: center;
	padding: 48px 24px;
	color: var(--cf-text-3);
	font-size: 13px;
}
.cf-gallery-empty svg { opacity: .4; margin-bottom: 12px; }