@charset "utf-8";
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--bg-dark: #0d0d0d;
	--bg-card: #1a1a1a;
	--bg-elevated: #242424;
	--accent: #f59e0b;
	--accent-light: #fbbf24;
	--accent-dark: #d97706;
	--text-primary: #fafafa;
	--text-secondary: #a3a3a3;
	--text-muted: #737373;
	--border: #2e2e2e;
	--top-contact-height: 36px;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family: 'Space Grotesk', sans-serif;
	background: var(--bg-dark);
	color: var(--text-primary);
	line-height: 1.6;
	overflow-x: hidden;
}

html[lang="ru"] body {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.top-contact {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: center;
	align-items: center;
	padding: 0.4rem 1.5rem;
	font-size: 0.85rem;
	color: var(--text-secondary);
	background: rgba(13, 13, 13, 0.85);
	border-bottom: 1px solid var(--border);
	max-width: 100%;
	overflow-x: hidden;
}

.top-contact-item {
	color: inherit;
	text-decoration: none;
}

.top-contact-item:hover {
	color: var(--accent);
}

/* Navigation */
nav {
	position: fixed;
	top: var(--top-contact-height);
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(13, 13, 13, 0.9);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--border);
}

.nav-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-primary);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.logo-icon {
	width: 32px;
	height: 32px;
	background: var(--accent);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-links {
	display: flex;
	gap: 2rem;
	list-style: none;
}

.nav-links a {
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	transition: color 0.2s;
}

.nav-links a:hover {
	color: var(--accent);
}

.nav-cta {
	background: var(--accent);
	color: var(--bg-dark);
	padding: 0.6rem 1.5rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.2s;
}

.nav-ctas {
	display: flex;
	gap: 0.8rem;
	align-items: center;
}

.nav-cta span {
	display: inline;
	background: transparent;
	padding: 0;
}

.nav-cta:hover {
	background: var(--accent-light);
	transform: translateY(-1px);
}

html[lang="ru"] .nav-links {
	gap: 1.2rem;
}

html[lang="ru"] .nav-links a {
	font-size: 0.9rem;
}

/* Hero Section */
.hero {
	/* min-height: 100vh; */
	/* Uncomment for full-screen hero */
	display: flex;
	align-items: center;
	padding: 8rem 2rem 4rem;
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 80%;
	height: 150%;
	background: radial-gradient(ellipse, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
	pointer-events: none;
}

.hero-container {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.hero-content {
	position: relative;
	z-index: 1;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	padding: 0.5rem 1rem;
	border-radius: 100px;
	font-size: 0.85rem;
	color: var(--text-secondary);
	margin-bottom: 1.5rem;
}

.hero-badge span {
	color: var(--accent);
}

.hero h1 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 1.5rem;
	letter-spacing: -0.02em;
}

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

.hero-description {
	font-size: 1.15rem;
	color: var(--text-secondary);
	margin-bottom: 2rem;
	max-width: 480px;
}

.hero-buttons {
	display: flex;
	gap: 1rem;
	margin-bottom: 3rem;
}

.btn-primary {
	background: var(--accent);
	color: var(--bg-dark);
	padding: 1rem 2rem;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.2s;
}

.btn-primary:hover {
	background: var(--accent-light);
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
}

.btn-secondary {
	background: transparent;
	color: var(--text-primary);
	padding: 1rem 2rem;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
	border: 1px solid var(--border);
	transition: all 0.2s;
}

.btn-secondary:hover {
	border-color: var(--text-secondary);
	background: var(--bg-card);
}

.hero-stats {
	display: flex;
	gap: 3rem;
}

.stat {
	text-align: left;
}

.stat-value {
	font-size: 2rem;
	font-weight: 700;
	color: var(--text-primary);
}

.stat-label {
	font-size: 0.85rem;
	color: var(--text-muted);
}

/* Hero Visual (right side image) */
.hero-visual {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-visual-inner {
	width: 100%;
	max-width: 620px;
	aspect-ratio: 4 / 3;
	border-radius: 26px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
	position: relative;
}

.hero-visual-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%);
	pointer-events: none;
}

.hero-visual-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(1.05) contrast(1.05);
}

/* Guitar Section */
.guitar-wrapper {
	position: relative;
	z-index: 1;
}

.guitar-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 1.5rem;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.guitar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border);
}

