/*
Theme Name: IPTVLine
Theme URI: https://www.iptvline.net/
Author: IPTVLine
Description: IPTV landing theme
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: iptvline
*/

:root{
	--bg:#0b0b10;
	--surface:#10101a;
	--card:#141423;
	--text:#f7f7fb;
	--muted:#b9b9c7;
	--primary:#ff2a2a;
	--primary-2:#ff5252;
	--border:rgba(255,255,255,.10);
	--shadow:0 18px 50px rgba(0,0,0,.45);
	--radius:18px;
	--container:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
	background:radial-gradient(1200px 600px at 15% 15%,rgba(255,42,42,.18),transparent 60%),radial-gradient(900px 500px at 80% 20%,rgba(255,82,82,.10),transparent 60%),var(--bg);
	color:var(--text);
	line-height:1.55;
}
a{color:inherit}
img{max-width:100%;height:auto}

.container{
	width:100%;
	max-width:var(--container);
	margin:0 auto;
	padding:0 20px;
}

.site-header{
	position:sticky;
	top:0;
	z-index:100;
	backdrop-filter:blur(14px);
	background:rgba(11,11,16,.72);
	border-bottom:1px solid var(--border);
}
.header-inner{
	display:grid;
	grid-template-columns:auto 1fr auto;
	align-items:center;
	gap:14px;
	min-height:68px;
}
.brand{
	display:flex;
	align-items:center;
	gap:10px;
	text-decoration:none;
	font-weight:800;
	letter-spacing:.3px;
}
.brand-badge{
	width:34px;
	height:34px;
	border-radius:10px;
	background:linear-gradient(135deg,var(--primary),#b70000);
	box-shadow:0 10px 30px rgba(255,42,42,.25);
}
.nav-toggle{
	display:none;
	background:transparent;
	color:var(--text);
	border:1px solid var(--border);
	border-radius:12px;
	padding:10px 12px;
}
.nav{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:0;
}
.site-header nav ul{
	list-style:none !important;
	margin:0 !important;
	padding:0 !important;
	display:flex !important;
	flex-direction:row !important;
	align-items:center !important;
	gap:18px !important;
}
.site-header nav li{
	list-style:none !important;
	margin:0 !important;
	padding:0 !important;
}
.site-header nav li::marker{content:""}
.nav-list{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	align-items:center;
	gap:18px;
}
.site-header nav ul,
.site-header nav li{
	list-style:none;
	margin:0;
	padding:0;
}
.nav-list li{margin:0;padding:0}
.nav-list a{
	text-decoration:none;
	color:var(--muted);
	font-weight:600;
	font-size:14px;
}
.nav-list a:hover{color:var(--text)}
.header-actions{display:flex;align-items:center;gap:10px}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:12px 16px;
	border-radius:14px;
	text-decoration:none;
	font-weight:800;
	border:1px solid transparent;
	cursor:pointer;
}
.btn-primary{
	background:linear-gradient(135deg,var(--primary),#b70000);
	box-shadow:0 18px 50px rgba(255,42,42,.18);
	color:var(--text);
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{
	background:transparent;
	border-color:var(--border);
	color:var(--text);
}
.btn-ghost:hover{border-color:rgba(255,255,255,.25)}

.hero{
	padding:72px 0 26px;
}
.hero-grid{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:28px;
	align-items:center;
}
.hero h1{
	margin:0 0 14px;
	font-size:54px;
	line-height:1.08;
	letter-spacing:-.8px;
}
.hero p{
	margin:0 0 20px;
	color:var(--muted);
	max-width:56ch;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-card{
	border:1px solid var(--border);
	background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
	border-radius:var(--radius);
	padding:18px;
	box-shadow:var(--shadow);
}
.hero-metrics{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:12px;
	margin-top:14px;
}
.metric{
	border:1px solid var(--border);
	border-radius:14px;
	padding:14px;
	background:rgba(20,20,35,.55);
}
.metric .v{font-weight:900;font-size:20px}
.metric .k{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}

.section{padding:70px 0}
.section-title{
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-bottom:26px;
}
.kicker{
	color:rgba(255,255,255,.72);
	font-size:12px;
	font-weight:900;
	letter-spacing:2.8px;
	text-transform:uppercase;
}
.section-title h2{
	margin:0;
	font-size:34px;
	line-height:1.12;
}
.section-title p{margin:0;color:var(--muted);max-width:70ch}

.grid-3{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
}
.card{
	border:1px solid var(--border);
	border-radius:var(--radius);
	padding:22px;
	background:rgba(20,20,35,.55);
	box-shadow:0 18px 50px rgba(0,0,0,.20);
}
.card h3{margin:0 0 8px;font-size:20px}
.card p{margin:0;color:var(--muted)}
.btn-sm{
	padding:10px 12px;
	border-radius:12px;
	font-weight:900;
}

.post-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
}
.post-card h3{margin:0 0 8px;font-size:20px}
.post-card .meta{
	color:rgba(255,255,255,.65);
	font-size:12px;
	font-weight:800;
	letter-spacing:1.2px;
	text-transform:uppercase;
	margin-bottom:10px;
}
.post-card .actions{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	margin-top:14px;
}
.post-card .title-link{
	text-decoration:none;
	color:var(--text);
}
.post-card .title-link:hover{color:rgba(255,255,255,.92)}
.section-actions{margin-top:16px}
.pill{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:7px 10px;
	border-radius:999px;
	border:1px solid var(--border);
	color:rgba(255,255,255,.82);
	font-size:12px;
	font-weight:800;
	letter-spacing:.4px;
	margin-bottom:12px;
}

.pricing-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
}
.price{
	border:1px solid var(--border);
	border-radius:var(--radius);
	padding:22px;
	background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
	box-shadow:var(--shadow);
	position:relative;
}
.price.popular{outline:2px solid rgba(255,42,42,.55)}
.price h3{margin:0 0 6px}
.price .p{color:var(--muted);margin:0 0 14px}
.price .amount{font-size:46px;font-weight:1000;letter-spacing:-1px}
.price ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;color:rgba(255,255,255,.88)}
.price li{display:flex;align-items:center;justify-content:space-between;gap:12px}
.price .tag{
	position:absolute;
	top:16px;
	right:16px;
	font-size:12px;
	font-weight:900;
	letter-spacing:2px;
	text-transform:uppercase;
	color:rgba(255,255,255,.80);
}

