:root{
    --bg:#12151A;
    --surface:#1B1F27;
    --surface-2:#20242D;
    --border:#262B33;
    --text:#EDEDEB;
    --text-dim:#8B92A0;
    --accent:#FF8F4D;
    --accent-dim:#3D2C22;
    --teal:#4FB8A6;
    --teal-dim:#1E2E2C;
    --radius:6px;
    --maxw:1140px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Bricolage Grotesque', sans-serif;
    margin:0;
    letter-spacing:-0.01em;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
  ::selection{background:var(--accent);color:#12151A;}

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }






/* ---------- ОТМЕНА ГЛОБАЛЬНОГО ПОДЧЁРКИВАНИЯ ДЛЯ КОМПОНЕНТОВ ---------- */
a.logo,
a.logo:hover,
.nav-links a,
.nav-links a:hover,
.footer-nav a,
.footer-nav a:hover,
.all-projects-link,
.all-projects-link:hover,
.back-to-top,
.back-to-top:hover,
.back-link,
.back-link:hover{
	text-decoration:none;
}
a.logo:hover{
	color:var(--text);
}



  /* ---------- HEADER ---------- */
header{
	position:sticky;top:0;z-index:20;
	background:rgba(18,21,26,0.72);
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	border-bottom:1px solid transparent;
	transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
header.is-scrolled{
	background:rgba(18,21,26,0.92);
	border-bottom-color:var(--border);
	box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.nav{
	display:flex;align-items:center;justify-content:space-between;
	padding-top:16px;
	padding-bottom:16px;
	transition:padding .3s ease;
}
header.is-scrolled .nav{
	padding-top:12px;
	padding-bottom:12px;
}

.logo{
	font-family:'Bricolage Grotesque', sans-serif;
	font-weight:700;font-size:19px;
	transition:opacity .2s ease;
}
.logo:hover{opacity:.75;}
.logo span{color:var(--accent);}

.nav-links{
	display:flex;gap:32px;font-size:15px;color:var(--text-dim);
}
.nav-links a{position:relative;padding:4px 0;}
.nav-links a::after{
	content:"";
	position:absolute;left:0;bottom:0;
	width:100%;height:1px;
	background:var(--accent);
	transform:scaleX(0);
	transform-origin:right;
	transition:transform .25s ease;
}
.nav-links a:hover{color:var(--text);}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left;}

.nav-cta{display:none;}
@media(min-width:720px){.nav-cta{display:inline-block;}}

.nav-toggle{
	display:none;
	background:transparent;border:1px solid var(--border);
	border-radius:8px;width:40px;height:40px;
	align-items:center;justify-content:center;
	color:var(--text);cursor:pointer;
}

@media(max-width:720px){
	.nav-links{
		position:absolute;top:100%;left:0;right:0;
		flex-direction:column;
		background:var(--surface);
		border-bottom:1px solid var(--border);
		padding:20px 28px;
		gap:18px;
		display:none;
	}
	.nav-links.is-open{display:flex;}
	.nav-toggle{display:flex;}
	.nav-cta{display:none !important;}
}



  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:120px 0 100px;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    top:-180px;left:60%;
    width:640px;height:640px;
    background:radial-gradient(circle, rgba(255,143,77,0.16) 0%, rgba(255,143,77,0) 70%);
    pointer-events:none;
  }



/*Hero*/
.hero .container{
	display:grid;
	grid-template-columns:1.1fr 1fr;
	gap:40px;
	align-items:center;
}
.hero-inner{position:relative;max-width:620px;}

/* ---------- HERO VISUAL: плавающие окна ---------- */
.hero-visual{
	position:relative;
	height:420px;
	perspective:1000px;
}
.float-card{
	position:absolute;
	width:260px;
	border-radius:8px;
	overflow:hidden;
	background:var(--surface);
	border:1px solid var(--border);
	box-shadow:0 24px 50px rgba(0,0,0,0.45);
	transition:transform .2s ease;
	animation:floatBob 6s ease-in-out infinite;
}
.float-card .bar{
	display:flex;gap:6px;padding:9px 12px;
	background:var(--surface-2);
	border-bottom:1px solid var(--border);
}
.float-card .dot{width:7px;height:7px;border-radius:50%;background:var(--border);}
.float-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}