.guitar-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-secondary);
}

.guitar-controls {
	display: flex;
	gap: 0.5rem;
}

.chord-btn {
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	color: var(--text-primary);
	padding: 0.4rem 0.8rem;
	border-radius: 6px;
	font-size: 0.8rem;
	font-family: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s;
}

.chord-btn:hover {
	background: var(--accent);
	color: var(--bg-dark);
	border-color: var(--accent);
}

.chord-btn.active {
	background: var(--accent);
	color: var(--bg-dark);
	border-color: var(--accent);
}

/* Mini Guitar Fretboard */
.guitar-neck {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
}

.fretboard {
	background:
		repeating-linear-gradient(90deg,
			transparent 0px,
			rgba(60, 30, 20, 0.15) 1px,
			transparent 2px,
			transparent 6px),
		linear-gradient(180deg,
			#3d2517 0%,
			#2a1810 20%,
			#1f120b 50%,
			#2a1810 80%,
			#3d2517 100%);
	border-radius: 6px;
	border: 3px solid #1a0f08;
	border-top: none;
}

.nut {
	height: 10px;
	background: linear-gradient(180deg,
			#f5f5dc 0%,
			#d4cba8 50%,
			#c9c098 100%);
	border-radius: 6px 6px 0 0;
}

.fretboard-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(6, 32px);
	position: relative;
}

.string-labels {
	position: absolute;
	left: -28px;
	top: 0;
	height: calc(6 * 32px);
	display: flex;
	flex-direction: column;
}

.string-label {
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	color: var(--text-muted);
	font-weight: 500;
}

.fret {
	position: relative;
	border-right: 2px solid #c0a080;
	border-bottom: 1px solid rgba(200, 200, 200, 0.4);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.1s;
}

.fret:hover {
	background: rgba(245, 158, 11, 0.15);
}

.fret::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* String thickness - thicker for lower strings */
.fret[data-string="0"]::after {
	height: 1px;
	background: linear-gradient(90deg,
			rgba(200, 180, 160, 0.4),
			rgba(240, 220, 200, 0.7),
			rgba(200, 180, 160, 0.4));
}

.fret[data-string="1"]::after {
	height: 1px;
	background: linear-gradient(90deg,
			rgba(200, 180, 160, 0.4),
			rgba(240, 220, 200, 0.7),
			rgba(200, 180, 160, 0.4));
}

.fret[data-string="2"]::after {
	height: 2px;
	background: linear-gradient(90deg,
			rgba(190, 170, 150, 0.5),
			rgba(230, 210, 190, 0.8),
			rgba(190, 170, 150, 0.5));
}

.fret[data-string="3"]::after {
	height: 2px;
	background: linear-gradient(90deg,
			rgba(180, 160, 140, 0.5),
			rgba(220, 200, 180, 0.8),
			rgba(180, 160, 140, 0.5));
}

.fret[data-string="4"]::after {
	height: 3px;
	background: linear-gradient(90deg,
			rgba(160, 140, 120, 0.5),
			rgba(200, 180, 160, 0.85),
			rgba(160, 140, 120, 0.5));
	box-shadow: 0 0 2px rgba(200, 180, 160, 0.3);
}

.fret[data-string="5"]::after {
	height: 4px;
	background: linear-gradient(90deg,
			rgba(150, 130, 110, 0.5),
			rgba(190, 170, 150, 0.9),
			rgba(150, 130, 110, 0.5));
	box-shadow: 0 0 3px rgba(190, 170, 150, 0.4);
}

.note-marker {
	width: 18px;
	height: 18px;
	background: var(--accent);
	border-radius: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 0.5rem;
	font-weight: 700;
	color: var(--bg-dark);
	z-index: 2;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
}

.note-marker.show {
	display: flex;
}

.note-marker.playing {
	animation: notePulse 0.3s ease;
}

@keyframes notePulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1);
	}
}

.fret-marker {
	position: absolute;
	width: 8px;
	height: 8px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	pointer-events: none;
}

.guitar-footer {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.guitar-footer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.guitar-hint {
	font-size: 0.75rem;
	color: var(--text-muted);
}

.footer-controls {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.clear-btn {
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	color: var(--text-secondary);
	padding: 0.3rem 0.6rem;
	border-radius: 5px;
	font-size: 0.7rem;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.15s;
}

.clear-btn:hover {
	background: var(--border);
	color: var(--text-primary);
}

.sound-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--text-secondary);
}

