/*!
Theme Name: kanalnet iptv
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: KanalNet IPTV – Premium Streaming Theme
Version: 2.0.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kanalnet-iptv
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize / Reset
# CSS Custom Properties
# Base
# Typography
# Links
# Forms
# WordPress Core
# Layout
# Components
  - Navigation (legacy)
  - Hero
  - Slider
  - Live Banner
  - Trust Strip
  - Features
  - Devices
  - How-To Steps
  - Pricing
  - Testimonials
  - Blog
  - FAQ
  - Contact
  - Impressum
  - Footer
  - WhatsApp Float
  - Reveal Animations
# Utilities
# Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize / Reset
--------------------------------------------------------------*/
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body { margin: 0; }
main { display: block; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; display: block; max-width: 100%; height: auto; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template, [hidden] { display: none; }

/*--------------------------------------------------------------
# CSS Custom Properties
--------------------------------------------------------------*/
:root {
	/* Brand colours */
	--red:        #e53e3e;
	--red-dark:   #c53030;
	--red-deeper: #9b2c2c;
	--red-glow:   rgba(229, 62, 62, 0.28);
	--red-light:  #fc6a6a;
	--red-subtle: rgba(229, 62, 62, 0.08);
	--red-border: rgba(229, 62, 62, 0.22);

	--green-wa:   #25d366;
	--green-wa-dark: #1da851;
	--gold:       #f6ad55;
	--sky:        #63b3ed;

	/* Background scale */
	--bg:         #08080f;
	--bg2:        #0e0e1a;
	--bg3:        #12121f;
	--surface:    #16162a;
	--surface2:   #1c1c32;
	--surface3:   #222240;

	/* Text */
	--text:       #e8e8f0;
	--text-dim:   #b0b0cc;
	--muted:      #7070a0;
	--muted-light:#9090b8;

	/* Borders */
	--border:     rgba(255, 255, 255, 0.07);
	--border-red: rgba(229, 62, 62, 0.25);

	/* Spacing */
	--section-pad: 7rem;
	--container:   1200px;

	/* Radii */
	--radius:     12px;
	--radius-lg:  20px;
	--radius-xl:  28px;
	--radius-pill:100px;

	/* Nav */
	--nav-h: 70px;

	/* Typography */
	--font-head: 'Barlow Condensed', sans-serif;
	--font-body: 'DM Sans', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;

	/* Transitions */
	--t:      0.22s cubic-bezier(0.4, 0, 0.2, 1);
	--t-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
html {
	font-size: 16px;
	scroll-padding-top: var(--nav-h);
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Noise grain overlay */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.45;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

html.kn-nav-open,
html.kn-nav-open body { overflow: hidden; }

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.03em;
	color: var(--text);
	clear: both;
}

h1 { font-size: clamp(2.8rem, 8vw, 5.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
h3 { font-size: 1.2rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.01em; }

p {
	margin-bottom: 1.4em;
	color: var(--text-dim);
}

p:last-child { margin-bottom: 0; }

blockquote { margin: 0 1.5em; }
address { margin: 0 0 1.5em; font-style: normal; }

pre {
	background: var(--surface);
	font-family: var(--font-mono);
	font-size: 0.88rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.4em 1.6em;
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

code, kbd, tt, var {
	font-family: var(--font-mono);
	font-size: 0.88em;
	background: var(--surface);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	border: 1px solid var(--border);
}

abbr, acronym { border-bottom: 1px dotted var(--muted); cursor: help; }
mark, ins { background: rgba(246, 173, 85, 0.15); color: var(--gold); text-decoration: none; padding: 0.1em 0.3em; border-radius: 3px; }
big { font-size: 125%; }
dfn, cite, em, i { font-style: italic; }

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
a {
	color: var(--red-light);
	text-decoration: none;
	transition: color var(--t);
}

a:visited { color: var(--red); }
a:hover, a:focus, a:active { color: var(--red-light); }
a:focus { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }
a:hover, a:active { outline: 0; }

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid var(--border-red);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	line-height: 1;
	padding: 0.65em 1.2em;
	cursor: pointer;
	transition: background var(--t), border-color var(--t);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover { background: var(--surface2); border-color: var(--red); }

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus { outline: 2px solid var(--red); outline-offset: 2px; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.6em 0.9em;
	transition: border-color var(--t), box-shadow var(--t);
	width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--red);
	box-shadow: 0 0 0 3px var(--red-glow);
	color: var(--text);
}

textarea { width: 100%; min-height: 140px; resize: vertical; }

/*--------------------------------------------------------------
# WordPress Core
--------------------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--surface2);
	border-radius: var(--radius);
	box-shadow: 0 0 0 3px var(--red-glow);
	clip: auto !important;
	clip-path: none;
	color: var(--text);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

#primary[tabindex="-1"]:focus { outline: 0; }

/* Posts and pages */
.sticky { display: block; }
.post, .page { margin: 0 0 1.5em; }
.updated:not(.published) { display: none; }
.page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; }
.page-links { clear: both; margin: 0 0 1.5em; }

/* Comments */
.comment-content a { word-wrap: break-word; }
.bypostauthor { display: block; }

/* Widgets */
.widget { margin: 0 0 1.5em; }
.widget select { max-width: 100%; }

/* Embeds */
embed, iframe, object { max-width: 100%; }
figure { margin: 1em 0; }
table { margin: 0 0 1.5em; width: 100%; border-collapse: collapse; }
td, th { padding: 0.6em 0.8em; border: 1px solid var(--border); }

/* Lists */
ul, ol { margin: 0 0 1.5em 2em; }
ul { list-style: disc; }
ol { list-style: decimal; }
li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; }
dt { font-weight: 700; }
dd { margin: 0 1.5em 1.5em; }

/* Media captions */
.wp-caption { margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; }
.wp-caption .wp-caption-text, .wp-caption-text { margin: 0.6em 0; text-align: center; font-size: 0.85rem; color: var(--muted); }

/* Galleries */
.gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1rem; }
.gallery-item { display: inline-block; text-align: center; width: 100%; }
.gallery-caption { display: block; font-size: 0.8rem; color: var(--muted); }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

/* Custom logo */
.custom-logo-link { display: inline-block; }

/* Jetpack infinite scroll */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { display: none; }
.infinity-end.neverending .site-footer { display: block; }

/* Alignments */
.alignleft  { float: left;  margin-right: 1.5em; margin-bottom: 1.5em; }
.alignright { float: right; margin-left: 1.5em;  margin-bottom: 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; }

/* Navigation */
.main-navigation { display: block; width: 100%; }
.main-navigation ul { display: none; list-style: none; margin: 0; padding: 0; }
.main-navigation ul ul { box-shadow: 0 8px 32px rgba(0,0,0,0.5); float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.main-navigation ul ul ul { left: -999em; top: 0; }
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul { display: block; left: auto; }
.main-navigation ul ul a { width: 220px; }
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul { left: auto; }
.main-navigation li { position: relative; }
.main-navigation a { display: block; text-decoration: none; }
.menu-toggle, .main-navigation.toggled ul { display: block; }

@media screen and (min-width: 37.5em) {
	.menu-toggle { display: none; }
	.main-navigation ul { display: flex; }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation { margin: 0 0 1.5em; }

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links { display: flex; gap: 1rem; }

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous { flex: 1 0 50%; }

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next { text-align: end; flex: 1 0 50%; }

/*--------------------------------------------------------------
# Layout Helpers
--------------------------------------------------------------*/
.container {
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.mt-3 { margin-top: 3rem; }

/*--------------------------------------------------------------
# Global Buttons
--------------------------------------------------------------*/
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--red);
	color: #fff;
	padding: 1rem 2.4rem;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--t), transform var(--t), box-shadow var(--t);
	box-shadow: 0 0 28px var(--red-glow);
	cursor: pointer;
	border: none;
}

.btn-primary:hover {
	background: var(--red-dark);
	transform: translateY(-2px);
	box-shadow: 0 4px 48px var(--red-glow);
	color: #fff;
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: transparent;
	color: var(--text);
	padding: 1rem 2.4rem;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: border-color var(--t), color var(--t), background var(--t);
}

.btn-outline:hover {
	border-color: var(--red);
	color: var(--red);
	background: var(--red-subtle);
}

.btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: transparent;
	color: var(--text-dim);
	padding: 0.8rem 1.8rem;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 1px solid var(--border);
	transition: border-color var(--t), color var(--t);
}

