/**
 * cyberfix.com home + interior-page styles.
 * Deploy to: /assets/cyberfix-home.css on the production server.
 * Paired with cyberfix-widgets.js (same folder) and cyberfix_home.php (page shell).
 *
 * Every style is referenced by a tool_demo renderer in cyberfix-widgets.js.
 * One file, every page — nav switches render targets, not stylesheets.
 */
:root {
  color-scheme: dark;
  --bg: #030812; --bg2: #0a1828; --green: #22e4ff; --green-dim: #4a9cc9;
  --green-deep: #134466; --ink: #e6f4ff; --ink-dim: #7ea9c8; --amber: #ffb347;
  --red: #ff4d4d;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; overflow-x: hidden; }
section { padding: 70px 32px; position: relative; border-bottom: 1px solid var(--green-deep); }
h1 { font-size: clamp(2.2rem,6vw,4.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--green); text-shadow: 0 0 40px rgba(34,228,255,0.3); }
h1 .light { color: #fff; }
h2 { font-size: clamp(1.7rem,4vw,2.8rem); font-weight: 700; margin-bottom: 28px; color: var(--green); text-shadow: 0 0 25px rgba(34,228,255,0.25); }
h3 { color: var(--green); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 16px; font-family: 'Fira Code', monospace; opacity: 0.85; }
p.lede { font-size: 1.05rem; color: var(--ink-dim); max-width: 720px; margin-bottom: 28px; line-height: 1.55; }
code { font-family: 'Fira Code', monospace; color: var(--green); }

/* NAV */
nav.topnav { position: sticky; top: 0; z-index: 50; background: rgba(3,8,18,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--green-deep); padding: 12px 24px; display: flex; align-items: center; gap: 14px; font-family: 'Fira Code', monospace; font-size: 0.82rem; }
nav.topnav .brand { color: var(--green); font-weight: 700; letter-spacing: 0.05em; margin-right: 18px; }
nav.topnav a { color: var(--ink-dim); text-decoration: none; padding: 6px 10px; border-radius: 4px; transition: all 0.2s; }
nav.topnav a:hover { color: var(--green); background: rgba(34,228,255,0.08); }
nav.topnav a.active { color: #000; background: var(--green); font-weight: 700; }
nav.topnav .spacer { flex: 1; }
nav.topnav .db-pill { color: var(--green-dim); font-size: 0.72rem; padding: 4px 10px; border: 1px solid var(--green-deep); border-radius: 999px; }

/* provenance badge */
.obj-badge { position: absolute; top: 14px; right: 16px; font-family: 'Fira Code', monospace; font-size: 0.65rem; color: var(--green-dim); padding: 3px 8px; border: 1px solid var(--green-deep); border-radius: 4px; background: rgba(0,0,0,0.5); opacity: 0.5; transition: opacity 0.2s; cursor: help; z-index: 5; }
.obj-badge:hover { opacity: 1; color: var(--green); border-color: var(--green); }

/* HERO (shared) */
.hero-section { min-height: 82vh; overflow: hidden; display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-content { position: relative; z-index: 2; width: 100%; }
.brand-mark { display: inline-block; padding: 5px 12px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); font-size: 0.75rem; letter-spacing: 0.2em; margin-bottom: 20px; font-family: 'Fira Code', monospace; }
.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px; margin-top: 44px; }
.stat { border-left: 2px solid var(--green); padding-left: 16px; }
.stat .num { font-size: 2.4rem; font-weight: 800; color: var(--green); font-family: 'Fira Code', monospace; line-height: 1; }
.stat .unit { color: var(--ink-dim); font-size: 0.82rem; letter-spacing: 0.06em; margin-top: 6px; }
.stat .src { color: var(--green-dim); font-size: 0.65rem; font-family: 'Fira Code', monospace; margin-top: 3px; opacity: 0.7; }
.live-pill { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); font-size: 0.6rem; letter-spacing: 0.12em; animation: livebreath 2.4s ease-in-out infinite; }
@keyframes livebreath { 0%,100% { opacity: 0.55; box-shadow: 0 0 0 rgba(34,228,255,0); } 50% { opacity: 1; box-shadow: 0 0 10px rgba(34,228,255,0.55); } }
.stat .num.pulse { animation: numpulse 1.1s cubic-bezier(.2,.8,.2,1); }
@keyframes numpulse { 0% { text-shadow: 0 0 0 rgba(34,228,255,0); color: var(--green); } 30% { text-shadow: 0 0 22px rgba(34,228,255,0.95); color: #ffffff; } 100% { text-shadow: 0 0 0 rgba(34,228,255,0); color: var(--green); } }

.chart-wrap { width: 100%; max-width: 1100px; margin: 0 auto; height: 380px; position: relative; }
.badges { display: flex; gap: 14px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.badge { padding: 10px 16px; background: rgba(34,228,255,0.08); border: 1px solid var(--green-dim); border-radius: 8px; font-family: 'Fira Code', monospace; }
.badge .k { color: var(--ink-dim); font-size: 0.72rem; }
.badge .v { color: var(--green); font-size: 1.2rem; font-weight: 700; }

/* LSA slider */
.lsa-controls { display: flex; gap: 28px; align-items: center; margin-bottom: 28px; flex-wrap: wrap; }
.lsa-slider-box { flex: 1; min-width: 260px; }
.lsa-slider-box label { display: block; color: var(--ink-dim); margin-bottom: 8px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
input[type="range"] { width: 100%; height: 6px; background: var(--green-deep); border-radius: 4px; outline: none; -webkit-appearance: none; appearance: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green); cursor: pointer; box-shadow: 0 0 12px rgba(34,228,255,0.6); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--green); cursor: pointer; border: none; box-shadow: 0 0 12px rgba(34,228,255,0.6); }
.lsa-value { font-family: 'Fira Code', monospace; font-size: 1.6rem; color: var(--green); min-width: 120px; text-align: right; }

/* TTFB race */
.race { max-width: 900px; margin: 0 auto; }
.race-row { display: flex; align-items: center; gap: 16px; margin: 16px 0; font-family: 'Fira Code', monospace; }
.race-name { flex: 0 0 200px; font-size: 0.9rem; }
.race-name.us { color: var(--green); font-weight: 700; }
.race-bar { flex: 1; height: 36px; background: rgba(34,228,255,0.05); border: 1px solid var(--green-deep); border-radius: 6px; overflow: hidden; position: relative; }
.race-fill { height: 100%; border-radius: 6px; width: 0; transition: width 2s cubic-bezier(0.2,0.8,0.2,1); display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; font-size: 0.85rem; font-weight: 700; }
.race-fill.us { background: linear-gradient(90deg, var(--green-deep), var(--green)); color: #000; }
.race-fill.them { background: linear-gradient(90deg, #3a1a1a, #ff6b6b); color: #fff; }

/* Competitive grid */
.comp-grid { display: grid; grid-template-columns: 130px repeat(10, 1fr); gap: 3px; max-width: 1200px; margin: 0 auto; font-family: 'Fira Code', monospace; font-size: 0.72rem; }
.comp-grid .cap-head { color: var(--green); writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 4px; text-align: right; height: 110px; align-self: end; }
.comp-grid .vendor { color: var(--ink-dim); padding: 12px 8px; display: flex; align-items: center; justify-content: flex-end; }
.comp-grid .vendor.us { color: var(--green); font-weight: 700; }
.comp-grid .cell { height: 42px; border-radius: 4px; background: #1a1a1a; opacity: 0; transition: opacity 0.4s; }
.comp-grid .cell.partial { background: var(--amber); }
.comp-grid .cell.full { background: var(--green); box-shadow: 0 0 8px rgba(34,228,255,0.4); }
.comp-grid .cell.us { border: 1px solid var(--green); }

/* 3D tower */
.tower-container { perspective: 1200px; height: 500px; display: flex; align-items: center; justify-content: center; }
.tower { transform-style: preserve-3d; transform: rotateX(-18deg) rotateY(0deg); animation: spin 20s linear infinite; position: relative; }
@keyframes spin { from { transform: rotateX(-18deg) rotateY(0deg); } to { transform: rotateX(-18deg) rotateY(360deg); } }
.slab { position: absolute; width: 280px; height: 50px; background: linear-gradient(135deg, rgba(34,228,255,0.15) 0%, rgba(34,228,255,0.4) 100%); border: 1px solid var(--green); border-radius: 6px; color: var(--green); font-family: 'Fira Code', monospace; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; text-shadow: 0 0 10px var(--green); box-shadow: 0 0 20px rgba(34,228,255,0.2); left: -140px; top: -25px; }

/* Tool grid */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; }
.tool-tile { padding: 24px; background: linear-gradient(135deg, rgba(34,228,255,0.03) 0%, rgba(34,228,255,0.08) 100%); border: 1px solid var(--green-deep); border-radius: 10px; transition: all 0.3s; }
.tool-tile:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(34,228,255,0.15); }
.tool-icon { width: 52px; height: 52px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--bg); border-radius: 10px; border: 1px solid var(--green-dim); }
.tool-tile h4 { color: var(--green); margin-bottom: 6px; font-size: 1.02rem; }
.tool-tile p { color: var(--ink-dim); font-size: 0.82rem; line-height: 1.5; }
.counter { font-family: 'Fira Code', monospace; color: var(--green); font-size: 1.3rem; font-weight: 700; margin-top: 12px; }

/* Trial */
.trial-card { max-width: 600px; margin: 0 auto; padding: 48px 36px; border: 2px solid var(--amber); border-radius: 16px; background: rgba(255,179,71,0.05); text-align: center; }
.trial-card .trial-badge { color: var(--amber); font-family: 'Fira Code', monospace; font-size: 0.8rem; letter-spacing: 0.15em; }
.trial-card .price { font-family: 'Fira Code', monospace; font-size: 3.5rem; color: var(--amber); font-weight: 800; margin: 20px 0 8px; }
.trial-card .period { color: var(--ink-dim); font-size: 0.95rem; margin-bottom: 28px; }
.trial-card .btn { display: inline-block; padding: 14px 40px; background: var(--amber); color: #000; border-radius: 999px; font-weight: 700; text-decoration: none; letter-spacing: 0.05em; }

/* Keyword cluster */
.cluster-wrap { max-width: 1100px; margin: 0 auto; position: relative; height: 480px; }
.cluster-wrap svg { width: 100%; height: 100%; }
.cluster-wrap .node { fill: rgba(34,228,255,0.15); stroke: var(--green); stroke-width: 1.5; cursor: pointer; transition: all 0.25s; }
.cluster-wrap .node:hover { fill: var(--green); }
.cluster-wrap .link { stroke: var(--green-dim); stroke-opacity: 0.4; }
.cluster-wrap text { fill: var(--ink); font-family: 'Fira Code', monospace; font-size: 10px; pointer-events: none; }
.cluster-wrap .hub-text { fill: var(--green); font-weight: 700; font-size: 12px; }

/* Schema coverage */
.schema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; max-width: 1100px; margin: 0 auto; }
.schema-card { padding: 18px; border: 1px solid var(--green-dim); border-radius: 8px; background: rgba(34,228,255,0.04); }
.schema-card .type { font-family: 'Fira Code', monospace; color: var(--green); font-size: 0.85rem; font-weight: 700; }
.schema-card .count { font-size: 2rem; color: var(--ink); font-weight: 700; margin: 6px 0; font-family: 'Fira Code', monospace; }
.schema-card .pct { color: var(--ink-dim); font-size: 0.75rem; }
.schema-card .bar { height: 4px; background: var(--green-deep); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.schema-card .bar-fill { height: 100%; background: var(--green); width: 0; transition: width 1.4s cubic-bezier(0.2,0.8,0.2,1); }

/* Report gallery */
.report-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 1200px; margin: 0 auto; }
.report-card { padding: 22px; background: linear-gradient(135deg, rgba(34,228,255,0.05), rgba(34,228,255,0.02)); border: 1px solid var(--green-deep); border-radius: 10px; transition: all 0.25s; cursor: pointer; }
.report-card:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(34,228,255,0.15); }
.report-card .kind { color: var(--green); font-family: 'Fira Code', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.report-card h4 { color: var(--ink); font-size: 1.1rem; margin-bottom: 8px; }
.report-card .desc { color: var(--ink-dim); font-size: 0.85rem; line-height: 1.5; margin-bottom: 14px; }
.report-card .meta { color: var(--green-dim); font-family: 'Fira Code', monospace; font-size: 0.7rem; }
.report-card .freshness { display: inline-block; padding: 2px 8px; background: rgba(34,228,255,0.1); border-radius: 999px; color: var(--green); font-size: 0.7rem; font-family: 'Fira Code', monospace; margin-left: 8px; }

/* Object-verb wheel */
.verb-wheel { max-width: 700px; margin: 0 auto; height: 560px; position: relative; }
.verb-wheel svg { width: 100%; height: 100%; }
.verb-wheel .verb-ring { fill: none; stroke: var(--green-deep); stroke-width: 1; }
.verb-wheel .verb { fill: rgba(34,228,255,0.1); stroke: var(--green-dim); stroke-width: 1.5; transition: all 0.2s; cursor: pointer; }
.verb-wheel .verb:hover { fill: var(--green); stroke: var(--green); }
.verb-wheel .verb-text { fill: var(--green); font-family: 'Fira Code', monospace; font-size: 11px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.verb-wheel .core { fill: var(--bg2); stroke: var(--green); stroke-width: 2; }
.verb-wheel .core-text { fill: var(--green); font-size: 15px; font-weight: 700; text-anchor: middle; pointer-events: none; }

/* Object-type cards */
.obj-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; }
.obj-type-card { padding: 22px; border: 1px solid var(--green-dim); border-radius: 10px; background: rgba(34,228,255,0.04); }
.obj-type-card .ot-name { color: var(--green); font-family: 'Fira Code', monospace; font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; }
.obj-type-card .ot-count { font-size: 2.2rem; color: var(--ink); font-weight: 800; font-family: 'Fira Code', monospace; }
.obj-type-card .ot-desc { color: var(--ink-dim); font-size: 0.8rem; line-height: 1.4; margin-top: 8px; }

/* Fanout diagram */
.fanout-wrap { max-width: 1100px; margin: 0 auto; height: 360px; }
.fanout-wrap svg { width: 100%; height: 100%; }
.fanout-wrap .hub { fill: rgba(34,228,255,0.15); stroke: var(--green); stroke-width: 2; }
.fanout-wrap .spoke { fill: rgba(34,228,255,0.04); stroke: var(--green-dim); stroke-width: 1; }
.fanout-wrap .line { stroke: var(--green-dim); stroke-width: 1; stroke-dasharray: 3,3; stroke-opacity: 0; transition: stroke-opacity 0.3s; }
.fanout-wrap .line.active { stroke-opacity: 0.7; stroke: var(--green); }
.fanout-wrap text { fill: var(--ink); font-family: 'Fira Code', monospace; font-size: 10px; text-anchor: middle; }
.fanout-wrap text.hub-text { fill: var(--green); font-size: 12px; font-weight: 700; }

/* API preview */
.api-preview { max-width: 1000px; margin: 0 auto; background: #000; border: 1px solid var(--green-deep); border-radius: 10px; padding: 22px; font-family: 'Fira Code', monospace; font-size: 0.78rem; line-height: 1.6; color: var(--ink); overflow-x: auto; }
.api-preview .keyword { color: var(--amber); }
.api-preview .str { color: var(--green); }
.api-preview .num { color: #82aaff; }
.api-preview .com { color: var(--ink-dim); }

/* Pricing tiers */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
.tier { padding: 32px 24px; border: 1px solid var(--green-deep); border-radius: 14px; background: rgba(34,228,255,0.03); position: relative; display: flex; flex-direction: column; }
.tier.featured { border-color: var(--amber); background: rgba(255,179,71,0.05); transform: scale(1.02); }
.tier.featured::before { content:'MOST POPULAR'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 12px; background: var(--amber); color: #000; font-family: 'Fira Code', monospace; font-size: 0.68rem; font-weight: 700; border-radius: 999px; letter-spacing: 0.1em; }
.tier .tier-name { color: var(--green); font-family: 'Fira Code', monospace; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.tier.featured .tier-name { color: var(--amber); }
.tier .tier-price { font-size: 3rem; font-weight: 800; color: var(--ink); font-family: 'Fira Code', monospace; margin: 8px 0 4px; }
.tier.featured .tier-price { color: var(--amber); }
.tier .tier-period { color: var(--ink-dim); font-size: 0.9rem; margin-bottom: 22px; }
.tier ul { list-style: none; flex: 1; }
.tier li { padding: 6px 0; color: var(--ink-dim); font-size: 0.88rem; }
.tier li::before { content:'+ '; color: var(--green); font-family: 'Fira Code', monospace; }
.tier .tier-btn { display: block; text-align: center; padding: 12px; margin-top: 22px; border-radius: 999px; background: var(--green-deep); color: var(--green); text-decoration: none; font-weight: 700; border: 1px solid var(--green); transition: all 0.2s; }
.tier.featured .tier-btn { background: var(--amber); color: #000; border-color: var(--amber); }
.tier .tier-btn:hover { background: var(--green); color: #000; }

/* FAQ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--green-deep); padding: 18px 0; cursor: pointer; }
.faq-item .q { display: flex; justify-content: space-between; color: var(--ink); font-weight: 600; font-size: 1.05rem; }
.faq-item .q::after { content:'+'; color: var(--green); font-size: 1.5rem; line-height: 1; transition: transform 0.2s; }
.faq-item.open .q::after { transform: rotate(45deg); }
.faq-item .a { color: var(--ink-dim); font-size: 0.92rem; line-height: 1.55; margin-top: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s, margin-top 0.3s; }
.faq-item.open .a { margin-top: 12px; max-height: 400px; }

footer { padding: 32px; text-align: center; color: var(--ink-dim); font-family: 'Fira Code', monospace; font-size: 0.75rem; }
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s, transform 0.8s; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* DB banner */
.db-banner { position: fixed; bottom: 14px; right: 14px; background: rgba(0,20,10,0.92); border: 1px solid var(--green); border-radius: 8px; padding: 10px 14px; font-family: 'Fira Code', monospace; font-size: 0.72rem; color: var(--green); z-index: 100; max-width: 340px; box-shadow: 0 4px 20px rgba(34,228,255,0.15); }
.db-banner strong { color: #fff; }
.db-banner .x { position: absolute; top: 4px; right: 8px; cursor: pointer; color: var(--ink-dim); }
.db-banner .x:hover { color: var(--green); }