.toggle-switch {
	width: 36px;
	height: 20px;
	background: var(--bg-elevated);
	border-radius: 10px;
	position: relative;
	cursor: pointer;
	transition: background 0.2s;
}

.toggle-switch.active {
	background: var(--accent);
}

.toggle-switch::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	background: var(--text-primary);
	border-radius: 50%;
	top: 2px;
	left: 2px;
	transition: transform 0.2s;
}

.toggle-switch.active::after {
	transform: translateX(16px);
}

/* Song Player */
.song-player {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--bg-elevated);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
}

.play-btn {
	width: 32px;
	height: 32px;
	background: var(--accent);
	border: none;
	border-radius: 50%;
	color: var(--bg-dark);
	font-size: 0.9rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
	flex-shrink: 0;
}

.play-btn:hover {
	background: var(--accent-light);
	transform: scale(1.05);
}

.play-btn.playing {
	background: var(--accent-dark);
}

.song-info {
	flex: 1;
	min-width: 0;
}

.song-title {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.song-progress {
	width: 100%;
	height: 3px;
	background: var(--border);
	border-radius: 2px;
	margin-top: 4px;
	overflow: hidden;
}

.song-progress-bar {
	height: 100%;
	background: var(--accent);
	width: 0%;
	transition: width 0.1s linear;
}

.song-select {
	background: var(--bg-dark);
	border: 1px solid var(--border);
	color: var(--text-secondary);
	padding: 0.3rem 0.5rem;
	border-radius: 5px;
	font-size: 0.7rem;
	font-family: inherit;
	cursor: pointer;
}

.song-select:focus {
	outline: none;
	border-color: var(--accent);
}

/* Features Section */
.features {
	padding: 6rem 2rem;
	background: var(--bg-card);
}

.section-container {
	max-width: 1200px;
	margin: 0 auto;
}

.section-header {
	text-align: center;
	margin-bottom: 4rem;
}

.section-label {
	font-size: 0.85rem;
	color: var(--accent);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

.section-title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	margin-bottom: 1rem;
	letter-spacing: -0.02em;
}

.section-description {
	font-size: 1.1rem;
	color: var(--text-secondary);
	max-width: 600px;
	margin: 0 auto;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.feature-card {
	background: var(--bg-dark);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 2rem;
	transition: all 0.3s;
}

.feature-card:hover {
	border-color: var(--accent);
	transform: translateY(-4px);
}

.feature-icon {
	width: 56px;
	height: 56px;
	background: var(--bg-elevated);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	color: var(--accent);
	transition: all 0.3s;
}

.feature-card:hover .feature-icon {
	background: var(--accent);
	color: var(--bg-dark);
}

.feature-card h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.feature-card p {
	color: var(--text-secondary);
	font-size: 0.95rem;
}

/* Pricing Section */
.pricing {
	padding: 6rem 2rem;
}

.billing-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 3rem;
	background: var(--bg-card);
	padding: 0.5rem;
	border-radius: 12px;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid var(--border);
}

.billing-option {
	padding: 0.75rem 1.5rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
	background: transparent;
	border: none;
	font-family: inherit;
}

.billing-option:hover {
	color: var(--text-primary);
}

.billing-option.active {
	background: var(--accent);
	color: var(--bg-dark);
}

.billing-option .discount-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	background: #22c55e;
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.pricing-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 2.5rem;
	position: relative;
	transition: all 0.3s;
}

.pricing-card:hover {
	transform: translateY(-4px);
}

.pricing-card.featured {
	border-color: var(--accent);
	box-shadow: 0 0 40px rgba(245, 158, 11, 0.15);
}

.pricing-card.featured::before {
	content: 'Most Popular';
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--accent);
	color: var(--bg-dark);
	padding: 0.3rem 1rem;
	border-radius: 100px;
	font-size: 0.75rem;
	font-weight: 600;
}

.pricing-name {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 0.5rem;
}

.pricing-price {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 0.25rem;
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
}

.pricing-price .currency {
	font-size: 1.5rem;
	font-weight: 600;
}

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

.pricing-billed {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
	min-height: 1.2rem;
}