.btn-ghost:hover { border-color: var(--red); color: var(--red); }

.btn-match {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--red);
	color: #fff;
	padding: 0.8rem 1.8rem;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background var(--t), transform var(--t), box-shadow var(--t);
}

.btn-match:hover {
	background: var(--red-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 20px var(--red-glow);
	color: #fff;
}

.btn-order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--red);
	color: #fff;
	padding: 0.9rem 1rem;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--t), box-shadow var(--t), transform var(--t);
}

.btn-order:hover {
	background: var(--red-dark);
	box-shadow: 0 4px 24px var(--red-glow);
	transform: translateY(-1px);
	color: #fff;
}

/*--------------------------------------------------------------
# Section Titles
--------------------------------------------------------------*/
.section-title {
	font-family: var(--font-head);
	font-size: clamp(2.4rem, 6vw, 4rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-align: center;
	margin-bottom: 0.5rem;
	line-height: 1.05;
}

.section-title span { color: var(--red); }

.section-desc {
	text-align: center;
	color: var(--muted);
	max-width: 520px;
	margin: 0 auto 3.5rem;
	font-size: 1rem;
	line-height: 1.7;
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
#hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: calc(var(--nav-h) + 4rem) 2rem 5rem;
	position: relative;
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 90% 65% at 50% 50%, rgba(229,62,62,0.11) 0%, transparent 68%),
		radial-gradient(ellipse 45% 45% at 18% 82%, rgba(229,62,62,0.07) 0%, transparent 60%),
		radial-gradient(ellipse 35% 50% at 85% 20%, rgba(99,179,237,0.04) 0%, transparent 55%),
		var(--bg);
}

