/* Service-page hero visuals — Web Design, Web Applications, Mobile Apps (dark hero, scales with em) */
.hv { position: relative; width: 100%; aspect-ratio: 1.1 / 1; font-size: clamp(8.5px, 1.02vw, 13px); line-height: 1.3; color: #e9eef7; --c1: #146ef5; --c2: #7DB4FF; --g: linear-gradient(135deg, #146ef5, #7DB4FF); }
@media (max-width: 1000px) { .hv { font-size: clamp(9px, 2vw, 13px); max-width: 640px; margin: 0 auto; } }
.hv *, .hv *::before, .hv *::after { box-sizing: border-box; }
.hv-win { position: absolute; border-radius: 1.4em; overflow: hidden; background: linear-gradient(180deg, rgba(29,29,29,.94), rgba(13,13,13,.97)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 3em 7em -2em rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06); }
.hv-bar { height: 2.7em; display: flex; align-items: center; gap: .5em; padding: 0 1.1em; border-bottom: 1px solid rgba(255,255,255,.08); }
.hv-bar > i { width: .8em; height: .8em; border-radius: 50%; background: #414141; } .hv-bar > i:nth-child(1) { background: #ff6b5e; } .hv-bar > i:nth-child(2) { background: #ffcf5c; } .hv-bar > i:nth-child(3) { background: #3ddc84; }
.hv-url { margin-left: 1em; flex: 1; max-width: 62%; height: 1.8em; display: flex; align-items: center; gap: .6em; padding: 0 1em; border-radius: 99px; background: rgba(255,255,255,.07); color: #9aa6ba; font-size: .95em; white-space: nowrap; overflow: hidden; }
.hv-url::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: #3ddc84; flex: none; }
.hv-chip { position: absolute; display: inline-flex; align-items: center; gap: .7em; padding: .75em 1.2em; border-radius: 99px; font-size: 1.05em; font-weight: 500; white-space: nowrap; background: rgba(18,18,18,.9); border: 1px solid rgba(255,255,255,.17); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1.4em 3em -1em rgba(0,0,0,.7); animation: hv-bob 6s ease-in-out infinite; z-index: 5; }
.hv-chip i { font-style: normal; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; font-size: .9em; color: #0F0F0F; background: var(--c2); } .hv-chip b { font-weight: 600; } .hv-chip small { color: #8e9ab0; font-size: .85em; }
.hv-sw { display: inline-flex; gap: .3em; } .hv-sw u { width: 1.2em; height: 1.2em; border-radius: 50%; }
@keyframes hv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.9em); } }
@keyframes hv-in { 0%, 3% { opacity: 0; transform: translateY(1.2em) scale(.97); } 12%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes hv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(98,169,255,.55); } 60% { box-shadow: 0 0 0 1em rgba(98,169,255,0); } }
.hv .b { animation: hv-in 10s var(--ease, ease) infinite; animation-delay: calc(var(--k, 0) * .32s); }