.pricing-savings {
	display: inline-block;
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.25rem 0.75rem;
	border-radius: 100px;
	margin-bottom: 1rem;
	min-height: 1.5rem;
}

.pricing-savings:empty {
	visibility: hidden;
}

.pricing-description {
	color: var(--text-muted);
	font-size: 0.9rem;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--border);
}

.pricing-features {
	list-style: none;
	margin-bottom: 2rem;
}

.pricing-features li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
	color: var(--text-secondary);
	font-size: 0.95rem;
}

.pricing-features li::before {
	content: '✓';
	color: var(--accent);
	font-weight: 700;
}

.pricing-btn {
	display: block;
	text-align: center;
	padding: 1rem;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.2s;
}

.pricing-card .pricing-btn {
	background: var(--bg-elevated);
	color: var(--text-primary);
	border: 1px solid var(--border);
}

.pricing-card .pricing-btn:hover {
	background: var(--text-primary);
	color: var(--bg-dark);
}

.pricing-card.featured .pricing-btn {
	background: var(--accent);
	color: var(--bg-dark);
	border: none;
}

.pricing-card.featured .pricing-btn:hover {
	background: var(--accent-light);
}

/* Instructors Section */
.instructors {
	padding: 6rem 2rem;
	background: var(--bg-card);
}

.instructors-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.instructor-card {
	text-align: center;
}

.instructor-image {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	margin: 0 auto 1.5rem;
	border: 4px solid var(--border);
	transition: all 0.3s;
	overflow: hidden;
	background: var(--bg-elevated);
}

.instructor-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(20%);
	transition: filter 0.3s;
}