.hero-scanlines {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0, 0, 0, 0.12) 2px,
		rgba(0, 0, 0, 0.12) 4px
	);
	pointer-events: none;
}

.hero-content {
	position: relative;
	z-index: 2;
	max-width: 900px;
	width: 100%;
}

/* Badges row */
.badges-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 1.8rem;
	animation: fadeUp 0.7s ease both;
}

.badge-sky {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--muted);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.35rem 1rem;
	border-radius: var(--radius-pill);
}

.badge-sky strong { color: var(--text); }

.badge-deal {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(229, 62, 62, 0.12);
	border: 1px solid var(--red-border);
	color: var(--red-light);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.35rem 1rem;
	border-radius: var(--radius-pill);
	font-weight: 700;
}

/* Hero heading */
#hero h1 {
	font-family: var(--font-head);
	font-size: clamp(3.8rem, 11vw, 8.5rem);
	font-weight: 800;
	line-height: 0.93;
	letter-spacing: 0.02em;
	margin-bottom: 1.6rem;
	animation: fadeUp 0.7s 0.1s ease both;
}

#hero h1 .accent { color: var(--red); }

.hero-sub {
	font-size: clamp(1rem, 2.4vw, 1.2rem);
	color: var(--muted-light);
	max-width: 580px;
	margin: 0 auto 2.5rem;
	line-height: 1.75;
	font-weight: 400;
	animation: fadeUp 0.7s 0.18s ease both;
}

/* Price callout */
.hero-price-callout {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 0.7rem 1.6rem;
	margin-bottom: 2.2rem;
	flex-wrap: wrap;
	justify-content: center;
	animation: fadeUp 0.7s 0.22s ease both;
}

.price-original {
	font-family: var(--font-head);
	font-size: 1.4rem;
	color: var(--muted);
	text-decoration: line-through;
	letter-spacing: 0.04em;
}

.price-new {
	font-family: var(--font-head);
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--text);
	letter-spacing: 0.04em;
}

.price-period {
	font-size: 1rem;
	font-weight: 400;
	color: var(--muted);
}

.price-saving {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--red-light);
	background: rgba(229,62,62,0.12);
	border: 1px solid var(--red-border);
	padding: 0.28rem 0.8rem;
	border-radius: var(--radius-pill);
}

/* Hero buttons */
.hero-btns {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	animation: fadeUp 0.7s 0.28s ease both;
}

/* Hero stats */
.hero-stats {
	display: flex;
	gap: 2.5rem;
	justify-content: center;
	margin-top: 4rem;
	flex-wrap: wrap;
	animation: fadeUp 0.7s 0.36s ease both;
}

.stat { text-align: center; }

.stat-num {
	font-family: var(--font-head);
	font-size: 2.6rem;
	font-weight: 800;
	color: var(--red);
	display: block;
	line-height: 1;
	letter-spacing: 0.02em;
}

.stat-label {
	font-size: 0.75rem;
	color: var(--muted);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	display: block;
	margin-top: 0.25rem;
}

/* Hero trust bar */
.hero-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 2rem;
	animation: fadeUp 0.7s 0.42s ease both;
}

.trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.8rem;
	color: var(--muted-light);
	letter-spacing: 0.04em;
}

.trust-item i { color: var(--red); font-size: 0.85em; }

/*--------------------------------------------------------------
# Slider / Content Preview
--------------------------------------------------------------*/
.slider-section {
	padding: 5rem 0;
	overflow: hidden;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	background: var(--bg2);
}

.slider-section h2 {
	font-family: var(--font-head);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-align: center;
	margin-bottom: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
}

.slider-section h2 i { color: var(--red); font-size: 0.85em; }
.slider-section h2 span { color: var(--red); }

.slider-section .section-sub {
	text-align: center;
	color: var(--muted);
	margin-bottom: 2.2rem;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
}

.slider-track-wrapper {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.slider-track {
	display: flex;
	gap: 1.2rem;
	width: max-content;
	animation: slide 42s linear infinite;
}

.slider-track.reverse { animation-direction: reverse; }
.slider-track:hover { animation-play-state: paused; }

.vod-card {
	flex-shrink: 0;
	width: 130px;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--bg3);
	transition: transform var(--t), border-color var(--t), box-shadow var(--t);
	cursor: default;
}

.vod-card:hover {
	transform: scale(1.06) translateY(-4px);
	border-color: var(--red);
	box-shadow: 0 8px 24px var(--red-glow);
}

.vod-card img { width: 100%; height: 186px; object-fit: cover; display: block; background: var(--surface); }

.logo-card {
	flex-shrink: 0;
	width: 130px;
	height: 82px;
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1rem;
	transition: transform var(--t);
}

.logo-card:hover { transform: scale(1.06); }
.logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/*--------------------------------------------------------------
# Live Match Banner
--------------------------------------------------------------*/
.kn-live-banner {
	background: linear-gradient(135deg, rgba(229,62,62,0.1) 0%, rgba(8,8,15,0) 60%);
	border-top: 1px solid var(--border-red);
	border-bottom: 1px solid var(--border-red);
	padding: 1.1rem 2rem;
}

.kn-live-banner__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.kn-live-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--red);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 0.3rem 0.8rem;
	border-radius: var(--radius-pill);
	animation: pulse-dot 1.6s ease-in-out infinite;
	flex-shrink: 0;
}

.kn-live-title {
	font-family: var(--font-head);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--text);
}

.kn-live-sub {
	font-size: 0.82rem;
	color: var(--muted);
	margin-top: 0.15rem;
}

/*--------------------------------------------------------------
# Trust Strip
--------------------------------------------------------------*/
.trust-strip {
	background: var(--bg3);
	border-bottom: 1px solid var(--border);
	padding: 2.4rem 2rem;
}

.trust-strip__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	text-align: center;
}

.trust-card {
	padding: 1.5rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.trust-card:hover {
	border-color: var(--red-border);
	transform: translateY(-3px);
	box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}

.trust-card__num {
	font-family: var(--font-head);
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--red);
	letter-spacing: 0.04em;
	line-height: 1;
	margin-bottom: 0.4rem;
}

.trust-card__label {
	font-size: 0.8rem;
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
#features {
	padding: var(--section-pad) 2rem;
	max-width: var(--container);
	margin: 0 auto;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.4rem;
}

.feature-card {
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 2rem;
	transition: border-color var(--t), transform var(--t), box-shadow var(--t);
	position: relative;
	overflow: hidden;
}

.feature-card::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--red), transparent);
	transform: scaleX(0);
	transition: transform var(--t-slow);
}

.feature-card:hover { border-color: var(--red-border); transform: translateY(-5px); box-shadow: 0 10px 32px rgba(0,0,0,0.35); }
.feature-card:hover::after { transform: scaleX(1); }

.feature-icon {
	width: 52px;
	height: 52px;
	border-radius: var(--radius);
	background: var(--red-subtle);
	border: 1px solid var(--red-border);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.2rem;
	font-size: 1.25rem;
	color: var(--red);
	transition: background var(--t), box-shadow var(--t);
}

.feature-card:hover .feature-icon {
	background: rgba(229,62,62,0.16);
	box-shadow: 0 0 16px var(--red-glow);
}

.feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); letter-spacing: 0.02em; }
.feature-card p  { color: var(--muted); font-size: 0.9rem; line-height: 1.65; margin-bottom: 0; }