.float-card.c1{top:0;left:10%;z-index:3;transform:rotate(-4deg);animation-delay:0s;}
.float-card.c2{top:120px;left:42%;z-index:2;width:230px;transform:rotate(3deg);animation-delay:1.4s;}
.float-card.c3{top:30px;left:58%;z-index:1;width:210px;transform:rotate(-2deg);animation-delay:2.8s;opacity:.85;}

@keyframes floatBob{
	0%,100%{translate:0 0;}
	50%{translate:0 -12px;}
}

@media(max-width:900px){
	.hero .container{grid-template-columns:1fr;}
	.hero-visual{display:none;}
}
@media (prefers-reduced-motion: reduce){
	.float-card{animation:none;}
}



  .eyebrow b{color:var(--accent);font-weight:500;}
  .hero h1{
    font-size:clamp(34px, 5.2vw, 58px);
    font-weight:700;
    line-height:1.08;
    max-width:15ch;
  }
  .hero p.lead{
    margin-top:22px;
    font-size:18px;
    color:var(--text-dim);
    max-width:52ch;
  }
  .hero-actions{
    margin-top:34px;
    display:flex;gap:14px;flex-wrap:wrap;
  }
  .stack-line{
    margin-top:56px;
    font-size:13px;
    color:var(--text-dim);
    display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  }
  .stack-line code{
    background:var(--surface);
    border:1px solid var(--border);
    padding:4px 9px;
    border-radius:4px;
    font-size:12.5px;
    color:var(--text);
  }

.c-full{grid-column:span 6;}
.card-media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;}


  /* ---------- SECTION HEADS ---------- */
  section{padding:88px 0;}
  .section-head{
    max-width:560px;
    margin-bottom:52px;
  }
  .section-head h2{
    font-size:clamp(26px,3vw,34px);
    font-weight:700;
  }
  .section-head p{
    margin-top:12px;
    color:var(--text-dim);
    font-size:16px;
  }




/* ---------- PROJECTS SECTION HEAD ---------- */
.section-head.projects-head{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:32px;
	flex-wrap:wrap;
	max-width:none;
}
.section-head.projects-head .section-head-text{max-width:560px;}

.all-projects-link{
	display:inline-flex;
	align-items:center;
	gap:10px;
	flex-shrink:0;
	border:1px solid var(--border);
	border-radius:30px;
	padding:12px 22px;
	font-size:14.5px;
	color:var(--text);
	transition:border-color .2s ease, color .2s ease;
}
.all-projects-link svg{transition:transform .2s ease;}
.all-projects-link:hover{
	border-color:var(--accent);
	color:var(--accent);
}
.all-projects-link:hover svg{transform:translateX(4px);}

