/* ======================================================================
   CHIPTUNING FILES - Modern Redesign
   Dark automotive theme | Fully responsive | Mobile-first
   ====================================================================== */

/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
	display:block;
}
mark, rp, rt, ruby, summary, time {
	display:inline;
}

/* ------------------------------------------------------------------
   Design Tokens
   ------------------------------------------------------------------ */
:root {
	--bg: #f0f2f5;
	--surface: #ffffff;
	--surface-2: #f7f8fa;
	--surface-glass: rgba(255, 255, 255, 0.92);
	--card: rgba(255, 255, 255, 0.85);
	--text: #4a5568;
	--text-soft: #718096;
	--heading: #1a202c;
	--accent: #ff6a1a;
	--accent-hover: #ff8844;
	--accent-glow: rgba(255, 106, 26, 0.15);
	--accent-subtle: rgba(255, 106, 26, 0.08);
	--blue: #3b82f6;
	--blue-glow: rgba(59, 130, 246, 0.08);
	--line: rgba(0, 0, 0, 0.08);
	--line-strong: rgba(0, 0, 0, 0.12);
	--radius: 14px;
	--radius-sm: 8px;
	--radius-lg: 20px;
	--shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
	--shadow-accent: 0 8px 24px rgba(255, 106, 26, 0.2);
	--font: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
	--font-display: 'Exo 2', 'Segoe UI', Impact, sans-serif;
	--transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--container: min(1140px, calc(100% - 40px));
}
/* ------------------------------------------------------------------
   Global
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { width: 100%; height: 100%; scroll-behavior: smooth; }

body {
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--text);
	min-width: 0;
	height: 100%;
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* Utility hide */
.ic { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ------------------------------------------------------------------
   Layout wrappers
   ------------------------------------------------------------------ */
.main-bg, .bg { background: none; width: 100%; min-height: 100%; }

.main {
	width: var(--container);
	padding: 0;
	margin: 0 auto;
}

a { color: var(--accent); outline: none; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); text-decoration: none; }

.wrapper { width: 100%; overflow: hidden; }
.extra-wrap { overflow: hidden; }