.split{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
}
.faq details{
	border:1px solid var(--border);
	border-radius:16px;
	padding:16px 18px;
	background:rgba(20,20,35,.55);
}
.faq summary{
	cursor:pointer;
	font-weight:900;
}
.faq p{margin:10px 0 0;color:var(--muted)}

.contact-wrap{
	display:grid;
	grid-template-columns:.9fr 1.1fr;
	gap:16px;
}
.contact-box{border:1px solid var(--border);border-radius:var(--radius);padding:22px;background:rgba(20,20,35,.55)}
.contact-box h3{margin:0 0 10px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.field label{font-size:12px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.70)}
.field input,.field textarea{
	width:100%;
	padding:12px 14px;
	border-radius:14px;
	border:1px solid rgba(255,255,255,.16);
	background:rgba(10,10,16,.60);
	color:var(--text);
	outline:none;
}
.field input:focus,.field textarea:focus{border-color:rgba(255,42,42,.65)}
.alert{
	padding:12px 14px;
	border-radius:14px;
	border:1px solid var(--border);
	margin-bottom:12px;
}
.alert.success{border-color:rgba(100,255,180,.30);background:rgba(100,255,180,.08)}
.alert.error{border-color:rgba(255,90,90,.35);background:rgba(255,90,90,.10)}

.site-footer{
	border-top:1px solid var(--border);
	padding:28px 0;
	color:var(--muted);
}
.trust-bar{
	border-top:1px solid var(--border);
	padding:18px 0;
	background:rgba(11,11,16,.72);
}
.trust-items{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:12px;
}
.trust-item{
	border:1px solid rgba(255,255,255,.10);
	border-radius:16px;
	padding:14px 14px;
	background:rgba(20,20,35,.45);
}
.trust-title{
	color:rgba(255,255,255,.92);
	font-weight:900;
	font-size:13px;
	letter-spacing:.2px;
}
.trust-sub{
	color:rgba(255,255,255,.65);
	font-size:12px;
	font-weight:700;
	margin-top:4px;
}
.trust-desc{
	color:rgba(255,255,255,.72);
	font-size:12px;
	font-weight:600;
	margin-top:8px;
	line-height:1.45;
}
.trust-link{
	display:inline-block;
	margin-top:10px;
	color:rgba(255,255,255,.92);
	font-size:12px;
	font-weight:900;
	letter-spacing:.4px;
	text-decoration:none;
}
.trust-link:hover{color:var(--primary-2)}
.footer-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	flex-wrap:wrap;
}
.footer-links{
	display:flex;
	align-items:center;
	gap:14px;
	flex-wrap:wrap;
}
.footer-links a{
	color:var(--muted);
	text-decoration:none;
	font-weight:800;
	font-size:13px;
	letter-spacing:.3px;
}
.footer-links a:hover{color:rgba(255,255,255,.92)}

.entry{
	padding:42px 0 70px;
}
.entry h1{margin:0 0 14px;font-size:36px}
.entry .content{color:rgba(255,255,255,.90)}
.entry .content p{color:rgba(255,255,255,.86)}
.entry .content a{color:var(--primary-2)}

@media (max-width: 980px){
	.hero-grid{grid-template-columns:1fr}
	.hero h1{font-size:42px}
	.grid-3{grid-template-columns:1fr}
	.post-grid{grid-template-columns:1fr}
	.pricing-grid{grid-template-columns:1fr}
	.split{grid-template-columns:1fr}
	.contact-wrap{grid-template-columns:1fr}
	.form-row{grid-template-columns:1fr}
	.header-inner{grid-template-columns:auto 1fr auto}
	.nav-toggle{display:none}
	.nav{
		display:flex;
		justify-content:flex-start;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.nav::-webkit-scrollbar{display:none}
	.nav-list{
		flex-wrap:nowrap;
		gap:14px;
	}
	.nav-list a{white-space:nowrap}
	.trust-items{grid-template-columns:1fr 1fr}
}