/*--------------------------------------------------------------
# Devices
--------------------------------------------------------------*/
.devices-section {
	padding: var(--section-pad) 2rem;
	background: var(--bg2);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.devices-grid {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	justify-content: center;
}

.device-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 0.55rem 1.2rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--text-dim);
	transition: border-color var(--t), color var(--t), background var(--t), transform var(--t);
	cursor: default;
}

.device-pill i { color: var(--red); font-size: 0.9em; }
.device-pill:hover { border-color: var(--red-border); color: var(--text); background: var(--surface2); transform: translateY(-2px); }

/*--------------------------------------------------------------
# How-To Steps
--------------------------------------------------------------*/
.how-section {
	padding: var(--section-pad) 2rem;
	max-width: var(--container);
	margin: 0 auto;
}

.kn-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	counter-reset: steps;
}

.kn-step {
	display: flex;
	gap: 1.2rem;
	align-items: flex-start;
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 2rem;
	transition: border-color var(--t), transform var(--t);
}

.kn-step:hover { border-color: var(--red-border); transform: translateY(-4px); }

.kn-step__num {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--red-subtle);
	border: 2px solid var(--red-border);
	color: var(--red);
	font-family: var(--font-head);
	font-size: 1.3rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0;
	transition: background var(--t), box-shadow var(--t);
}

.kn-step:hover .kn-step__num {
	background: rgba(229,62,62,0.16);
	box-shadow: 0 0 14px var(--red-glow);
}

.kn-step__body { flex: 1; }
.kn-step__body h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); }
.kn-step__body p  { color: var(--muted); font-size: 0.88rem; line-height: 1.65; margin-bottom: 0; }

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
#pricing {
	padding: var(--section-pad) 2rem;
	background: var(--bg2);
	border-top: 1px solid var(--border);
}

.pricing-mobile-note {
	text-align: center;
	color: var(--muted);
	font-size: 0.82rem;
	margin-bottom: 1.5rem;
	display: none;
}

.pricing-grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.4rem;
}

.price-card {
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: 2.4rem 1.8rem 2rem;
	text-align: center;
	position: relative;
	transition: border-color var(--t), transform var(--t), box-shadow var(--t);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.price-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--red), transparent);
	transform: scaleX(0);
	transition: transform var(--t-slow);
}

.price-card:hover { transform: translateY(-6px); border-color: var(--red-border); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.price-card:hover::before { transform: scaleX(1); }

.price-card.featured {
	background: linear-gradient(160deg, #1a0308 0%, #0a0005 100%);
	border-color: var(--red);
	box-shadow: 0 0 50px rgba(229,62,62,0.18);
}

.price-card.featured::before { transform: scaleX(1); }
.price-card.featured:hover { transform: translateY(-8px); box-shadow: 0 16px 56px rgba(229,62,62,0.28); }

.best-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: var(--red);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.28rem 0.75rem;
	border-radius: var(--radius-pill);
}

.price-badge-deal {
	display: inline-block;
	background: rgba(229,62,62,0.15);
	border: 1px solid var(--red-border);
	color: var(--red-light);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.22rem 0.7rem;
	border-radius: var(--radius-pill);
	margin-bottom: 0.6rem;
}

.price-duration {
	font-family: var(--font-head);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--muted);
	margin-bottom: 0.8rem;
	text-transform: uppercase;
}

.price-amount {
	font-family: var(--font-head);
	font-size: 4.2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--text);
	letter-spacing: 0.02em;
}

.price-amount sup {
	font-size: 2rem;
	vertical-align: super;
	color: var(--red);
}

.price-per {
	font-size: 0.8rem;
	color: var(--muted);
	margin-top: 0.3rem;
	margin-bottom: 1.8rem;
}

.price-features {
	list-style: none;
	margin-bottom: 2rem;
	text-align: left;
	flex: 1;
}

.price-features li {
	font-size: 0.88rem;
	color: var(--text-dim);
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.price-features li:last-child { border-bottom: none; }
.price-features li i { color: var(--red); font-size: 0.72rem; flex-shrink: 0; }

.pricing-note {
	text-align: center;
	color: var(--muted);
	font-size: 0.82rem;
	margin-top: 2rem;
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
}

.pricing-guarantee {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1.2rem;
	color: var(--muted-light);
	font-size: 0.85rem;
	font-weight: 600;
}

.pricing-guarantee i { color: var(--green-wa); }

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials-section {
	padding: var(--section-pad) 2rem;
	background: var(--bg);
}

.testimonials-grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.4rem;
}