@media(max-width:640px){
	.section-head.projects-head{align-items:flex-start;}
	.all-projects-link{width:100%;justify-content:center;}
}


  
  /* ---------- PROJECTS ---------- */
  .projects-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:18px;
  }
  .card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    transition:border-color .15s ease;
  }
  .card:hover{border-color:#3a4048;}
  .card-media{
    aspect-ratio:16/10;
    display:flex;align-items:center;justify-content:center;
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:700;
    font-size:22px;
    color:rgba(255,255,255,0.85);
  }
  .card-body{padding:20px 22px 24px;}
  .tag{
    display:inline-block;
    font-size:12px;
    padding:3px 10px;
    border-radius:20px;
    margin-bottom:12px;
  }
  .tag-shop{background:var(--teal-dim);color:var(--teal);}
  .tag-corp{background:var(--accent-dim);color:var(--accent);}
  .card h3{font-size:18px;font-weight:600;margin-bottom:6px;}
  .card p{font-size:14px;color:var(--text-dim);margin:0 0 14px;}
  .card a.link{
    font-size:14px;
    border-bottom:1px solid var(--border);
    padding-bottom:1px;
  }
  .card a.link:hover{border-color:var(--accent);color:var(--accent);}

  .c-large{grid-column:span 4;}
  .c-small{grid-column:span 2;}
  @media(max-width:860px){
    .projects-grid{grid-template-columns:1fr 1fr;}
    .c-large{grid-column:span 2;}
    .c-small{grid-column:span 1;}
  }
  @media(max-width:560px){
    .projects-grid{grid-template-columns:1fr;}
    .c-large,.c-small{grid-column:span 1;}
  }

  /* ---------- EXPERIENCE ---------- */
.timeline{
	border-left:1px solid var(--border);
	max-width:680px;
}
.t-item{
	position:relative;
	padding:0 0 40px 32px;
	transition:transform .25s ease;
}
.t-item:last-child{padding-bottom:0;}

.t-item::before{
	content:"";
	position:absolute;left:-5px;top:5px;
	width:9px;height:9px;border-radius:50%;
	background:var(--accent);
	transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}

.t-year{
	font-size:13px;color:var(--text-dim);margin-bottom:6px;
	font-family:'IBM Plex Mono', monospace;
}
.t-item h3{
	font-size:18px;font-weight:600;margin-bottom:6px;
	transition:color .2s ease;
}
.t-item p{font-size:14.5px;color:var(--text-dim);margin:0;max-width:60ch;}

.t-item:hover{transform:translateX(6px);}
.t-item:hover::before{
	transform:scale(1.5);
	box-shadow:0 0 0 6px rgba(255,143,77,0.18);
}
.t-item:hover h3{color:var(--accent);}

/* задержка появления по очереди */
.timeline .t-item:nth-child(1){transition-delay:0ms;}
.timeline .t-item:nth-child(2){transition-delay:80ms;}
.timeline .t-item:nth-child(3){transition-delay:160ms;}
.timeline .t-item:nth-child(4){transition-delay:240ms;}
.timeline .t-item:nth-child(5){transition-delay:320ms;}
.timeline .t-item:nth-child(6){transition-delay:400ms;}

@media (prefers-reduced-motion: reduce){
	.t-item, .t-item::before, .t-item h3{transition:none;}
	.t-item:hover{transform:none;}
}

 /* ---------- SKILLS ---------- */
.skills-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:14px;
}
@media(max-width:860px){
	.skills-grid{grid-template-columns:repeat(2, 1fr);}
}
@media(max-width:560px){
	.skills-grid{grid-template-columns:1fr;}
}

