:root { --bg: #f7f8fb; --surface: #ffffff; --text: #0f172a; --muted: #475569; --border: #e5e7eb; --primary: #7c3aed; --primary-contrast: #ffffff; --accent: #22c55e; --shadow: 0 10px 30px rgba(2, 6, 23, 0.08); --ring: 2px solid rgba(124, 58, 237, 0.35); --radius: 14px; --radius-sm: 12px; --radius-lg: 18px; } 
[data-theme="dark"] { background: #000; --surface: #111827; --text: #e5e7eb; --muted: #94a3b8; --border: #1f2937; --primary: #8b5cf6; --primary-contrast: #ffffff; --accent: #22c55e; --shadow: 0 12px 40px rgba(0, 0, 0, 0.45); --ring: 2px solid rgba(139, 92, 246, 0.5); }

{ box-sizing: border-box; } html, body { height: 100%; } body { margin: 0;background-image: url(https://ez-host.ru/template/images/swet.png);
    background-position-x: center;
    background-attachment: fixed;
    background-repeat: no-repeat; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text);  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* ---------- ХЕДЕР ---------- */ .header {  top: 0; z-index: 50;background: url(/template/images/headerdark.png);  } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.2px;    margin: 45px 0px 0px -45px; } .brand-mark { width: 45px; height: 45px; border-radius: 12px; background: radial-gradient(120% 120% at 20% 20%, var(--primary) 0%, #6ee7b7 90%); display: grid; place-items: center; color: #093e67; font-weight: 900; box-shadow: var(--shadow); } .nav { display: none; gap: 20px; color: var(--muted); } .nav a { padding: 8px 10px; border-radius: 10px; } .nav a:hover { color: var(--text); background: color-mix(in oklab, var(--surface) 94%, transparent); } .header-actions { display: flex; align-items: center; gap: 10px;    margin: 0px -48px;}


.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .theme-toggle:hover { background: color-mix(in oklab, var(--surface) 92%, transparent); } .icon { width: 20px; height: 20px; } [data-theme="dark"] .icon-sun { display: none; } [data-theme="light"] .icon-moon { display: none; }

@media (min-width: 900px) { .nav { display: flex; } }

/* ---------- HERO ---------- */ .hero { position: relative; overflow: hidden; padding: 72px 0 40px; background: radial-gradient(1200px 500px at 80% -10%, color-mix(in oklab, var(--primary) 20%, transparent) 0%, transparent 70%), radial-gradient(900px 400px at -10% 0%, color-mix(in oklab, #22c55e 18%, transparent) 0%, transparent 70%); border-bottom: 1px solid var(--border); } .hero-grid { display: grid; gap: 26px; align-items: center; grid-template-columns: 1.1fr; } @media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } } .hero h1 { margin: 0 0 12px; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -0.02em; } .hero p { margin: 0 0 20px; color: var(--muted); font-size: clamp(16px, 2vw, 18px); } .actions { display: flex; gap: 12px; flex-wrap: wrap; } .hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow); } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; } .stat { background: color-mix(in oklab, var(--surface) 96%, transparent); border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; } .stat strong { font-size: 20px; display: block; } .stat span { color: var(--muted); font-size: 13px; }

/* ---------- БЛОКИ --------- */ .section { padding: 56px 0; } .section h2 { font-size: clamp(22px, 3vw, 32px); margin: 0 0 16px; } .section p.sub { color: var(--muted); margin: 0 0 26px; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(1, 1fr); } @media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .card h3 { margin: 0 0 6px; font-size: 18px; } .card p { margin: 0; color: var(--muted); font-size: 14px; } .icon-badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; margin-bottom: 8px; background: color-mix(in oklab, var(--primary) 18%, transparent); color: var(--primary-contrast); }

/* ---------- ПРАЙСИНГ ---------- */ .pricing { display: grid; gap: 16px; } @media (min-width: 900px) { .pricing { grid-template-columns: repeat(3, 1fr); } } .price-card { position: relative; overflow: hidden; } .price-badge { position: absolute; top: 12px; right: 12px; font-size: 12px; background: color-mix(in oklab, var(--primary) 20%, transparent); color: var(--primary-contrast); padding: 6px 10px; border-radius: 999px; } .price { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 10px; } .price strong { font-size: 28px; } .price small { color: var(--muted); } .feat-list { list-style: none; padding: 0; margin: 12px 0 16px; } .feat-list li { display: flex; gap: 8px; align-items: center; margin: 8px 0; } .feat-list li::before { content: "✓"; color: var(--accent); font-weight: 900; }

/* ---------- ИГРЫ ---------- */ .games { display: flex; gap: 10px; flex-wrap: wrap; } .game-badge { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 8px 12px; font-weight: 600; } .game-badge:hover { background: color-mix(in oklab, var(--surface) 92%, transparent); }

/* ---------- ЛОКАЦИИ ---------- */ .loc { display: flex; align-items: center; gap: 12px; } .flag { font-size: 22px; }


/* ---------- МЕЛОЧИ ---------- */ .muted { color: var(--muted); } .divider { height: 1px; background: var(--border); margin: 32px 0; border: 0; }