<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>AK TEAM — Padel & Tennis Academy | Koh Samui</title>
<style>
:root{
--bg: #000;
--fg: #fff;
--neon: #D9FF00; /* neon yellow / lime àêöåíò */
--card: #111;
--muted: #bdbdbd;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--fg);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
line-height: 1.5;
overflow-x: hidden;
}
/* NAV */
nav {
position: fixed;
top: 0; left: 0; right: 0;
height: 72px;
display: flex; align-items: center; justify-content: space-between;
padding: 0 20px;
z-index: 100;
background: rgba(0,0,0,.85);
backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(217,255,0,.15);
}
.logo-area {
display: flex; align-items: center; gap: 12px;
text-decoration: none; color: inherit;
}
.logo-area img { height: 38px; width: auto; display: block; }
.brand {
font-weight: 900; text-transform: uppercase;
letter-spacing: .15em;
font-size: 14px;
display: inline-flex; align-items: center; gap: 8px;
}
.brand .accent { color: var(--neon); }
.nav-links {
display: flex; gap: 22px; list-style: none;
}
.nav-links a {
color: #ddd; text-decoration: none;
font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .12em;
}
.nav-links a:hover { color: var(--neon); }
.nav-cta {
background: var(--neon);
color: #000; padding: 9px 14px;
font-size: 12px; font-weight: 800;
text-transform: uppercase; letter-spacing: .1em;
border-radius: 999px; text-decoration: none;
}
.nav-cta:hover { filter: brightness(1.05); }
/* HERO */
.hero {
min-height: 90vh;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
padding: 120px 40px 60px;
position: relative;
}
.hero-bg {
position: absolute; inset: 0;
background:
radial-gradient(circle at 70% 40%, rgba(217,255,0,.08), transparent 40%),
radial-gradient(circle at 20% 80%, rgba(255,255,255,.04), transparent 60%);
z-index: 0;
}
.hero-content {
position: relative; z-index: 1;
padding: 28px 40px;
}
.hero h1 {
font-size: clamp(28px, 5vw, 62px);
line-height: 1.04;
text-transform: uppercase; letter-spacing: .02em;
margin-bottom: 12px; font-weight: 900;
}
.hero p {
color: #ddd;
font-size: clamp(14px, 2.6vw, 18px);
max-width: 60ch;
margin-bottom: 22px;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 12px 20px; border-radius: 999px;
font-weight: 800; text-decoration: none; text-transform: uppercase;
border: 0;
transition: transform .2s;
}
.btn.primary {
background: var(--neon); color: #000;
}
.btn.secondary {
background: transparent; color: #fff;
border: 1px solid rgba(217,255,0,.6);
}
.btn:hover { transform: translateY(-1px); opacity: .95; }
.hero-visual {
width: 100%; height: auto; max-width: 520px;
display: block; border-radius: 18px;
border: 1px solid rgba(217,255,0,.25);
background: #111;
box-shadow: 0 20px 50px rgba(0,0,0,.6);
margin: 0 auto;
}
/* SECTIONS */
section { padding: 72px 20px; }
.section-title {