p { margin-bottom: 16px; }
.p0 { margin-bottom: 0; }
.p1 { margin-bottom: 8px; }
.p2 { margin-bottom: 15px; }
.p3 { margin-bottom: 30px; }
.p4 { margin-bottom: 40px; }
.p5 { margin-bottom: 48px; }
.fleft { float: left; }
.fright { float: right; }
.alignright { text-align: right; }
.aligncenter { text-align: center; }
.color-1 { color: var(--heading); }
.color-2 { color: #000; }
.color-3 { color: var(--accent); }
.clear { clear: both; }

/* ------------------------------------------------------------------
   Spacing helpers
   ------------------------------------------------------------------ */
.indent { padding: 0; }
.indent-top { padding-top: 15px; }
.indent-left { padding-left: 0; }
.indent-left2 { padding-left: 0; }
.indent-right { padding-right: 0; }
.indent-bot { margin-bottom: 20px; }
.indent-bot2 { margin-bottom: 30px; }
.indent-bot3 { margin-bottom: 45px; }
.prev-indent-bot { margin-bottom: 10px; }
.prev-indent-bot2 { margin-bottom: 6px; }
.img-indent-bot { margin-bottom: 25px; }
.margin-bot { margin-bottom: 35px; }
.img-indent { float: left; margin: 0 20px 0 0; }
.img-indent2 { float: left; margin: 0 25px 0 0; }
.img-indent3 { float: left; margin: 0 30px 0 0; }
.img-indent-r { float: right; margin: 0 0 0 30px; }

.col-1, .col-2 { float: left; width: 160px; }
.col-1 { margin-right: 40px; }

/* ------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------ */
header {
	width: 100%;
	position: relative;
	z-index: 100;
	padding: 0;
}

header .main { position: relative; }

/* ---- Logo image ---- */
h1 {
	float: none;
	padding: 0;
	background: none;
	margin: 0;
	line-height: 1;
}

h1 a {
	display: inline-block;
	text-decoration: none;
}

img.site-logo {
	display: block;
	width: 200px;
	height: auto;
	max-width: 100%;
	flex-shrink: 0;
}

/* ---- White top bar ---- */
.header-top {
	background: #ffffff;
	border-bottom: 2px solid #e2e8f0;
	padding: 10px 0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.header-top-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: nowrap;
	overflow: hidden;
}

/* ---- Top navigation (white bar links) ---- */
.top-nav ul {
	display: flex;
	list-style: none;
	gap: 0;
	flex-wrap: nowrap;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
}

.top-nav ul li a {
	display: inline-block;
	padding: 7px 9px;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	color: #2d3748;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-radius: var(--radius-sm);
	transition: all var(--transition);
	white-space: nowrap;
}

.top-nav ul li a:hover {
	background: var(--accent);
	color: #fff;
}

.top-nav ul li a.active {
	color: var(--accent);
}

/* ECU FILE UPLOAD highlighted in orange */
.top-nav ul li a.top-nav-upload {
	background: var(--accent);
	color: #fff !important;
}

.top-nav ul li a.top-nav-upload:hover {
	background: var(--accent-hover);
}

/* ---- Blue brand bar ---- */
.brand-bar {
	background: linear-gradient(90deg, #006fa6 0%, #0091c7 60%, #00a8d8 100%);
	width: 100%;
	padding: 0;
	border-bottom: 2px solid rgba(0,0,0,0.15);
}

.brand-bar-inner {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
}

.brand-bar-nav {
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
}

.brand-bar-nav li a {
	display: block;
	padding: 9px 13px;
	color: #ffffff;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s;
	border-right: 1px solid rgba(255,255,255,0.15);
}

.brand-bar-nav li a:hover {
	background: rgba(0,0,0,0.2);
	color: #fff;
}

/* Language switcher inside brand bar */
.brand-bar-lang { display: flex; align-items: center; }

.brand-bar-lang .lang-switcher {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	border-top: none;
	margin-top: 0;
}

.brand-bar-lang .lang-link {
	background: rgba(255,255,255,0.18);
	border: 1px solid rgba(255,255,255,0.35);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	width: 30px;
	height: 24px;
	border-radius: 4px;
	font-family: var(--font-display);
}

.brand-bar-lang .lang-link:hover {
	background: rgba(255,255,255,0.35);
	border-color: #fff;
	transform: none;
	box-shadow: none;
}

.brand-bar-lang .lang-link.active {
	background: #fff;
	border-color: #fff;
	color: #006fa6;
	box-shadow: none;
	transform: none;
}

/* ---- Mobile slide-down menu ---- */
.mobile-menu-wrap {
	display: none;
	background: #ffffff;
	border-top: 2px solid var(--accent);
	border-bottom: 1px solid #e2e8f0;
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.mobile-menu-wrap.menu-open {
	display: block;
}

.mobile-menu-wrap .menu {
	display: flex;
	flex-direction: column;
	padding: 8px 0;
}

.mobile-menu-wrap .menu li a {
	display: block;
	padding: 10px 20px;
	color: #2d3748;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	border-bottom: 1px solid #f0f0f0;
	text-decoration: none;
}

.mobile-menu-wrap .menu li a:hover {
	background: var(--accent-subtle);
	color: var(--accent);
}

.mobile-menu-wrap .menu li a.top-nav-upload {
	color: var(--accent);
	font-weight: 700;
}

.mobile-menu-wrap .menu li.mobile-sep {
	height: 1px;
	background: #e2e8f0;
	margin: 4px 0;
}

/* ---- Hamburger ---- */
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: 2px solid #e2e8f0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: border-color var(--transition);
}

.hamburger:hover { border-color: var(--accent); }

.hamburger span {
	display: block;
	width: 20px;
	height: 2px;
	background: #2d3748;
	border-radius: 2px;
	transition: all 0.25s ease;
}

.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Legacy header helpers (unused but kept for compat) */
.address {
	display: none;
}

.phone {
	display: none;
}

/* ---- Language Switcher ---- */
.lang-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: all var(--transition);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.lang-link:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 106, 26, 0.15);
}
.lang-link.active {
  background: var(--heading);
  border-color: var(--heading);
  box-shadow: 0 2px 10px rgba(26, 32, 44, 0.3);
  transform: scale(1.08);
}

/* ------------------------------------------------------------------
   HERO SLIDER
   ------------------------------------------------------------------ */
.slider-wrapper {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.slider { width: 100%; height: auto; }
.slider img { width: 100%; height: auto; display: block; }
.items { display: none; }

.home-slider-upload-link { display: block; text-decoration: none; }

.prev, .next {
	display: block;
	width: 60px;
	height: 100%;
	text-indent: -9999em;
	position: absolute;
	z-index: 10;
	top: 0;
	margin-top: 0;
	opacity: 0;
	transition: opacity var(--transition);
}
.slider-wrapper:hover .prev,
.slider-wrapper:hover .next { opacity: 0.7; }
.prev { background: linear-gradient(90deg, rgba(0,0,0,0.5), transparent); left: 0; cursor: w-resize; }
.next { background: linear-gradient(-90deg, rgba(0,0,0,0.5), transparent); right: 0; cursor: e-resize; }

/* Hero CTA below slider */
.hero-upload-cta-wrap {
	padding: 24px 0 8px;
	text-align: center;
}

.hero-upload-cta {
	display: inline-block;
	padding: 18px 36px;
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: clamp(16px, 2.5vw, 24px);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	box-shadow: var(--shadow-accent);
	border: 2px solid rgba(255, 255, 255, 0.15);
	animation: pulseGlow 2.5s ease-in-out infinite;
	transition: all var(--transition);
	text-decoration: none;
	line-height: 1.2;
}

.hero-upload-cta:hover {
	color: #fff;
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 14px 40px rgba(255, 106, 26, 0.5);
}

@keyframes pulseGlow {
	0%, 100% { box-shadow: var(--shadow-accent); }
	50% { box-shadow: 0 12px 40px rgba(255, 106, 26, 0.5); }
}

.hero-upload-cta::before {
	content: '\2B06';
	margin-right: 10px;
	font-size: 1.1em;
}

/* ------------------------------------------------------------------
   CONTENT AREA
   ------------------------------------------------------------------ */
#content {
	width: 100%;
	padding: 36px 0 50px;
	position: relative;
	z-index: 1;
}