.instructor-card:hover .instructor-image {
	border-color: var(--accent);
	box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

.instructor-card:hover .instructor-image img {
	filter: grayscale(0%);
}

.instructor-name {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.instructor-role {
	color: var(--accent);
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.instructor-bio {
	color: var(--text-muted);
	font-size: 0.85rem;
}

/* Testimonials */
.testimonials {
	padding: 6rem 2rem;
}

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

.testimonial-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 2rem;
}

.testimonial-stars {
	color: var(--accent);
	font-size: 1rem;
	margin-bottom: 1rem;
}

.testimonial-text {
	color: var(--text-secondary);
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.testimonial-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.testimonial-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonial-name {
	font-weight: 600;
	font-size: 0.95rem;
}

.testimonial-title {
	color: var(--text-muted);
	font-size: 0.8rem;
}

/* CTA Section */
.cta {
	padding: 6rem 2rem;
	background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-dark) 100%);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cta::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

.cta-content {
	position: relative;
	z-index: 1;
}

.cta h2 {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	margin-bottom: 1rem;
}

.cta p {
	color: var(--text-secondary);
	font-size: 1.1rem;
	margin-bottom: 2rem;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

/* Footer */
footer {
	padding: 4rem 2rem 2rem;
	border-top: 1px solid var(--border);
}

.footer-container {
	max-width: 1200px;
	margin: 0 auto;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 3rem;
	margin-bottom: 3rem;
}

.footer-brand p {
	color: var(--text-muted);
	font-size: 0.9rem;
	margin-top: 1rem;
	max-width: 280px;
}

.footer-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 1.5rem;
}

.footer-links {
	list-style: none;
}

.footer-links li {
	margin-bottom: 0.75rem;
}

.footer-links a {
	color: var(--text-muted);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.2s;
}

.footer-links a:hover {
	color: var(--accent);
}

/* Footer contact labels (Telegram / Email) */
.footer-label {
	display: inline-block;
	min-width: 72px;
	opacity: 0.85;
}

.footer-bottom {
	padding-top: 2rem;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.85rem;
	color: var(--text-muted);
}

.footer-bottom a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.2s;
}

.footer-bottom a:hover {
	color: var(--accent-light);
}

/* Mobile Menu */
.mobile-menu-btn {
	display: none;
	background: none;
	border: none;
	color: var(--text-primary);
	font-size: 1.5rem;
	cursor: pointer;
}

/* Responsive */
@media (max-width: 1024px) {
	.hero-container {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hero-content {
		order: 1;
	}

	.hero-visual {
		order: 0;
		margin: 0 auto 28px;
	}

	.hero-visual-inner {
		max-width: 680px;
	}

	.guitar-wrapper {
		order: 0;
		max-width: 500px;
		margin: 0 auto;
	}

	.hero-description {
		margin: 0 auto 2rem;
	}

	.hero-buttons {
		justify-content: center;
	}

	.hero-stats {
		justify-content: center;
	}

	.features-grid,
	.pricing-grid,
	.testimonials-grid {
		grid-template-columns: 1fr;
		max-width: 500px;
		margin: 0 auto;
	}

	.billing-toggle {
		flex-wrap: wrap;
		justify-content: center;
	}

	.billing-option {
		padding: 0.6rem 1.2rem;
		font-size: 0.85rem;
	}

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

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

@media (max-width: 880px) {

	.nav-links,
	.nav-ctas {
		display: none;
	}

	.mobile-menu-btn {
		display: block;
	}

	/* Mobile Menu */
	body.menu-open .nav-container {
		flex-direction: column;
		align-items: stretch;
	}

	.nav-links.active {
		display: flex;
		flex-direction: column;
		position: static;
		background: rgba(13, 13, 13, 0.98);
		backdrop-filter: blur(20px);
		padding: 0.5rem 0 0 0;
		gap: 0;
	}

	.nav-links.active li {
		border-bottom: 1px solid var(--border);
	}

	.nav-links.active li:last-child {
		border-bottom: none;
	}

	.nav-ctas.active {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		position: static;
		text-align: center;
		background: var(--bg-dark);
		padding: 1rem 2rem 1.5rem;
		border-top: 1px solid var(--border);
	}

	.nav-ctas.active .nav-cta {
		display: block;
		width: 100%;
	}

	.hero {
		padding: 6rem 1rem 3rem;
	}

	.hero h1 {
		font-size: 2rem;
	}

	.hero-buttons {
		flex-direction: column;
	}

	.hero-stats {
		flex-direction: column;
		gap: 1.5rem;
	}

	.stat {
		text-align: center;
	}

	.guitar-card {
		padding: 1rem;
	}

	.fretboard-grid {
		grid-template-rows: repeat(6, 28px);
	}

	.string-labels {
		height: calc(6 * 28px);
		left: -24px;
	}

	.string-label {
		height: 28px;
		font-size: 0.6rem;
	}

	.note-marker {
		width: 14px;
		height: 14px;
		font-size: 0.4rem;
	}

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

	.footer-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.footer-brand p {
		margin: 1rem auto;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 1rem;
		text-align: center;
	}
}

/* === Global Proxy custom additions === */
.hero-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 22px;
  max-width: 420px;
  margin-left: auto;
}
.hero-card h3{ margin-top: 0; }
.hero-bullets{
  margin: 14px 0 18px 18px;
  padding: 0;
}
.hero-bullets li{ margin: 6px 0; }
.feature-card ul{
  margin: 12px 0 0 18px;
}


/* GlobalProxy custom: pricing duration panels */
.plan-panel { display: none; }
.plan-panel.active { display: block; }


.operators{
  color: var(--text-muted);
  margin: 0.75rem 0 1.5rem 0;
}

@media (max-width: 768px){
  .region-grid{ grid-template-columns: 1fr; }
}


.region-grid {
  display: flex;          /* changed from grid to flex */
  flex-wrap: nowrap;      /* prevent wrapping */
  gap: 2rem;              /* spacing between cards */
  overflow-x: auto;       /* enable horizontal scroll if too many cards */
  padding-bottom: 0.5rem; /* space for scrollbar */
  scroll-behavior: smooth;
}

.region-grid::-webkit-scrollbar {
  height: 8px;
}

.region-grid::-webkit-scrollbar-thumb {
  background-color: var(--accent); 
  border-radius: 4px;
}

.region-grid::-webkit-scrollbar-track {
  background: var(--bg-card);
}

/* Keep existing card sizes */
.region-grid .pricing-card {
  width: 300px !important;
  min-height: 380px !important;
  flex: 0 0 auto !important; /* prevents shrinking */
  padding-bottom: 26px !important;
}

.region-grid .pricing-card .btn,
.region-grid .pricing-card a.btn {
  white-space: nowrap !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
  line-height: 1 !important;
}


/* Operators: same compact style as previous inline look */
.operators-list{
  list-style:none !important;
  padding:0 !important;
  margin:12px 0 16px 0 !important;
}

.operators-list li{
  margin:0 0 8px 0 !important;
  font-size:14px !important;
  color:rgba(255,255,255,0.78) !important;
}


/* ===== FINAL FIX v4: Filled cards + operator dots ===== */
.region-grid{
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:48px !important;
  max-width:760px !important;
  margin:0 auto !important;
}

/* Card: make content fill height; keep compact height */
.region-grid .pricing-card{
  width:300px !important;
  min-height:380px !important;
  flex:0 0 auto !important;
  display:flex !important;
  flex-direction:column !important;
}

/* Operators: show dots (bullets) */
.operators-list{
  list-style:disc !important;
  padding-left:18px !important; /* space for dots */
  margin:12px 0 0 0 !important;
  flex:1 1 auto !important;     /* takes remaining height */
}

.operators-list li{
  margin:0 0 10px 0 !important;
  font-size:14px !important;
  color:rgba(255,255,255,0.82) !important;
}

/* make the bullet (dot) visible and accent-ish */
.operators-list li::marker{
  color:rgba(255,80,80,0.95) !important;
}

/* Button: stay on one line and sit at bottom */
.region-grid .pricing-card .btn,
.region-grid .pricing-card a.btn{
  white-space:nowrap !important;
  font-size:14px !important;
  padding:14px 18px !important;
  line-height:1 !important;
  margin-top:auto !important;   /* push button to bottom */
}


/* ===== FINAL VISUAL FIX ===== */

/* Titles bigger */
.pricing-card h3{
  font-size:20px !important;
}

/* Operators left aligned but block centered */
.operators-list{
  list-style:disc !important;
  list-style-position:outside !important;
  padding-left:22px !important;
  margin:14px auto 0 auto !important;
  text-align:left !important;
  max-width:160px;
}

.operators-list li{
  font-size:16px !important;
  margin-bottom:8px !important;
}

/* Button text centered and slightly bigger */
.pricing-card .btn,
.pricing-card a.btn{
  text-align:center !important;
  font-size:16px !important;
  justify-content:center !important;
}


/* ===== Center country title ===== */
.pricing-card h3{
  text-align:center !important;
}


/* ===== Scale cards down by 10% ===== */
.region-grid .pricing-card{
  width:270px !important;      /* was ~300px */
  min-height:342px !important; /* was ~380px */
}


/* ===== Scale cards down additional 10% (total ~20%) ===== */
.region-grid .pricing-card{
  width:243px !important;      /* 270px -> 243px */
  min-height:308px !important; /* 342px -> ~308px */
}


/* ===== Move Prices block higher ===== */
#pricing, section#pricing, .pricing{
  padding-top:40px !important;
  margin-top:-60px !important; /* pull section up */
}


/* ===== Mobile swipe for pricing cards (fix left reach) ===== */
@media (max-width: 768px){
  .region-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    justify-content:flex-start !important;
    gap:16px !important;

    /* allow reaching the first card fully */
    padding:0 16px 12px 16px !important;
    margin:0 -16px !important;         /* extend scroll area to screen edges */
    scroll-padding-left:16px;
    scroll-padding-right:16px;

    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;

    max-width:none !important;          /* remove desktop constraint */
    width:100% !important;
  }

  .region-grid::-webkit-scrollbar{
    display:none;
  }

  .region-grid .pricing-card{
    flex:0 0 auto !important;
    min-width:260px;
    scroll-snap-align:start;
  }

  /* add a tiny spacer so first/last snap nicely */
  .region-grid::before,
  .region-grid::after{
    content:"";
    flex:0 0 16px;
  }
}