.t-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border);
	transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.t-card:hover {
	transform: translateY(-5px) scale(1.02);
	box-shadow: 0 12px 36px rgba(0,0,0,0.4);
	border-color: var(--red-border);
}

.t-card img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-lg);
}

.wtsp-badge {
	position: absolute;
	bottom: 0.8rem;
	left: 0.8rem;
	background: var(--green-wa);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.65rem;
	border-radius: var(--radius-pill);
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
#blog {
	padding: var(--section-pad) 2rem;
	background: var(--bg2);
	border-top: 1px solid var(--border);
}

.blog-grid {
	max-width: var(--container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
}

.blog-card {
	display: flex;
	flex-direction: column;
	background: var(--bg3);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--text);
	transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.blog-card:hover {
	border-color: var(--red-border);
	transform: translateY(-5px);
	box-shadow: 0 10px 32px rgba(0,0,0,0.35);
	color: var(--text);
}

.blog-card__thumb {
	position: relative;
	aspect-ratio: 16/9;
	background: var(--surface);
	overflow: hidden;
}

.blog-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--t-slow);
}

.blog-card:hover .blog-card__thumb img { transform: scale(1.04); }

.blog-card__thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	color: var(--muted);
	background: var(--surface);
}

.blog-card__cat {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: var(--red);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.25rem 0.65rem;
	border-radius: var(--radius-pill);
}

.blog-card__body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.blog-card__meta {
	font-size: 0.78rem;
	color: var(--muted);
	margin-bottom: 0.6rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.blog-card__body h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 0.6rem;
	line-height: 1.4;
	font-family: var(--font-body);
}

.blog-card__excerpt {
	font-size: 0.85rem;
	color: var(--muted);
	line-height: 1.6;
	flex: 1;
	margin-bottom: 1rem;
}

.blog-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--red-light);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: gap var(--t), color var(--t);
}

.blog-card:hover .blog-card__link { gap: 0.7rem; color: var(--red); }
.blog-card__link--disabled { color: var(--muted); cursor: default; }

.blog-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 3rem;
	flex-wrap: wrap;
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# FAQ
--------------------------------------------------------------*/
#faq {
	padding: var(--section-pad) 2rem;
	max-width: 820px;
	margin: 0 auto;
}

.faq-list { margin-top: 0.5rem; }

.faq-item {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	margin-bottom: 0.9rem;
	overflow: hidden;
	transition: border-color var(--t), box-shadow var(--t);
}

.faq-item:hover { border-color: var(--red-border); }
.faq-item.open  { border-color: var(--red-border); box-shadow: 0 4px 20px rgba(0,0,0,0.25); }

.faq-question {
	width: 100%;
	background: var(--surface);
	border: none;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 0.97rem;
	font-weight: 600;
	text-align: left;
	padding: 1.3rem 1.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	transition: background var(--t);
	line-height: 1.45;
}

.faq-question:hover { background: var(--surface2); }
.faq-item.open .faq-question { background: var(--surface2); color: var(--text); }

.faq-question i {
	color: var(--red);
	font-size: 0.8rem;
	flex-shrink: 0;
	transition: transform var(--t);
}

.faq-item.open .faq-question i { transform: rotate(180deg); }

.faq-answer {
	background: var(--bg3);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.38s ease;
}

.faq-item.open .faq-answer { max-height: 400px; }

.faq-answer p {
	padding: 1.2rem 1.5rem 1.4rem;
	color: var(--muted-light);
	font-size: 0.92rem;
	line-height: 1.75;
	margin-bottom: 0;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
#contact {
	padding: var(--section-pad) 2rem;
	background: var(--bg2);
	border-top: 1px solid var(--border);
	text-align: center;
}

.wa-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--green-wa);
	color: #fff;
	padding: 1.1rem 2.8rem;
	border-radius: var(--radius-pill);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	transition: transform var(--t), box-shadow var(--t), background var(--t);
	box-shadow: 0 8px 30px rgba(37, 211, 102, 0.28);
	margin-top: 1.5rem;
}

.wa-btn:hover {
	background: var(--green-wa-dark);
	transform: translateY(-3px);
	box-shadow: 0 12px 42px rgba(37, 211, 102, 0.4);
	color: #fff;
}

.contact-alt {
	margin-top: 1.2rem;
	font-size: 0.88rem;
	color: var(--muted);
}

.contact-alt a { color: var(--red-light); transition: color var(--t); }
.contact-alt a:hover { color: var(--red); }