/* ---- Typography ---- */
h2, h3, h4, h6, .text-1, .text-2 {
	font-family: var(--font-display);
	color: var(--heading);
	letter-spacing: 0;
}

h2 {
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.12;
	font-weight: 800;
	margin-bottom: 12px;
	text-shadow: 0 0 30px rgba(255, 106, 26, 0.08);
}

h3 {
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.2;
	font-weight: 700;
	margin-bottom: 8px;
}

h3 strong { display: block; margin-top: -20px; }

h4 {
	font-size: 20px;
	line-height: 1.2;
	color: var(--heading);
	font-weight: 700;
	margin-bottom: 10px;
}

h6 {
	color: var(--heading);
	font-weight: 600;
	font-size: 17px;
	margin-bottom: 4px;
}

.text-1, .text-2 {
	display: inline-block;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.2;
	color: var(--heading);
	letter-spacing: -0.5px;
}

p, li, dd, dt { color: var(--text); }

/* ---- Containers (glassmorphism cards) ---- */
.container-bot, .container-top { width: 100%; padding: 0; background: none; }

.container {
	width: 100%;
	background: var(--card);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 32px 24px 40px;
	box-shadow: var(--shadow);
	position: relative;
}

.container::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 20%;
	right: 20%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	border-radius: 2px;
	opacity: 0.5;
}

.spacer-1 { background: none; }

/* ---- Decorative borders ---- */
.border-bot {
	width: 100%;
	padding-bottom: 28px;
	background: none;
	border-bottom: 1px solid var(--line);
}

.border-bot2 {
	width: 100%;
	padding-bottom: 20px;
	margin-bottom: 18px;
	background: none;
	border-bottom: 1px solid var(--line);
}

/* ---- Box (sidebar card) ---- */
.box {
	width: auto;
	background: var(--surface-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	transition: border-color var(--transition);
}

.box:hover {
	border-color: rgba(255, 106, 26, 0.25);
	box-shadow: 0 4px 20px rgba(255, 106, 26, 0.08);
}

.box .padding { padding: 20px 20px 24px; }

/* ---- Buttons ---- */
.button,
.buttons button {
	display: inline-block;
	padding: 10px 22px;
	font-size: 15px;
	font-weight: 700;
	font-family: var(--font-display);
	line-height: 1;
	letter-spacing: 0.03em;
	color: #fff;
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	box-shadow: 0 4px 16px var(--accent-glow);
	transition: all var(--transition);
	text-decoration: none;
	text-transform: uppercase;
}

.button:hover,
.buttons button:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(255, 106, 26, 0.45);
	filter: brightness(1.1);
}

/* ---- Lists ---- */
.list-1 li, .list-2 li {
	line-height: 1.4;
	padding: 10px 0 10px 18px;
	background: none;
	border-bottom: 1px solid var(--line);
	position: relative;
}

.list-1 li::before, .list-2 li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 16px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

.list-1 a, .list-2 a {
	display: inline-block;
	color: var(--text);
	font-weight: 600;
	background: none;
	padding-left: 0;
	text-decoration: none;
}

.list-1 a:hover, .list-2 a:hover { color: var(--accent); }

.list-1 li:last-child, .list-2 li:last-child { border-bottom: none; }

/* ---- Links ---- */
.link { color: var(--heading); text-decoration: none; }
.link:hover { color: var(--accent); }

.link-1 {
	display: inline-block;
	font-weight: bold;
	padding-left: 0;
	color: var(--heading);
	background: none;
}
.link-1:hover { color: var(--accent); text-decoration: none; }

.link-2 { color: var(--accent); }
.link-2:hover { color: var(--accent-hover); text-decoration: none; }