/* ===== Proxy Test Section ===== */
#trial{
  padding-top:70px;
  padding-bottom:70px;
}
#trial .trial-list{
  list-style:disc;
  margin:14px 0 0 18px;
  padding:0;
  color:rgba(255,255,255,0.78);
}
#trial .trial-list li{
  margin-bottom:8px;
}


/* ===== Remove dots in trial section ===== */
#trial ul,
#trial .trial-list{
  list-style:none !important;
  padding-left:0 !important;
}

#trial .trial-list li::marker{
  content:none !important;
}


/* ===== About service cards ===== */
#about .team-member{
  padding:28px;
  background:rgba(255,255,255,0.03);
  border-radius:16px;
  height:100%;
}
#about .team-member h4{
  margin-bottom:10px;
}
#about .team-member p{
  color:rgba(255,255,255,0.75);
}

/* ===== ABOUT GRID (Global Proxy) ===== */
/* The template originally styled these cards under #instructors.
   Our site uses the #about section, so apply the same styles there. */
#about .section-label{ display:none !important; } /* hide the small "ABOUT" label */

#about .about-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:32px;
  margin-top:56px;
}

#about .about-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:26px 22px;
  height:100%;
}

#about .about-card h3{
  margin:0 0 10px 0;
  font-size:20px;
  color:#fff;
  text-align:center;
}