/*--------------------------------------------------------------
# Impressum
--------------------------------------------------------------*/
#impressum {
	padding: 5rem 2rem;
	max-width: 720px;
	margin: 0 auto;
	border-top: 1px solid var(--border);
}

#impressum h2 {
	font-family: var(--font-head);
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	margin-bottom: 1.8rem;
	color: var(--text);
}

#impressum h2 span { color: var(--red); }

#impressum p,
#impressum address {
	color: var(--muted-light);
	font-size: 0.88rem;
	line-height: 1.85;
	font-style: normal;
	margin-bottom: 1.1rem;
}

#impressum strong { color: var(--text); }
#impressum a { color: var(--red-light); transition: color var(--t); }
#impressum a:hover { color: var(--red); }

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
	padding: 2.5rem 2rem;
	text-align: center;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	background: var(--bg);
}

footer strong { color: var(--red); }

footer nav {
	position: static;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 1rem;
	height: auto;
	border: none;
}

footer nav a {
	color: var(--muted);
	text-decoration: none;
	font-size: 0.78rem;
	transition: color var(--t);
}

footer nav a:hover { color: var(--red); }

/*--------------------------------------------------------------
# WhatsApp Float
--------------------------------------------------------------*/
.wa-float {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 58px;
	height: 58px;
	background: var(--green-wa);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	z-index: 5000;
	font-size: 1.5rem;
	color: #fff;
	box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
	transition: transform var(--t), box-shadow var(--t), background var(--t);
	animation: pulse-wa 2.8s ease-in-out infinite;
}

.wa-float:hover {
	transform: scale(1.12);
	box-shadow: 0 10px 34px rgba(37, 211, 102, 0.6);
	background: var(--green-wa-dark);
	color: #fff;
}

/*--------------------------------------------------------------
# Reveal Animations
--------------------------------------------------------------*/
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/*--------------------------------------------------------------
# Keyframes
--------------------------------------------------------------*/
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes pulse-wa {
	0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,0.4); }
	50%       { box-shadow: 0 6px 40px rgba(37,211,102,0.7); }
}

@keyframes pulse-dot {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.35; }
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 1024px) {
	.pricing-grid { grid-template-columns: repeat(2, 1fr); }
	.trust-strip__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	:root { --section-pad: 5rem; }

	.pricing-grid {
		grid-template-columns: 1fr;
		max-width: 380px;
	}

	.pricing-mobile-note { display: block; }

	.hero-stats { gap: 1.5rem; }
	.stat-num   { font-size: 2.2rem; }

	.hero-btns { flex-direction: column; align-items: center; }
	.hero-btns .btn-primary,
	.hero-btns .btn-outline { width: 100%; max-width: 320px; justify-content: center; }

	.kn-live-banner__inner { flex-direction: column; gap: 0.8rem; text-align: center; }
	.kn-live-banner__inner > div { justify-content: center; }

	.trust-strip__inner { grid-template-columns: repeat(2, 1fr); }

	.blog-cta { flex-direction: column; }

	.kn-steps { grid-template-columns: 1fr; }

	.devices-grid { gap: 0.6rem; }
}

@media (max-width: 540px) {
	:root { --section-pad: 4rem; }

	#hero { padding: calc(var(--nav-h) + 2.5rem) 1.2rem 3.5rem; }

	.badges-row { flex-direction: column; align-items: center; }

	.hero-price-callout { flex-direction: column; gap: 0.5rem; padding: 0.8rem 1rem; }

	.hero-stats { gap: 1rem; }
	.stat-num   { font-size: 1.9rem; }

	.trust-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
	.trust-card { padding: 1rem 0.6rem; }
	.trust-card__num { font-size: 1.8rem; }

	.features-grid { grid-template-columns: 1fr; }

	.testimonials-grid { grid-template-columns: repeat(2, 1fr); }

	.blog-grid { grid-template-columns: 1fr; }

	.pricing-grid { max-width: 100%; }

	.faq-question { font-size: 0.9rem; }

	.wa-btn { padding: 1rem 1.8rem; font-size: 1rem; }

	.wa-float { bottom: 1.2rem; right: 1.2rem; width: 52px; height: 52px; font-size: 1.3rem; }

	.section-title { letter-spacing: 0.02em; }
	.section-desc  { margin-bottom: 2.5rem; }
}















/**
 * Page Template Styles
 * Professional styling for WordPress page templates
 *
 * @package kanalnet_iptv
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.content-area {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 1.5rem;
}

.site-main {
	margin-bottom: 3rem;
}

/* ==========================================================================
   Article Styles
   ========================================================================== */

