/*
Theme Name: QuiqVox
Theme URI: https://quiqtap.com/quiqvox
Author: Kivein Ltd
Author URI: https://kivein.com
Description: Brand theme for QuiqVox, the live audience engagement platform. Landing page, join flow with consent gate, and legal pages. Designed to work with the QuiqVox plugin.
Version: 1.2.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: quiqvox-theme
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
	--qv-blue: #1247e0;
	--qv-blue-dark: #0d35a8;
	--qv-purple: #8a2be2;
	--qv-pink: #f02d9a;
	--qv-ink: #0e1b4d;
	--qv-slate: #5a6482;
	--qv-slate-light: #8a92ad;
	--qv-bg: #f7f8fc;
	--qv-card: #ffffff;
	--qv-line: #e4e8f3;
	--qv-navy: #0b1030;
	--qv-green: #1d9d5f;

	--qv-grad: linear-gradient(120deg, #1247e0 0%, #8a2be2 55%, #f02d9a 100%);
	--qv-grad-soft: linear-gradient(120deg, rgba(18, 71, 224, 0.08), rgba(138, 43, 226, 0.08) 55%, rgba(240, 45, 154, 0.08));

	--qv-font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--qv-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--qv-r-sm: 10px;
	--qv-r: 16px;
	--qv-r-lg: 22px;
	--qv-shadow: 0 1px 2px rgba(14, 27, 77, 0.05), 0 8px 24px rgba(14, 27, 77, 0.07);
	--qv-shadow-lg: 0 2px 4px rgba(14, 27, 77, 0.06), 0 20px 48px rgba(14, 27, 77, 0.14);
	--qv-max: 1140px;
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
	margin: 0;
	font-family: var(--qv-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--qv-ink);
	background: var(--qv-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--qv-font-head);
	color: var(--qv-ink);
	line-height: 1.2;
	margin: 0 0 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
p { margin: 0 0 16px; }
a { color: var(--qv-blue); }
img { max-width: 100%; height: auto; }

a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 3px solid rgba(18, 71, 224, 0.45);
	outline-offset: 2px;
	border-radius: 4px;
}

.qv-container {
	max-width: var(--qv-max);
	margin: 0 auto;
	padding: 0 24px;
}

/* Buttons */
.qv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--qv-font-head);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	padding: 15px 30px;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.qv-btn-primary {
	background: var(--qv-grad);
	color: #fff;
	box-shadow: 0 6px 18px rgba(138, 43, 226, 0.32);
}
.qv-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(138, 43, 226, 0.4);
	color: #fff;
}
.qv-btn-ghost {
	background: #fff;
	color: var(--qv-ink);
	border: 1.5px solid var(--qv-line);
}
.qv-btn-ghost:hover { border-color: var(--qv-blue); color: var(--qv-blue); }
.qv-btn-light {
	background: #fff;
	color: var(--qv-ink);
	box-shadow: 0 6px 18px rgba(11, 16, 48, 0.25);
}
.qv-btn-light:hover { transform: translateY(-2px); color: var(--qv-blue-dark); }

/* ==========================================================================
   Header
   ========================================================================== */

.qv-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--qv-line);
}
.qv-header-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 74px;
}
.qv-logo { display: flex; align-items: center; }
.qv-logo img { height: 44px; width: auto; display: block; }

.qv-nav { display: flex; align-items: center; gap: 30px; }
.qv-nav a {
	font-family: var(--qv-font-head);
	font-size: 15px;
	font-weight: 500;
	color: var(--qv-ink);
	text-decoration: none;
}
.qv-nav a:hover { color: var(--qv-blue); }
.qv-nav .qv-btn { padding: 11px 24px; font-size: 15px; }

.qv-menu-toggle {
	display: none;
	background: none;
	border: 1.5px solid var(--qv-line);
	border-radius: var(--qv-r-sm);
	padding: 9px 11px;
	cursor: pointer;
}
.qv-menu-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--qv-ink);
	margin: 4px 0;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 860px) {
	.qv-menu-toggle { display: block; }
	.qv-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #fff;
		border-bottom: 1px solid var(--qv-line);
		box-shadow: var(--qv-shadow);
		padding: 8px 24px 20px;
	}
	.qv-nav.is-open { display: flex; }
	.qv-nav a { padding: 13px 4px; border-bottom: 1px solid var(--qv-line); }
	.qv-nav a:last-child { border-bottom: 0; }
	.qv-nav .qv-btn { margin-top: 12px; justify-content: center; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.qv-hero {
	position: relative;
	overflow: hidden;
	padding: 90px 0 70px;
	text-align: center;
}
.qv-hero::before,
.qv-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.55;
	pointer-events: none;
}
.qv-hero::before {
	width: 420px; height: 420px;
	background: rgba(18, 71, 224, 0.18);
	top: -140px; left: -120px;
}
.qv-hero::after {
	width: 460px; height: 460px;
	background: rgba(240, 45, 154, 0.16);
	bottom: -180px; right: -140px;
}
.qv-hero > .qv-container { position: relative; z-index: 1; }