.skill-group{
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:var(--radius);
	padding:32px 28px;
	position:relative;
	overflow:hidden;
	transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
	z-index:1;
}
.skill-group::before{
	content:"";
	position:absolute;inset:0;
	background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,143,77,0.14), transparent 60%);
	opacity:0;
	transition:opacity .25s ease;
	pointer-events:none;
}
.skill-group::after{
	content:"";
	position:absolute;top:0;left:0;right:0;height:2px;
	background:var(--accent);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .3s ease;
}
.skill-group:hover{
	transform:translateY(-6px);
	z-index:2;
	box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.skill-group:hover::before{opacity:1;}
.skill-group:hover::after{transform:scaleX(1);}

.skill-group .icon{
	width:30px;height:30px;
	margin-bottom:18px;
	color:var(--accent);
	position:relative;
	transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.skill-group:hover .icon{
	transform:scale(1.15) rotate(-6deg);
}

.skill-group h3{
	font-size:16px;
	color:var(--text);
	font-weight:600;
	margin-bottom:16px;
	position:relative;
}

.pills{display:flex;flex-wrap:wrap;gap:8px;position:relative;}
.pill{
	font-size:13.5px;
	padding:7px 13px;
	border:1px solid var(--border);
	border-radius:20px;
	color:var(--text-dim);
	background:var(--bg);
	transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.pill:hover{
	border-color:var(--accent);
	color:var(--accent);
	background:var(--accent-dim);
}

@media (prefers-reduced-motion: reduce){
	.skill-group, .skill-group::before, .skill-group::after, .skill-group .icon{transition:none;}
	.skill-group:hover{transform:none;}
}

  /* ---------- CONTACT ---------- */
.contact{border-top:none;padding:20px 0 100px;}

.contact-panel{
	position:relative;
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:20px;
	padding:72px 56px;
	overflow:hidden;
	text-align:left;
}
.contact-panel::before{
	content:"";
	position:absolute;
	top:-220px;right:-100px;
	width:560px;height:560px;
	background:radial-gradient(circle, rgba(255,143,77,0.20) 0%, rgba(255,143,77,0) 70%);
	pointer-events:none;
}
.contact-panel::after{
	content:"";
	position:absolute;
	bottom:-180px;left:-80px;
	width:420px;height:420px;
	background:radial-gradient(circle, rgba(79,184,166,0.14) 0%, rgba(79,184,166,0) 70%);
	pointer-events:none;
}

.availability-badge{
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:9px;
	font-size:13.5px;
	color:var(--teal);
	background:var(--teal-dim);
	border-radius:20px;
	padding:7px 16px;
	margin-bottom:28px;
}

.contact-panel h2{
	position:relative;
	font-size:clamp(30px, 4.5vw, 48px);
	max-width:16ch;
}
.contact-panel p{
	position:relative;
	margin-top:18px;
	color:var(--text-dim);
	font-size:17px;
	max-width:50ch;
}

.contact-actions{
	position:relative;
	margin-top:38px;
	display:flex;gap:14px;flex-wrap:wrap;
}

.btn-lg{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:15px 28px;
	font-size:15.5px;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-lg.btn-primary:hover{
	transform:translateY(-3px);
	box-shadow:0 14px 30px rgba(255,143,77,0.28);
}
.btn-lg.btn-outline:hover{
	transform:translateY(-3px);
}

@media(max-width:640px){
	.contact-panel{padding:48px 28px;}
	.contact-actions{flex-direction:column;}
	.btn-lg{justify-content:center;}
}
@media (prefers-reduced-motion: reduce){
	.btn-lg{transition:none;}
	.btn-lg:hover{transform:none;}
}





  /* ---------- reveal animation ---------- */
.reveal{
	opacity:0;
	transform:translateY(30px);
	transition:opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
	.reveal{opacity:1;transform:none;transition:none;}
}





/*ВАУ*/

/* прогресс-бар скролла */
#scroll-progress{
	position:fixed;top:0;left:0;height:3px;background:var(--accent);
	width:0%;z-index:999;transition:width .1s linear;
}

/* заголовок hero по словам */
.split-heading{overflow:hidden;display:inline-flex;flex-wrap:wrap;gap:0.28em;}
.split-heading .word{
	display:inline-block;
	transform:translateY(115%);
	opacity:0;
	transition:transform .9s cubic-bezier(.22,1,.36,1), opacity .9s ease;
}
.split-heading.in .word{transform:translateY(0);opacity:1;}

/* бегущая строка */
.marquee{
	border-top:1px solid var(--border);
	border-bottom:1px solid var(--border);
	overflow:hidden;
	padding:18px 0;
}
.marquee-track{
	display:flex;gap:36px;white-space:nowrap;width:max-content;
	animation:marqueeScroll 22s linear infinite;
	font-family:'IBM Plex Mono', monospace;
	font-size:15px;color:var(--text-dim);
}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span.accent{color:var(--accent);}
@keyframes marqueeScroll{
	from{transform:translateX(0);}
	to{transform:translateX(-50%);}
}

/* счётчики */
.stats{border-top:1px solid var(--border);}
.stats-grid{display:flex;gap:60px;flex-wrap:wrap;justify-content:center;}
.stat{text-align:center;}
.stat .num{
	font-family:'Bricolage Grotesque', sans-serif;
	font-size:46px;font-weight:800;color:var(--accent);
}
.stat .cap{color:var(--text-dim);font-size:14px;margin-top:6px;}

/* наклон карточки */
.card.tilt-card{
	transform-style:preserve-3d;
	transition:transform .15s ease, border-color .15s ease;
	position:relative;
	will-change:transform;
}
.card.tilt-card::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,143,77,0.16), transparent 60%);
	opacity:0;transition:opacity .2s ease;
}
.card.tilt-card:hover::after{opacity:1;}


/*Шапка и Подвал*/

/* поправка на sticky-шапку при переходе по якорям */
section[id]{scroll-margin-top:90px;}

/* ---------- FOOTER ---------- */
.site-footer{
	padding:0;
	position:relative;
	border-top:1px solid var(--border);
	overflow:hidden;
}
.site-footer::before{
	content:"";
	position:absolute;
	top:-160px;left:50%;
	transform:translateX(-50%);
	width:600px;height:300px;
	background:radial-gradient(circle, rgba(255,143,77,0.08) 0%, rgba(255,143,77,0) 70%);
	pointer-events:none;
}

.footer-top{
	position:relative;
	display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:center;
	padding-top:56px;
	padding-bottom:32px;
}
.footer-brand .logo{font-size:20px;}
.footer-brand p{color:var(--text-dim);font-size:14px;margin:10px 0 0;max-width:32ch;}