/* ---- Data / Address ---- */
dl span { float: left; width: 80px; }
dl.main-address dt { margin-bottom: 5px; }
dl.main-address span { float: left; width: 80px; color: var(--accent); font-weight: 600; }
dl.main-address a { color: var(--text); }
dl.main-address a:hover { color: var(--accent); }

/* ---- Price table ---- */
.price-list {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.price-list td {
	border: 1px solid var(--line-strong);
	line-height: 1.4;
	padding: 12px 16px;
}

.price-list thead td {
	text-align: center;
	color: var(--heading);
	font-weight: 700;
	font-family: var(--font-display);
	background: var(--surface-2);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.price-list td:first-child { width: auto; }

.price-list tbody td:first-child {
	color: var(--heading);
	font-weight: 700;
	text-align: left;
}

.price-list tbody td {
	text-align: center;
}

.price-list tbody tr:hover td {
	background: rgba(255, 106, 26, 0.05);
}

/* ------------------------------------------------------------------
   CONTACT FORM
   ------------------------------------------------------------------ */
#contact-form { display: block; width: 100%; }

#contact-form label {
	display: block;
	height: auto;
	overflow: visible;
	margin-bottom: 14px;
}

#contact-form input,
#contact-form textarea {
	float: none;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font);
	font-size: 16px;
	color: var(--heading);
	background: #ffffff;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	outline: none;
	transition: border-color var(--transition), box-shadow var(--transition);
}

#contact-form input:focus,
#contact-form textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow), 0 0 16px rgba(255, 106, 26, 0.1);
	background: rgba(255, 106, 26, 0.03);
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
	color: var(--text-soft);
	opacity: 0.7;
}

#contact-form textarea {
	height: 200px;
	min-height: 160px;
	max-height: 400px;
	min-width: 100%;
	max-width: 100%;
	resize: vertical;
}

#contact-form input[type="file"] {
	padding: 10px;
	cursor: pointer;
}

.text-form {
	float: none;
	display: block;
	font-size: 13px;
	line-height: 1;
	width: auto;
	color: var(--accent);
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
}

.buttons {
	padding: 16px 0 0;
	text-align: left;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.buttons a, .buttons button { margin: 0; }

.upload-hint {
	background: var(--accent-subtle);
	border: 1px solid rgba(255, 106, 26, 0.25);
	border-radius: var(--radius);
	padding: 16px 18px;
	margin-bottom: 18px;
	color: var(--text);
	line-height: 1.5;
}

.upload-hint strong { color: var(--heading); }

.upload-status {
	display: none;
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-family: var(--font-display);
}

.upload-status.success {
	display: block;
	background: rgba(34, 197, 94, 0.12);
	border: 1px solid rgba(34, 197, 94, 0.35);
	color: #86efac;
}

.upload-status.error {
	display: block;
	background: rgba(239, 68, 68, 0.12);
	border: 1px solid rgba(239, 68, 68, 0.35);
	color: #fca5a5;
}

/* ------------------------------------------------------------------
   DRAG-AND-DROP UPLOAD ZONE
   ------------------------------------------------------------------ */
.drop-zone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 28px 20px;
	margin: 12px 0 8px;
	border: 2px dashed var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface-2);
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
	text-align: center;
}
.drop-zone:hover, .drop-zone:focus-visible {
	border-color: var(--accent);
	background: rgba(255,106,26,0.06);
	outline: none;
}
.drop-zone.drag-over {
	border-color: var(--accent);
	background: rgba(255,106,26,0.1);
	box-shadow: 0 0 30px rgba(255,106,26,0.2), inset 0 0 30px rgba(255,106,26,0.05);
	animation: borderPulse 1s ease-in-out infinite;
}
@keyframes borderPulse {
	0%, 100% { border-color: var(--accent); }
	50% { border-color: var(--accent-hover); }
}
.drop-zone.has-file {
	border-color: rgba(34,197,94,0.5);
	background: rgba(34,197,94,0.06);
	border-style: solid;
}
.drop-zone.has-file .drop-zone-icon::after {
	content: ' \2705';
	font-size: 20px;
}
.drop-zone-icon {
	font-size: 40px;
	line-height: 1;
	filter: drop-shadow(0 0 12px rgba(255,106,26,0.3));
	transition: transform var(--transition);
}
.drop-zone:hover .drop-zone-icon,
.drop-zone.drag-over .drop-zone-icon {
	transform: scale(1.15) translateY(-2px);
}
.drop-zone-text {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--heading);
}
.drop-zone-hint {
	font-weight: 400;
	font-size: 13px;
	color: var(--text-soft);
}
.drop-zone-info {
	font-size: 12px;
	color: var(--text-soft);
	margin-top: 2px;
}
.drop-zone-file {
	display: none;
	font-weight: 600;
	font-size: 14px;
	color: #86efac;
	margin-top: 4px;
}
.drop-zone-file.has-file { display: block; }
.drop-zone-input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

