:root {
  --bg:#0a0f0d; 
  --bg2:#070b09;
  --panel:rgba(10,15,13,.72);
  --text:#e9f4ee; 
  --muted:#a8c3b7;
  --accent:#0BDA51; 
  --accent-2:#0ea565;
  --glow: 0 0 .6rem rgba(11,218,81,.55), 0 0 1.6rem rgba(11,218,81,.35);
  --radius:14px; 
  --max:1200px; 
  --mh:64px;
}
* {
	box-sizing:border-box
	}
html,body {
	margin:0;padding:0;
	background:radial-gradient(1200px 800px at -10% -10%, #0b1512 0%, var(--bg) 45%, var(--bg2) 100%); 
	color:var(--text); 
	font-family:Manrope,system-ui,Segoe UI,Arial; 
	scroll-behavior:smooth
	}
a {
	color:var(--text); 
	text-decoration:none
	}
img {
	max-width:100%; 
	height:auto; 
	display:block
	}
.wrap {
	max-width:var(--max); 
	margin:0 auto; 
	padding:0 20px
	}
section {
	padding:68px 0; 
	scroll-margin-top: calc(var(--mh) + 12px)
	}
h2 {
	font-size:30px; 
	margin:0 0 14px
	}
.lead {
	color:var(--muted); 
	margin-top:0
	}
.glow {
	box-shadow:var(--glow)
	}
.accent {
	color:var(--accent)
	}

/* NAV */
.nav {
	position:sticky; 
	top:0; 
	z-index:50; 
	height:var(--mh); 
	backdrop-filter:saturate(140%) blur(8px); 
	background:linear-gradient(180deg, rgba(10,15,13,.9), rgba(10,15,13,.6)); 
	border-bottom:1px solid rgba(255,255,255,.06)
	}
.nav .row {
	display:flex; 
	align-items:center; 
	justify-content:space-between; 
	height:var(--mh)
	}
.brand-name {
	font-weight:800; 
	letter-spacing:.2px; 
	font-size:18px
	}
.menu {
	display:flex; 
	align-items:center; 
	gap:18px; 
	font-weight:600}
.menu a {
	opacity:.92
	}
.menu a:hover {
	color:#fff
	}

/* Burger */
.burger {
	display:none; 
	width:42px; 
	height:42px; 
	border-radius:10px; 
	border:1px solid rgba(255,255,255,.12); 
	background:rgba(255,255,255,.05); 
	align-items:center; 
	justify-content:center
	}
.burger span {
	width:20px; 
	height:2px; 
	background:#e9f4ee; 
	position:relative; 
	display:block; 
	transition:.2s
	}
.burger span::before, .burger span::after {
	content:""; 
	position:absolute; 
	left:0; 
	right:0; 
	height:2px; 
	background:#e9f4ee; 
	transition:.2s
	}
.burger span::before {
	top:-6px
	}
.burger span::after {
	top:6px
	}
.menu-open .burger span {
	background:transparent
	}
.menu-open .burger span::before {
	top:0; transform:rotate(45deg)
	}
.menu-open .burger span::after {
	top:0; transform:rotate(-45deg)
	}

/* HERO */
.hero {
	padding:72px 0 48px; 
	position:relative; 
	overflow:hidden
	}
.hero::after {
  content:""; 
  position:absolute; 
  inset:-10% -10% auto auto; 
  width:360px; 
  height:360px;
  background:radial-gradient(circle, rgba(11,218,81,.25), transparent 55%);
  filter:blur(14px); 
  pointer-events:none
	}
.hero .grid {
	display:grid; 
	grid-template-columns: 1.1fr .9fr; 
	gap:36px
	}
.name {
	font-size:18px; 
	font-weight:800; 
	letter-spacing:.3px; 
	margin:0 0 8px; 
	text-shadow:var(--glow)
	}
.title {
	font-size:42px; 
	line-height:1.15; 
	margin:0 0 16px
	}
.subtitle {
	font-size:18px; 
	color:var(--muted); 
	margin:0 0 28px
	}
.badges {
	display:flex; 
	gap:10px; 
	flex-wrap:wrap; 
	margin:0 0 26px
	}
.badge {
	background:rgba(255,255,255,.05); 
	border:1px solid rgba(255,255,255,.08); 
	padding:8px 12px; 
	border-radius:999px; 
	font-size:13px
	}
.panel {
	background:var(--panel); 
	border:1px solid rgba(255,255,255,.08); 
	border-radius:var(--radius); 
	padding:20px
	}
.cta {
	display:flex; 
	gap:14px; 
	flex-wrap:wrap; 
	margin-top:14px
	}
.btn {
	display:inline-flex; 
	align-items:center; 
	justify-content:center; 
	gap:10px; 
	padding:14px 18px; 
	border-radius:12px; 
	font-weight:700; 
	letter-spacing:.2px; 
	border:1px solid rgba(255,255,255,.08)
	}
.btn-primary {
	background:linear-gradient(180deg, var(--accent), var(--accent-2)); 
	color:#07140e; 
	box-shadow:var(--glow)
	}
.btn-primary:hover {
	filter:saturate(110%) brightness(1.02)
	}
.btn-ghost {
	background:rgba(255,255,255,.05)
	}
.meta {
	display:grid; 
	grid-template-columns:repeat(2,1fr); 
	gap:10px; 
	margin-top:10px; 
	font-size:14px; 
	color:var(--muted)
	}
.hero .portrait {
	border-radius:16px; 
	overflow:hidden; 
	border:1px solid rgba(255,255,255,.06); 
	box-shadow:0 0 32px rgba(0,0,0,.35)
	}
.hero .portrait img {
	object-fit:cover; 
	height:100%
	}

/* CARDS/PRICING/GALLERY */
.kards {
	display:grid; 
	grid-template-columns:repeat(3,1fr); 
	gap:18px
	}
.kard {
	background:var(--panel); 
	border:1px solid rgba(255,255,255,.08); 
	border-radius:var(--radius); 
	padding:20px
	}
.kard h3 {
	margin:0 0 10px; 
	font-size:20px
	}
.kard p {
	margin:0; 
	color:var(--muted)
	}

.pricing {
	display:grid; 
	grid-template-columns:repeat(3,1fr); 
	gap:18px
	}
.price {
	background:linear-gradient(180deg, rgba(11,218,81,.06), rgba(255,255,255,.03)); 
	border:1px solid rgba(11,218,81,.2); 
	border-radius:var(--radius); 
	padding:22px
	}
.price h3 {
	margin:0 0 6px
	}
.price .num {
	font-size:28px; 
	font-weight:800; 
	color:#fff
	}
.price ul {
	margin:12px 0 0; 
	padding-left:18px; 
	color:var(--muted)
	}
.price .btn {
	margin-top:14px
	}

.gallery {
	display:grid; 
	grid-template-columns:repeat(4, 1fr); 
	gap:10px
	}
.gallery img {
	border-radius:12px; 
	border:1px solid rgba(255,255,255,.06)
	}

/* FOOTER */
footer {
	padding:32px 0 60px; 
	border-top:1px solid rgba(255,255,255,.06); 
	color:var(--muted)
	}
.foot {
	display:grid; 
	grid-template-columns: 1.4fr .6fr .6fr; 
	gap:18px
	}
.small {
	font-size:13px; 
	opacity:.9
	}

/* Floating Call button (mobile only) */
.call-fab {
  position:fixed; 
  right:18px; 
  bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  width:56px; 
  height:56px; 
  border-radius:999px; 
  z-index:80;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#07140e; 
  border:1px solid rgba(11,218,81,.35);
  box-shadow:var(--glow); 
  display:none; 
  align-items:center; 
  justify-content:center;
  font-size:22px; 
  font-weight:800; 
  text-decoration:none;
	}
.call-fab:active {
	transform:scale(.98)
	}
.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0
	}

