/*
 * Anas Latif — v4 "Crimson Flex" layer.
 * Loaded after main.css. Black & red, wide heavy type (Archivo at 118–125% width),
 * glassy dark cards, a 3D avatar hero with giant words and a giant-name footer.
 */

:root {
	--red: #ff2d46;
	--red-2: #d6132f;
	--red-3: #8f0a1e;
	--red-glow: rgba(255, 45, 70, 0.45);
	--card: linear-gradient(180deg, #141416 0%, #0d0d0e 100%);
	--card-solid: #101011;
	--r-xl: 28px;
}
body { background: var(--bg); }
.alt-ambient__a { background: radial-gradient(circle, rgba(140, 8, 26, 0.32), transparent 70%); }
.alt-ambient__b { background: radial-gradient(circle, rgba(255, 45, 70, 0.08), transparent 70%); }

/* ============================================================ type: wide & heavy, red accents (no italics) */
.alt-title { font-weight: 750; font-stretch: 118%; letter-spacing: -0.035em; line-height: 1; font-size: clamp(38px, 4.7vw, 74px); }
.alt-gold, .alt-title .alt-gold, .alt-gold-host .alt-gold, .alt-type {
	font-family: inherit; font-style: normal; font-weight: inherit; font-stretch: inherit; letter-spacing: inherit;
	color: var(--red); -webkit-text-fill-color: currentColor;
}
.alt-phero__title { font-stretch: 120%; }
.alt-eyebrow { color: var(--muted); }
.alt-head__text { color: var(--muted); }

/* ============================================================ buttons */
.alt-btn--gold { background: var(--red); color: #fff; box-shadow: 0 14px 34px -14px var(--red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.alt-btn--gold:hover { background: #ff4258; box-shadow: 0 18px 44px -12px rgba(255, 45, 70, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.alt-btn--line, .alt-btn--outline, .alt-btn--ghost { background: rgba(255, 255, 255, 0.035); border-color: var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.alt-btn--line:hover, .alt-btn--outline:hover, .alt-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.07); }
.alt-btn--ink { background: #fff; color: #111; }
.alt-btn--ink:hover { background: #111; color: #fff; }
.alt-btn--onred { color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); }
.alt-btn--onred:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.alt-round:hover, .alt-pf__link:hover .alt-arrow, .alt-post__more:hover .alt-arrow, .alt-svl__row:hover .alt-svl__go { background: var(--red); border-color: var(--red); color: #fff; }
.alt-tab.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.alt-socials a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.alt-dots button.is-active { background: var(--red); }
.alt-pager .current { background: var(--red); border-color: var(--red); color: #fff; }

/* ============================================================ avatar chip */
.alt-headchip {
	position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden;
	display: grid; place-items: end center;
	background: radial-gradient(circle at 50% 28%, #ff5468 0%, #e3152f 55%, #8f0a1e 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 18px -8px var(--red-glow);
}
.alt-headchip img { width: 86%; height: auto; transform: translateY(10%); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.alt-headchip--lg { width: 58px; height: 58px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); background: radial-gradient(circle at 50% 28%, #2a2a2e, #0c0c0d); }

/* ============================================================ loader */
.alt-loader { background: #050505; }
.alt-loader__mark { width: 110px; height: 110px; }
.alt-loader__mark img { width: 62px; height: auto; position: relative; animation: alt-bob 2.4s ease-in-out infinite; }
.alt-loader__ring circle { stroke: var(--red); stroke-width: 1.6; }
.alt-loader__count { color: rgba(255, 45, 70, 0.08); }

/* ============================================================ header: floating glass pill */
.alt-header { top: 14px; padding-inline: var(--gut); border: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.alt-header.is-hidden { transform: translateY(calc(-100% - 24px)); }
.alt-header__inner {
	position: relative; width: min(100%, 1120px); height: 64px; padding: 0 8px 0 10px; border-radius: 999px;
	background: rgba(18, 18, 20, 0.6); border: 1px solid rgba(255, 255, 255, 0.09);
	-webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
	box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	transition: height 0.5s var(--ease), background 0.5s;
}
.alt-header.is-scrolled .alt-header__inner { height: 58px; background: rgba(14, 14, 16, 0.86); }
.alt-brand { gap: 10px; }
.alt-brand__head { width: 42px; height: 42px; }
.alt-header.is-scrolled .alt-brand__head { width: 38px; height: 38px; }
.alt-brand__name { font-size: 15.5px; font-stretch: 112%; }
.alt-nav { position: absolute; left: 50%; transform: translateX(-50%); }
.alt-menu { gap: 2px; }
.alt-menu a { padding: 10px 15px; border-radius: 999px; font-size: 14.5px; transition: color 0.3s, background 0.3s; }
.alt-menu a::after, .alt-menu .current-menu-item > a::before { display: none; }
.alt-menu a:hover { background: rgba(255, 255, 255, 0.05); }
.alt-menu .current-menu-item > a, .alt-menu a[aria-current="page"] { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.alt-header__cta .alt-btn { --h: 46px; padding: 0 20px; }
.alt-burger { border-color: rgba(255, 255, 255, 0.14); }
.alt-mmenu { background: radial-gradient(90% 60% at 50% 110%, rgba(255, 45, 70, 0.22), transparent 70%), #070707; padding-top: 104px; }
.alt-mmenu__list .current-menu-item a { color: var(--red); }

/* ============================================================ HERO: giant words + 3D head */
.alt-content--sections > .alt-fx, .alt-content--sections > .alt-sec--about-flex { counter-increment: none; }
.alt-fx {
	--fs: min(calc((100vw - var(--gut) * 2) / (var(--n, 10) * 0.8)), 250px);
	position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--head-h) + 34px) 0 0;
	min-height: 100svh; display: flex; flex-direction: column; background: #050505;
}
.alt-fx__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.alt-fx__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 72px 72px; background-position: center top; mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 75%); }
.alt-fx__beam { position: absolute; left: 50%; top: 52%; width: min(1100px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 30, 60, 0.30), rgba(255, 30, 60, 0.10) 45%, transparent 72%); filter: blur(10px); animation: alt-breathe 7s ease-in-out infinite; }
.alt-fx__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(180deg, transparent, #050505 85%); }
@keyframes alt-breathe { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.85; } }

.alt-fx__stage { position: relative; flex: 1; display: grid; place-items: center; min-height: clamp(420px, 64svh, 740px); }
.alt-fx__status {
	position: absolute; top: 4px; left: 50%; translate: -50% 0; z-index: 4; display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
	font: 500 12.5px/1 var(--f-mono); letter-spacing: 0.03em; color: #d6f7e5; white-space: nowrap;
}
.alt-fx__words { position: relative; z-index: 1; margin: 0; text-align: center; text-transform: uppercase; font: 800 var(--fs)/0.8 var(--f-display); font-stretch: 125%; letter-spacing: -0.05em; user-select: none; }
.alt-fx__line { display: block; width: max-content; margin-inline: auto; white-space: nowrap; }
.alt-fx__line--1 { color: var(--ink); }
.alt-fx__line--2 { color: var(--red); text-shadow: 0 0 80px rgba(255, 45, 70, 0.35); }
.alt-ch { display: inline-block; }
.alt-ch--sp { width: 0.28em; }
html.js .alt-fx .alt-ch { opacity: 0; transform: translate3d(0, 0.32em, 0) scale(0.96); filter: blur(10px); transition: opacity 1s var(--ease), transform 1.4s var(--ease), filter 1s var(--ease); transition-delay: calc(0.12s + var(--c, 0) * 0.045s); }
html.js .alt-fx .alt-fx__line--2 .alt-ch { transition-delay: calc(0.32s + var(--c, 0) * 0.045s); }
html.js .alt-fx.is-entered .alt-ch { opacity: 1; transform: none; filter: none; }

.alt-fx__head { position: absolute; z-index: 2; left: 50%; top: 50%; width: clamp(220px, calc(var(--fs) * 1.95), 520px); transform: translate(-50%, calc(-47% + var(--sy, 0px))) scale(calc(1 - var(--ss, 0))); pointer-events: none; }
.alt-fx__line--1 { transform: translate3d(calc(var(--spread, 0) * -1vw), 0, 0); }
.alt-fx__line--2 { transform: translate3d(calc(var(--spread, 0) * 1vw), 0, 0); }
.alt-fx__tilt { position: relative; display: block; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(var(--tx, 0px), var(--ty, 0px), 0); transform-style: preserve-3d; will-change: transform; }
.alt-fx__tilt img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 30px rgba(255, 45, 70, 0.18)); animation: alt-bob 6s ease-in-out infinite; }
@keyframes alt-bob { 50% { transform: translateY(-12px) rotate(-0.6deg); } }
.alt-fx__halo { position: absolute; left: 50%; top: 46%; width: 115%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 45, 70, 0.42), rgba(255, 45, 70, 0.08) 60%, transparent 75%); filter: blur(24px); z-index: -1; }
.alt-fx__shadow { position: absolute; left: 50%; bottom: -6%; width: 60%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent); filter: blur(6px); animation: alt-shadow 6s ease-in-out infinite; }
@keyframes alt-shadow { 50% { transform: translateX(-50%) scale(0.86); opacity: 0.6; } }
html.js .alt-fx .alt-fx__head { opacity: 0; transform: translate(-50%, -38%) scale(0.72); transition: opacity 1s var(--ease) 0.5s, transform 1.6s cubic-bezier(0.34, 1.45, 0.5, 1) 0.5s; }
html.js .alt-fx.is-entered .alt-fx__head { opacity: 1; transform: translate(-50%, calc(-47% + var(--sy, 0px))) scale(calc(1 - var(--ss, 0))); }
html.js .alt-fx.is-settled .alt-fx__head { transition: none; }

.alt-fx__tag {
	position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px; border-radius: 999px;
	background: rgba(20, 20, 22, 0.66); border: 1px solid rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	font: 600 14px/1 var(--f-sans); color: var(--ink); white-space: nowrap; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
	translate: var(--px, 0px) var(--py, 0px);
}
.alt-fx__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.alt-fx__tag--1 { left: 13%; top: 20%; animation: alt-floaty 7s ease-in-out infinite; }
.alt-fx__tag--2 { right: 12%; top: 27%; animation: alt-floaty 8s ease-in-out -2s infinite; }
.alt-fx__tag--3 { left: 18%; bottom: 14%; animation: alt-floaty 9s ease-in-out -4s infinite; }
.alt-fx__tag--4 { right: 17%; bottom: 10%; animation: alt-floaty 7.5s ease-in-out -1s infinite; }
.alt-fx__tag--2 i, .alt-fx__tag--4 i { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }
@keyframes alt-floaty { 50% { transform: translateY(-10px); } }
html.js .alt-fx .alt-fx__tag { opacity: 0; scale: 0.8; transition: opacity 0.9s var(--ease), scale 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
html.js .alt-fx.is-entered .alt-fx__tag { opacity: 1; scale: 1; }
html.js .alt-fx.is-entered .alt-fx__tag--1 { transition-delay: 1.1s; }
html.js .alt-fx.is-entered .alt-fx__tag--2 { transition-delay: 1.25s; }
html.js .alt-fx.is-entered .alt-fx__tag--3 { transition-delay: 1.4s; }
html.js .alt-fx.is-entered .alt-fx__tag--4 { transition-delay: 1.55s; }

.alt-fx__foot { position: relative; z-index: 4; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px 48px; padding-block: 10px 30px; }
.alt-fx__text { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.5; color: #d2d2d7; max-width: 32ch; }
.alt-fx__who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; font: 400 12px/1.3 var(--f-mono); letter-spacing: 0.04em; color: var(--dim); }
.alt-fx__who strong { color: var(--ink); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.alt-fx__who span::before { content: "/"; margin-right: 12px; color: var(--red); }
.alt-fx__cta { display: flex; flex-wrap: wrap; gap: 10px; }

.alt-fx__proof { position: relative; z-index: 4; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent); }
.alt-fx__proofin { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 40px; padding-block: 18px; }
.alt-fx__clients { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.alt-faces { display: flex; }
.alt-faces > span { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid #050505; margin-left: -10px; display: grid; place-items: center; background: #2a2a2e; }
.alt-faces > span:first-child { margin-left: 0; }
.alt-faces > span:nth-child(2) { background: var(--red-2); }
.alt-faces > span:nth-child(3) { background: #3a3a40; }
.alt-faces img { width: 100%; height: 100%; object-fit: cover; }
.alt-faces b { font: 700 11px/1 var(--f-display); color: #fff; }
.alt-fx__clientstxt { display: grid; gap: 4px; font-size: 13.5px; color: var(--muted); }
.alt-fx__clientstxt strong { color: var(--ink); font-weight: 700; }
.alt-stars .on { color: var(--red); }
.alt-fx__clients .alt-stars svg { width: 13px; height: 13px; }
.alt-fx__logos { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.alt-fx__logotrack { display: flex; flex: none; align-items: center; gap: 34px; padding-right: 34px; animation: alt-marq 38s linear infinite; }
.alt-fx__logos:hover .alt-fx__logotrack { animation-play-state: paused; }
.alt-fx__logotrack li { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font: 600 14px/1 var(--f-sans); white-space: nowrap; transition: color 0.3s; }
.alt-fx__logotrack li:hover { color: var(--ink); }
.alt-fx__logotrack .alt-tmark { width: 30px; height: 30px; border-radius: 9px; }
.alt-fx__logotrack .alt-tmark svg { width: 16px; height: 16px; }

/* ============================================================ tool marks */
.alt-tmark { position: relative; width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, #19191c, #111113); border: 1px solid rgba(255, 255, 255, 0.08); color: #cfcfd5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: transform 0.5s var(--ease), border-color 0.4s, color 0.4s; }
.alt-tmark svg { width: 24px; height: 24px; transition: color 0.4s; }
.alt-tmark img { width: 60%; height: 60%; object-fit: contain; }
.alt-tmark__mono { font: 700 15px/1 var(--f-display); font-stretch: 110%; letter-spacing: -0.02em; color: var(--brand, #e6e6ea); }
.alt-tmark:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.2); }
.alt-tmark:hover svg { color: var(--brand, #fff); }
.alt-tmark[title]:hover::after { content: attr(title); position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; padding: 6px 10px; border-radius: 8px; background: #fff; color: #111; font: 600 12px/1 var(--f-sans); white-space: nowrap; pointer-events: none; z-index: 5; }
.alt-fx__logotrack .alt-tmark[title]:hover::after { display: none; }

/* ============================================================ SERVICES: "What I help you to Shape..." */
.alt-shape__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.alt-shape__sticky { position: sticky; top: calc(var(--head-h) + 48px); }
.alt-shape__title { font-size: clamp(42px, 4.8vw, 76px); margin-bottom: 24px; }
.alt-shape__text { color: var(--muted); font-size: 17px; max-width: 42ch; }
.alt-shape__tools { margin-top: 40px; }
.alt-shape__toolsh { font: 500 12px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.alt-tgrid { display: flex; flex-wrap: wrap; gap: 10px; max-width: 460px; }
.alt-stack { display: grid; gap: 22px; counter-reset: none; }
.alt-stack__item { position: sticky; top: calc(var(--head-h) + 48px + var(--k, 0) * 16px); }
.alt-stack__card {
	position: relative; display: grid; align-content: start; gap: 16px; min-height: 300px; padding: clamp(26px, 2.6vw, 38px);
	border-radius: var(--r-xl); background: var(--card); border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 -24px 50px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	transform: scale(var(--s, 1)); transform-origin: 50% 0; filter: brightness(var(--b, 1));
	transition: border-color 0.5s, background 0.6s var(--ease), box-shadow 0.6s var(--ease);
	overflow: hidden; isolation: isolate;
}
.alt-stack__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 100% at 100% 0%, #ff4d62 0%, var(--red) 38%, #b10d25 100%); opacity: 0; transition: opacity 0.6s var(--ease); }
.alt-stack__card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.06); z-index: -1; transition: transform 1s var(--ease); }
.alt-stack__card:hover { border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 40px 80px -30px rgba(255, 45, 70, 0.55); }
.alt-stack__card:hover::before { opacity: 1; }
.alt-stack__card:hover::after { transform: scale(1.4); border-color: rgba(255, 255, 255, 0.25); }
.alt-stack__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.alt-stack__ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: var(--red); background: rgba(255, 45, 70, 0.1); border: 1px solid rgba(255, 45, 70, 0.25); transition: all 0.5s var(--ease); }
.alt-stack__item.is-active .alt-stack__ic { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 10px 30px -10px var(--red-glow); }
.alt-stack__card:hover .alt-stack__ic { background: #fff; color: var(--red); border-color: #fff; }
.alt-stack__num { font: 800 clamp(40px, 4vw, 64px)/0.8 var(--f-display); font-stretch: 125%; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16); transition: -webkit-text-stroke-color 0.5s; }
.alt-stack__card:hover .alt-stack__num { -webkit-text-stroke-color: rgba(255, 255, 255, 0.6); }
.alt-stack__title { font: 750 clamp(26px, 2.5vw, 38px)/1.04 var(--f-display); font-stretch: 116%; letter-spacing: -0.03em; padding-right: 48px; }
.alt-stack__text { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 48ch; transition: color 0.5s; }
.alt-stack__card:hover .alt-stack__text { color: rgba(255, 255, 255, 0.88); }
.alt-stack__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.alt-stack__chips span { padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); font: 500 13px/1 var(--f-sans); color: #d9d9de; transition: border-color 0.5s, background 0.5s; }
.alt-stack__card:hover .alt-stack__chips span { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); color: #fff; }
.alt-stack__go { position: absolute; right: clamp(26px, 2.6vw, 38px); top: calc(clamp(26px, 2.6vw, 38px) + 68px); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.16); transition: all 0.6s var(--ease); }
.alt-stack__card:hover .alt-stack__go { background: #fff; color: var(--red); border-color: #fff; transform: rotate(45deg); }

/* ============================================================ PORTFOLIO: big cards */
.alt-pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.alt-pf:nth-child(n) { margin-top: 0; }
.alt-pf { padding: 12px; border-radius: var(--r-xl); background: var(--card-solid); border: 1px solid rgba(255, 255, 255, 0.07); transition: border-color 0.5s, transform 0.8s var(--ease), box-shadow 0.8s var(--ease); }
.alt-pf:hover { border-color: rgba(255, 45, 70, 0.35); transform: translateY(-6px); box-shadow: 0 40px 80px -40px rgba(255, 45, 70, 0.45); }
.alt-pf__thumb { aspect-ratio: 16 / 10.5; border-radius: 18px; background: #161618; }
.alt-pf__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cat link" "title link" "text text"; column-gap: 16px; row-gap: 6px; padding: 20px 10px 10px; align-items: center; }
.alt-pf__cat { grid-area: cat; color: var(--red); }
.alt-pf__title { grid-area: title; font-size: clamp(20px, 1.7vw, 26px); font-stretch: 114%; letter-spacing: -0.025em; }
.alt-pf__text { grid-area: text; margin-top: 4px; }
.alt-pf__link { grid-area: link; align-self: center; margin: 0; }
.alt-pf__link > span:first-child { display: none; }
.alt-pf__link .alt-arrow { width: 50px; height: 50px; }
.alt-pf:hover .alt-pf__link .alt-arrow { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(45deg); }
.alt-pf__hint { background: rgba(10, 10, 11, 0.8); }
.alt-ph { background: radial-gradient(80% 80% at 50% 40%, #1b1b1e, #0e0e0f); }
.alt-ph__mark { -webkit-text-stroke-color: rgba(255, 45, 70, 0.6); }

/* ============================================================ ABOUT photo card */
.alt-ab__title { max-width: 15ch; margin-bottom: clamp(44px, 5vw, 76px); font-size: clamp(40px, 5vw, 80px); }
.alt-ab__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.alt-ab__card { position: relative; padding: 12px; border-radius: 32px; background: var(--card-solid); border: 1px solid rgba(255, 255, 255, 0.08); transform: perspective(1200px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)); transition: transform 0.6s var(--ease); box-shadow: 0 60px 100px -50px rgba(255, 45, 70, 0.45); }
.alt-ab__photo { position: relative; aspect-ratio: 4 / 4.9; border-radius: 22px; overflow: hidden; background: var(--red-2); }
.alt-ab__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.alt-ab__badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px 8px 11px; border-radius: 999px; background: rgba(10, 10, 11, 0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 12px/1 var(--f-mono); color: #fff; }
.alt-ab__cap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 10px 8px; }
.alt-ab__cap strong { display: block; font: 750 22px/1.1 var(--f-display); font-stretch: 116%; letter-spacing: -0.02em; }
.alt-ab__cap small { display: block; margin-top: 6px; font: 400 12px/1.35 var(--f-mono); color: var(--muted); }
.alt-ab__p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.alt-ab__p + .alt-ab__p { margin-top: 18px; }
.alt-ab__p--lead { color: var(--ink); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; letter-spacing: -0.01em; }
.alt-ab__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--line); }
.alt-ab__stats li { display: grid; gap: 8px; padding: 22px 16px 0 0; }
.alt-ab__stats li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.alt-ab__stats strong { font: 800 clamp(34px, 3.4vw, 54px)/0.9 var(--f-display); font-stretch: 122%; letter-spacing: -0.045em; }
.alt-ab__stats span { font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.alt-ab__sign { margin-top: 28px; font: 400 clamp(54px, 5vw, 76px)/1 "AL Signature", cursive; color: var(--red); transform: rotate(-5deg); transform-origin: 0 50%; width: max-content; }
html.js .alt-ab__sign[data-reveal] { clip-path: inset(0 100% 0 0); opacity: 1; transform: rotate(-5deg); transition: clip-path 2s var(--ease) 0.2s; }
html.js .alt-ab__sign[data-reveal].is-in { clip-path: inset(0 -10% 0 0); }

/* ============================================================ TESTIMONIALS: glass cards */
.alt-reviews { grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; padding: 6px 2px 10px; }
.alt-review { padding: clamp(26px, 2.4vw, 34px); border-top: 0; border-radius: var(--r-xl); background: var(--card); border: 1px solid rgba(255, 255, 255, 0.08); gap: 20px; transition: border-color 0.5s, transform 0.8s var(--ease); }
.alt-review:hover { border-color: rgba(255, 45, 70, 0.35); transform: translateY(-4px); }
.alt-review__q { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 45, 70, 0.1); color: var(--red); }
.alt-review__q .alt-ic { width: 22px; height: 22px; }
.alt-review__text { font-size: clamp(16.5px, 1.25vw, 18.5px); font-weight: 450; line-height: 1.6; color: #e4e4e8; }
.alt-review__who { padding-top: 18px; border-top: 1px solid var(--line); }
.alt-review__avatar { background: var(--red); color: #fff; }

/* ============================================================ FAQ + red card */
.alt-faqx { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.alt-faqx:not(.has-cta) { grid-template-columns: minmax(0, 900px); }
.alt-faqx .alt-qa { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; background: var(--card-solid); padding: 0 22px; margin-bottom: 12px; transition: border-color 0.4s, background 0.4s; }
.alt-faqx .alt-qa:hover { border-color: rgba(255, 255, 255, 0.16); }
.alt-faqx .alt-qa[open] { border-color: rgba(255, 45, 70, 0.4); background: linear-gradient(180deg, rgba(255, 45, 70, 0.06), transparent 60%), var(--card-solid); }
.alt-faqx .alt-qa summary { padding: 22px 0; gap: 16px; font-size: 17px; }
.alt-qa__n { font: 500 12.5px/1 var(--f-mono); color: var(--dim); min-width: 22px; transition: color 0.3s; }
.alt-qa[open] .alt-qa__n { color: var(--red); }
.alt-qa__q { flex: 1; }
.alt-qa summary:hover { color: var(--ink); }
.alt-qa[open] .alt-qa__plus { background: var(--red); border-color: var(--red); color: #fff; }
.alt-faqx .alt-qa__a { padding: 0 40px 22px 38px; font-size: 15.5px; line-height: 1.65; }
.alt-faqx__cta { position: sticky; top: calc(var(--head-h) + 48px); }
.alt-faqx__card { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 3vw, 42px); border-radius: 30px; color: #fff; background: radial-gradient(130% 110% at 100% 0%, #ff5a6d 0%, var(--red) 40%, #b50d26 100%); box-shadow: 0 50px 100px -40px rgba(255, 45, 70, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.alt-faqx__card::before, .alt-faqx__card::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); }
.alt-faqx__card::before { width: 340px; height: 340px; right: -140px; top: -140px; }
.alt-faqx__card::after { width: 220px; height: 220px; right: -80px; top: -80px; }
.alt-faqx__title { margin: 24px 0 14px; font: 800 clamp(28px, 2.6vw, 40px)/1.02 var(--f-display); font-stretch: 116%; letter-spacing: -0.035em; text-wrap: balance; }
.alt-faqx__text { color: rgba(255, 255, 255, 0.86); font-size: 16px; line-height: 1.6; max-width: 36ch; }
.alt-faqx__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.alt-faqx__btns .alt-btn { --h: 50px; padding: 0 22px; }

/* ============================================================ inner banners, cards & misc */
.alt-phero.no-img { background: radial-gradient(70% 60% at 85% 0%, rgba(255, 45, 70, 0.14), transparent 70%); }
.alt-phero__copy > .alt-eyebrow { color: var(--muted); }
.alt-sec--features .alt-grid { border-top: 0; gap: 16px; }
.alt-feat, .alt-feat + .alt-feat, .alt-grid--2 .alt-feat:nth-child(n), .alt-grid--3 .alt-feat:nth-child(n), .alt-grid--4 .alt-feat:nth-child(n) { padding: clamp(24px, 2.4vw, 32px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 24px; background: var(--card); transition: border-color 0.5s, transform 0.8s var(--ease); }
.alt-feat:hover { border-color: rgba(255, 45, 70, 0.35) !important; transform: translateY(-4px); }
.alt-feat__ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: var(--red); background: rgba(255, 45, 70, 0.1); border: 1px solid rgba(255, 45, 70, 0.22); }
.alt-feat__ic .alt-ic { width: 22px; height: 22px; }
.alt-steps--cards { gap: 16px; }
.alt-steps--cards .alt-step { padding: 28px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; background: var(--card); overflow: hidden; }
.alt-steps--cards .alt-step::before { top: 0; height: 2px; }
.alt-step__num { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35); }
.alt-bg--panel { background: #0b0b0c; }
.alt-card--form { border-radius: var(--r-xl); background: var(--card); border-color: rgba(255, 255, 255, 0.08); }
.alt-card__ic, .alt-badge__ic { color: #fff; background: var(--red); }
.alt-svl__art { color: #fff; background: var(--red); }
.alt-skill__bar span { background: linear-gradient(90deg, var(--red-2), var(--red)); }
.alt-frame { border-radius: var(--r-xl); }
.alt-map { border-radius: var(--r-xl); }
.alt-map__frame iframe { filter: grayscale(1) invert(0.92) contrast(0.9) brightness(0.85); }
.alt-marq__sep { background: var(--red); box-shadow: 0 0 14px var(--red-glow); }
.alt-intro__icon { color: #fff; }

/* ============================================================ FOOTER */
.alt-footer { border-top: 0; padding-top: clamp(90px, 11vw, 170px); background: radial-gradient(80% 50% at 50% 100%, rgba(255, 45, 70, 0.16), transparent 70%); }
.alt-footer__cta { margin-bottom: clamp(56px, 7vw, 100px); }
.alt-footer__title { font: 800 clamp(44px, 7.4vw, 128px)/0.94 var(--f-display); font-stretch: 122%; letter-spacing: -0.05em; max-width: 15ch; text-wrap: balance; }
.alt-footer__ctarow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-top: 36px; }
.alt-footer__text { color: var(--muted); font-size: 17.5px; max-width: 44ch; }
.alt-footer__ctarow .alt-btns { margin-top: 0; }
.alt-footer__info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.alt-finfo { display: grid; align-content: start; gap: 10px; padding: 28px 24px 28px 0; min-width: 0; }
.alt-finfo + .alt-finfo { padding-left: 24px; border-left: 1px solid var(--line); }
.alt-finfo small { font: 500 11px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.alt-finfo > span { font: 600 clamp(15px, 1.25vw, 18px)/1.3 var(--f-display); font-stretch: 108%; letter-spacing: -0.01em; overflow-wrap: anywhere; transition: color 0.3s; }
a.alt-finfo:hover > span { color: var(--red); }
.alt-finfo--social .alt-socials a { width: 38px; height: 38px; }
.alt-footer__nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; padding-top: 48px; }
.alt-footer__h { margin-bottom: 18px; }
.alt-footer__menu { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.alt-footer__menu a { font: 600 16px/1.3 var(--f-display); font-stretch: 108%; color: var(--ink); transition: color 0.3s; }
.alt-footer__menu a:hover { color: var(--red); }
.alt-footer__menu--svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.alt-footer__menu--svc a { font: 400 15px/1.35 var(--f-sans); color: #c4c4ca; }
.alt-footer__about .alt-footer__tag { margin: 0 0 14px; }
.alt-footer__note { margin-top: 0; margin-bottom: 16px; }
.alt-footer__co { color: var(--red); }
.alt-footer__word { margin-top: clamp(40px, 6vw, 90px); line-height: 0.78; mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.15) 100%); -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0, 0, 0, 0.15) 100%); }
.alt-footer__word span[data-fword] { display: inline-block; white-space: nowrap; font-size: clamp(64px, 17.4vw, 330px); font-stretch: 125%; letter-spacing: -0.055em; text-transform: uppercase; color: var(--red); line-height: 0.8; padding-top: 0.06em; }
.alt-footer__word span.alt-ch { display: inline-block; font: inherit; color: inherit; letter-spacing: inherit; white-space: pre; will-change: auto; }
.alt-footer__word .alt-ch { transition: transform 1.2s var(--ease), color 0.4s; transition-delay: calc(var(--c, 0) * 0.04s); }
html.js .alt-footer__word:not(.is-in) .alt-ch { transform: translateY(60%); }
.alt-footer__word .alt-ch:hover { color: #ff5a6d; transform: translateY(-6%); transition-delay: 0s; }
.alt-footer__word { pointer-events: auto; }
.alt-footer__bar { flex-direction: row; justify-content: space-between; text-align: left; }
.alt-footer__bar .alt-totop { position: static; transform: none; }

/* ============================================================ DOCK: "Speak to me" pill */
.alt-dock { position: fixed; z-index: 90; left: 50%; right: auto; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(18, 18, 20, 0.82); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9); transform: translate(-50%, 0); transition: transform 0.8s var(--ease), opacity 0.5s; }
.alt-dock:not(.is-shown), .alt-dock.is-lifted { transform: translate(-50%, 160%); opacity: 0; pointer-events: none; }
.hero-in-view .alt-dock { transform: translate(-50%, 160%); }
.alt-dock__head { width: 42px; height: 42px; }
.alt-dock__txt { display: grid; gap: 3px; padding: 0 10px 0 4px; line-height: 1; white-space: nowrap; }
.alt-dock__txt strong { font: 600 14px/1 var(--f-sans); }
.alt-dock__txt small { font-size: 11.5px; color: var(--muted); }
.alt-dock__btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; justify-content: center; background: #222226; color: #fff; transition: transform 0.5s var(--ease), background 0.3s; }
.alt-dock__btn:hover { transform: translateY(-2px) scale(1.06); }
.alt-dock__btn--mail { background: var(--red); box-shadow: 0 8px 20px -8px var(--red-glow); }
.alt-dock__btn--wa { color: #25d366; }
.alt-dock__btn--wa svg { width: 19px; height: 19px; }

/* ============================================================ cursor */
.alt-cursor__ring { border-color: rgba(255, 45, 70, 0.6); }
.alt-cursor__dot { background: var(--red); }
.alt-cursor.is-link .alt-cursor__ring { border-color: var(--red); background: rgba(255, 45, 70, 0.08); }
.alt-cursor.is-view .alt-cursor__ring { background: var(--red); border-color: var(--red); }
.alt-cursor__ring::after { color: #fff; }

/* ============================================================ responsive */
@media (max-width: 1150px) {
	.alt-header__inner { width: 100%; }
	.alt-shape__grid { grid-template-columns: 1fr; }
	.alt-shape__sticky { position: static; }
	.alt-reviews { grid-auto-columns: calc((100% - 24px) / 2); }
	.alt-fx__tag--1 { left: 5%; }
	.alt-fx__tag--2 { right: 4%; }
	.alt-fx__tag--3 { left: 8%; }
	.alt-fx__tag--4 { right: 7%; }
	.alt-footer__info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.alt-finfo:nth-child(3) { padding-left: 0; border-left: 0; }
	.alt-finfo:nth-child(n+3) { border-top: 1px solid var(--line); }
	.alt-footer__nav { grid-template-columns: 1fr 1fr; }
	.alt-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
	.alt-header { top: 10px; }
	.alt-header__inner { height: 58px; padding: 0 6px 0 8px; }
	.alt-fx { --fs: min(calc((100vw - var(--gut) * 2) / (var(--n, 10) * 0.7)), 160px); padding-top: calc(var(--head-h) + 26px); min-height: 0; }
	.alt-fx__words { font-stretch: 112%; }
	.alt-fx__stage { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 64px 0 18px; }
	.alt-fx__head, html.js .alt-fx .alt-fx__head, html.js .alt-fx.is-entered .alt-fx__head { position: relative; left: auto; top: auto; width: min(64vw, 270px); margin-bottom: calc(var(--fs) * -0.5); }
	html.js .alt-fx .alt-fx__head { transform: translateY(40px) scale(0.8); }
	html.js .alt-fx.is-entered .alt-fx__head { transform: translateY(var(--sy, 0px)) scale(calc(1 - var(--ss, 0))); }
	html.alt-ready-fallback .alt-fx .alt-fx__head { transform: none !important; }
	.alt-fx__words { order: 2; position: relative; z-index: 1; }
	.alt-fx__line--2 { position: relative; z-index: 3; }
	.alt-fx__tag { padding: 8px 12px 8px 10px; font-size: 12.5px; }
	.alt-fx__tag--1 { left: 0; top: 22%; }
	.alt-fx__tag--2 { right: 0; top: 40%; }
	.alt-fx__tag--3, .alt-fx__tag--4 { display: none; }
	.alt-fx__foot { flex-direction: column; align-items: stretch; padding-bottom: 24px; }
	.alt-fx__cta .alt-btn { flex: 1 1 auto; }
	.alt-fx__proofin { grid-template-columns: 1fr; gap: 16px; }
	.alt-tgrid { max-width: none; }
	.alt-stack__item { top: calc(var(--head-h) + 26px + var(--k, 0) * 10px); }
	.alt-stack__card { min-height: 0; }
	.alt-pf-grid { grid-template-columns: 1fr; gap: 18px; }
	.alt-pf:nth-child(2n) { margin-top: 0; }
	.alt-ab__grid { grid-template-columns: 1fr; }
	.alt-ab__card { max-width: 480px; }
	.alt-faqx, .alt-faqx:not(.has-cta) { grid-template-columns: 1fr; }
	.alt-faqx__cta { position: static; }
	.alt-faqx .alt-qa__a { padding: 0 6px 20px 38px; }
	.alt-reviews { grid-auto-columns: 86%; gap: 16px; }
	.alt-footer__nav { grid-template-columns: 1fr; gap: 32px; }
	.alt-footer__bar { flex-direction: column; text-align: center; padding-bottom: 96px; }
	.alt-dock { bottom: 12px; }
}
@media (max-width: 600px) {
	.alt-fx__status { font-size: 11.5px; }
	.alt-footer__info { grid-template-columns: 1fr; }
	.alt-finfo, .alt-finfo + .alt-finfo { padding: 20px 0; border-left: 0; }
	.alt-finfo + .alt-finfo { border-top: 1px solid var(--line); }
	.alt-ab__stats li + li { padding-left: 12px; }
	.alt-ab__stats strong { font-size: 30px; }
	.alt-stack__title { font-size: 25px; padding-right: 0; }
	.alt-stack__go { display: none; }
	.alt-dock__txt small { display: none; }
	.alt-pf__thumb { aspect-ratio: 16 / 11; }
}
@media (max-width: 380px) { .alt-dock__txt { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.alt-fx__tilt img, .alt-fx__beam, .alt-fx__tag, .alt-fx__shadow, .alt-fx__logotrack { animation: none !important; }
	html.js .alt-fx .alt-ch, html.js .alt-fx .alt-fx__head, html.js .alt-fx .alt-fx__tag, html.js .alt-footer__word .alt-ch, html.js .alt-ab__sign[data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; scale: 1 !important; clip-path: none !important; }
	html.js .alt-fx .alt-fx__head { transform: translate(-50%, -47%) !important; }
}
html.alt-ready-fallback .alt-fx .alt-ch, html.alt-ready-fallback .alt-fx .alt-fx__tag, html.alt-ready-fallback .alt-footer__word .alt-ch { opacity: 1 !important; transform: none !important; filter: none !important; scale: 1 !important; }
html.alt-ready-fallback .alt-fx .alt-fx__head { opacity: 1 !important; transform: translate(-50%, -47%) !important; }
@media (max-width: 860px), (pointer: coarse) { .alt-fx__tag, .alt-btn--line, .alt-header__inner { -webkit-backdrop-filter: none; backdrop-filter: none; } .alt-header__inner { background: rgba(16, 16, 18, 0.92); } .alt-fx__beam { animation: none; } }

/* ============================================================ v4.1 polish */
/* services: the left column stretches to the full section height, so its content can stay sticky */
.alt-shape__side { align-self: stretch; }

/* avatar chip: whole head, chin included */
.alt-headchip { place-items: center; }
.alt-headchip img { width: 72%; transform: translateY(3%); }

/* hero letters: 3D flip entrance */
.alt-fx__line { perspective: 900px; }
html.js .alt-fx .alt-ch { opacity: 0; transform: translate3d(0, 0.5em, 0) rotateX(-80deg); transform-origin: 50% 100%; filter: blur(6px); transition: opacity 0.9s var(--ease), transform 1.5s var(--ease), filter 1s var(--ease); transition-delay: calc(0.15s + var(--c, 0) * 0.06s); }
html.js .alt-fx .alt-fx__line--2 .alt-ch { transition-delay: calc(0.45s + var(--c, 0) * 0.06s); }
html.js .alt-fx.is-entered .alt-ch { opacity: 1; transform: none; filter: none; }
/* after the entrance: letters lift and change colour near the cursor */
html.js .alt-fx.is-settled .alt-ch { transition: transform 0.6s var(--ease), color 0.5s; transition-delay: 0s; transform: translate3d(0, calc(var(--lift, 0) * -0.1em), 0) scale(calc(1 + var(--lift, 0) * 0.04)); }
html.js .alt-fx.is-settled .alt-fx__line--1 .alt-ch { color: color-mix(in srgb, var(--red) calc(var(--lift, 0) * 100%), var(--ink)); }
html.js .alt-fx.is-settled .alt-fx__line--2 .alt-ch { color: color-mix(in srgb, #fff calc(var(--lift, 0) * 100%), var(--red)); }

/* cursor spotlight, orbits and the spinning ring behind the head */
.alt-fx__spot { position: absolute; left: var(--spx, 50%); top: var(--spy, 45%); width: 620px; height: 620px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 60, 85, 0.16), transparent); transition: left 0.9s var(--ease), top 0.9s var(--ease); }
.alt-fx__orbit { position: absolute; left: 50%; top: 52%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.055); mask-image: linear-gradient(180deg, #000 30%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 85%); animation: alt-spin 40s linear infinite; }
.alt-fx__orbit::before { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--red); box-shadow: 0 0 16px 3px var(--red-glow); }
.alt-fx__orbit--1 { width: min(86vw, 1080px); }
.alt-fx__orbit--2 { width: min(60vw, 760px); animation-duration: 26s; animation-direction: reverse; }
.alt-fx__orbit--2::before { background: #fff; box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.5); }
@keyframes alt-spin { to { rotate: 360deg; } }
.alt-fx__ring { position: absolute; z-index: -1; left: 50%; top: 46%; width: 96%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 55%, rgba(255, 45, 70, 0.95) 78%, rgba(255, 255, 255, 0.9) 80%, transparent 82% 100%); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); animation: alt-spin 7s linear infinite; opacity: 0.85; }

/* split layout: word 1 · avatar · word 2 on one line (computers) */
@media (min-width: 861px) {
	.alt-fx--split .alt-fx__words { display: flex; align-items: center; justify-content: center; gap: calc(var(--fs) * 2.15); }
	.alt-fx--split .alt-fx__line { margin: 0; }
	.alt-fx--split .alt-fx__head { width: clamp(300px, calc(var(--fs) * 2.35), 660px); }
	.alt-fx--split .alt-fx__stage { min-height: clamp(460px, 66svh, 760px); }
	.alt-fx--split .alt-fx__tag--1 { left: 9%; top: 18%; }
	.alt-fx--split .alt-fx__tag--2 { right: 9%; top: 20%; }
	.alt-fx--split .alt-fx__tag--3 { left: 14%; bottom: 12%; }
	.alt-fx--split .alt-fx__tag--4 { right: 14%; bottom: 10%; }
}

/* cards: soft red spotlight that follows the cursor */
.alt-pf, .alt-review, .alt-feat, .alt-faqx .alt-qa, .alt-ab__card, .alt-stack__card, .alt-tmark, .alt-finfo { --mx: -999px; --my: -999px; }
.alt-pf { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 45, 70, 0.11), transparent 60%), var(--card-solid); }
.alt-review, .alt-feat, .alt-feat + .alt-feat { background: radial-gradient(380px circle at var(--mx) var(--my), rgba(255, 45, 70, 0.1), transparent 60%), var(--card) !important; }
.alt-faqx .alt-qa { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 45, 70, 0.08), transparent 60%), var(--card-solid); }
.alt-stack__card { background: radial-gradient(460px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.07), transparent 60%), var(--card); }
.alt-ab__card { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 45, 70, 0.14), transparent 60%), var(--card-solid); }

/* portfolio: image curtain + slow zoom */
.alt-pf__thumb::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35)); }
html.js .alt-pf[data-reveal] .alt-pf__thumb { clip-path: inset(12% 6% 12% 6% round 18px); transition: clip-path 1.4s var(--ease) calc(var(--d, 0s) + 0.1s); }
html.js .alt-pf[data-reveal].is-in .alt-pf__thumb { clip-path: inset(0 0 0 0 round 18px); }

/* section titles get a soft red underline sweep on the accent */
.alt-title .alt-gold-host { position: relative; }

/* header: thin animated red line under the pill when scrolled */
.alt-header__inner::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--red), transparent); transform: scaleX(var(--p, 0)); opacity: 0; transition: opacity 0.5s; }
.alt-header.is-scrolled .alt-header__inner::after { opacity: 0.9; }

@media (max-width: 860px) {
	.alt-fx__orbit--1 { width: 150vw; top: 34%; }
	.alt-fx__orbit--2 { width: 105vw; top: 34%; }
	.alt-fx__spot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.alt-fx__orbit, .alt-fx__ring { animation: none !important; }
	html.js .alt-pf[data-reveal] .alt-pf__thumb { clip-path: none !important; }
}
html.alt-ready-fallback .alt-pf .alt-pf__thumb { clip-path: none !important; }