/* ============================================================
   FRONT PAGE
   Anchor Uptime Theme
   ============================================================ */

/* ── Shared section headings ── */
.fp-section-h {
	font-family:    var(--display);
	font-weight:    800;
	letter-spacing: -1.5px;
	font-size:      clamp(32px, 4.5vw, 56px);
	line-height:    1.02;
	color:          #fff;
	margin-bottom:  14px;
}

.fp-section-h--sm {
	font-size:      clamp(24px, 3.5vw, 30px);
	letter-spacing: -0.8px;
	line-height:    1.2;
}

.stag {
	font-family:    var(--mono);
	font-size:      11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color:          var(--indigo);
	display:        block;
	margin-bottom:  14px;
}

.sub {
	font-size:   16px;
	color:       var(--muted);
	max-width:   480px;
	line-height: 1.75;
	font-weight: 300;
}

.grad {
	background:              linear-gradient(90deg, var(--indigo), var(--cyan));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip:         text;
}

/* ── Check list (shared across sections) ── */
.check-list {
	list-style: none;
	display:    flex;
	flex-direction: column;
	gap:        9px;
	margin-top: 20px;
}

.check-list li {
	display:     flex;
	align-items: flex-start;
	gap:         9px;
	font-size:   14px;
	color:       var(--muted);
}

.check-list li::before {
	content:    '✓';
	color:      var(--green);
	font-weight: 700;
	flex-shrink: 0;
}

/* ─────────────────────────────────────────
   HERO
   ───────────────────────────────────────── */
.fp-hero {
	min-height:      100vh;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         80px 40px 60px;
	text-align:      center;
	position:        relative;
	overflow:        hidden;
}

.fp-hero__canvas {
	position: absolute !important;
	inset:    0;
	z-index:  0;
	opacity:  .5;
	width:    100%;
	height:   100%;
}

.fp-hero__inner {
	position:        relative;
	z-index:         1;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
}

/* Chip */
.hero-chip {
	display:      inline-flex;
	align-items:  center;
	gap:          7px;
	padding:      5px 14px;
	border-radius: 100px;
	border:       1px solid rgba(99, 102, 241, .3);
	background:   rgba(99, 102, 241, .07);
	font-family:  var(--mono);
	font-size:    11px;
	color:        var(--indigo);
	letter-spacing: .5px;
	margin-bottom: 24px;
}

.chip-dot {
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    var(--indigo);
	animation:     blink 2s infinite;
	flex-shrink:   0;
}

/* Heading */
.fp-hero__title {
	font-family:    var(--display);
	font-weight:    800;
	font-size:      clamp(40px, 6.5vw, 80px);
	letter-spacing: -2.5px;
	line-height:    .98;
	color:          #fff;
	max-width:      800px;
	margin-bottom:  20px;
}

/* Subheadline */
.fp-hero__sub {
	font-size:     17px;
	color:         var(--muted);
	max-width:     480px;
	margin-bottom: 32px;
	font-weight:   300;
	line-height:   1.7;
}

/* CTA buttons */
.hero-btns {
	display:         flex;
	gap:             12px;
	justify-content: center;
	flex-wrap:       wrap;
	margin-bottom:   48px;
}

.btn-hero {
	padding:      13px 26px;
	border-radius: 9px;
	font-size:    15px;
	font-weight:  600;
	font-family:  var(--body);
	cursor:       pointer;
	text-decoration: none;
	transition:   all .2s;
}

.btn-hero.primary {
	background:  var(--indigo);
	color:       #fff;
	border:      none;
	box-shadow:  0 0 40px rgba(99, 102, 241, .35);
}

.btn-hero.primary:hover { opacity: .88; transform: translateY(-2px); }

.btn-hero.outline {
	border:     1px solid var(--border2);
	background: transparent;
	color:      var(--text);
}

.btn-hero.outline:hover {
	border-color: var(--indigo);
	background:   var(--indigo-soft);
}

/* Stats bar */
.stats-bar {
	display:      flex;
	background:   var(--bg2);
	border:       1px solid var(--border);
	border-radius: 14px;
	overflow:     hidden;
	width:        100%;
	max-width:    680px;
}

.stat-cell {
	flex:         1;
	padding:      16px 12px;
	text-align:   center;
	border-right: 1px solid var(--border);
	display:      flex;
	flex-direction: column;
	align-items:  center;
	gap:          4px;
}

.stat-cell:last-child { border-right: none; }