/* File validation error */
.file-error {
	display: none;
	margin: 4px 0 8px;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	background: rgba(239,68,68,0.12);
	border: 1px solid rgba(239,68,68,0.35);
	color: #fca5a5;
	font-size: 13px;
	font-weight: 600;
}
.file-error.visible { display: block; }

/* Upload progress indicator */
.upload-progress {
	display: none;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	background: rgba(255,106,26,0.08);
	border: 1px solid rgba(255,106,26,0.25);
	color: var(--heading);
	font-weight: 600;
	font-size: 14px;
	font-family: var(--font-display);
}
.upload-progress.visible { display: flex; flex-wrap: wrap; }

.upload-progress-spinner {
	width: 20px;
	height: 20px;
	border: 3px solid rgba(255,106,26,0.25);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.upload-progress-bar {
	width: 100%;
	height: 6px;
	background: rgba(255,255,255,0.08);
	border-radius: 3px;
	overflow: hidden;
	margin-top: 4px;
}
.upload-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	border-radius: 3px;
	transition: width 0.3s ease;
	box-shadow: 0 0 8px var(--accent-glow);
}

/* Animated shimmer on progress bar */
.upload-progress-fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* ------------------------------------------------------------------
   RESPONSIVE IFRAMES
   ------------------------------------------------------------------ */
iframe {
  max-width: 100%;
  border: 0;
  border-radius: var(--radius);
}

@media (max-width: 768px) {
  iframe {
    width: 100% !important;
    height: auto !important;
    min-height: 400px;
  }
  
  iframe[src*="tuning-shop.com"] {
    min-height: 500px;
  }
}

/* ------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------ */
footer {
	width: 100%;
	padding: 24px 0 32px;
	text-align: center;
	color: var(--text-soft);
	font-size: 14px;
	border-top: 1px solid var(--line);
	margin-top: 20px;
}

.footer-inner {
	padding: 0 16px;
}

footer span { display: block; }
footer a { color: var(--accent); }
footer a:hover { color: var(--accent-hover); }

/* ------------------------------------------------------------------
   MISC
   ------------------------------------------------------------------ */
iframe {
	max-width: 100%;
	border: 0;
	border-radius: var(--radius);
}

/* Top card row (feature cards on many pages) */
.wrapper.p4 > article,
.wrapper.p5 > article {
	margin-bottom: 24px;
}

.wrapper.p4 > article .wrapper,
.wrapper.p5 > article .wrapper {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	transition: border-color var(--transition), transform var(--transition);
}

.wrapper.p4 > article .wrapper:hover,
.wrapper.p5 > article .wrapper:hover {
	border-color: rgba(255, 106, 26, 0.3);
	transform: translateY(-5px);
	box-shadow: 0 12px 40px rgba(255, 106, 26, 0.12);
}

/* Feature card icon glow on hover */
.wrapper.p4 > article .wrapper:hover .img-indent img,
.wrapper.p5 > article .wrapper:hover .img-indent img {
	filter: drop-shadow(0 0 8px rgba(255, 106, 26, 0.4));
	transition: filter 0.3s ease;
}

/* Numbered step badges */
.step-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	color: #fff;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 14px;
	margin-right: 8px;
	box-shadow: 0 2px 10px var(--accent-glow);
	flex-shrink: 0;
}

/* Trust signals row */
.trust-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 18px 0 8px;
}
.trust-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: rgba(34, 197, 94, 0.08);
	border: 1px solid rgba(34, 197, 94, 0.2);
	border-radius: var(--radius-sm);
	color: #86efac;
	font-size: 13px;
	font-weight: 600;
	font-family: var(--font-display);
}
.trust-item-accent {
	background: var(--accent-subtle);
	border: 1px solid rgba(255, 106, 26, 0.25);
	color: var(--accent);
}

.maxheight { min-height: 0; }

/* ------------------------------------------------------------------
   STATS BAR
   ------------------------------------------------------------------ */
.stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 28px auto 0;
  padding: 28px 20px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.stats-bar::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 2px;
  opacity: 0.4;
}

.stat-item {
  text-align: center;
  padding: 0 24px;
  flex: 1;
  min-width: 140px;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
  text-shadow: 0 0 30px var(--accent-glow);
}

.stat-number::after {
  content: '+';
  font-size: 0.7em;
  margin-left: 2px;
}

.stat-item:last-child .stat-number::after {
  content: '%';
}

.stat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
  font-family: var(--font-display);
}

.stat-divider {
  width: 1px;
  height: 50px;
  background: var(--line-strong);
  flex-shrink: 0;
}

/* ------------------------------------------------------------------
   TESTIMONIALS
   ------------------------------------------------------------------ */