.qv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--qv-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qv-purple);
	background: #fff;
	border: 1px solid var(--qv-line);
	border-radius: 999px;
	padding: 8px 18px;
	margin-bottom: 26px;
	box-shadow: var(--qv-shadow);
}
.qv-eyebrow::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--qv-grad);
}

.qv-hero h1 {
	font-size: clamp(34px, 5.4vw, 58px);
	font-weight: 800;
	letter-spacing: -0.02em;
	max-width: 820px;
	margin: 0 auto 20px;
}
.qv-grad-text {
	background: var(--qv-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.qv-hero-sub {
	font-size: clamp(17px, 2.2vw, 20px);
	color: var(--qv-slate);
	max-width: 620px;
	margin: 0 auto 34px;
}
.qv-hero-ctas {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.qv-hero-note {
	font-size: 14px;
	color: var(--qv-slate-light);
}

/* ==========================================================================
   Sections
   ========================================================================== */

.qv-sec { padding: 76px 0; }
.qv-sec-alt { background: #fff; border-top: 1px solid var(--qv-line); border-bottom: 1px solid var(--qv-line); }
.qv-sec-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.qv-sec-head h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; letter-spacing: -0.015em; }
.qv-sec-head p { color: var(--qv-slate); font-size: 18px; margin: 0; }

/* Steps */
.qv-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}
.qv-step {
	background: var(--qv-card);
	border: 1px solid var(--qv-line);
	border-radius: var(--qv-r-lg);
	padding: 32px 28px;
	box-shadow: var(--qv-shadow);
}
.qv-step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 14px;
	background: var(--qv-grad);
	color: #fff;
	font-family: var(--qv-font-head);
	font-weight: 700;
	font-size: 19px;
	margin-bottom: 18px;
}
.qv-step h3 { font-size: 20px; margin-bottom: 8px; }
.qv-step p { color: var(--qv-slate); font-size: 15.5px; margin: 0; }

/* Feature grid */
.qv-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 18px;
}
.qv-feature {
	background: var(--qv-card);
	border: 1px solid var(--qv-line);
	border-radius: var(--qv-r);
	padding: 24px 22px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.qv-feature:hover {
	transform: translateY(-3px);
	box-shadow: var(--qv-shadow-lg);
	border-color: rgba(138, 43, 226, 0.35);
}
.qv-feature-ic {
	width: 46px; height: 46px;
	border-radius: 13px;
	background: var(--qv-grad-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.qv-feature-ic svg { width: 23px; height: 23px; stroke: var(--qv-purple); }
.qv-feature h3 { font-size: 17px; margin-bottom: 6px; }
.qv-feature p { color: var(--qv-slate); font-size: 14.5px; margin: 0; }

/* Use cases */
.qv-uses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	text-align: center;
}
.qv-use {
	background: var(--qv-grad-soft);
	border: 1px solid var(--qv-line);
	border-radius: var(--qv-r);
	padding: 22px 16px;
}
.qv-use h3 { font-size: 16px; margin: 0 0 4px; }
.qv-use p { font-size: 13.5px; color: var(--qv-slate); margin: 0; }

/* ==========================================================================
   Product mockups
   ========================================================================== */

.qv-shots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 34px;
	align-items: start;
}
.qv-shot-label {
	text-align: center;
	font-family: var(--qv-font-head);
	font-size: 14px;
	font-weight: 600;
	color: var(--qv-slate);
	margin-top: 16px;
}

.qv-phone {
	width: 252px;
	max-width: 100%;
	margin: 0 auto;
	background: #10142e;
	border-radius: 36px;
	padding: 10px;
	box-shadow: var(--qv-shadow-lg);
}
.qv-phone-scr {
	background: var(--qv-bg);
	border-radius: 28px;
	padding: 14px 14px 20px;
	min-height: 400px;
}
.qv-statusbar {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	font-weight: 600;
	color: var(--qv-slate);
	padding: 2px 8px 10px;
}
.qv-mcard {
	background: #fff;
	border: 1px solid var(--qv-line);
	border-radius: var(--qv-r);
	padding: 20px 16px;
	box-shadow: var(--qv-shadow);
}
.qv-mtitle {
	font-family: var(--qv-font-head);
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	margin-bottom: 4px;
}
.qv-msub { font-size: 12px; color: var(--qv-slate); text-align: center; margin-bottom: 14px; }
.qv-mcode {
	border: 2px solid var(--qv-line);
	border-radius: 12px;
	background: var(--qv-bg);
	text-align: center;
	font-family: var(--qv-font-head);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.3em;
	padding: 11px 4px 11px 12px;
	color: var(--qv-ink);
}
.qv-mbtn {
	margin-top: 12px;
	background: var(--qv-grad);
	color: #fff;
	font-family: var(--qv-font-head);
	font-weight: 600;
	text-align: center;
	border-radius: 999px;
	padding: 11px;
	font-size: 14px;
}
.qv-meyebrow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--qv-purple);
	margin-bottom: 6px;
}
.qv-mq { font-family: var(--qv-font-head); font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.qv-mopt {
	display: flex;
	align-items: center;
	gap: 9px;
	border: 1.5px solid var(--qv-line);
	background: var(--qv-bg);
	border-radius: 10px;
	padding: 10px;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 8px;
}
.qv-mopt.sel { border-color: var(--qv-blue); background: #e9eefc; }
.qv-mkey {
	width: 20px; height: 20px;
	border-radius: 6px;
	background: var(--qv-slate);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.qv-mopt.sel .qv-mkey { background: var(--qv-blue); }

.qv-screen {
	background: var(--qv-navy);
	border-radius: var(--qv-r);
	padding: 20px;
	box-shadow: var(--qv-shadow-lg);
	border: 1px solid rgba(255, 255, 255, 0.06);
}
.qv-screen-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: #9aa3c7;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding-bottom: 12px;
	margin-bottom: 16px;
	gap: 10px;
	flex-wrap: wrap;
}
.qv-screen-top b { color: #fff; }
.qv-screen-code {
	color: #ff7ac2;
	font-family: var(--qv-font-head);
	font-weight: 700;
	letter-spacing: 0.16em;
	border: 1px solid rgba(240, 45, 154, 0.45);
	background: rgba(240, 45, 154, 0.12);
	border-radius: 8px;
	padding: 3px 10px;
	font-size: 13px;
}
.qv-screen-q { color: #fff; font-family: var(--qv-font-head); font-weight: 700; font-size: 18px; margin-bottom: 16px; }
.qv-sbar {
	display: grid;
	grid-template-columns: 74px 1fr 34px;
	gap: 9px;
	align-items: center;
	margin-bottom: 10px;
	font-size: 12px;
	color: #dfe4f7;
}
.qv-strack { background: rgba(255, 255, 255, 0.09); height: 20px; border-radius: 7px; overflow: hidden; }
.qv-sfill { height: 100%; background: linear-gradient(90deg, #1247e0, #8a2be2); border-radius: 7px; }
.qv-sfill.win { background: linear-gradient(90deg, #17b26a, #1d9d5f); }
.qv-sfill.dim { background: rgba(255, 255, 255, 0.2); }
.qv-scloud { text-align: center; padding: 10px 0 4px; }
.qv-scloud span { font-family: var(--qv-font-head); font-weight: 700; margin: 0 8px; display: inline-block; line-height: 1.35; }
.qv-sfoot { font-size: 10.5px; color: #9aa3c7; margin-top: 12px; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.qv-cta-band {
	background: var(--qv-grad);
	border-radius: var(--qv-r-lg);
	padding: 60px 40px;
	text-align: center;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.qv-cta-band::before {
	content: "";
	position: absolute;
	width: 320px; height: 320px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	top: -150px; right: -80px;
}
.qv-cta-band h2 { color: #fff; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; position: relative; }
.qv-cta-band p { color: rgba(255, 255, 255, 0.85); max-width: 520px; margin: 0 auto 28px; position: relative; }
.qv-cta-band .qv-btn { position: relative; }
.qv-cta-alt {
	margin: 18px 0 0 !important;
	font-size: 14.5px;
	position: relative;
}
.qv-cta-alt a { color: #fff; font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   Join page
   ========================================================================== */

.qv-page-hero {
	text-align: center;
	padding: 64px 0 36px;
}
.qv-page-hero h1 { font-size: clamp(28px, 4.4vw, 42px); font-weight: 800; }
.qv-page-hero p { color: var(--qv-slate); max-width: 560px; margin: 0 auto; font-size: 18px; }

.qv-join-wrap { max-width: 560px; margin: 0 auto; padding-bottom: 90px; }

.qv-gate {
	background: #fff;
	border: 1px solid var(--qv-line);
	border-top: 4px solid transparent;
	border-image: var(--qv-grad) 1;
	border-radius: 4px var(--qv-r) var(--qv-r);
	padding: 34px 30px;
	box-shadow: var(--qv-shadow-lg);
}
.qv-gate h2 { font-size: 21px; text-align: center; margin-bottom: 8px; }
.qv-gate > p { font-size: 15px; color: var(--qv-slate); text-align: center; }
.qv-gate-check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--qv-bg);
	border: 1px solid var(--qv-line);
	border-radius: var(--qv-r-sm);
	padding: 16px;
	font-size: 15px;
	margin: 20px 0;
	cursor: pointer;
}
.qv-gate-check input {
	margin-top: 3px;
	width: 19px; height: 19px;
	accent-color: var(--qv-blue);
	flex: 0 0 auto;
	cursor: pointer;
}
.qv-gate-check a { font-weight: 600; }
.qv-gate-btn {
	display: block;
	width: 100%;
	background: var(--qv-grad);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-family: var(--qv-font-head);
	font-size: 16px;
	font-weight: 600;
	padding: 15px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(138, 43, 226, 0.3);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.qv-gate-btn:disabled {
	background: var(--qv-line);
	color: var(--qv-slate-light);
	box-shadow: none;
	cursor: default;
}
.qv-gate-btn:not(:disabled):hover { transform: translateY(-1px); }
.qv-gate-ok {
	text-align: center;
	font-size: 15px;
	color: var(--qv-green);
	font-weight: 600;
	margin: 0;
}
.qv-join-app { margin-top: 28px; }
.qv-join-app.is-hidden { display: none; }

/* ==========================================================================
   Legal pages
   ========================================================================== */

.qv-legal {
	max-width: 760px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--qv-line);
	border-radius: var(--qv-r-lg);
	padding: 48px 44px;
	margin-bottom: 90px;
	box-shadow: var(--qv-shadow);
}
.qv-legal h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; }
.qv-legal-meta { color: var(--qv-slate-light); font-size: 14px; margin-bottom: 34px; }
.qv-legal h2 { font-size: 20px; margin: 34px 0 10px; }
.qv-legal p, .qv-legal li { font-size: 15.5px; color: #3a4468; }
.qv-legal ul { padding-left: 22px; margin: 0 0 16px; }
.qv-legal li { margin-bottom: 6px; }
@media (max-width: 640px) {
	.qv-legal { padding: 32px 22px; }
}

/* Generic page content */
.qv-page-content { max-width: 760px; margin: 0 auto 90px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.qv-footer {
	background: var(--qv-navy);
	color: #aab2d4;
	padding: 54px 0 34px;
	margin-top: 90px;
}
.qv-footer-in {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 34px;
	flex-wrap: wrap;
}
.qv-footer-brand { max-width: 340px; }
.qv-footer-wordmark {
	font-family: var(--qv-font-head);
	font-size: 24px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 10px;
	letter-spacing: -0.01em;
}
.qv-footer-wordmark span {
	background: linear-gradient(120deg, #6d8dff, #b06bff 55%, #ff6ac1);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.qv-footer-brand p { font-size: 14px; margin: 0; }
.qv-footer-links { display: flex; gap: 60px; flex-wrap: wrap; }
.qv-footer-col h4 {
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 14px;
}
.qv-footer-col a {
	display: block;
	color: #aab2d4;
	text-decoration: none;
	font-size: 14.5px;
	margin-bottom: 9px;
}
.qv-footer-col a:hover { color: #fff; }
.qv-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 40px;
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 13.5px;
}
.qv-footer-bottom b { color: #fff; }

/* ==========================================================================
   QuiqVox plugin harmonisation (join app rendered inside theme)
   ========================================================================== */

.qvx-app { padding: 0; }
.qvx-app .qvx-card { border-radius: var(--qv-r); box-shadow: var(--qv-shadow); }
.qvx-app .qvx-btn { border-radius: 999px; font-family: var(--qv-font-head); }