.footer-nav{display:flex;gap:24px;font-size:14px;color:var(--text-dim);flex-wrap:wrap;}
.footer-nav a{position:relative;padding:2px 0;}
.footer-nav a::after{
	content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
	background:var(--accent);transform:scaleX(0);transform-origin:right;
	transition:transform .25s ease;
}
.footer-nav a:hover{color:var(--text);}
.footer-nav a:hover::after{transform:scaleX(1);transform-origin:left;}

.footer-social{display:flex;gap:10px;}
.footer-social a{
	width:40px;height:40px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	border:1px solid var(--border);color:var(--text-dim);
	transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.footer-social a:hover{
	border-color:var(--accent);color:var(--accent);
	transform:translateY(-3px);
}

.footer-bottom{
	position:relative;
	border-top:1px solid var(--border);
	padding-top:22px;
	padding-bottom:32px;
	display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
	font-size:13px;color:var(--text-dim);
}

.back-to-top{
	display:inline-flex;align-items:center;gap:6px;
	background:transparent;border:1px solid var(--border);color:var(--text-dim);
	border-radius:20px;padding:8px 16px;font-size:13px;cursor:pointer;
	transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.back-to-top:hover{
	border-color:var(--accent);color:var(--accent);
	transform:translateY(-2px);
}

@media(max-width:640px){
	.footer-nav{order:3;width:100%;}
}


/*СТИЛИ ССЫЛОК*/
/* ---------- БАЗОВЫЕ ССЫЛКИ (контент, описания, всё вне кнопок/меню) ---------- */
a{
	color:var(--accent);
	text-decoration:none;
	transition:color .15s ease, text-decoration-color .15s ease;
}
a:hover{
	color:#FFB27A;
	text-decoration:underline;
	text-decoration-color:currentColor;
	text-underline-offset:3px;
}
a:active{
	color:#E67A3D;
}
a:visited{
	color:var(--accent);
}
a:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:3px;
	border-radius:2px;
}

/* убираем контур с ссылок, у которых уже есть своя визуальная индикация фокуса/наведения */
.btn:focus-visible,
.nav-links a:focus-visible,
.footer-nav a:focus-visible,
.footer-social a:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:3px;
}


/*ПОРТФОЛИО СТРАНИЦА*/
/* ---------- PAGE HERO (архив портфолио и будущие внутренние страницы) ---------- */
.page-hero{padding:70px 0 30px;border-bottom:1px solid var(--border);}
.page-hero h1{font-size:clamp(30px,4.5vw,44px);margin-top:8px;}
.page-hero .lead{color:var(--text-dim);margin-top:14px;max-width:60ch;font-size:16px;}

.portfolio-list{padding-top:56px;}

/* ---------- ФИЛЬТРЫ ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.filter-btn{
	background:transparent;border:1px solid var(--border);color:var(--text-dim);
	border-radius:20px;padding:8px 18px;font-size:14px;cursor:pointer;
	transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.filter-btn:hover{color:var(--text);border-color:#3a4048;}
.filter-btn.is-active{background:var(--accent);color:#1A1206;border-color:var(--accent);}

/* ---------- РАВНОМЕРНАЯ СЕТКА ПОРТФОЛИО ---------- */
.portfolio-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
	gap:20px;
}

.no-results{color:var(--text-dim);text-align:center;padding:40px 0;}


/* ---------- PROJECT SINGLE ---------- */
.back-link{
	color:var(--text-dim);font-size:14px;
	display:inline-block;
}
.back-link:hover{color:var(--accent);}

.project-single .page-hero h1{
	font-size:clamp(28px,4.5vw,42px);
	margin-top:14px;
	max-width:20ch;
}

.project-cover{
	margin-top:40px;
	border-radius:var(--radius);
	overflow:hidden;
	border:1px solid var(--border);
}
.project-cover img{width:100%;display:block;}

.project-body{padding-top:56px;}
.project-content{
	max-width:680px;
	font-size:16px;
	color:var(--text-dim);
	line-height:1.7;
}
.project-content p{margin:0 0 20px;}
.project-content h2,.project-content h3{color:var(--text);margin:36px 0 14px;}

.project-nav{
	display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
	padding:36px 0;border-top:1px solid var(--border);
	margin-top:20px;
}
.project-nav a{font-size:15px;color:var(--text-dim);}
.project-nav a:hover{color:var(--accent);}
.project-nav-item.next{margin-left:auto;text-align:right;}