.testimonials-section {
  margin-top: 48px;
  padding: 0;
}

.testimonials-heading {
  text-align: center;
  margin-bottom: 32px;
  font-size: clamp(24px, 3vw, 36px);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  transition: all var(--transition);
  position: relative;
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 60px;
  font-family: Georgia, serif;
  color: var(--accent);
  opacity: 0.12;
  line-height: 1;
}

.testimonial-card:hover {
  border-color: rgba(255, 106, 26, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(255, 106, 26, 0.1);
}

.testimonial-stars {
  color: var(--accent);
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.testimonial-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 16px;
  font-style: italic;
}

.testimonial-author {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.testimonial-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--heading);
}

.testimonial-role {
  font-size: 13px;
  color: var(--text-soft);
  margin-top: 2px;
}

/* ------------------------------------------------------------------
   WHATSAPP FLOATING BUTTON
   ------------------------------------------------------------------ */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all var(--transition);
  text-decoration: none;
  animation: whatsappPulse 2s infinite;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}
.whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}
.whatsapp-tooltip {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  color: var(--heading);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-display);
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
}
@keyframes whatsappPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.6), 0 0 0 10px rgba(37, 211, 102, 0.1); }
}

/* ------------------------------------------------------------------
   HOW IT WORKS SECTION
   ------------------------------------------------------------------ */
.how-it-works-section {
  margin-top: 48px;
  padding: 0;
}
.how-it-works-heading {
  text-align: center;
  margin-bottom: 36px;
  font-size: clamp(24px, 3vw, 36px);
}
.how-it-works-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.how-it-works-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  transition: all var(--transition);
  position: relative;
}
.how-it-works-step:hover {
  border-color: rgba(255, 106, 26, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(255, 106, 26, 0.1);
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px var(--accent-glow);
}
.how-it-works-step h4 {
  font-size: 17px;
  margin-bottom: 8px;
  text-align: center;
}
.how-it-works-step p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-soft);
  margin-bottom: 0;
}
.step-arrow {
  display: none;
}

/* ------------------------------------------------------------------
   FAQ SECTION
   ------------------------------------------------------------------ */