#about .about-accent{
  margin:0 auto 14px auto;
  text-align:center;
  font-weight:600;
  color:var(--primary-color, #f5a400);
  font-size:13px;
  letter-spacing:0.2px;
}

#about .about-card p{
  margin:0;
  text-align:center;
  color:rgba(255,255,255,0.72);
  font-size:14px;
  line-height:1.6;
}

@media (max-width: 992px){
  #about .about-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px){
  #about .about-grid{ grid-template-columns:1fr; gap:18px; margin-top:34px; }
}

/* ===== TRIAL FEATURES GRID ===== */
#trial .trial-features{
  margin:34px auto 0 auto;
  max-width:860px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 18px;
}

#trial .trial-item{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:12px 14px;
  color:rgba(255,255,255,0.78);
  font-size:14px;
  text-align:left;
  display:flex;
  align-items:center;
  gap:10px;
}

#trial .trial-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(245,164,0,0.14);
  border:1px solid rgba(245,164,0,0.35);
  color:var(--primary-color, #f5a400);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.2px;
  white-space:nowrap;
}

@media (max-width: 576px){
  #trial .trial-features{ grid-template-columns:1fr; }
  #trial .trial-item{ text-align:left; }
}


/* ===== TRIAL SPACING FIX ===== */
#trial{
  padding-top:50px !important;     /* was too much space above */
  padding-bottom:90px !important;  /* add breathing room below */
}

#trial .section-title{
  margin-bottom:18px !important;
}

#trial .trial-features{
  margin-top:26px !important;      /* slightly closer to text */
}

#trial .btn.btn-primary{
  margin-top:26px !important;      /* more space above button */
  margin-bottom:8px !important;
}


/* ===== TESTIMONIALS TUNING (Global Proxy) ===== */
.testimonial-card p{
  margin-bottom:22px !important; /* more space before avatar/name */
  font-size:14px !important;
  line-height:1.7 !important;
  color:rgba(255,255,255,0.75) !important;
  font-weight:400 !important;
  font-family: inherit !important; /* use same font as rest of site */
}

.testimonial-card{
  padding-bottom:28px !important;
}

@media (max-width: 576px){
  .testimonial-card p{ margin-bottom:18px !important; }
}



/* Smooth anchor fallback for fixed nav */
section[id]{scroll-margin-top: calc(110px + var(--top-contact-height));}
html{scroll-behavior:smooth;}

.lang-switch a{
  font-weight:700;
  text-decoration:none;
  opacity:.78;
}
.lang-switch a.active{
  opacity:1;
  text-decoration:underline;
}
.lang-switch .lang-sep{ opacity:.7; padding:0 6px; }


/* Language switcher (GlobalProxy black/yellow) */
.lang-switch{
  position:fixed;
	top: calc(14px + var(--top-contact-height));
  right:18px;
  z-index:9999;
  padding:8px 12px;
  border-radius:999px;
  background:#000000cc;
  border:1px solid #fbbf24;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  gap:8px;
}
.lang-switch a{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.02em;
  color:#fbbf24;
  text-decoration:none;
  opacity:.9;
  transition: transform .12s ease, opacity .12s ease, background .12s ease, color .12s ease;
}
.lang-switch a:hover{ opacity:1; transform: translateY(-1px); }
.lang-switch a.active{
  background:#fbbf24;
  color:#000;
  opacity:1;
}
.lang-switch .lang-sep{ display:none; }

/* Normalize text weight for RU page */
p, .text, .content p {
  font-weight: 400;
}

/* Lang switcher: remove underline/line when selected */
.lang-switch a,
.lang-switch a:hover,
.lang-switch a:focus,
.lang-switch a:active,
.lang-switch a.active{
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ===== HOW TO BUY (GUIDES) SECTION ===== */
#howto{
  padding:90px 2rem;
}