article {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	margin-bottom: 2rem;
}

/* Featured Image */
.post-thumbnail {
	width: 100%;
	margin-bottom: 2rem;
	overflow: hidden;
}

.post-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.post-thumbnail:hover img {
	transform: scale(1.02);
}

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

.entry-header {
	padding: 2rem 2.5rem 1rem;
	border-bottom: 1px solid #e5e7eb;
}

.entry-title {
	font-size: 2.5rem;
	line-height: 1.2;
	margin: 0 0 1rem;
	color: #1a202c;
	font-weight: 700;
}

.entry-excerpt {
	font-size: 1.125rem;
	line-height: 1.6;
	color: #4a5568;
	margin-top: 1rem;
}

/* ==========================================================================
   Content Styles
   ========================================================================== */

.entry-content {
	padding: 2rem 2.5rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #2d3748;
}

.entry-content > * {
	margin-bottom: 1.5rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin-top: 2rem;
	margin-bottom: 1rem;
	line-height: 1.3;
	font-weight: 600;
	color: #1a202c;
}

.entry-content h2 {
	font-size: 2rem;
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 0.5rem;
}

.entry-content h3 {
	font-size: 1.5rem;
}

.entry-content h4 {
	font-size: 1.25rem;
}

.entry-content p {
	margin-bottom: 1.5rem;
}

.entry-content ul,
.entry-content ol {
	margin-left: 2rem;
	margin-bottom: 1.5rem;
}

.entry-content li {
	margin-bottom: 0.5rem;
}

.entry-content a {
	color: #3182ce;
	text-decoration: underline;
	transition: color 0.2s ease;
}

.entry-content a:hover {
	color: #2c5282;
}

.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.entry-content blockquote {
	border-left: 4px solid #3182ce;
	padding-left: 1.5rem;
	margin-left: 0;
	font-style: italic;
	color: #4a5568;
	background: #f7fafc;
	padding: 1rem 1.5rem;
	border-radius: 4px;
}

.entry-content code {
	background: #f7fafc;
	padding: 0.25rem 0.5rem;
	border-radius: 3px;
	font-family: 'Courier New', monospace;
	font-size: 0.9em;
	color: #e53e3e;
}

.entry-content pre {
	background: #2d3748;
	color: #e2e8f0;
	padding: 1.5rem;
	border-radius: 6px;
	overflow-x: auto;
	margin-bottom: 1.5rem;
}

.entry-content pre code {
	background: transparent;
	padding: 0;
	color: inherit;
}

/* ==========================================================================
   Page Links (Pagination)
   ========================================================================== */

.page-links {
	clear: both;
	padding: 1.5rem 2.5rem;
	margin-top: 2rem;
	border-top: 1px solid #e5e7eb;
	font-weight: 600;
}

.page-links a {
	display: inline-block;
	margin: 0 0.5rem;
	padding: 0.5rem 1rem;
	background: #3182ce;
	color: #ffffff;
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.2s ease;
}

.page-links a:hover {
	background: #2c5282;
}

.page-links .page-number {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: #edf2f7;
	color: #2d3748;
	border-radius: 4px;
	margin: 0 0.25rem;
}

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

.entry-footer {
	padding: 1rem 2.5rem 1.5rem;
	border-top: 1px solid #e5e7eb;
	background: #f7fafc;
}

.edit-link a {
	color: #3182ce;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.edit-link a:hover {
	color: #2c5282;
	text-decoration: underline;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
	.content-area {
		padding: 1rem;
	}

	.entry-header,
	.entry-content,
	.page-links,
	.entry-footer {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.entry-title {
		font-size: 2rem;
	}

	.entry-content h2 {
		font-size: 1.5rem;
	}

	.entry-content h3 {
		font-size: 1.25rem;
	}

	.entry-content ul,
	.entry-content ol {
		margin-left: 1.25rem;
	}
}

@media (max-width: 480px) {
	.entry-title {
		font-size: 1.75rem;
	}

	.entry-content {
		font-size: 1rem;
	}

	.page-links a,
	.page-links .page-number {
		padding: 0.4rem 0.75rem;
		font-size: 0.9rem;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.entry-footer,
	.edit-link {
		display: none;
	}

	article {
		box-shadow: none;
	}

	.entry-content a {
		text-decoration: underline;
		color: #000;
	}
}