.faq-section {
  margin-top: 48px;
  padding: 0;
}
.faq-heading {
  text-align: center;
  margin-bottom: 32px;
  font-size: clamp(24px, 3vw, 36px);
}
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item:hover {
  border-color: rgba(255, 106, 26, 0.25);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--heading);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: color var(--transition);
}
.faq-question:hover {
  color: var(--accent);
}
.faq-icon {
  font-size: 22px;
  font-weight: 300;
  color: var(--accent);
  transition: transform var(--transition);
  flex-shrink: 0;
  margin-left: 12px;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.open .faq-answer {
  max-height: 300px;
}
.faq-answer-inner {
  padding: 0 22px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

/* ------------------------------------------------------------------
   BUNDLE PRICING CARD
   ------------------------------------------------------------------ */
.bundle-card {
  background: linear-gradient(135deg, rgba(255, 106, 26, 0.08), rgba(255, 136, 68, 0.04));
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.bundle-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 2px;
}
.bundle-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.bundle-card h4 {
  font-size: 22px;
  margin-bottom: 6px;
}
.bundle-card .bundle-desc {
  font-size: 14px;
  color: var(--text-soft);
  margin-bottom: 14px;
}
.bundle-pricing {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.bundle-price {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--accent);
}
.bundle-original {
  font-size: 18px;
  color: var(--text-soft);
  text-decoration: line-through;
}
.bundle-save {
  font-size: 14px;
  font-weight: 700;
  color: #22c55e;
  font-family: var(--font-display);
}
.bundle-includes {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.bundle-includes li {
  padding: 6px 0 6px 24px;
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading);
  border: none;
  background: none;
}
.bundle-includes li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #22c55e;
  font-weight: 800;
  font-size: 16px;
}

/* ------------------------------------------------------------------
   RESPONSIVE GRID OVERRIDE
   ------------------------------------------------------------------ */
.container_12 {
	width: 100%;
	margin: 0 auto;
}

/* ------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------------ */

/* Tablet landscape — only collapse 8+4 sidebar layouts, keep 3×4 rows intact */
@media (max-width: 1024px) {
  .how-it-works-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-divider {
    display: none;
  }

  .stat-item {
    padding: 12px 16px;
  }
	.container_12 .grid_8 {
		float: none;
		width: 100% !important;
		margin-left: 0;
		margin-right: 0;
	}

	/* Sidebar grid_4 next to a grid_8 stacks below */
	.container_12 .grid_8 + .grid_4 {
		float: none;
		width: 100% !important;
		margin-left: 0;
		margin-right: 0;
	}

	.container_12 .grid_4.alpha,
	.container_12 .grid_4.omega {
		width: calc(50% - 16px) !important;
		float: left;
		margin: 0 8px;
	}

	.container_12 .grid_4.omega { margin-right: 0; }
}

/* Tablet portrait */
@media (max-width: 768px) {
  .whatsapp-float {
    bottom: 16px;
    right: 16px;
    width: 54px;
    height: 54px;
  }
  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
  .whatsapp-tooltip {
    display: none;
  }
  .how-it-works-steps {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .bundle-pricing {
    flex-wrap: wrap;
  }
  .bundle-price {
    font-size: 30px;
  }
  :root {
		--container: calc(100% - 24px);
	}

	body { font-size: 16px; }

	img.site-logo { width: 160px; }

	.header-top-inner { flex-wrap: nowrap; gap: 10px; }

	.top-nav { display: none; }

	.hamburger { display: flex; }

	.brand-bar-nav li a { padding: 8px 9px; font-size: 12px; }

	#page1 header { margin-bottom: 0; }

	.container_12 [class*='grid_'] {
		float: none;
		width: 100% !important;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 18px;
	}

	.container {
		padding: 20px 16px 28px;
	}

	.col-1, .col-2 {
		float: none;
		width: 100%;
		margin-right: 0;
		margin-bottom: 16px;
	}

	.hero-upload-cta {
		font-size: 16px;
		padding: 14px 18px;
	}

	.prev, .next { display: none; }

	.buttons { justify-content: flex-start; }

	.main-address + .button {
		margin-right: 10px;
		margin-top: 8px;
	}

	.price-list td { padding: 8px 10px; font-size: 14px; }
	.price-list thead td { font-size: 13px; }
}

/* Mobile */
@media (max-width: 480px) {
  .how-it-works-steps {
    grid-template-columns: 1fr;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .stats-bar {
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px;
  }

  .stat-item {
    padding: 8px 0;
    width: 100%;
  }
	:root {
		--container: calc(100% - 16px);
	}

	h1 a { font-size: 19px; }

	.phone { font-size: 16px; }

	header .wrapper { gap: 8px; }

	header .fright { display: none; }

	.menu li a { font-size: 15px; padding: 10px 12px; }

	.container { padding: 16px 12px 24px; }

	.wrapper.p4 > article .wrapper,
	.wrapper.p5 > article .wrapper {
		padding: 16px;
	}

	.img-indent, .img-indent2, .img-indent3 {
		float: none;
		margin: 0 0 12px 0;
	}

	.hero-upload-cta {
		font-size: 14px;
		padding: 12px 14px;
	}

	.box .padding { padding: 16px 14px 20px; }
}

/* Payment Methods */
.payment-methods {
	margin-bottom: 16px;
}

.payment-methods p {
	font-size: 15px;
}

.payment-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: all 0.3s ease;
	margin-right: 8px;
	margin-bottom: 8px;
}

.payment-btn.paypal {
	background: #003087;
	color: #fff;
}

.payment-btn.paypal:hover {
	background: #0040a0;
	color: #fff;
}

.payment-btn.revolut {
	background: #007CFF;
	color: #fff;
}

.payment-btn.revolut:hover {
	background: #3399ff;
	color: #fff;
}

/* ======================================================================
   BEGINNER SECTIONS - New sections for SEO optimization
   ====================================================================== */

.beginner-section {
	padding: 48px 20px;
	background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
	border-radius: var(--radius-lg);
	margin: 32px auto;
	max-width: 1100px;
}

.beginner-wrapper {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.beginner-title {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	color: var(--heading);
	margin-bottom: 16px;
	line-height: 1.2;
}

.beginner-intro {
	font-size: 18px;
	color: var(--text-soft);
	max-width: 700px;
	margin: 0 auto 32px;
	line-height: 1.7;
}

.beginner-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: 32px;
}

.benefit-card {
	background: var(--surface);
	padding: 24px 20px;
	border-radius: var(--radius);
	text-align: center;
	box-shadow: var(--shadow);
	transition: transform var(--transition), box-shadow var(--transition);
}

.benefit-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.benefit-icon {
	display: block;
	font-size: 36px;
	margin-bottom: 12px;
}

.benefit-card h4 {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--heading);
	margin-bottom: 8px;
}

.benefit-card p {
	font-size: 14px;
	color: var(--text-soft);
	margin-bottom: 0;
}

.beginner-btn {
	display: inline-block;
	padding: 14px 32px;
	font-size: 16px;
	font-weight: 600;
}

/* How It Works Section */
.how-it-works-section {
	padding: 56px 20px;
	background: var(--surface);
	margin: 40px auto;
	border-radius: var(--radius-lg);
}

.how-it-works-wrapper {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.how-it-works-wrapper h2 {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	color: var(--heading);
	margin-bottom: 36px;
}

.steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-bottom: 32px;
}

.step-card {
	background: var(--surface-2);
	padding: 24px 16px;
	border-radius: var(--radius);
	text-align: center;
	position: relative;
}

.step-number {
	width: 40px;
	height: 40px;
	background: var(--accent);
	color: #fff;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.step-card h4 {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	color: var(--heading);
	margin-bottom: 10px;
}

.step-card p {
	font-size: 14px;
	color: var(--text-soft);
	margin-bottom: 12px;
	line-height: 1.5;
}

.step-detail {
	display: block;
	font-size: 12px;
	color: var(--accent);
	font-weight: 500;
}

.step-detail a {
	color: var(--accent);
	text-decoration: underline;
}

.steps-cta {
	margin-top: 24px;
}

.steps-cta .button {
	padding: 16px 40px;
	font-size: 17px;
}

/* Beginner FAQ Section */
.beginner-faq {
	padding: 48px 20px;
	background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
	margin: 40px auto;
	border-radius: var(--radius-lg);
}

.faq-wrapper {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.faq-wrapper h2 {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--heading);
	margin-bottom: 32px;
}

.faq-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	text-align: left;
}