.stat-val {
	font-family:    var(--display);
	font-size:      20px;
	font-weight:    800;
	color:          #fff;
	letter-spacing: -0.5px;
}

.stat-val.green  { color: var(--green); }
.stat-val.indigo { color: var(--indigo); }

.stat-lbl {
	font-family:    var(--mono);
	font-size:      9px;
	color:          var(--muted);
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ─────────────────────────────────────────
   PANEL WINDOW  (shared across sections)
   ───────────────────────────────────────── */
.panel-window {
	background:  var(--p-bg);
	border-radius: 14px;
	border:      1px solid #c8d4e3;
	box-shadow:  0 24px 64px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03);
	overflow:    hidden;
	font-family: var(--body);
	margin:      0; /* reset <figure> default margin */
	width:       100%;
	max-width:   100%;
	min-width:   0;
}

.pw-titlebar {
	height:       38px;
	background:   var(--p-bg2);
	border-bottom: 1px solid var(--p-border);
	display:      flex;
	align-items:  center;
	padding:      0 14px;
	gap:          6px;
}

.pw-titlebar--space {
	justify-content: space-between;
}

.pw-dots { display: flex; gap: 5px; }

.pw-dot {
	width:         10px;
	height:        10px;
	border-radius: 50%;
}

.pw-dot.r { background: #ff5f57; }
.pw-dot.y { background: #ffbd2e; }
.pw-dot.g { background: #28c840; }

.pw-url {
	margin-left:   8px;
	font-family:   var(--mono);
	font-size:     10px;
	color:         var(--p-muted);
	background:    var(--p-bg3);
	border:        1px solid var(--p-border);
	padding:       3px 12px;
	border-radius: 5px;
	min-width:     0;
	max-width:     100%;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}

.pw-body { display: flex; min-width: 0; }

/* Sidebar */
.pw-sidebar {
	width:       155px;
	background:  var(--p-bg2);
	border-right: 1px solid var(--p-border);
	padding:     12px 8px;
	flex-shrink: 0;
}

.pw-logo-row {
	display:      flex;
	align-items:  center;
	gap:          6px;
	padding:      4px 8px;
	margin-bottom: 14px;
}

.pw-logo-mark {
	width:          20px;
	height:         20px;
	border-radius:  4px;
	background:     var(--p-accent);
	display:        flex;
	align-items:    center;
	justify-content: center;
}

.pw-logo-txt {
	font-family: var(--display);
	font-size:   11px;
	font-weight: 700;
	color:       var(--p-text);
}

.pw-nav-group { margin-bottom: 10px; }

.pw-nav-lbl {
	font-family:    var(--mono);
	font-size:      9px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color:          var(--p-muted);
	padding:        0 8px;
	margin-bottom:  3px;
}

.pw-nav-item {
	display:      flex;
	align-items:  center;
	gap:          6px;
	padding:      6px 8px;
	border-radius: 6px;
	font-size:    11px;
	color:        var(--p-muted);
	margin-bottom: 1px;
}

.pw-nav-item.active {
	background:  var(--p-bg);
	color:       var(--p-text);
	font-weight: 600;
}

/* Content */
.pw-content {
	flex:     1;
	padding:  14px;
	overflow: hidden;
	min-width: 0;
}

.pw-content-title {
	font-family:    var(--display);
	font-size:      14px;
	font-weight:    800;
	color:          var(--p-text);
	margin-bottom:  10px;
	letter-spacing: -0.3px;
}

.pw-stats-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:                   7px;
	margin-bottom:         9px;
}

.pw-sites-head {
	display:         flex;
	justify-content: space-between;
	padding:         0 5px 7px;
	border-bottom:   1px solid var(--p-border);
	margin-bottom:   3px;
	font-size:       11px;
	font-weight:     600;
	color:           var(--p-text);
}

.pw-live-badge {
	display:     flex;
	align-items: center;
	gap:         4px;
	font-size:   9px;
	color:       var(--p-accent);
	font-family: var(--mono);
}

.pw-feed-body { background: var(--p-bg); }

.pw-detail-body {
	padding:    12px;
	background: var(--p-bg);
}

/* Panel cards */
.p-card {
	background:    var(--p-bg);
	border:        1px solid var(--p-border);
	border-radius: 10px;
	padding:       12px;
}

.p-card--sites { padding: 9px; }

.p-card-title {
	font-size:      10px;
	font-weight:    600;
	color:          var(--p-muted);
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom:  7px;
}

.p-big-num {
	font-family:    var(--display);
	font-size:      26px;
	font-weight:    800;
	color:          var(--p-text);
	letter-spacing: -1px;
}

.p-big-num.green  { color: var(--p-green); }
.p-big-num.accent { color: var(--p-accent); }

/* Status dots */
.sdot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	display:       inline-block;
	flex-shrink:   0;
}

.sdot.up   { background: var(--p-green); }
.sdot.down { background: var(--p-red); }
.sdot.warn { background: var(--p-amber); }
.sdot.unk  { background: #94a3b8; }

/* Site row */
.p-site-row {
	display:      flex;
	align-items:  center;
	gap:          6px;
	padding:      7px 8px;
	border-radius: 7px;
	font-size:    11px;
	transition:   background .15s;
	min-width:    0;
}

.p-site-row:hover { background: var(--p-bg2); }

.p-site-name {
	flex:          1;
	min-width:     0;
	color:         var(--p-text);
	font-weight:   500;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.p-site-name--sm { font-size: 10px; }

.p-site-status {
	padding:      2px 6px;
	border-radius: 100px;
	font-size:    9px;
	font-weight:  600;
	flex-shrink:  0;
	white-space:  nowrap;
}

.p-site-status.up {
	background: rgba(34, 197, 94, .12);
	color:      #16a34a;
}

.p-site-pct {
	font-family: var(--mono);
	font-size:   10px;
	color:       var(--p-muted);
	flex-shrink: 0;
	white-space: nowrap;
}

.p-site-bar {
	display:    flex;
	gap:        1px;
	flex-shrink: 0;
}

.p-site-bar span {
	width:         2.5px;
	height:        12px;
	border-radius: 1px;
}

.seg-up   { background: var(--p-green); }
.seg-down { background: var(--p-red); }
.seg-warn { background: var(--p-amber); }
.seg-unk  { background: #cbd5e1; }

/* Signal / activity rows */
.sig-row {
	display:      flex;
	align-items:  center;
	gap:          7px;
	padding:      7px 12px;
	border-bottom: 1px solid var(--p-border);
	font-size:    11px;
}

.sig-row:last-child { border-bottom: none; }

.sig-type {
	font-family: var(--mono);
	font-size:   10px;
	color:       var(--p-muted);
	min-width:   68px;
}

.sig-ms {
	font-family: var(--mono);
	font-size:   10px;
	color:       var(--p-muted);
	margin-left: auto;
}

.sig-time {
	font-family: var(--mono);
	font-size:   9px;
	color:       #94a3b8;
	min-width:   60px;
	text-align:  right;
}

@keyframes rowflash {
	0%   { background: rgba(99, 102, 241, .15); }
	100% { background: transparent; }
}

.row-new { animation: rowflash 1s ease-out; }

/* Feed label */
.feed-label {
	font-family:    var(--mono);
	font-size:      10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color:          var(--muted);
	margin-bottom:  10px;
	display:        flex;
	align-items:    center;
	gap:            8px;
}

.feed-live-dot {
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    var(--green);
	animation:     blink 1.5s infinite;
	flex-shrink:   0;
}

.feed-live-dot--indigo { background: var(--indigo); }

/* SSL cards */
.p-ssl-card {
	background:    var(--p-bg);
	border:        1px solid var(--p-border);
	border-radius: 10px;
	padding:       12px;
}

.p-ssl-title {
	font-size:      10px;
	font-weight:    600;
	color:          var(--p-muted);
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom:  9px;
}

.p-ssl-row {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   4px;
}

.p-ssl-key { font-size: 11px; color: var(--p-muted); }

.p-ssl-val {
	font-size:   11px;
	font-weight: 500;
	color:       var(--p-text);
	font-family: var(--mono);
}

.p-ssl-val--ok { color: #16a34a; }

.p-ssl-badge {
	display:     inline-flex;
	align-items: center;
	gap:         3px;
	font-size:   10px;
	font-weight: 600;
}

.p-ssl-badge.ok { color: #16a34a; }

.p-prog {
	height:        3px;
	border-radius: 2px;
	background:    var(--p-bg3);
	margin-top:    7px;
	overflow:      hidden;
}

.p-prog-bar {
	height:        100%;
	border-radius: 2px;
	background:    var(--p-green);
}

/* Incidents */
.p-card--incidents { padding: 9px; }

.p-incidents-head {
	font-size:      10px;
	font-weight:    600;
	color:          var(--p-muted);
	text-transform: uppercase;
	letter-spacing: .5px;
	padding:        0 4px 7px;
	border-bottom:  1px solid var(--p-border);
	margin-bottom:  3px;
}

.p-incident-row {
	display:       flex;
	gap:           7px;
	align-items:   flex-start;
	padding:       7px 8px;
	border-bottom: 1px solid var(--p-border);
	font-size:     10px;
}

.p-incident-row:last-child { border-bottom: none; }

.p-inc-open {
	color:       var(--p-text);
	font-weight: 500;
	font-family: var(--mono);
	min-width:   90px;
}

.p-inc-desc {
	flex:     1;
	font-size: 10px;
	color:    var(--p-muted);
}

.p-inc-dur {
	color:       var(--p-muted);
	font-family: var(--mono);
	min-width:   44px;
}

.p-inc-fail {
	color:       var(--p-red);
	font-family: var(--mono);
	min-width:   18px;
	text-align:  right;
}

/* ─────────────────────────────────────────
   DEMO SECTION
   ───────────────────────────────────────── */
.fp-demo { background: var(--bg); }

.demo-layout {
	display:               grid;
	grid-template-columns: 1fr 420px;
	gap:                   64px;
	align-items:           center;
	margin-top:            56px;
}

.demo-layout > *,
.network-layout > *,
.livefeed-layout > *,
.detail-layout > * {
	min-width: 0;
}

.demo-text h2 { margin-bottom: 14px; }
.demo-text p  { font-size: 14px; color: var(--muted); line-height: 1.75; margin-bottom: 12px; }

/* ─────────────────────────────────────────
   NETWORK SECTION
   ───────────────────────────────────────── */
.fp-network {
	background:  var(--bg2);
	border-top:  1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.network-layout {
	display:               grid;
	grid-template-columns: 480px 1fr;
	gap:                   64px;
	align-items:           center;
	margin-top:            56px;
}

#netCanvas {
	border-radius: 14px;
	border:        1px solid var(--border);
	background:    var(--bg3);
	display:       block;
	max-width:     100%;
}

.network-text h2 { margin-bottom: 14px; }
.network-text p  { font-size: 14px; color: var(--muted); line-height: 1.75; margin-bottom: 14px; }

/* Probe legend */
.probe-legend {
	list-style:     none;
	display:        flex;
	flex-direction: column;
	gap:            10px;
	margin-top:     20px;
}

.probe-item {
	display:      flex;
	align-items:  center;
	gap:          12px;
	padding:      12px 14px;
	background:   var(--bg3);
	border:       1px solid var(--border);
	border-radius: 10px;
}

.probe-icon {
	width:         36px;
	height:        36px;
	border-radius: 8px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	flex-shrink:   0;
}

.probe-icon.fe {
	background: rgba(99, 102, 241, .12);
	border:     1px solid rgba(99, 102, 241, .2);
}

.probe-icon.hb {
	background: rgba(34, 197, 94, .1);
	border:     1px solid rgba(34, 197, 94, .2);
}

.probe-label { font-size: 13px; font-weight: 600; color: var(--text); display: block; margin-bottom: 2px; }
.probe-desc  { font-size: 12px; color: var(--muted); }

/* ─────────────────────────────────────────
   LIVE FEEDS
   ───────────────────────────────────────── */
.fp-livefeed { background: var(--bg); }

.livefeed-layout {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   36px;
	margin-top:            56px;
}

/* ─────────────────────────────────────────
   SITE DETAIL
   ───────────────────────────────────────── */
.fp-sitedetail {
	background: var(--bg2);
	border-top: 1px solid var(--border);
}

.detail-layout {
	display:               grid;
	grid-template-columns: 1fr 390px;
	gap:                   56px;
	align-items:           start;
	margin-top:            56px;
}

.detail-layout h2 { margin-bottom: 14px; }
.detail-layout > div > p { font-size: 14px; color: var(--muted); line-height: 1.75; margin-bottom: 14px; }

.detail-cards {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   10px;
	margin-bottom:         10px;
}

/* ─────────────────────────────────────────
   FEATURES
   ───────────────────────────────────────── */
.fp-features {
	background: var(--bg);
	border-top: 1px solid var(--border);
}

.feat-grid {
	list-style:     none;
	display:        grid;
	grid-template-columns: repeat(3, 1fr);
	gap:            1px;
	background:     var(--border);
	border-radius:  14px;
	overflow:       hidden;
	margin-top:     56px;
}

.feat-card {
	background: var(--bg2);
	padding:    28px 24px;
	transition: background .2s;
}

.feat-card:hover { background: var(--bg3); }

.feat-icon {
	width:         38px;
	height:        38px;
	border-radius: 9px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	margin-bottom: 14px;
	background:    var(--indigo-soft);
	border:        1px solid rgba(99, 102, 241, .15);
}

.feat-card__title {
	font-family:    var(--display);
	font-size:      16px;
	font-weight:    700;
	color:          #fff;
	margin-bottom:  7px;
	letter-spacing: -0.2px;
}

.feat-card p {
	font-size:   13px;
	color:       var(--muted);
	line-height: 1.65;
}

/* ─────────────────────────────────────────
   PRICING
   ───────────────────────────────────────── */
.fp-pricing {
	background: var(--bg3);
	border-top: 1px solid var(--border);
}

.pricing-head {
	text-align:    center;
	margin-bottom: 56px;
}

.pricing-head .sub { margin: 0 auto; }

.plan-grid {
	list-style: none;
	display:    grid;
	grid-template-columns: repeat(4, 1fr);
	gap:        14px;
}

.plan-card {
	background:    var(--bg2);
	border:        1px solid var(--border);
	border-radius: 14px;
	padding:       24px 20px;
	position:      relative;
	transition:    border-color .2s, transform .2s;
}

.plan-card:hover {
	border-color: var(--border2);
	transform:    translateY(-4px);
}

.plan-card.hot {
	border-color: rgba(99, 102, 241, .35);
	background:   linear-gradient(160deg, rgba(99, 102, 241, .06), var(--bg2));
}

.plan-card.hot:hover { border-color: rgba(99, 102, 241, .5); }

.hot-badge {
	position:   absolute;
	top:        -11px;
	left:       50%;
	transform:  translateX(-50%);
	background: var(--indigo);
	color:      #fff;
	font-size:  10px;
	font-weight: 700;
	font-family: var(--mono);
	padding:    2px 12px;
	border-radius: 100px;
	white-space: nowrap;
	letter-spacing: .5px;
}

.plan-name    { font-family: var(--display); font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.plan-tagline { font-size: 12px; color: var(--muted); margin-bottom: 16px; }

.plan-price {
	display:     flex;
	align-items: baseline;
	gap:         3px;
}

.plan-price--agency { align-items: baseline; }

.plan-amount {
	font-family:    var(--display);
	font-size:      34px;
	font-weight:    800;
	color:          #fff;
	letter-spacing: -1px;
	line-height:    1;
}

.plan-amount--sm { font-size: 24px; }

.plan-period     { font-size: 13px; color: var(--muted); }
.plan-period--meta { font-size: 12px; color: var(--muted); }

.plan-meta {
	font-family:  var(--mono);
	font-size:    10px;
	color:        var(--indigo);
	padding:      6px 10px;
	background:   var(--indigo-soft);
	border:       1px solid rgba(99, 102, 241, .12);
	border-radius: 7px;
	margin:       12px 0;
}

.plan-divider {
	height:        1px;
	background:    var(--border);
	border:        none;
	margin-bottom: 14px;
}

.plan-feats {
	list-style:     none;
	display:        flex;
	flex-direction: column;
	gap:            8px;
	margin-bottom:  22px;
}

.plan-feats li {
	font-size:   12px;
	color:       var(--muted);
	display:     flex;
	align-items: flex-start;
	gap:         6px;
	line-height: 1.4;
}

.fi      { color: var(--green); flex-shrink: 0; }
.fi.no   { color: var(--faint); }

.plan-btn-wrap a {
	display:         block;
	text-align:      center;
	padding:         10px;
	border-radius:   8px;
	font-size:       13px;
	font-weight:     600;
	font-family:     var(--body);
	text-decoration: none;
	transition:      all .2s;
}

.plan-btn-wrap a.outline {
	border: 1px solid var(--border2);
	color:  var(--text);
}

.plan-btn-wrap a.outline:hover {
	border-color: var(--indigo);
	background:   var(--indigo-soft);
	color:        var(--indigo);
}

.plan-btn-wrap a.filled { background: var(--indigo); color: #fff; }
.plan-btn-wrap a.filled:hover { opacity: .88; }

/* Comparison table */
.compare-box {
	margin-top:    40px;
	border:        1px solid var(--border);
	border-radius: 12px;
	overflow:      hidden;
}

.compare-hdr {
	padding:        12px 20px;
	background:     var(--bg3);
	font-family:    var(--mono);
	font-size:      10px;
	color:          var(--muted);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-bottom:  1px solid var(--border);
}

.compare-table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

thead th {
	padding:       11px 18px;
	font-family:   var(--display);
	font-size:     13px;
	font-weight:   700;
	color:         #fff;
	background:    var(--bg2);
	text-align:    left;
	border-bottom: 1px solid var(--border);
}

tbody td,
tbody th {
	padding:       10px 18px;
	font-size:     12px;
	color:         var(--muted);
	border-bottom: 1px solid var(--border);
}

tbody tr:last-child td,
tbody tr:last-child th { border-bottom: none; }

tbody td:not(:first-child) {
	font-family: var(--mono);
	color:       var(--text);
	font-size:   11px;
}

.yes { color: var(--green); }
.no  { color: var(--faint); }

/* ─────────────────────────────────────────
   CTA
   ───────────────────────────────────────── */
.fp-cta { background: var(--bg); text-align: center; overflow: hidden; }

.cta-wrap {
	max-width: 580px;
	margin:    0 auto;
	padding:   60px 0;
	position:  relative;
	min-width: 0;
}

.cta-wrap::before {
	content:        '';
	position:       absolute;
	top:            50%;
	left:           50%;
	transform:      translate(-50%, -50%);
	width:          500px;
	height:         280px;
	background:     radial-gradient(ellipse, rgba(99, 102, 241, .08), transparent 70%);
	pointer-events: none;
}

.cta-wrap > * { position: relative; z-index: 1; }

.cta-wrap h2     { font-size: clamp(28px, 4vw, 46px); margin-bottom: 14px; }
.cta-wrap p      { color: var(--muted); font-size: 16px; margin-bottom: 30px; font-weight: 300; }

.cta-btns {
	display:         flex;
	gap:             12px;
	justify-content: center;
	flex-wrap:       wrap;
	min-width:       0;
}

/* ─────────────────────────────────────────
   DESIGN TOKEN REFS  (panel colors)
   These mirror the HTML vars since panel uses light theme
   ───────────────────────────────────────── */
:root {
	--p-bg:     #ffffff;
	--p-bg2:    #f8fafc;
	--p-bg3:    #f1f5f9;
	--p-border: #e2e8f0;
	--p-text:   #0f172a;
	--p-muted:  #64748b;
	--p-accent: #6366f1;
	--p-green:  #22c55e;
	--p-red:    #ef4444;
	--p-amber:  #f59e0b;
}

/* ─────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────── */
@media (max-width: 960px) {
	.fp-hero { padding: 90px 20px 48px; }

	.demo-layout,
	.network-layout,
	.livefeed-layout,
	.detail-layout { grid-template-columns: 1fr; }

	.feat-grid  { grid-template-columns: 1fr 1fr; }
	.plan-grid  { grid-template-columns: 1fr 1fr; }

	.stats-bar  { flex-wrap: wrap; }
	.stat-cell  { flex: 0 0 50%; }
}

@media (max-width: 540px) {
	.plan-grid   { grid-template-columns: 1fr; }
	.feat-grid   { grid-template-columns: 1fr; }
	.detail-cards { grid-template-columns: 1fr; }

	.cta-wrap {
		max-width: 100%;
		padding: 44px 0 20px;
	}

	.cta-wrap::before {
		width: min(420px, calc(100vw - 40px));
		height: 220px;
	}

	.cta-wrap h2 {
		font-size: clamp(24px, 8vw, 34px);
		line-height: 1.08;
	}

	.cta-wrap p {
		font-size: 14px;
		margin-bottom: 22px;
	}

	.cta-btns {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.cta-btns .btn-hero {
		display: flex;
		width: 100%;
		justify-content: center;
		padding: 14px 18px;
		box-sizing: border-box;
	}

	.panel-window { border-radius: 12px; }

	.pw-titlebar {
		height: 34px;
		padding: 0 10px;
		gap: 4px;
	}

	.pw-url {
		margin-left: 4px;
		padding: 3px 8px;
		font-size: 9px;
	}

	.pw-body { flex-direction: column; }

	.pw-sidebar {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--p-border);
		padding: 10px 8px;
	}

	.pw-content { padding: 10px; }

	.pw-stats-grid { grid-template-columns: 1fr; }

	.p-site-row {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 4px 6px;
		align-items: start;
	}

	.p-site-name {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		overflow-wrap: anywhere;
	}

	.p-site-status {
		grid-column: 2;
		justify-self: start;
	}

	.p-site-pct {
		grid-column: 3;
		justify-self: end;
	}

	.p-site-bar {
		grid-column: 2 / 4;
		justify-self: start;
		max-width: 100%;
		min-width: 0;
		overflow: hidden;
	}
}