/* ---------- РАЗБОР ПРОЕКТА (задача/решение/результат) ---------- */
.project-breakdown{padding:20px 0 56px;}
.breakdown-grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:1px;background:var(--border);border:1px solid var(--border);
	border-radius:var(--radius);overflow:hidden;
}
.breakdown-item{background:var(--surface);padding:28px 26px;}
.breakdown-item h3{
	font-size:13px;color:var(--accent);margin-bottom:10px;
	text-transform:uppercase;letter-spacing:.04em;
}
.breakdown-item p{color:var(--text-dim);font-size:15px;line-height:1.6;margin:0;}

.section-sub{font-size:20px;margin-bottom:24px;}

/* ---------- ДОП. СКРИНШОТЫ ---------- */
.project-gallery{padding:20px 0 56px;}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.gallery-item{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.gallery-item img{width:100%;display:block;}

/* ---------- ОТЗЫВЫ: карусель с разными размерами скринов ---------- */
.project-reviews{padding:20px 0 56px;}
.reviews-track{
	display:flex;gap:16px;overflow-x:auto;
	padding-bottom:14px;
	scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch;
}
.review-item{
	flex:0 0 auto;
	scroll-snap-align:start;
	height:420px;
	border:1px solid var(--border);
	border-radius:var(--radius);
	overflow:hidden;
	background:var(--surface);
}
.review-item img{
	height:100%;
	width:auto;
	display:block;
}
.reviews-track::-webkit-scrollbar{height:6px;}
.reviews-track::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.reviews-track::-webkit-scrollbar-track{background:transparent;}

@media(max-width:640px){
	.review-item{height:300px;}
}



/* ---------- STATS PANEL ---------- */
.stats{padding:20px 0 88px;}
.stats-panel{
	position:relative;
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:14px;
	padding:56px 40px;
	overflow:hidden;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	gap:36px;
}
.stats-panel::before{
	content:"";
	position:absolute;
	top:-120px;left:50%;
	transform:translateX(-50%);
	width:520px;height:320px;
	background:radial-gradient(circle, rgba(255,143,77,0.16) 0%, rgba(255,143,77,0) 70%);
	pointer-events:none;
}
.stat{
	position:relative;
	text-align:center;
	min-width:120px;
	padding:0 20px;
}
.stat + .stat::before{
	content:"";
	position:absolute;
	left:-18px;top:50%;
	transform:translateY(-50%);
	width:1px;height:56px;
	background:var(--border);
}
.stat .num{
	font-family:'Bricolage Grotesque', sans-serif;
	font-size:clamp(40px, 5.5vw, 60px);
	font-weight:800;
	line-height:1;
	background:linear-gradient(180deg, var(--accent), #FFB27A);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}
.stat .cap{
	color:var(--text-dim);
	font-size:13.5px;
	margin-top:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
}

/* живые часы отдельным цветом — сразу видно, что это другой тип данных */
.stat-live .num{
	background:linear-gradient(180deg, var(--teal), #8fe3d4);
	-webkit-background-clip:text;
	background-clip:text;
	font-variant-numeric:tabular-nums;
}
.live-dot{
	width:7px;height:7px;border-radius:50%;
	background:var(--teal);
	display:inline-block;
	animation:livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse{
	0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(79,184,166,0.5);}
	50%{opacity:.6;box-shadow:0 0 0 5px rgba(79,184,166,0);}
}

@media(max-width:640px){
	.stats-panel{padding:40px 24px;gap:28px 16px;}
	.stat{min-width:45%;}
	.stat + .stat::before{display:none;}
}
@media (prefers-reduced-motion: reduce){
	.live-dot{animation:none;}
}




/* ---------- SERVICES ---------- */
  .service{
        border:1px solid var(--border);
	border-radius:var(--radius);
	background:var(--surface);
	padding:32px 28px;
	position:relative;
	overflow:hidden;
	transition:transform .25s cubic-bezier(.22,1,.36,1);
	z-index:1;
}
.service::before{
	content:"";
	position:absolute;inset:0;
	background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,143,77,0.14), transparent 60%);
	opacity:0;
	transition:opacity .25s ease;
	pointer-events:none;
}
.service::after{
	content:"";
	position:absolute;top:0;left:0;right:0;height:2px;
	background:var(--accent);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .3s ease;
}
.service:hover{
	transform:translateY(-6px);
	z-index:2;
	box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.service:hover::before{opacity:1;}
.service:hover::after{transform:scaleX(1);}

.service .icon{
	width:34px;height:34px;
	margin-bottom:20px;
	color:var(--accent);
	position:relative;
	transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.service:hover .icon{
	transform:scale(1.15) rotate(-6deg);
}
.service h3{
	font-size:17px;font-weight:600;margin-bottom:8px;
	position:relative;
}
.service p{
	font-size:14.5px;color:var(--text-dim);margin:0;
	position:relative;
}

@media (prefers-reduced-motion: reduce){
	.service, .service::before, .service::after, .service .icon{transition:none;}
	.service:hover{transform:none;}
}

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

@media(max-width:860px){
	.services-grid{grid-template-columns:repeat(2, 1fr);}
}
@media(max-width:560px){
	.services-grid{grid-template-columns:1fr;}
}




/* ---------- LIGHTBOX ---------- */
.review-item img,
.gallery-item img{
	cursor:zoom-in;
}

.lightbox{
	position:fixed;
	inset:0;
	background:rgba(10,12,15,0.92);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:40px;
	z-index:200;
	opacity:0;
	visibility:hidden;
	transition:opacity .25s ease;
}
.lightbox.is-open{
	opacity:1;
	visibility:visible;
}
.lightbox img{
	max-width:100%;
	max-height:90vh;
	border-radius:6px;
	box-shadow:0 30px 60px rgba(0,0,0,.5);
	transform:scale(.96);
	transition:transform .25s ease;
}
.lightbox.is-open img{
	transform:scale(1);
}
.lightbox-close{
	position:absolute;
	top:24px;right:24px;
	width:44px;height:44px;
	border-radius:50%;
	background:var(--surface);
	border:1px solid var(--border);
	color:var(--text);
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;
	transition:border-color .2s ease, color .2s ease;
}
.lightbox-close:hover{
	border-color:var(--accent);
	color:var(--accent);
}

body.lightbox-open{
	overflow:hidden;
}



/* ---------- PARTNERS MARQUEE ---------- */
.partners-marquee-wrap{
	overflow:hidden;
	padding:24px 0;
	-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
	mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.partners-marquee{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	gap:64px;
	width:max-content;
	will-change:transform;
	animation:marqueeScroll 30s linear infinite;
}
.partners-marquee-wrap:hover .partners-marquee{
	animation-play-state:paused;
}
.partner-logo{
	flex:0 0 auto;
	height: 150px;
	display:flex;align-items:center;
}
.partner-logo img{
	height:100%;
	width:auto;
	object-fit:contain;
	filter:grayscale(1) brightness(1.6) opacity(0.55);
	transition:filter .25s ease;
}
.partner-logo:hover img{
	filter:grayscale(0) brightness(1) opacity(1);
}

@media (prefers-reduced-motion: reduce){
	.partners-marquee{animation:none;}
}



/* карточка-заглушка "смотреть все проекты" */
.cta-card{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:14px;
	min-height:180px;
	color:var(--text-dim);
	font-size:15px;
	text-decoration:none;
	transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.cta-card svg{transition:transform .2s ease;}
.cta-card:hover{
	border-color:var(--accent);
	color:var(--accent);
	background:var(--surface-2);
}
.cta-card:hover svg{transform:translateX(4px);}



/* ---------- BUTTONS ---------- */
a.btn, .btn{
	display:inline-block;
	padding:11px 22px;
	border-radius:var(--radius);
	font-size:14px;
	font-weight:500;
	border:1px solid transparent;
	cursor:pointer;
	text-decoration:none;
	transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
a.btn-primary, .btn-primary{
	background:var(--accent);
	color:#1A1206;
}
a.btn-primary:hover, .btn-primary:hover{
	background:#FFB27A;
	color:#1A1206;
	text-decoration:none;
	transform:translateY(-1px);
}
a.btn-outline, .btn-outline{
	background:transparent;
	border-color:var(--border);
	color:var(--text);
}
a.btn-outline:hover, .btn-outline:hover{
	background:transparent;
	border-color:var(--accent);
	color:var(--accent);
	text-decoration:none;
}