.faq-item {
	background: var(--surface);
	padding: 20px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.faq-item h4 {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 600;
	color: var(--heading);
	margin-bottom: 10px;
}

.faq-item p {
	font-size: 14px;
	color: var(--text-soft);
	margin-bottom: 0;
	line-height: 1.6;
}

.faq-item strong {
	color: var(--heading);
}

.faq-btn {
	margin-top: 24px;
	display: inline-block;
}

/* Responsive */
@media (max-width: 768px) {
	.beginner-title {
		font-size: 26px;
	}
	
	.beginner-benefits {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.steps-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.how-it-works-wrapper h2,
	.faq-wrapper h2 {
		font-size: 22px;
	}
}

@media (max-width: 480px) {
	.beginner-section,
	.how-it-works-section,
	.beginner-faq {
		padding: 32px 16px;
		margin: 24px 16px;
	}
	
	.beginner-benefits,
	.steps-grid,
	.faq-grid {
		grid-template-columns: 1fr;
	}
	
	.beginner-title {
		font-size: 22px;
	}
}

/* ======================================================================
   PRICING OVERVIEW SECTION
   ====================================================================== */

.pricing-overview {
	padding: 48px 20px;
	background: var(--surface);
	margin: 0 auto;
	border-radius: var(--radius-lg);
}

.pricing-wrapper {
	max-width: 950px;
	margin: 0 auto;
	text-align: center;
}

.pricing-wrapper h2 {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	color: var(--heading);
	margin-bottom: 32px;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 24px;
}

.pricing-card {
	background: var(--surface-2);
	padding: 28px 20px;
	border-radius: var(--radius);
	text-align: center;
	position: relative;
	border: 2px solid transparent;
	transition: all var(--transition);
}

.pricing-card.featured {
	background: linear-gradient(135deg, var(--accent) 0%, #ff8844 100%);
	color: #fff;
	transform: scale(1.05);
}

.pricing-card.featured .pricing-btn {
	background: #fff;
	color: var(--accent);
}

.pricing-card.featured .pricing-btn:hover {
	background: #f0f0f0;
}

.pricing-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	color: var(--accent);
	font-size: 12px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pricing-card h3 {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 4px;
}

.pricing-subtitle {
	font-size: 14px;
	opacity: 0.85;
	margin-bottom: 20px;
}

.price-amount {
	margin-bottom: 20px;
}

.price-currency {
	font-size: 20px;
	font-weight: 600;
	vertical-align: top;
}

.pricing-card:not(.featured) .price-currency {
	color: var(--text-soft);
}

.price-value {
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
}

.price-note {
	font-size: 14px;
	opacity: 0.7;
	margin-left: 4px;
}

.pricing-includes {
	list-style: none;
	padding: 0;
	margin: 0 0 24px 0;
	text-align: left;
}

.pricing-includes li {
	padding: 8px 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	font-size: 14px;
}

.pricing-card.featured .pricing-includes li {
	border-color: rgba(255,255,255,0.15);
}

.pricing-includes li:last-child {
	border-bottom: none;
}

.pricing-includes strong {
	font-weight: 600;
}

.pricing-btn {
	display: block;
	width: 100%;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 600;
}

.pricing-footer {
	font-size: 14px;
	color: var(--text-soft);
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.pricing-grid {
		grid-template-columns: 1fr;
		max-width: 320px;
		margin: 0 auto 24px;
	}
	
	.pricing-card.featured {
		transform: none;
	}
	
	.pricing-wrapper h2 {
		font-size: 24px;
	}
}