/*
 * Главная. Порт CSS секций макета (files_harry/index.html, <style> 60–177).
 * Грузится только на front page. Шапку/подвал не трогает (их CSS — chrome.css).
 * Отклонения от макета:
 *  - Весь вывод блока обёрнут в .ita-home; элементные селекторы (h1/h2/h3,
 *    p, section, canvas) заскоуплены на .ita-home, чтобы глобальные сбросы
 *    макета не били по остальной странице. Компонентные классы (.hero, .card,
 *    .cap, .g3/.g4, .step, .place, .cta-band…) уникальны и оставлены дословно.
 *  - Короткие переменные --ink-2/--gold-lt/--line и т.д. уже заалиасены на
 *    токены theme.json в main.css, поэтому значения нигде не дублируются.
 *  - Литеральные цвета (#0b0d0f, #16130c, #cfcbc4, #0a0b0d…) оставлены как в
 *    макете — новых токенов не вводим.
 */

/* ---------- сбросы под секции (заскоуплены) ---------- */
.ita-home,.ita-home *,.ita-home *::before,.ita-home *::after{ box-sizing:border-box; }
.ita-home canvas{ display:block; max-width:100%; }
.ita-home img{ display:block; max-width:100%; }
.ita-home p{ margin:0; }

/* ---------- типографика секций ---------- */
.ita-home h1,.ita-home h2,.ita-home h3{ font-family:var(--wp--preset--font-family--display),sans-serif;
	font-weight:800; line-height:1.03; letter-spacing:-.03em; margin:0; }
.ita-home h1{ font-size:clamp(2.5rem,6vw,5.2rem); text-transform:uppercase; }
.ita-home h2{ font-size:clamp(1.7rem,3.1vw,2.6rem); text-transform:uppercase; }
.ita-home h3{ font-size:1.02rem; font-weight:700; letter-spacing:.01em; }

.ita-home .eyebrow{ font-family:var(--wp--preset--font-family--mono),monospace; font-size:.68rem;
	letter-spacing:.3em; text-transform:uppercase; color:var(--gold-lt); display:flex;
	align-items:center; gap:.9rem; margin:0; }
.ita-home .eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; flex:none; }
.ita-home .lead{ color:#cfcbc4; font-size:clamp(1rem,1.3vw,1.12rem); max-width:60ch; }
.ita-home .muted{ color:var(--slate); }

/* ---------- hero ---------- */
.ita-home .hero{ position:relative; min-height:100svh; display:flex; align-items:center;
	padding-top:76px; overflow:hidden; }
.ita-home #gl{ position:absolute; inset:0; z-index:0; }
.ita-home .glow{ position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
	background:radial-gradient(50% 46% at 79% 32%, rgba(255,255,255,.38) 0%, rgba(255,255,255,.11) 45%, rgba(255,255,255,0) 75%); }
.ita-home .hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
	background:radial-gradient(100% 94% at 0% 52%, rgba(8,9,10,.97) 0%, rgba(8,9,10,.82) 24%, rgba(8,9,10,.24) 50%, rgba(8,9,10,0) 70%),
		linear-gradient(180deg, rgba(8,9,10,.9) 0%, rgba(8,9,10,.06) 17%, rgba(8,9,10,0) 56%, var(--ink) 100%); }
.ita-home .hero .shell{ position:relative; z-index:2; padding-block:5rem 4rem; }
/* Колонка шире, а h1 меньше макетного — иначе длинные слайды (напр. EN
   «from the plot to handover of keys») переносятся в 6 строк и растягивают hero. */
.ita-home .hero-copy{ max-width:min(32rem,94%); }
.ita-home .hero h1{ font-size:clamp(2.1rem,4.4vw,3.7rem); margin:1.3rem 0 1.4rem; text-shadow:0 4px 46px rgba(0,0,0,.65); }
.ita-home .hero h1 em{ font-style:normal; display:block; color:var(--gold-lt); }
.ita-home .hero .lead{ max-width:42ch; text-shadow:0 2px 28px rgba(0,0,0,.85); }
.ita-home .swap{ transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1); }
.ita-home .swap.out{ opacity:0; transform:translateY(16px); }
.ita-home .cta-row{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2.6rem; }
.ita-home .hero-facts{ display:flex; gap:2.6rem; flex-wrap:wrap; margin-top:3rem; padding-top:1.6rem;
	border-top:1px solid var(--line-soft); max-width:50ch; }