#howto .guides-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
  margin-top:44px;
}

#howto .guide-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:22px;
}

#howto .guide-card h3{
  margin:0 0 10px 0;
  font-size:20px;
  color:#fff;
  text-align:center;
}

#howto .guide-card p{
  margin:0;
  text-align:center;
  color:rgba(255,255,255,0.72);
  font-size:14px;
  line-height:1.6;
}

#howto .video-wrap{
  margin-top:14px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.35);
}

#howto video{
  width:100%;
  height:auto;
  display:block;
}

@media (max-width: 768px){
  #howto{ padding:70px 2rem; }
  #howto .guides-grid{ grid-template-columns:1fr; }
}

/* ===== SIGN UP VIDEO SECTION ===== */
#signup{
	padding:90px 2rem;
	background: var(--bg-card);
}

#signup .signup-grid{
	display:grid;
	grid-template-columns:minmax(0, 1fr);
	gap:24px;
	margin-top:44px;
}

#signup .signup-card{
	background:rgba(255,255,255,0.03);
	border:1px solid rgba(255,255,255,0.08);
	border-radius:18px;
	padding:22px;
}

#signup .video-wrap{
	max-width: 860px;
	margin: 0 auto;
}

#signup video{
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
}

#signup .signup-actions{
	margin-top:16px;
	display:flex;
	justify-content:center;
}

@media (max-width: 768px){
	#signup{ padding:70px 2rem; }
}


/* ===== LIVE CHAT WIDGET ===== */
.live-chat{
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9999;
}

.live-chat-toggle{
	display: none;
	background: var(--accent);
	color: var(--bg-dark);
	border: none;
	border-radius: 999px;
	padding: 14px 22px;
	font-weight: 700;
	font-size: 16px;
	box-shadow: 0 12px 28px rgba(245, 158, 11, 0.45);
	cursor: pointer;
}

.live-chat-panel{
	display: flex;
	width: 360px;
	height: 520px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	flex-direction: column;
}

.live-chat-header{
	width: 100%;
	background: #0d0d0d;
	color: #fafafa;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #2e2e2e;
}

.live-chat-close{
	background: var(--accent);
	color: var(--bg-dark);
	border: none;
	border-radius: 999px;
	width: 28px;
	height: 28px;
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
}

.live-chat-messages{
	padding: 16px;
	flex: 1;
	overflow-y: auto;
	background: #f7f7f7;
}

.live-chat-form{
	margin-top: auto;
	display: flex;
	gap: 8px;
	padding: 12px;
	background: #ffffff;
	border-top: 1px solid #e5e7eb;
}

.live-chat-input{
	flex: 1;
	width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
}

.live-chat-send{
	background: var(--accent);
	color: var(--bg-dark);
	border: none;
	border-radius: 10px;
	padding: 10px 16px;
	font-weight: 700;
	cursor: pointer;
}

@media (max-width: 576px){
	.live-chat{
		right: 12px;
		bottom: 12px;
	}

	.live-chat-toggle{
		display: inline-flex;
	}

	.live-chat-panel{
		display: none;
	}

	.live-chat-panel{
		width: min(92vw, 360px);
		height: min(70vh, 520px);
		border-radius: 14px;
	}

	.live-chat-messages{
		padding: 12px;
	}

	.live-chat-form{
		padding: 10px;
	}
}

@media (max-width: 576px){
	:root{
		--top-contact-height: 64px;
	}

	.top-contact{
		flex-direction: column;
		align-items: center;
		padding: 0.35rem 0.75rem;
		font-size: 0.75rem;
		gap: 0.4rem 0.8rem;
		text-align: center;
	}

	.top-contact-item{
		display: block;
		max-width: 100%;
	}

	html[lang="ru"] .top-contact{
		font-size: 0.7rem;
	}

	html[lang="ru"] .top-contact-item{
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.lang-switch{
		top: calc(6px + var(--top-contact-height));
		right: 10px;
		padding: 6px 8px;
	}

	.lang-switch a{
		padding: 3px 8px;
		font-size: 0.75rem;
	}
}

@media (max-width: 400px){
	.live-chat-panel{
		width: 94vw;
		height: 68vh;
	}
}