/* ---------- Web design ---------- */
.hv--wd .hv-win { left: 0; top: 7%; width: 84%; height: 80%; }
.wd-page { padding: 1.6em 1.8em; display: grid; gap: 1.4em; }
.wd-nav { display: flex; align-items: center; gap: 1.4em; } .wd-nav b { width: 4.4em; height: 1.4em; border-radius: .5em; background: var(--g); } .wd-nav span { width: 3.2em; height: .7em; border-radius: 9em; background: rgba(255,255,255,.2); } .wd-nav em { margin-left: auto; width: 5em; height: 1.8em; border-radius: 9em; border: 1px solid rgba(255,255,255,.3); }
.wd-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.8em; align-items: center; }
.wd-t i { display: block; height: 1.5em; border-radius: .5em; background: rgba(255,255,255,.9); margin-bottom: .7em; } .wd-t i:nth-child(1) { width: 90%; } .wd-t i:nth-child(2) { width: 62%; background: var(--g); } .wd-t i:nth-child(3) { height: .7em; width: 80%; background: rgba(255,255,255,.22); margin-top: 1.1em; } .wd-t i:nth-child(4) { height: .7em; width: 55%; background: rgba(255,255,255,.22); }
.wd-t u { display: block; margin-top: 1.4em; width: 7.5em; height: 2.4em; border-radius: 9em; background: var(--g); animation: hv-pulse 2.4s infinite; }
.wd-img { aspect-ratio: 1.1 / 1; border-radius: 1.2em; background: radial-gradient(circle at 30% 25%, rgba(98,169,255,0.22), transparent 55%), linear-gradient(145deg, #1c3a78, #161616); border: 1px solid rgba(255,255,255,.12); position: relative; overflow: hidden; }
.wd-img::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 16%; height: 34%; border-radius: .8em; background: rgba(255,255,255,.14); box-shadow: 0 -1.6em 0 -.4em rgba(255,255,255,.1); }
.wd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; } .wd-cards div { height: 5.4em; border-radius: 1em; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); position: relative; } .wd-cards div::before { content: ""; position: absolute; left: 1em; top: 1em; width: 1.8em; height: 1.8em; border-radius: .6em; background: var(--g); opacity: .9; } .wd-cards div::after { content: ""; position: absolute; left: 1em; right: 1.6em; bottom: 1em; height: .6em; border-radius: 9em; background: rgba(255,255,255,.2); }
.hv-cursor { position: absolute; width: 1.7em; height: 1.7em; z-index: 4; left: 20%; top: 40%; background: #fff; clip-path: polygon(0 0, 0 100%, 28% 76%, 46% 120%, 62% 112%, 44% 70%, 80% 70%); filter: drop-shadow(0 .3em .5em rgba(0,0,0,.6)); animation: hv-cur 10s ease-in-out infinite; }
@keyframes hv-cur { 0%, 8% { left: 22%; top: 36%; } 22% { left: 30%; top: 55%; } 38% { left: 62%; top: 34%; } 54% { left: 28%; top: 74%; } 72% { left: 58%; top: 80%; } 90%, 100% { left: 22%; top: 36%; } }
.hv-phone { position: absolute; right: 1%; bottom: 0; width: 21%; aspect-ratio: 9 / 18; border-radius: 2.2em; border: .4em solid #212121; background: linear-gradient(180deg, #121212, #0A0A0A); box-shadow: 0 2.4em 5em -1.4em rgba(0,0,0,.85); padding: 1.4em .9em; display: grid; align-content: start; gap: .9em; animation: hv-bob 7s ease-in-out infinite; animation-delay: -2s; z-index: 4; }
.hv-phone::before { content: ""; position: absolute; top: .55em; left: 50%; width: 32%; height: .6em; transform: translateX(-50%); border-radius: 9em; background: #212121; }
.hv-phone i { display: block; border-radius: .6em; background: rgba(255,255,255,.14); height: .8em; } .hv-phone i.h { height: 5em; background: linear-gradient(145deg, #1c3a78, #161616); border-radius: .9em; } .hv-phone i.g { background: var(--g); height: 1.7em; border-radius: 9em; width: 70%; } .hv-phone i.s { width: 60%; }
.hv--wd .hv-chip--a { left: 4%; bottom: 3%; animation-delay: -1s; } .hv--wd .hv-chip--b { right: 14%; top: 0; animation-delay: -2.5s; } .hv--wd .hv-chip--c { left: -3%; top: 40%; animation-delay: -4s; } .hv--wd .hv-chip--d { right: 0; top: 36%; animation-delay: -3s; }

/* ---------- Web application ---------- */
.hv--wa .hv-win { left: 0; top: 5%; width: 93%; height: 78%; display: grid; grid-template-columns: 11% 1fr; }
.wa-side { border-right: 1px solid rgba(255,255,255,.08); padding: 1.4em .8em; display: grid; align-content: start; justify-items: center; gap: 1.2em; background: rgba(255,255,255,.02); } .wa-side b { width: 2.4em; height: 2.4em; border-radius: .8em; background: var(--g); } .wa-side i { width: 2em; height: 2em; border-radius: .7em; background: rgba(255,255,255,.1); } .wa-side i.on { background: rgba(20,110,245,.35); outline: 1px solid rgba(98,169,255,.6); }
.wa-main { padding: 1.2em 1.5em; display: grid; gap: 1em; align-content: start; }
.wa-top { display: flex; align-items: center; justify-content: space-between; } .wa-top strong { font-size: 1.25em; font-weight: 600; } .wa-top span { display: inline-flex; align-items: center; gap: .5em; padding: .35em .9em; border-radius: 9em; font-size: .9em; background: rgba(98,169,255,.12); color: #7fe9f7; } .wa-top span::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #7DB4FF; animation: hv-pulse 2s infinite; }
.wa-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; } .wa-kpis div { padding: .9em 1.1em; border-radius: 1em; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); } .wa-kpis small { display: block; font-size: .82em; color: #8e9ab0; } .wa-kpis b { display: block; font-size: 1.5em; font-weight: 600; margin-top: .15em; } .wa-kpis em { font-style: normal; font-size: .82em; color: #5be3a3; }
.wa-chart { display: flex; align-items: flex-end; gap: .8em; height: 6em; padding: .8em 1.2em 0; border-radius: 1em; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); } .wa-chart i { flex: 1; border-radius: .5em .5em 0 0; background: linear-gradient(180deg, #7DB4FF, #146ef5); transform-origin: bottom; animation: hv-bar 5s ease-in-out infinite; animation-delay: calc(var(--k) * .18s); height: var(--h); } @keyframes hv-bar { 0%, 100% { transform: scaleY(.45); opacity: .7; } 50% { transform: scaleY(1); opacity: 1; } }
.wa-rows { display: grid; gap: .6em; } .wa-rows div { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 1em; padding: .6em .9em; border-radius: .8em; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); } .wa-rows div::before { content: ""; width: 2em; height: 2em; border-radius: 50%; background: var(--g); opacity: .85; } .wa-rows span { height: .7em; border-radius: 9em; background: rgba(255,255,255,.2); width: 70%; } .wa-rows em { font-style: normal; font-size: .85em; padding: .25em .8em; border-radius: 9em; background: rgba(91,227,163,.14); color: #5be3a3; } .wa-rows div:nth-child(2) em { background: rgba(255,211,122,.14); color: #ffd37a; } .wa-rows div:nth-child(3) em { background: rgba(98,169,255,.16); color: #8fbfff; }
.hv--wa .hv-flow { position: absolute; right: 0; bottom: 3%; display: flex; align-items: center; gap: .5em; padding: .9em 1.2em; border-radius: 1.2em; background: rgba(18,18,18,.94); border: 1px solid rgba(255,255,255,.17); box-shadow: 0 1.4em 3em -1em rgba(0,0,0,.7); z-index: 5; animation: hv-bob 7s ease-in-out infinite; animation-delay: -1.5s; font-size: 1em; }
.hv-flow span { padding: .4em .9em; border-radius: 9em; font-size: .95em; background: rgba(255,255,255,.08); } .hv-flow span.on { background: var(--g); color: #0F0F0F; font-weight: 600; } .hv-flow s { width: 1.8em; height: 2px; background: rgba(255,255,255,.25); position: relative; text-decoration: none; overflow: hidden; } .hv-flow s::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: #7DB4FF; animation: hv-run 1.8s linear infinite; } @keyframes hv-run { to { left: 100%; } }
.hv--wa .hv-chip--a { left: -3%; bottom: 8%; animation-delay: -1s; } .hv--wa .hv-chip--b { right: 6%; top: -1%; animation-delay: -3s; } .hv--wa .hv-chip--c { left: 24%; bottom: -3%; animation-delay: -4s; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; }

/* ---------- Mobile app ---------- */
.hv--ma .hv-glow { position: absolute; inset: 8% 14%; border-radius: 50%; background: radial-gradient(circle, rgba(20,110,245,0.18), transparent 65%); filter: blur(2em); }
.hv-ph { position: absolute; width: 33%; aspect-ratio: 9 / 18.6; border-radius: 3em; border: .5em solid #212121; background: linear-gradient(180deg, #151515, #0A0A0A); overflow: hidden; box-shadow: 0 3em 7em -1.6em rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.06); }
.hv-ph::before { content: ""; position: absolute; top: .7em; left: 50%; width: 30%; height: .8em; transform: translateX(-50%); border-radius: 9em; background: #212121; z-index: 3; }
.hv-ph--front { left: 22%; top: 6%; transform: rotate(-5deg); animation: hv-bobr 7s ease-in-out infinite; z-index: 3; }
.hv-ph--back { left: 50%; top: 1%; transform: rotate(8deg) scale(.93); animation: hv-bobr2 8s ease-in-out infinite; z-index: 2; opacity: .96; }
@keyframes hv-bobr { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-1em); } } @keyframes hv-bobr2 { 0%, 100% { transform: rotate(8deg) scale(.93) translateY(0); } 50% { transform: rotate(8deg) scale(.93) translateY(.9em); } }
.ma-scr { position: absolute; inset: 0; padding: 2.6em 1.2em 4.2em; display: grid; align-content: start; gap: 1em; }
.ma-hd { display: flex; align-items: center; justify-content: space-between; } .ma-hd span { height: .8em; width: 45%; border-radius: 9em; background: rgba(255,255,255,.85); } .ma-hd i { width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--g); }
.ma-card { position: relative; padding: 1.1em; border-radius: 1.2em; background: linear-gradient(145deg, #1a4fb8, #0f2a63); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8em; border: 1px solid rgba(255,255,255,.14); } .ma-card small { display: block; font-size: .8em; color: rgba(255,255,255,.7); } .ma-card b { font-size: 1.7em; font-weight: 600; }
.ma-ring { width: 4.4em; height: 4.4em; } .ma-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; } .ma-ring .t { stroke: rgba(255,255,255,.2); } .ma-ring .p { stroke: #7DB4FF; stroke-dasharray: 126; stroke-dashoffset: 126; transform: rotate(-90deg); transform-origin: center; animation: hv-ring 6s ease-in-out infinite; } @keyframes hv-ring { 0% { stroke-dashoffset: 126; } 45%, 90% { stroke-dashoffset: 34; } 100% { stroke-dashoffset: 126; } }
.ma-list { display: grid; gap: .7em; } .ma-list div { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: .8em; padding: .65em .8em; border-radius: .9em; background: rgba(255,255,255,.05); } .ma-list div::before { content: ""; width: 2.2em; height: 2.2em; border-radius: .7em; background: var(--g); opacity: .85; } .ma-list div:nth-child(2)::before { background: linear-gradient(135deg, #ffb347, #ff6b6b); } .ma-list div:nth-child(3)::before { background: linear-gradient(135deg, #5c94f6, #7DB4FF); } .ma-list span { height: .65em; border-radius: 9em; background: rgba(255,255,255,.22); } .ma-list em { width: 2.4em; height: .65em; border-radius: 9em; background: rgba(255,255,255,.14); }
.ma-tabs { position: absolute; left: 1em; right: 1em; bottom: 1em; height: 3.2em; border-radius: 9em; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-around; border: 1px solid rgba(255,255,255,.1); } .ma-tabs i { width: 1.3em; height: 1.3em; border-radius: .45em; background: rgba(255,255,255,.28); } .ma-tabs i.on { background: var(--g); box-shadow: 0 0 1em rgba(98,169,255,.6); }
.ma-map { height: 7em; border-radius: 1em; position: relative; overflow: hidden; background: radial-gradient(circle at 70% 30%, rgba(98,169,255,0.14), transparent 50%), linear-gradient(135deg, #12264d, #121212); } .ma-map::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(35deg, transparent 0 1.6em, rgba(255,255,255,.06) 1.6em 1.7em), repeating-linear-gradient(-55deg, transparent 0 1.8em, rgba(255,255,255,.05) 1.8em 1.9em); } .ma-map i { position: absolute; left: 52%; top: 40%; width: 1.4em; height: 1.4em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #7DB4FF; box-shadow: 0 0 0 .5em rgba(98,169,255,.25); animation: hv-pin 2.4s ease-in-out infinite; } @keyframes hv-pin { 0%, 100% { transform: rotate(-45deg) translate(0, 0); } 50% { transform: rotate(-45deg) translate(.5em, .5em); } }
.hv--ma .hv-chip--a { left: 0; top: 14%; animation-delay: -1s; } .hv--ma .hv-chip--b { right: 0; top: 50%; animation-delay: -3s; } .hv--ma .hv-chip--c { left: 2%; bottom: 8%; animation-delay: -2s; } .hv--ma .hv-chip--d { right: 6%; bottom: 0; animation-delay: -4s; }
.hv--ma .hv-push { left: 6%; top: 40%; z-index: 6; animation: hv-push 8s ease-in-out infinite; } .hv-push { position: absolute; display: flex; align-items: center; gap: .9em; padding: .9em 1.2em; border-radius: 1.2em; background: rgba(240,244,252,.95); color: #0D0D0D; box-shadow: 0 1.6em 3.4em -1em rgba(0,0,0,.7); font-size: 1em; } .hv-push i { width: 2.2em; height: 2.2em; border-radius: .7em; background: var(--g); flex: none; } .hv-push b { display: block; font-size: .95em; } .hv-push small { color: #556; font-size: .85em; }
@keyframes hv-push { 0%, 8% { opacity: 0; transform: translateY(1.4em) scale(.95); } 16%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-1em); } }

@media (prefers-reduced-motion: reduce) { .hv *, .hv *::before, .hv *::after { animation: none !important; } .hv .b { opacity: 1; } }

/* ---------- Digital marketing ---------- */
.hv--dm .hv-win { left: 0; top: 6%; width: 86%; height: 78%; }
.dm-body { padding: 1.3em 1.5em; display: grid; gap: 1.1em; }
.dm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; } .dm-kpis div { padding: .8em 1em; border-radius: 1em; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); } .dm-kpis small { display: block; font-size: .82em; color: #8e9ab0; } .dm-kpis b { display: block; font-size: 1.55em; font-weight: 600; margin-top: .1em; } .dm-kpis em { font-style: normal; font-size: .82em; color: #5be3a3; }
.dm-chart { height: 8em; border-radius: 1em; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); padding: .6em; overflow: hidden; } .dm-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dm-chart .ln { fill: none; stroke: url(#dmG); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: dm-draw 7s ease-in-out infinite; }
.dm-chart .ar { fill: url(#dmA); opacity: 0; animation: dm-fade 7s ease-in-out infinite; }
.dm-chart .pt { fill: #7DB4FF; opacity: 0; animation: dm-fade 7s ease-in-out infinite; }
@keyframes dm-draw { 0% { stroke-dashoffset: 420; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 420; } } @keyframes dm-fade { 0%, 30% { opacity: 0; } 55%, 90% { opacity: 1; } 100% { opacity: 0; } }
.dm-funnel { display: grid; gap: .5em; justify-items: center; } .dm-funnel div { width: var(--w); height: 1.9em; border-radius: .6em; display: flex; align-items: center; justify-content: space-between; padding: 0 .9em; font-size: .92em; background: linear-gradient(90deg, rgba(20,110,245,.55), rgba(98,169,255,.35)); border: 1px solid rgba(255,255,255,.12); transform-origin: center; animation: dm-fun 7s ease-in-out infinite; animation-delay: calc(var(--k) * .25s); } .dm-funnel b { font-weight: 600; } .dm-funnel span { color: #cfe3ff; }
@keyframes dm-fun { 0%, 4% { transform: scaleX(.3); opacity: 0; } 18%, 86% { transform: none; opacity: 1; } 96%, 100% { transform: scaleX(.6); opacity: 0; } }
.dm-serp { position: absolute; right: 0; top: -2%; width: 44%; padding: .9em 1.1em; border-radius: 1.1em; background: rgba(245,248,255,.97); color: #212121; box-shadow: 0 1.6em 3.4em -1em rgba(0,0,0,.7); z-index: 5; animation: hv-bob 7s ease-in-out infinite; animation-delay: -2s; } .dm-serp small { color: #4b8f4b; font-size: .85em; } .dm-serp b { display: block; color: #1a52c4; font-size: 1.05em; font-weight: 600; margin: .15em 0; } .dm-serp span { display: block; font-size: .85em; color: #636363; } .dm-serp i { font-style: normal; color: #f5a623; letter-spacing: .1em; font-size: .85em; } .dm-serp em { position: absolute; top: -.8em; right: .9em; font-style: normal; font-size: .85em; font-weight: 700; padding: .2em .8em; border-radius: 9em; background: var(--g); color: #0F0F0F; }
.dm-post { position: absolute; right: 0; bottom: -4%; width: 29%; padding: .9em; border-radius: 1.2em; background: rgba(18,18,18,.94); border: 1px solid rgba(255,255,255,.17); box-shadow: 0 1.6em 3.4em -1em rgba(0,0,0,.7); z-index: 5; animation: hv-bob 8s ease-in-out infinite; animation-delay: -3.5s; } .dm-post .av { display: flex; align-items: center; gap: .6em; } .dm-post .av i { width: 2em; height: 2em; border-radius: 50%; background: linear-gradient(135deg, #f58529, #dd2a7b, #3461af); } .dm-post .av span { height: .6em; width: 5em; border-radius: 9em; background: rgba(255,255,255,.3); } .dm-post .im { margin: .7em 0; height: 5em; border-radius: .8em; background: radial-gradient(circle at 30% 30%, rgba(98,169,255,0.2), transparent 55%), linear-gradient(145deg, #1c3a78, #161616); } .dm-post .lk { display: flex; align-items: center; gap: .5em; font-size: .95em; } .dm-post .lk i { font-style: normal; color: #ff5d7a; display: inline-block; animation: dm-heart 1.6s ease-in-out infinite; } @keyframes dm-heart { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.35); } 40% { transform: scale(1); } }
.hv--dm .hv-chip--a { left: -2%; bottom: 14%; animation-delay: -1s; } .hv--dm .hv-chip--b { left: 22%; bottom: -2%; animation-delay: -3s; } .hv--dm .hv-chip--c { left: -3%; top: 20%; animation-delay: -2s; }

/* ---------- IT consulting ---------- */
.hv--it .hv-win { left: 0; top: 6%; width: 86%; height: 80%; }
.it-body { padding: 1.3em 1.5em; display: grid; grid-template-columns: .95fr 1.05fr; gap: 1.3em; align-content: start; }
.it-rack { display: grid; gap: .7em; } .it-rack div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8em; padding: .75em .9em; border-radius: .9em; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.it-rack i { width: .7em; height: .7em; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 .8em #3ddc84; animation: hv-led 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * .5s); } .it-rack div:nth-child(3) i { background: #ffcf5c; box-shadow: 0 0 .8em #ffcf5c; }
.it-rack span { height: .55em; border-radius: 9em; background: rgba(255,255,255,.12); position: relative; overflow: hidden; } .it-rack span::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--g); transform-origin: left; animation: hv-load 4s ease-in-out infinite; animation-delay: calc(var(--k) * .4s); } .it-rack em { font-style: normal; font-size: .85em; color: #8e9ab0; font-variant-numeric: tabular-nums; }
@keyframes hv-led { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes hv-load { 0%, 100% { transform: scaleX(.55); } 50% { transform: scaleX(1); } }
.it-up { display: grid; gap: .8em; align-content: start; } .it-up strong { font-size: 2.3em; font-weight: 600; letter-spacing: -.02em; line-height: 1; background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; } .it-up small { color: #8e9ab0; font-size: .85em; display: block; margin-top: .3em; }
.it-beat { height: 4em; } .it-beat svg { width: 100%; height: 100%; display: block; overflow: visible; } .it-beat path { fill: none; stroke: #7DB4FF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 360; stroke-dashoffset: 360; animation: it-beat 3.4s linear infinite; filter: drop-shadow(0 0 .35em rgba(98,169,255,.7)); } @keyframes it-beat { 0% { stroke-dashoffset: 360; } 70%, 100% { stroke-dashoffset: 0; } }
.it-svc { display: flex; flex-wrap: wrap; gap: .5em; } .it-svc span { display: inline-flex; align-items: center; gap: .5em; padding: .35em .85em; border-radius: 9em; font-size: .9em; background: rgba(61,220,132,.1); color: #8ff0bd; border: 1px solid rgba(61,220,132,.28); } .it-svc span::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: #3ddc84; animation: hv-led 2s ease-in-out infinite; }
.it-pipe { grid-column: 1 / -1; display: flex; align-items: center; gap: .5em; padding: .8em 1em; border-radius: 1em; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); } .it-pipe span { padding: .4em .95em; border-radius: 9em; font-size: .95em; background: rgba(255,255,255,.08); } .it-pipe span.on { background: var(--g); color: #0F0F0F; font-weight: 600; } .it-pipe s { flex: 1; height: 2px; background: rgba(255,255,255,.18); position: relative; overflow: hidden; text-decoration: none; } .it-pipe s::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: #7DB4FF; animation: hv-run 1.8s linear infinite; }
.it-cloud { position: absolute; right: 0; top: -1%; display: flex; align-items: center; gap: .9em; padding: .85em 1.2em; border-radius: 1.2em; background: rgba(18,18,18,.94); border: 1px solid rgba(255,255,255,.17); box-shadow: 0 1.6em 3.4em -1em rgba(0,0,0,.7); z-index: 5; animation: hv-bob 7s ease-in-out infinite; animation-delay: -2s; } .it-cloud svg { width: 2.6em; height: 2.6em; color: #7DB4FF; } .it-cloud svg .u { animation: ti-up 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .it-cloud b { display: block; font-size: 1.02em; } .it-cloud small { color: #8e9ab0; font-size: .85em; }
.hv--it .hv-chip--a { left: -3%; bottom: 14%; animation-delay: -1s; } .hv--it .hv-chip--b { right: 0; bottom: 4%; animation-delay: -3s; } .hv--it .hv-chip--c { left: 18%; bottom: -3%; animation-delay: -4.5s; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; } .hv--it .hv-chip--d { left: -4%; top: -5%; animation-delay: -2.2s; }

/* IT consulting — auto-cycling tabs: Infrastructure / Projects / Team / Experts */
.hv--it .hv-win { display: flex; flex-direction: column; }
.it-tabs { display: flex; gap: .5em; padding: .7em 1.2em 0; } .it-tabs span { padding: .4em 1em; border-radius: 9em; font-size: .92em; color: #8e9ab0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); animation: it-tab 20s infinite; animation-delay: calc(var(--p) * 5s); }
@keyframes it-tab { 0%, 24% { background: linear-gradient(135deg, #146ef5, #7DB4FF); color: #0F0F0F; border-color: transparent; font-weight: 600; } 26%, 100% { background: rgba(255,255,255,.05); color: #8e9ab0; border-color: rgba(255,255,255,.08); font-weight: 400; } }
.it-stage { position: relative; flex: 1; }
.it-pane { position: absolute; inset: 0; opacity: 0; animation: it-pane 20s infinite; animation-delay: calc(var(--p) * 5s); }
@keyframes it-pane { 0% { opacity: 0; transform: translateY(.9em); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-.5em); } }
.it-pane > .it-body { height: 100%; }
.it-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9em; } .it-h strong { font-size: 1.15em; font-weight: 600; } .it-h span { font-size: .85em; padding: .3em .85em; border-radius: 9em; background: rgba(98,169,255,.12); color: #7fe9f7; }
.it-pane--p, .it-pane--t, .it-pane--e { padding: 1.2em 1.5em; }
.it-ms { display: grid; gap: .8em; } .it-ms div { display: grid; grid-template-columns: 7.5em 1fr auto; align-items: center; gap: .9em; padding: .75em .95em; border-radius: .9em; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); } .it-ms span { font-size: .95em; } .it-ms i { height: .55em; border-radius: 9em; background: rgba(255,255,255,.12); position: relative; overflow: hidden; } .it-ms i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--g); } .it-ms em { font-style: normal; font-size: .85em; color: #8e9ab0; } .it-ms .ok em { color: #5be3a3; }
.it-foot { display: flex; gap: .6em; flex-wrap: wrap; margin-top: .9em; } .it-foot span { font-size: .88em; padding: .35em .9em; border-radius: 9em; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); } .it-foot span.g { color: #8ff0bd; background: rgba(61,220,132,.1); border-color: rgba(61,220,132,.28); }
.it-team { display: grid; gap: .65em; } .it-team div { display: grid; grid-template-columns: 2.4em 1fr 6em auto; align-items: center; gap: .9em; padding: .6em .9em; border-radius: .9em; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); } .it-team b { width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--g); display: block; } .it-team div:nth-child(2) b { background: linear-gradient(135deg, #5c94f6, #7DB4FF); } .it-team div:nth-child(3) b { background: linear-gradient(135deg, #ffb347, #ff6b6b); } .it-team div:nth-child(4) b { background: linear-gradient(135deg, #3ddc84, #7DB4FF); } .it-team span { font-size: .95em; } .it-team small { display: block; color: #8e9ab0; font-size: .82em; } .it-team i { height: .5em; border-radius: 9em; background: rgba(255,255,255,.12); position: relative; overflow: hidden; } .it-team i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: var(--g); } .it-team em { font-style: normal; font-size: .82em; color: #5be3a3; }
.it-ex { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; } .it-ex div { padding: 1em; border-radius: 1em; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); display: grid; gap: .45em; justify-items: start; } .it-ex b { width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--g); display: block; } .it-ex div:nth-child(2) b { background: linear-gradient(135deg, #5c94f6, #7DB4FF); } .it-ex div:nth-child(3) b { background: linear-gradient(135deg, #ffb347, #ff6b6b); } .it-ex span { font-weight: 600; font-size: .98em; } .it-ex small { color: #8e9ab0; font-size: .84em; } .it-ex em { font-style: normal; font-size: .8em; padding: .25em .75em; border-radius: 9em; background: rgba(61,220,132,.12); color: #8ff0bd; display: inline-flex; align-items: center; gap: .45em; } .it-ex em::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: #3ddc84; }
@media (prefers-reduced-motion: reduce) { .it-pane { animation: none !important; opacity: 0; } .it-pane[style*="--p:0"] { opacity: 1; } .it-tabs span { animation: none !important; } .it-tabs span[style*="--p:0"] { background: linear-gradient(135deg, #146ef5, #7DB4FF); color: #0F0F0F; } }