.ita-home .fact b{ font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:1.7rem;
	color:var(--gold-lt); display:block; line-height:1; }
.ita-home .fact span{ font-family:var(--wp--preset--font-family--mono),monospace; font-size:.63rem;
	letter-spacing:.18em; text-transform:uppercase; color:var(--slate); }

/* ---------- кнопки (общий примитив: hero + cta-band) ---------- */
.ita-home .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.8rem;
	padding:1.05rem 2.2rem; background:linear-gradient(120deg,var(--gold),var(--gold-lt)); color:#0b0b0b;
	border:1px solid transparent; border-radius:2px; font-family:var(--wp--preset--font-family--display);
	font-weight:700; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; position:relative;
	overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .3s,color .3s; }
.ita-home .btn::after{ content:""; position:absolute; inset:0;
	background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
	transform:translateX(-120%); transition:transform .8s cubic-bezier(.4,0,.2,1); }
.ita-home .btn:hover{ transform:translateY(-3px); box-shadow:0 16px 40px -18px rgba(201,162,39,.85); }
.ita-home .btn:hover::after{ transform:translateX(120%); }
.ita-home .btn.ghost{ background:transparent; color:var(--bone); border-color:rgba(246,244,241,.22);
	-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ita-home .btn.ghost:hover{ border-color:var(--gold); color:var(--gold-lt); box-shadow:none; }

/* ---------- ticker ---------- */
.ita-home .ticker{ border-block:1px solid var(--line-soft); background:#0a0b0d; overflow:hidden; padding:.95rem 0; }
.ita-home .tk{ display:flex; gap:3rem; white-space:nowrap; width:max-content; animation:ita-slide 42s linear infinite; }
.ita-home .tk span{ font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:.84rem;
	letter-spacing:.22em; text-transform:uppercase; color:#5d5b57; }
.ita-home .tk span::after{ content:"·"; margin-left:3rem; color:var(--gold); }
@keyframes ita-slide{ to{ transform:translateX(-50%); } }

/* ---------- каркас секций ---------- */
.ita-home section{ padding-block:clamp(4rem,8vw,7rem); }
.ita-home .sec-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:2rem 4rem;
	align-items:end; margin-bottom:3.2rem; }
.ita-home .sec-head h2{ margin-top:1rem; }
@media(max-width:860px){ .ita-home .sec-head{ grid-template-columns:1fr; } }

.ita-home .g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.ita-home .g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media(max-width:1020px){ .ita-home .g4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:760px){ .ita-home .g3,.ita-home .g4{ grid-template-columns:1fr; } }

/* ---------- карточки (confianza/modalidades) ---------- */
.ita-home .card{ background:linear-gradient(180deg,var(--ink-2),#0b0d0f); border:1px solid var(--line-soft);
	padding:2rem 1.8rem; position:relative; overflow:hidden; transition:.35s; }
.ita-home .card::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px;
	background:linear-gradient(90deg,var(--gold),var(--gold-pale)); transform:scaleX(0); transform-origin:left;
	transition:transform .45s cubic-bezier(.2,.7,.3,1); }
.ita-home .card:hover{ transform:translateY(-4px); border-color:var(--line);
	background:linear-gradient(180deg,var(--ink-3),#0b0d0f); }
.ita-home .card:hover::before{ transform:scaleX(1); }
.ita-home .card h3{ margin-bottom:.65rem; }
.ita-home .card p{ color:var(--slate); font-size:.93rem; }
.ita-home .card .ico{ width:32px; height:32px; color:var(--gold-lt); margin-bottom:1.3rem; }
.ita-home .card .ico svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.3; }
.ita-home .pillar b{ font-family:var(--wp--preset--font-family--display); font-weight:800; text-transform:uppercase;
	letter-spacing:.06em; color:var(--gold-lt); font-size:1.05rem; }
.ita-home .pillar hr{ border:0; border-top:1px solid var(--line); margin:1.1rem 0 1rem; width:46px; }

/* ---------- proceso ---------- */
.ita-home .process{ position:relative; }
.ita-home .rail{ position:absolute; left:0; right:0; top:56px; height:1px; background:var(--line-soft); }
.ita-home .rail i{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--gold),var(--gold-pale)); width:0; }
.ita-home .steps{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; position:relative; }
.ita-home .step{ padding-top:96px; position:relative; }
.ita-home .step::before{ content:""; position:absolute; top:48px; left:0; width:17px; height:17px; border-radius:50%;
	background:var(--ink); border:1px solid var(--line); transition:.4s; }
.ita-home .step.on::before{ border-color:var(--gold); background:var(--gold); box-shadow:0 0 0 5px rgba(201,162,39,.13); }
.ita-home .step .n{ font-family:var(--wp--preset--font-family--mono),monospace; font-size:.72rem; letter-spacing:.2em;
	color:var(--gold-lt); display:block; margin-bottom:.6rem; }
.ita-home .step h3{ font-size:.98rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.5rem; }
.ita-home .step p{ color:var(--slate); font-size:.87rem; }
@media(max-width:980px){
	.ita-home .steps{ grid-template-columns:1fr; }
	.ita-home .rail{ left:8px; right:auto; top:0; bottom:0; width:1px; height:auto; }
	.ita-home .rail i{ width:1px!important; inset:0 auto auto 0; }
	.ita-home .step{ padding:0 0 2.3rem 2.6rem; }
	.ita-home .step::before{ top:4px; }
}

/* ---------- capacidades (servicios + proyectos-preview) ---------- */
.ita-home .cap{ position:relative; border:1px solid var(--line-soft); overflow:hidden; background:var(--ink-2);
	transition:.4s; display:block; }
.ita-home .cap img{ aspect-ratio:4/3; object-fit:cover; width:100%; filter:grayscale(.5) brightness(.78); transition:.65s; }
.ita-home .cap:hover{ border-color:var(--line); transform:translateY(-4px); }
.ita-home .cap:hover img{ filter:grayscale(0) brightness(.95); transform:scale(1.05); }
.ita-home .cap .body{ padding:1.5rem 1.5rem 1.7rem; }
.ita-home .cap h3{ margin-bottom:.5rem; }
.ita-home .cap p{ color:var(--slate); font-size:.89rem; }
.ita-home .cap .tag{ position:absolute; top:1rem; left:1rem; font-family:var(--wp--preset--font-family--mono),monospace;
	font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; background:rgba(8,9,10,.8); border:1px solid var(--line);
	color:var(--gold-lt); padding:.35rem .6rem; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* ---------- enfoque ---------- */
.ita-home .split{ display:grid; grid-template-columns:1fr 1.2fr; gap:1.1rem; align-items:stretch; }
.ita-home .risk{ background:#0b0d0f; border:1px solid var(--line-soft); padding:2.1rem 1.9rem; }
.ita-home .approach{ background:linear-gradient(150deg,#16130c,#0b0d0f 62%); border:1px solid var(--line); padding:2.1rem 1.9rem; }
.ita-home .approach h3{ color:var(--gold-lt); }
.ita-home .check{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.7rem; }
.ita-home .check li{ display:flex; gap:.8rem; align-items:flex-start; font-size:.93rem; color:#cfcbc4; }
.ita-home .check li svg{ width:17px; height:17px; flex:none; margin-top:.28rem; stroke:var(--gold-lt); fill:none; stroke-width:1.6; }
@media(max-width:860px){ .ita-home .split{ grid-template-columns:1fr; } }

/* ---------- geografía ---------- */
.ita-home .geo{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.ita-home .place{ border-top:1px solid var(--line); padding-top:1.3rem; }
.ita-home .place b{ font-family:var(--wp--preset--font-family--display); font-weight:800; text-transform:uppercase;
	letter-spacing:.09em; font-size:1.05rem; display:flex; align-items:center; gap:.6rem; }
.ita-home .place b i{ width:7px; height:7px; border-radius:50%; background:var(--gold);
	box-shadow:0 0 0 4px rgba(201,162,39,.16); display:block; }
.ita-home .place p{ color:var(--slate); font-size:.9rem; margin-top:.7rem; }
@media(max-width:860px){ .ita-home .geo{ grid-template-columns:1fr; } }

/* ---------- CTA band ---------- */
.ita-home .cta-band{ background:linear-gradient(150deg,#16130c,#0b0d0f 62%); border-block:1px solid var(--line); }
.ita-home .cta-band .shell{ display:flex; gap:2.5rem; align-items:center; flex-wrap:wrap; padding-block:3.4rem; }
.ita-home .cta-band h2{ max-width:18ch; }
.ita-home .cta-band .btn{ margin-left:auto; }
@media(max-width:760px){ .ita-home .cta-band .btn{ margin-left:0; width:100%; } }

/* ---------- reveal-on-scroll ---------- */
.ita-home .rv{ opacity:0; transform:translateY(20px);
	transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1); }
.ita-home .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
	.ita-home *{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}