/* Mobile Menu Panel (outside nav, dark solid background) */
.menu-panel {
  position:fixed; 
  left:0; 
  right:0; 
  top:calc(var(--mh) + env(safe-area-inset-top,0px)); 
  bottom:0;
  background: linear-gradient(180deg, #0b1210 0%, #070b09 100%), radial-gradient(800px 380px at 85% 0%, rgba(11,218,81,.12), transparent 60%);
  color:var(--text);
  z-index:1000; 
  padding:16px 20px; 
  border-top:1px solid rgba(255,255,255,.08);
  transform:translateY(-8px); 
  opacity:0; 
  pointer-events:none; 
  transition:.25s ease;
  display:none; /* по умолчанию скрыта на десктопе */
	}
.menu-panel a {
	display:block; 
	padding:14px 4px; 
	font-size:16px; 
	border-bottom:1px solid rgba(255,255,255,.08)
	}
.menu-panel a:last-child {
	border-bottom:none
	}

/* State when open */
.menu-open .menu-panel {
	transform:none; 
	opacity:1; 
	pointer-events:auto
	}
.menu-open {
	overflow:hidden
	}
.menu-open .call-fab {
	display:none !important
	}

/* Mobile adaptations */
@media (max-width:980px) {
.hero .grid {grid-template-columns:1fr; gap:24px}
.kards {grid-template-columns:1fr}
.pricing {grid-template-columns:1fr}
.gallery {grid-template-columns:repeat(2,1fr)}
.foot {grid-template-columns:1fr}
.title {font-size:34px}
.wrap {padding:0 16px}
.cta .btn {flex:1 1 100%}
.meta {grid-template-columns:1fr}
	}
@media (max-width:720px) {
:root { --mh:60px }
.menu {display:none}
.burger {display:flex}
.menu-panel {display:block}
.title {font-size:28px}
h2 {font-size:24px}
.call-fab {display:flex}
	}
@media (max-width:460px){
.badges {gap:8px}
.badge {font-size:12px; padding:6px 10px}
.name {font-size:16px}
	}
@media (max-width:400px) { 
.glow {box-shadow:none} 
	}