/* Ghayas Ahmed | v2  (warm light + dark red-glow sections) */
:root {
  --bg: #FFFFFF;
  --soft: #FBF7F5;
  --ink: #0F0F14;
  --ink-2: #3D3D48;
  --muted: #6B6B78;
  --line: #ECE6E3;
  --red: #E5281E;
  --red-2: #C81E15;
  --orange: #F97316;
  --green: #16A34A;
  --d-bg: #0B0B12;
  --d-card: #13131D;
  --d-card-2: #171724;
  --d-line: rgba(255,255,255,.09);
  --d-ink: #F4F4F7;
  --d-muted: #A1A1B3;
  --head: "Outfit", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --r: 18px;
  --sh: 0 18px 44px -22px rgba(20, 10, 10, .22);
  --sh-red: 0 14px 30px -12px rgba(229, 40, 30, .55);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --hdr: 76px;
  --gut: 1rem;
  --grad: linear-gradient(90deg, #E5281E 0%, #F97316 35%, #D9A441 62%, #3BA9E0 100%);
}
@media (min-width: 640px) { :root { --gut: 1.5rem; } }
@media (min-width: 1100px) { :root { --gut: 2rem; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 10px); -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 1rem/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--red); color: #fff; }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gut); }
.i { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 300; background: var(--red); color: #fff; padding: .6rem 1rem; border-radius: 10px; }
.skip:focus { top: 1rem; }
.c-red { color: var(--red); } .c-orange { color: var(--orange); } .c-green { color: #10B981; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: .85rem 1.6rem; border-radius: 999px; font: 700 .9rem/1 var(--head); letter-spacing: .04em; text-transform: uppercase; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s, background-color .25s, border-color .25s, color .25s; }
.btn-red { background: linear-gradient(90deg, var(--red), #F4511E); color: #fff; box-shadow: var(--sh-red); }
.btn-red:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 36px -12px rgba(229,40,30,.65); }
.btn-red .i { transition: transform .25s var(--ease); }
.btn-red:hover .i { transform: translateX(3px); }
.btn-white { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 6px 16px -10px rgba(0,0,0,.2); }
.btn-white:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.btn-outline-d { background: transparent; color: var(--d-ink); border-color: var(--d-line); }
.btn-outline-d:hover { border-color: var(--red); color: #fff; }
.btn-sm { min-height: 40px; padding: .55rem 1.1rem; font-size: .78rem; }
.btn-block { width: 100%; }

/* Header */
.hdr { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hdr); transition: background-color .3s, box-shadow .3s; }
.hdr.scrolled, body.menu-open .hdr { background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(0,0,0,.25); }
.hdr-in { height: 100%; display: flex; align-items: center; gap: 1.25rem; }
.brand { display: flex; align-items: center; gap: .65rem; margin-right: auto; }
.brand img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center 20%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
.brand > span { white-space: nowrap; }
.brand strong { display: flex; align-items: center; gap: .35rem; font: 800 1.02rem/1.1 var(--head); }
.brand small { display: block; color: var(--muted); font-size: .74rem; }
.odot { width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.nav { display: none; gap: .15rem; padding: .3rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px -12px rgba(0,0,0,.25); font-size: .84rem; font-weight: 500; color: var(--ink-2); }
.nav a { white-space: nowrap; padding: .45rem .7rem; border-radius: 999px; transition: background-color .2s, color .2s; }
.nav a:hover { color: var(--red); }
.nav a.on { background: #FDECEA; color: var(--red); }
.hdr-cta { display: none; }
.burger { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; position: relative; cursor: pointer; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span:first-child { top: 17px; } .burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
@media (min-width: 1240px) { .nav, .hdr-cta { display: flex; } .burger { display: none; } }
@media (min-width: 640px) and (max-width: 1239px) { .hdr-cta { display: inline-flex; } }
.mnav { position: fixed; inset: 0; z-index: 90; padding: calc(var(--hdr) + 1rem) var(--gut) 1.5rem; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition: opacity .3s; }
.mnav.open { opacity: 1; }
.mnav nav { display: grid; }
.mnav nav a { font: 800 1.55rem/1 var(--head); padding: .7rem 0; border-bottom: 1px solid var(--line); }
body.menu-open { overflow: hidden; }

/* Hero */
.hero { position: relative; padding: calc(var(--hdr) + 2.75rem) 0 4.5rem; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 70% at 80% 30%, rgba(249,115,22,.12), transparent 70%), radial-gradient(50% 60% at 20% 20%, rgba(229,40,30,.06), transparent 70%), linear-gradient(180deg, #FFF9F6, #FFF 90%); border-bottom: 1px solid var(--line); }
.hero-in { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1000px) { .hero-in { grid-template-columns: 1.1fr .9fr; } .hero { padding-bottom: 5.5rem; } }
.chip-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: .4rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 14px -10px rgba(0,0,0,.25); font-size: .8rem; font-weight: 600; }
.chip-line b { color: var(--red); text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; }
.chip-line i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-2); }
h1 { margin-top: 1.4rem; font: 900 clamp(2.5rem, 1.3rem + 4.8vw, 4.3rem)/.98 var(--head); letter-spacing: -.025em; text-transform: uppercase; }
h1 span { display: block; }
.grad { background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradShift 8s ease-in-out infinite alternate; }
.grad-2 { background-position: 60% 0; }
@keyframes gradShift { to { background-position: 100% 0; } }
.lead { margin-top: 1.4rem; font-size: 1.08rem; color: var(--ink-2); max-width: 34rem; }
.pillars { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.pillars li { min-width: 132px; padding: .85rem 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(0,0,0,.3); transition: transform .3s var(--ease), box-shadow .3s; }
.pillars li:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.pillars strong { display: block; font: 800 .95rem/1.2 var(--head); }
.pillars small { display: block; margin-top: .35rem; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
@media (max-width: 479px) { .cta-row .btn { flex: 1 1 100%; } }

.hero-art { position: relative; justify-self: center; width: min(460px, 100%); aspect-ratio: 1 / 1.08; display: grid; place-items: center; }
.orbit { position: absolute; inset: 0 0 12%; display: grid; place-items: center; }
.ring { position: absolute; border-radius: 50%; border: 1px solid rgba(229,40,30,.14); }
.r1 { width: 78%; aspect-ratio: 1; background: radial-gradient(circle, rgba(249,115,22,.10), transparent 70%); }
.r2 { width: 100%; aspect-ratio: 1; border-style: dashed; border-color: rgba(229,40,30,.12); }
.orbit-spin { position: absolute; width: 92%; aspect-ratio: 1; animation: spin 40s linear infinite; }
.ob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 22px -12px rgba(0,0,0,.3);
  transform: rotate(var(--a)) translateY(calc(min(460px, 92vw) * -.46)) rotate(calc(var(--a) * -1)); }
.ob svg { width: 22px; height: 22px; fill: none; stroke: var(--c); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; animation: spin 40s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.avatar { position: relative; width: 56%; aspect-ratio: 1; border-radius: 50%; padding: 6px; margin-bottom: 12%; background: conic-gradient(from 200deg, #E5281E, #F97316, #FBBF24, #F97316, #E5281E); box-shadow: 0 30px 60px -24px rgba(229,40,30,.45); animation: float 6s ease-in-out infinite; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 18%; border: 5px solid #fff; }
.avail { position: absolute; right: -2%; bottom: 10%; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px; background: #fff; border: 1.5px solid #BBF7D0; color: #15803D; font: 800 .68rem var(--head); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 18px -10px rgba(0,0,0,.3); }
.avail i, .gdot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@keyframes float { 50% { transform: translateY(-8px); } }
.name-card { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(300px, 90%); padding: 1rem 1.2rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh); text-align: center; }
.name-card strong { display: block; font: 900 1.05rem var(--head); letter-spacing: .02em; text-transform: uppercase; }
.name-card .role { display: inline-block; margin-top: .15rem; padding-bottom: .3rem; color: var(--red); font-weight: 600; font-size: .85rem; border-bottom: 2px solid #FDD5D1; }
.name-card small { display: block; margin-top: .45rem; color: var(--muted); font-size: .76rem; line-height: 1.45; }

/* Section shells */
.sec { padding: clamp(4rem, 3rem + 5vw, 6.5rem) 0; position: relative; }
.sec-soft { background: radial-gradient(60% 50% at 90% 0%, rgba(249,115,22,.07), transparent 70%), var(--soft); }
.head-c { max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.tag-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .8rem; border-radius: 999px; background: #FDECEA; color: var(--red); font: 600 .78rem var(--head); border: 1px solid #FAD1CC; }
.tp-dark { background: rgba(229,40,30,.12); border-color: rgba(229,40,30,.35); color: #FF8A7A; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.rdot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(229,40,30,.2); }
.h2 { margin-top: .85rem; font: 900 clamp(1.85rem, 1.2rem + 2.5vw, 2.85rem)/1.1 var(--head); letter-spacing: -.025em; text-wrap: balance; }
.h2-left, .sub-left { text-align: left; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { margin-top: .85rem; color: var(--muted); font-size: 1.02rem; }

/* Icon square */
.mi { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--c, var(--red)) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c, var(--red)) 25%, transparent); }
.mi svg { width: 22px; height: 22px; fill: none; stroke: var(--c, var(--red)); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mi-sm { width: 38px; height: 38px; border-radius: 11px; }
.mi-sm svg { width: 18px; height: 18px; }

/* About */
.about { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 940px) { .about { grid-template-columns: .85fr 1.15fr; gap: 4rem; } }
.about-photo { position: relative; max-width: 400px; justify-self: center; width: 100%; padding: 1.5rem 0; }
.photo-frame { border-radius: 26px; padding: 8px; background: linear-gradient(160deg, #FDD5D1, #FFE7D6 40%, #fff); box-shadow: var(--sh); transform: rotate(-2deg); transition: transform .5s var(--ease); }
.about-photo:hover .photo-frame { transform: rotate(0); }
.photo-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; }
.float-badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: .55rem; padding: .6rem .9rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh); font: 700 .82rem/1.2 var(--head); animation: float 7s ease-in-out infinite; }
.float-badge small { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
.float-badge .i { color: var(--red); width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #FDECEA; }
.fb-top { left: -4%; top: 0; }
.fb-bottom { right: -4%; bottom: 8%; animation-delay: -3s; }
.about-copy > p:not(.tag-pill) { color: var(--ink-2); margin-top: 1rem; max-width: 40rem; }
.mini-grid { display: grid; gap: .75rem; margin-top: 1.75rem; }
@media (min-width: 600px) { .mini-grid { grid-template-columns: 1fr 1fr; } }
.mini { display: flex; gap: .8rem; padding: 1rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.mini:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: #FAD1CC; }
.mini .mi { width: 38px; height: 38px; border-radius: 11px; } .mini .mi svg { width: 18px; height: 18px; }
.mini strong { font: 800 .95rem var(--head); }
.mini p { font-size: .82rem; color: var(--muted); line-height: 1.45; margin-top: .15rem; }

/* Services */
.svc-grid { display: grid; gap: 1rem; }
@media (min-width: 680px) { .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1040px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc { position: relative; padding: 1.5rem; border-radius: var(--r); background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: .45rem; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.svc::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.svc:hover { transform: translateY(-6px); box-shadow: var(--sh); border-color: transparent; }
.svc:hover::before { transform: scaleX(1); }
.svc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.svc-top b { font: 900 2.2rem/1 var(--head); color: color-mix(in srgb, var(--c) 18%, #fff); transition: color .3s; }
.svc:hover .svc-top b { color: color-mix(in srgb, var(--c) 45%, #fff); }
.cat { font: 700 .7rem var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--c); }
.svc h3 { font: 800 1.2rem/1.25 var(--head); }
.svc > p:not(.cat) { color: var(--ink-2); font-size: .92rem; }
.svc-foot { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; border-top: 1px dashed var(--line); }
.hire { padding: .22rem .6rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: #15803D; background: #DCFCE7; }
.out { font-size: .78rem; color: var(--muted); }

/* Dark sections */
.dark { position: relative; padding: clamp(4rem, 3rem + 5vw, 6.5rem) 0; color: var(--d-ink); overflow: hidden; isolation: isolate;
  background: radial-gradient(50% 40% at 15% 10%, rgba(229,40,30,.16), transparent 70%), radial-gradient(45% 40% at 90% 60%, rgba(229,40,30,.12), transparent 70%), var(--d-bg); }
.dark .sub { color: var(--d-muted); }
.dark-panel { padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: 28px; background: rgba(255,255,255,.02); border: 1px solid var(--d-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.skills { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 560px) { .skills { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .skills { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .skills { grid-template-columns: repeat(4, 1fr); } }
.sk { position: relative; padding: 1rem 1.1rem; border-radius: 14px; background: var(--d-card); border: 1px solid var(--d-line); transition: border-color .3s, transform .3s var(--ease), box-shadow .3s, background-color .3s; }
.sk::after { content: ""; position: absolute; right: .9rem; top: .9rem; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #10B981;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 62% no-repeat; }
.sk small { display: inline-block; font: 700 .6rem var(--head); text-transform: uppercase; letter-spacing: .1em; color: #FF6B5B; padding: .12rem .45rem; border-radius: 5px; background: rgba(229,40,30,.14); }
.sk strong { display: block; margin-top: .55rem; font: 700 .98rem/1.25 var(--head); }
.sk span { font-size: .74rem; color: var(--d-muted); }
.sk:hover, .sk.hot { border-color: rgba(229,40,30,.65); background: linear-gradient(160deg, rgba(229,40,30,.14), var(--d-card) 60%); box-shadow: 0 0 0 1px rgba(229,40,30,.25), 0 12px 30px -16px rgba(229,40,30,.6); }
.sk:hover { transform: translateY(-3px); }
.sk.hot span { color: #FFB199; }

.ways-wrap { margin-top: clamp(3.5rem, 6vw, 5rem); padding-top: clamp(3rem, 5vw, 4rem); border-top: 1px solid var(--d-line); }
.ways { display: grid; gap: 1.25rem; max-width: 960px; margin: 0 auto; }
@media (min-width: 860px) { .ways { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; } }
.way { position: relative; padding: 1.75rem; border-radius: 22px; background: var(--d-card); border: 1px solid var(--d-line); border-top: 3px solid var(--c); display: flex; flex-direction: column; gap: .7rem; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.way:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--c) 60%, transparent); }
.way .mi { background: var(--c); border: 0; box-shadow: 0 10px 20px -8px var(--c); }
.way .mi svg { stroke: #fff; }
.ghost-n { position: absolute; right: 1.4rem; top: 1rem; font: 900 3.4rem/1 var(--head); color: rgba(255,255,255,.05); }
.line { font: 700 .66rem var(--head); text-transform: uppercase; letter-spacing: .12em; color: var(--c); margin-top: .3rem; }
.way h3 { font: 800 1.3rem var(--head); }
.way > p:not(.line) { color: var(--d-muted); font-size: .92rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.way .tags li, .tags-dark li { padding: .28rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: rgba(255,255,255,.05); border: 1px solid var(--d-line); color: #D8D8E2; }
.way-foot { margin-top: .6rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: .78rem; }
.way-foot span { color: var(--c); font-weight: 600; }
.way-foot a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--c); }
.way-foot a .i { transition: transform .3s var(--ease); }
.way-foot a:hover .i { transform: translateX(4px); }
.or { justify-self: center; z-index: 1; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 900 .8rem var(--head); color: #fff; background: radial-gradient(circle, #3A0F12, #1A0A0D); border: 1.5px solid rgba(229,40,30,.7); box-shadow: 0 0 24px rgba(229,40,30,.45); }
@media (min-width: 860px) { .or { margin: 0 -14px; } }

/* Experience */
.exp { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .exp { grid-template-columns: 1fr 1fr; } }
.exp-card { padding: 1.75rem; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh); transition: transform .35s var(--ease); }
.exp-card:hover { transform: translateY(-4px); }
.exp-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lbl { font: 700 .7rem var(--head); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.lbl-red { color: #FF8A7A; }
.pill-tag { padding: .25rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--red); background: #FDECEA; border: 1px solid #FAD1CC; }
.pt-orange { color: #C2410C; background: #FFEDD5; border-color: #FED7AA; }
.exp-card h3 { margin-top: .85rem; font: 900 1.45rem var(--head); }
.org { font-size: .85rem; color: var(--muted); margin-bottom: .9rem; }
.exp-card > p:not(.org) { color: var(--ink-2); font-size: .92rem; }
.dots { display: grid; gap: .55rem; margin-top: 1rem; }
.dots li { position: relative; padding-left: 1.1rem; color: var(--ink-2); font-size: .9rem; }
.dots li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.exp-minis { display: grid; gap: .75rem; margin-top: 1.1rem; }
@media (min-width: 520px) { .exp-minis { grid-template-columns: 1fr 1fr; } }
.exp-minis div { padding: .9rem; border-radius: 14px; border: 1px solid var(--line); background: var(--soft); }
.exp-minis strong { display: block; font: 800 .9rem var(--head); }
.exp-minis span { font-size: .78rem; color: var(--muted); }
.brands-lbl { margin: 3rem 0 1rem; text-align: center; font: 700 .72rem var(--head); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); display: flex; align-items: center; gap: 1rem; justify-content: center; }
.brands-lbl::before, .brands-lbl::after { content: ""; width: 40px; height: 1px; background: var(--line); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-track span { padding: .6rem 2.2rem; font: 900 1.35rem var(--head); color: #B9B3B0; white-space: nowrap; letter-spacing: -.01em; filter: grayscale(1); transition: color .3s; }
.mq-track span:hover { color: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Process */
.process { margin-top: clamp(3.5rem, 6vw, 5rem); }
.stages { display: grid; gap: 1rem; margin-top: 2rem; position: relative; }
@media (min-width: 640px) { .stages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .stages { grid-template-columns: repeat(5, 1fr); }
  .stages::before { content: ""; position: absolute; left: 2%; right: 2%; top: -14px; height: 2px; background: linear-gradient(90deg, #E5281E, #F59E0B, #0EA5E9, #10B981, #A855F7); opacity: .4; }
}
.stages li { position: relative; padding: 1.25rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--c); transition: transform .35s var(--ease), box-shadow .35s; }
.stages li:hover { transform: translateY(-6px); box-shadow: var(--sh); }
.st-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; }
.st-top b { font: 900 1.8rem var(--head); color: color-mix(in srgb, var(--c) 30%, #fff); }
.stages h3 { font: 800 1.1rem var(--head); }
.stages p { margin-top: .3rem; font-size: .85rem; color: var(--muted); }

/* Portfolio (dark) */
.pf { display: grid; gap: 1.25rem; }
@media (min-width: 980px) { .pf { grid-template-columns: .95fr 1.4fr; gap: 1.5rem; align-items: start; } }
.pf-list { display: grid; gap: .6rem; }
.pf-item { display: flex; align-items: center; gap: .85rem; width: 100%; padding: .7rem .9rem; border-radius: 16px; text-align: left; cursor: pointer; background: var(--d-card); border: 1px solid var(--d-line); transition: border-color .3s, background-color .3s, transform .3s var(--ease); }
.pf-item:hover { border-color: rgba(255,255,255,.2); transform: translateX(3px); }
.pf-item[aria-selected="true"] { border-color: rgba(229,40,30,.75); background: linear-gradient(90deg, rgba(229,40,30,.2), var(--d-card) 70%); box-shadow: 0 0 0 1px rgba(229,40,30,.3), 0 10px 30px -16px rgba(229,40,30,.7); }
.pf-item img { width: 64px; height: 42px; border-radius: 8px; object-fit: cover; object-position: top; flex-shrink: 0; border: 1px solid var(--d-line); }
.pf-item small { display: block; font: 700 .62rem var(--head); color: #FF8A7A; text-transform: uppercase; letter-spacing: .1em; }
.pf-item strong { font: 700 .92rem/1.25 var(--head); color: var(--d-ink); }
.pf-item .chev { margin-left: auto; color: var(--d-muted); }
.brief { margin-top: .9rem; padding: 1.1rem; border-radius: 18px; background: var(--d-card); border: 1px solid var(--d-line); border-top: 2px solid var(--orange); }
.brief-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.brief-top small { display: block; font: 700 .62rem var(--head); color: var(--orange); text-transform: uppercase; letter-spacing: .1em; }
.brief-top strong { font: 700 .92rem var(--head); }
.brief .mi, .player .mi, .why .mi { background: color-mix(in srgb, var(--c) 16%, transparent); border-color: color-mix(in srgb, var(--c) 35%, transparent); }
.time { margin-left: auto; padding: .2rem .55rem; border-radius: 999px; font-size: .66rem; font-weight: 600; color: var(--d-muted); border: 1px solid var(--d-line); white-space: nowrap; }
.bf-lbl { margin-top: .8rem; font: 700 .62rem var(--head); text-transform: uppercase; letter-spacing: .12em; color: var(--d-muted); }
.bf-red { color: #FF8A7A; margin-top: 1rem; }
.bf-focus { font-size: .86rem; color: var(--d-ink); margin-top: .2rem; }
.bf-list { display: grid; gap: .45rem; margin-top: .45rem; }
.bf-list li { padding: .6rem .7rem .6rem 2rem; position: relative; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--d-line); font-size: .8rem; color: var(--d-muted); }
.bf-list li::before { content: ""; position: absolute; left: .7rem; top: .78rem; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #10B981; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 62% no-repeat; }
.bf-list b { display: block; color: var(--d-ink); font-size: .82rem; }
.tags-dark { margin-top: .45rem; }
.bf-best { margin-top: .9rem; padding: .7rem .8rem; border-radius: 10px; background: rgba(229,40,30,.1); border: 1px solid rgba(229,40,30,.3); font-size: .78rem; color: #FFC9C0; }
.bf-best b { color: #FF8A7A; }

.player { padding: 1.25rem; border-radius: 22px; background: var(--d-card-2); border: 1px solid var(--d-line); border-top: 3px solid var(--red); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.pl-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.pl-head small { display: block; font: 700 .64rem var(--head); color: #FF8A7A; text-transform: uppercase; letter-spacing: .1em; }
.pl-head h3 { font: 800 1.2rem/1.2 var(--head); }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; background: rgba(229,40,30,.14); color: #FF8A7A; font: 700 .66rem var(--head); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.pl-stage { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--d-line); border-radius: 16px; overflow: hidden; background: #fff; cursor: zoom-in; aspect-ratio: 16 / 9.4; }
.pl-stage img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .35s var(--ease), transform .9s var(--ease); }
.pl-stage img.swap { opacity: 0; transform: scale(1.03); }
.pl-stage:hover img { transform: scale(1.02); }
.pl-chip { position: absolute; z-index: 2; padding: .3rem .65rem; border-radius: 8px; font: 700 .64rem var(--head); text-transform: uppercase; letter-spacing: .08em; color: #fff; background: rgba(15,15,20,.85); border-left: 3px solid var(--red); }
.c1 { left: .8rem; top: .8rem; } .c2 { left: .8rem; top: 2.8rem; border-left-color: var(--orange); }
.pl-zoom { position: absolute; left: .8rem; bottom: .8rem; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(15,15,20,.85); color: #fff; font-size: .74rem; font-weight: 600; transition: background-color .3s; }
.pl-stage:hover .pl-zoom { background: var(--red); }
.pl-bar { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; font: 700 .6rem var(--head); text-transform: uppercase; letter-spacing: .12em; color: var(--d-muted); }
.pl-bar i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.pl-bar b { display: block; height: 100%; width: 30%; border-radius: 4px; background: linear-gradient(90deg, var(--red), var(--orange)); transition: width .6s var(--ease); }
.see { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.see li { padding: .28rem .65rem; border-radius: 8px; font-size: .72rem; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid var(--d-line); color: #D8D8E2; }
.see li b { color: #FF8A7A; margin-right: .3rem; }
.pl-desc { margin-top: 1rem; font-size: .9rem; color: var(--d-muted); }
.pl-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; margin-top: 1.1rem; }
.fade { animation: fadeUp .5s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

.why-wrap { margin-top: clamp(3.5rem, 6vw, 5rem); padding-top: clamp(3rem, 5vw, 4rem); border-top: 1px solid var(--d-line); }
.why { display: grid; gap: 1rem; }
@media (min-width: 680px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .why { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.why article { padding: 1.4rem; border-radius: 18px; background: var(--d-card); border: 1px solid var(--d-line); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.why article:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--c) 70%, transparent); }
.w-top { display: flex; justify-content: space-between; align-items: center; }
.w-top b { font: 900 1.9rem var(--head); color: rgba(255,255,255,.07); }
.why h3 { margin-top: .9rem; font: 800 1.05rem var(--head); }
.why p { margin-top: .35rem; font-size: .86rem; color: var(--d-muted); }

/* Reviews */
.rev-feature { position: relative; max-width: 820px; margin: 0 auto; display: grid; gap: 1.5rem; padding: 1.5rem; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh); overflow: hidden; }
.rev-feature::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--grad); }
@media (min-width: 700px) { .rev-feature { grid-template-columns: 260px 1fr; align-items: center; padding: 1.75rem; } }
.rev-feature video { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 16px; background: #000; }
.stars { color: #F59E0B; letter-spacing: .15em; font-size: 1.05rem; }
.rev-body h3 { margin-top: .3rem; font: 900 1.6rem var(--head); }
.rev-role { color: var(--red); font-weight: 600; font-size: .9rem; }
.rev-note { margin-top: .8rem; color: var(--ink-2); font-style: italic; }
.rev-row { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 280px); gap: 1rem; margin: 1.5rem calc(var(--gut) * -1) 0; padding: 0 var(--gut) .5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); }
@media (min-width: 900px) { .rev-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 1.5rem 0 0; padding: 0; } }
.rev-card { scroll-snap-align: start; border-radius: 18px; overflow: hidden; background: #14141C; border: 1px solid #22222E; color: #fff; transition: transform .35s var(--ease), box-shadow .35s; }
.rev-card:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -24px rgba(0,0,0,.6); }
.rev-card video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #000; }
.rev-card figcaption { padding: .85rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.rev-card strong { font: 800 1rem var(--head); }
.rev-card span { font-size: .75rem; color: #FF8A7A; font-weight: 600; }
.leave { max-width: 560px; margin: 2rem auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: 18px; background: #14141C; border-top: 3px solid var(--red); color: #fff; box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); }
.leave h3 { font: 800 1.1rem var(--head); margin-top: .2rem; }
.leave h3 span { color: #FF6B5B; font-style: italic; }
.leave p:not(.lbl) { font-size: .8rem; color: var(--d-muted); max-width: 22rem; }

/* Contact */
.contact { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .contact { grid-template-columns: .9fr 1.1fr; gap: 3.5rem; } }
.c-left .sub { margin-bottom: 1.5rem; }
.cc { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; margin-top: .7rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 20px -16px rgba(0,0,0,.3); transition: transform .3s var(--ease), border-color .3s; }
.cc:hover { transform: translateX(4px); border-color: #FAD1CC; }
.cc span:last-child { display: grid; font-weight: 700; font-size: .92rem; word-break: break-word; }
.cc small { font: 700 .62rem var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.sched { margin-top: 1.25rem; padding: 1.1rem; border-radius: 18px; background: #fff; border: 1.5px solid #FAD1CC; box-shadow: 0 14px 30px -22px rgba(229,40,30,.6); }
.sched-top { display: flex; gap: .75rem; align-items: center; margin-bottom: .9rem; }
.sched-top strong { display: block; font: 800 .95rem var(--head); }
.sched-top small { color: var(--muted); font-size: .78rem; }
.form { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh); }
@media (min-width: 620px) { .form { grid-template-columns: 1fr 1fr; } .f-full { grid-column: 1 / -1; } }
.form h3 { font: 900 1.35rem var(--head); }
.f-sub { font-size: .82rem; color: var(--muted); }
.f { display: grid; gap: .35rem; }
.f label { font-weight: 600; font-size: .8rem; color: var(--ink-2); }
.f input, .f select, .f textarea { width: 100%; min-height: 48px; padding: .7rem .9rem; border-radius: 12px; border: 1.5px solid var(--line); background: #FDFBFA; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.f textarea { min-height: 120px; resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: #A8A2A0; }
.f select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6B78' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(229,40,30,.12); }
.f.bad input, .f.bad textarea { border-color: var(--red); }
.f.ok input, .f.ok textarea { border-color: #22C55E; }
.err { display: none; font-size: .78rem; color: var(--red-2); }
.f.bad .err { display: block; }
.status { margin-top: .6rem; font-size: .88rem; color: var(--ink-2); text-align: center; }
.status.good { color: var(--green); } .status.bad { color: var(--red-2); }

/* Footer */
.ftr { color: #fff; padding: 3.5rem 0 1.25rem; background: linear-gradient(110deg, #E5281E 0%, #F05A1A 45%, #EE3B2E 70%, #D91E3A 100%); position: relative; overflow: hidden; }
.ftr::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 60% at 20% 20%, rgba(255,255,255,.12), transparent 70%); pointer-events: none; }
.ftr-grid { position: relative; display: grid; gap: 2rem; }
@media (min-width: 640px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ftr-grid { grid-template-columns: 1.4fr .9fr 1.1fr 1.2fr; } }
.ftr-id { display: flex; align-items: center; gap: .75rem; }
.ftr-id img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid rgba(255,255,255,.6); }
.ftr-id strong { display: block; font: 800 1.05rem var(--head); }
.ftr-id small { font: 700 .66rem var(--head); text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
.ftr-about p { margin-top: .9rem; font-size: .86rem; opacity: .92; max-width: 22rem; }
.ftr-chip { display: inline-block; margin-top: .9rem; padding: .3rem .75rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); }
.ftr h4 { font: 800 .8rem var(--head); text-transform: uppercase; letter-spacing: .12em; margin-bottom: .9rem; }
.ftr ul { display: grid; gap: .4rem; font-size: .86rem; }
.ftr ul a { opacity: .9; transition: opacity .2s, padding-left .2s; } .ftr ul a:hover { opacity: 1; padding-left: 3px; }
.bul li { position: relative; padding-left: 1rem; } .bul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #FDE68A; }
.fc { display: flex; gap: .65rem; align-items: center; margin-bottom: .7rem; font-size: .86rem; font-weight: 600; word-break: break-word; }
.fci { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.18); flex-shrink: 0; }
.fc small { display: block; font: 700 .6rem var(--head); text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.ftr-bottom { position: relative; margin-top: 2.5rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.25); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; font-size: .8rem; }
.ftr-bottom i { margin: 0 .4rem; opacity: .6; font-style: normal; }
.totop { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: var(--red); box-shadow: var(--sh-red); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { transform: translateY(-3px); }

/* Lightbox */
.lb { margin: auto; border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); overflow: visible; }
.lb::backdrop { background: rgba(8,8,12,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb img { max-height: 82vh; width: auto; margin-inline: auto; border-radius: 14px; }
.lb p { text-align: center; color: #fff; margin-top: .75rem; font-weight: 600; }
.lb-x { position: absolute; top: -16px; right: -16px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--red); color: #fff; display: grid; place-items: center; cursor: pointer; }
@media (max-width: 640px) { .lb-x { top: -54px; right: 0; } }

/* Reveal */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* Service-line popups */
.svm { margin: auto; border: 0; padding: 0; background: transparent; color: var(--d-ink); width: min(580px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: visible; }
.svm::backdrop { background: rgba(5,5,10,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.svm[open] .svm-card { animation: svmIn .45s var(--ease) both; }
.svm[open]::backdrop { animation: fadeIn .3s ease both; }
@keyframes svmIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes fadeIn { from { opacity: 0; } }
.svm-card { position: relative; overflow: hidden auto; max-height: calc(100dvh - 2rem); padding: clamp(1.4rem, 4vw, 2.5rem); border-radius: 28px; background: #15161C; border: 1px solid rgba(255,255,255,.08); border-top: 3px solid color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); scrollbar-width: thin; }
.svm-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.b1 { width: 240px; height: 240px; right: -50px; top: -50px; background: color-mix(in srgb, var(--c) 22%, transparent); }
.b2 { width: 240px; height: 240px; left: -60px; bottom: -80px; background: rgba(255,255,255,.03); }
.svm-card > *:not(.svm-blob) { position: relative; z-index: 1; }
.svm-x { position: absolute !important; right: 1.1rem; top: 1.1rem; z-index: 2 !important; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--d-muted); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, color .2s; }
.svm-x:hover { background: rgba(255,255,255,.08); color: #fff; }
.svm-head { display: flex; align-items: center; gap: .9rem; padding-right: 2.5rem; }
.svm-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.svm-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svm-line { font: 800 .68rem var(--head); text-transform: uppercase; letter-spacing: .12em; color: var(--c); }
.svm-head h3 { font: 900 clamp(1.35rem, 1.1rem + 1vw, 1.65rem)/1.15 var(--head); color: #fff; }
.svm-sub { margin-top: 1.1rem; color: var(--d-muted); font-size: .95rem; }
.svm-desc { margin-top: 1rem; color: #E4E4EC; font-size: .97rem; line-height: 1.6; }
.svm-lbl { margin-top: 1.5rem; font: 800 .74rem var(--head); text-transform: uppercase; letter-spacing: .12em; color: #fff; }
.svm-who { margin-top: .5rem; color: #D6D6E0; font-size: .95rem; }
.svm-inc { display: grid; gap: .6rem; margin-top: .75rem; }
@media (min-width: 520px) { .svm-inc { grid-template-columns: 1fr 1fr; } }
.svm-inc li { display: flex; align-items: center; gap: .65rem; padding: .8rem .9rem; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.1); font-size: .86rem; font-weight: 500; line-height: 1.35; color: #EDEDF3; }
.svm[open] .svm-inc li { animation: svmItem .45s var(--ease) both; animation-delay: calc(.12s + var(--k, 0) * .045s); }
.svm-inc .i { width: 18px; height: 18px; color: var(--c); }
.svm-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.svm-tags li { padding: .4rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.svm-btn { display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; min-height: 52px; margin-top: 1rem; border-radius: 14px; font: 700 1rem var(--head); transition: transform .25s var(--ease), filter .25s, background-color .25s; }
.svm-btn:first-of-type { margin-top: 2rem; }
.svm-btn .i { transition: transform .25s var(--ease); }
.svm-btn:hover .i { transform: translateX(4px); }
.svm-ghost { color: var(--c); border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.svm-ghost:hover { background: color-mix(in srgb, var(--c) 18%, transparent); }
.svm-cta { color: #fff; background: linear-gradient(90deg, #E5432A, #F47410); box-shadow: 0 14px 30px -12px rgba(244,116,16,.6); }
.svm-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
body.svm-open { overflow: hidden; }
@keyframes svmItem { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Service detail pages ---------- */
.dt-page { background: radial-gradient(70% 40% at 85% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%), #F7FAF9; }
.dt { padding: calc(var(--hdr) + 2.5rem) 0 5rem; }
.dt-wrap { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: var(--gut); }
.dt-back { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); font-weight: 500; transition: color .2s; }
.dt-back:hover { color: var(--ink); }
.dt-chip { display: inline-block; margin-left: .75rem; padding: .25rem .7rem; border-radius: 999px; font: 700 .68rem var(--head); text-transform: uppercase; letter-spacing: .08em; color: color-mix(in srgb, var(--c) 80%, #000); background: color-mix(in srgb, var(--c) 14%, #fff); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.dt-h1 { text-transform: none; margin-top: 1.5rem; font: 900 clamp(2.1rem, 1.4rem + 3vw, 3.2rem)/1.05 var(--head); letter-spacing: -.025em; }
.dt-sub { margin-top: .5rem; font: 700 1rem var(--head); color: var(--c); }
.dt-lead { margin-top: 1rem; color: var(--ink-2); font-size: 1.05rem; max-width: 40rem; }
.dt-list { display: grid; gap: 1.1rem; margin-top: 2.5rem; }
.dt-card { position: relative; padding: 1.5rem 1.6rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 34px -26px rgba(10,30,20,.35); transition: transform .35s var(--ease), box-shadow .35s; }
.dt-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(10,30,20,.4); }
.dt-num { position: absolute; right: 1.4rem; top: .9rem; font: 900 2.4rem/1 var(--head); color: color-mix(in srgb, var(--c) 22%, #fff); }
.dt-card h2 { display: flex; align-items: center; gap: .7rem; padding-right: 3.5rem; font: 800 1.12rem var(--head); }
.dt-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--c) 12%, #fff); }
.dt-ic svg { width: 17px; height: 17px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dt-p { margin-top: .9rem; color: var(--ink-2); font-size: .94rem; }
.dt-ticks { display: grid; gap: .55rem 1.25rem; margin-top: 1rem; }
@media (min-width: 620px) { .dt-ticks { grid-template-columns: 1fr 1fr; } }
.dt-ticks li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; color: var(--ink-2); }
.dt-ticks .i { width: 17px; height: 17px; margin-top: .15rem; color: var(--c); }
.dt-steps { display: grid; gap: .8rem; margin-top: 1.1rem; }
.dt-steps li { display: flex; gap: .8rem; align-items: center; font-size: .92rem; color: var(--ink-2); }
.dt-steps b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font: 800 .75rem var(--head); color: #fff; background: var(--c); box-shadow: 0 6px 14px -6px var(--c); }
.dt-steps strong { color: var(--ink); }
.dt-cta { margin-top: 2rem; padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: 22px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 85%, #000) , var(--c) 60%, color-mix(in srgb, var(--c) 70%, #7DE3C0)); box-shadow: 0 30px 60px -30px var(--c); }
.dt-cta h2 { font: 900 1.6rem var(--head); }
.dt-cta p { margin-top: .5rem; opacity: .92; max-width: 34rem; }
.dt-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.dt-btn-w, .dt-btn-o { display: inline-flex; align-items: center; gap: .45rem; padding: .75rem 1.2rem; border-radius: 999px; font: 700 .88rem var(--head); transition: transform .25s var(--ease), background-color .25s; }
.dt-btn-w { background: #fff; color: var(--ink); }
.dt-btn-o { border: 1.5px solid rgba(255,255,255,.6); color: #fff; background: rgba(255,255,255,.1); }
.dt-btn-w:hover, .dt-btn-o:hover { transform: translateY(-2px); }
.dt-btn-o:hover { background: rgba(255,255,255,.2); }
.dt-cta-back { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; font-size: .85rem; opacity: .9; }
.dt-cta-back:hover { opacity: 1; }
.dt-page .ftr { padding: 1.4rem 0; }
@media (max-width: 520px) { .dt-chip { margin: .75rem 0 0; display: table; } .dt-btn-w, .dt-btn-o { width: 100%; justify-content: center; } }

/* ---------- Testimonial showreel ---------- */
.reel { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 2rem; align-items: center; max-width: 1040px; margin: 0 auto; padding: clamp(1.25rem, 4vw, 2.75rem); border-radius: 30px; color: var(--d-ink);
  background: radial-gradient(60% 70% at 15% 30%, rgba(229,40,30,.28), transparent 70%), radial-gradient(50% 60% at 95% 90%, rgba(249,115,22,.18), transparent 70%), #0E0E16; box-shadow: 0 40px 90px -40px rgba(20,5,5,.7); }
.reel::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--grad); }
@media (min-width: 820px) { .reel { grid-template-columns: minmax(260px, 340px) 1fr; gap: 3rem; } }
.reel-media { display: grid; place-items: center; }
.reel-phone { position: relative; width: min(320px, 100%); aspect-ratio: 9 / 16; border-radius: 30px; padding: 8px; background: linear-gradient(160deg, #2A2A36, #15151E); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.8), 0 0 80px -10px rgba(229,40,30,.35); }
.reel-phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 23px; background: #000; display: block; }
.reel-play { position: absolute; inset: 8px; border: 0; border-radius: 23px; cursor: pointer; display: grid; place-items: center; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45)); transition: opacity .35s var(--ease); }
.reel-play svg { position: relative; z-index: 1; width: 76px; height: 76px; padding: 22px 20px 22px 26px; border-radius: 50%; fill: #fff; background: linear-gradient(135deg, var(--red), var(--orange)); box-shadow: 0 16px 36px -10px rgba(229,40,30,.8); transition: transform .3s var(--ease); }
.reel-play:hover svg { transform: scale(1.08); }
.reel-ring { position: absolute; width: 76px; height: 76px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); animation: reelPulse 2.2s ease-out infinite; }
@keyframes reelPulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
.reel.playing .reel-play { opacity: 0; pointer-events: none; }
.reel-dur { position: absolute; right: 20px; top: 20px; padding: .25rem .6rem; border-radius: 999px; font: 700 .72rem var(--head); color: #fff; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .3s; }
.reel.playing .reel-dur { opacity: 0; }
.reel-kicker { display: inline-flex; align-items: center; gap: .5rem; font: 800 .72rem var(--head); text-transform: uppercase; letter-spacing: .14em; color: #FF8A7A; }
.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(229,40,30,.25); animation: blink 1.4s infinite; }
.reel-body h3 { margin-top: .7rem; font: 900 clamp(1.7rem, 1.2rem + 2vw, 2.4rem)/1.08 var(--head); letter-spacing: -.02em; color: #fff; }
.reel-text { margin-top: .9rem; color: var(--d-muted); max-width: 30rem; }
.reel-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1rem 2rem; margin-top: 1.6rem; padding: 1rem 0; border-block: 1px solid rgba(255,255,255,.08); }
.reel-stats strong { display: block; font: 900 1.5rem/1 var(--head); color: #fff; }
.reel-stats .stars-s { color: #F59E0B; font-size: 1.05rem; letter-spacing: .1em; line-height: 1.4; }
.reel-stats span { font-size: .75rem; color: var(--d-muted); }
.reel-faces { display: flex; margin-top: 1.4rem; }
.reel-faces li { display: grid; justify-items: center; gap: .35rem; margin-right: .8rem; }
.reel-faces img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center 25%; border: 2px solid #0E0E16; box-shadow: 0 0 0 2px rgba(229,40,30,.6); transition: transform .3s var(--ease); }
.reel-faces li:hover img { transform: translateY(-3px); }
.reel-faces span { font-size: .72rem; font-weight: 600; color: var(--d-muted); }
.reel-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
@media (max-width: 479px) { .reel-actions .btn { flex: 1 1 100%; } .reel-stats { grid-template-columns: repeat(3, 1fr); gap: .75rem; } }
.rev-more { margin-top: 2.5rem; text-align: center; font: 700 .74rem var(--head); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); display: flex; gap: 1rem; align-items: center; justify-content: center; }
.rev-more::before, .rev-more::after { content: ""; width: 40px; height: 1px; background: var(--line); }
.rev-row { margin-top: 1.25rem; }

/* ---------- Booking calendar popup ---------- */
.cal { margin: auto; border: 0; padding: 0; background: transparent; width: min(760px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow: visible; }
.cal::backdrop { background: rgba(8,8,14,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cal[open] .cal-card { animation: svmIn .4s var(--ease) both; }
.cal-card { display: flex; flex-direction: column; max-height: calc(100dvh - 1.5rem); border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); border-top: 4px solid var(--red); }
.cal-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem .7rem 1.25rem; }
.cal-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #FDECEA; flex-shrink: 0; }
.cal-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal-head strong { display: block; font: 800 1.05rem var(--head); }
.cal-head small { font-size: .8rem; color: var(--muted); }
.cal-x { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
.cal-x:hover { background: #FDECEA; color: var(--red); }
.cal-steps { display: flex; gap: .5rem; padding: 0 1.25rem .8rem; }
.cal-steps span { padding: .28rem .75rem; border-radius: 999px; font: 700 .72rem var(--head); color: var(--muted); background: var(--soft); border: 1px solid var(--line); transition: all .3s; }
.cal-steps span.on { color: #fff; background: var(--red); border-color: var(--red); }
.cal-body { position: relative; flex: 1; min-height: 0; border-top: 1px solid var(--line); }
.cal-body iframe { display: block; width: 100%; height: min(680px, calc(100dvh - 12rem)); border: 0; }
.cal-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .8rem; color: var(--muted); font-size: .9rem; background: #fff; }
.cal-loading span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #FDECEA; border-top-color: var(--red); animation: spin .9s linear infinite; }
.cal-alt { display: block; padding: .7rem; text-align: center; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--line); }
.cal-alt:hover { color: var(--red); }

/* Honeypot + highlighted main client in the strip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mq-track span.mq-main { color: var(--red); filter: none; }

/* Brand logo */
.brand .brand-logo { width: auto; height: 40px; border-radius: 0 !important; box-shadow: none !important; object-fit: contain !important; transition: transform .3s var(--ease); }
.brand:hover .brand-logo { transform: scale(1.03); }
@media (max-width: 400px) { .brand .brand-logo { height: 32px; } }
.ftr-id .ftr-logo { width: auto; height: 42px; border: 0; border-radius: 0; object-fit: contain; }

/* ---------- Thank-you page ---------- */
.ty-page { background: #fff; }
.ty-hero { position: relative; padding: calc(var(--hdr) + 3rem) 0 3rem; text-align: center; overflow: hidden;
  background: radial-gradient(55% 70% at 50% 0%, rgba(249,115,22,.14), transparent 70%), radial-gradient(40% 50% at 10% 30%, rgba(229,40,30,.07), transparent 70%), linear-gradient(180deg, #FFF8F4, #fff); }
.ty-hero-in { display: grid; justify-items: center; }
.ty-check { width: 84px; height: 84px; margin-bottom: 1.25rem; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 10px rgba(34,197,94,.08), 0 20px 40px -18px rgba(22,163,74,.6); }
.ty-check svg { width: 60px; height: 60px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ty-check circle { stroke: #22C55E; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: tyDraw .7s var(--ease) .1s forwards; }
.ty-check path { stroke: #16A34A; stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: tyDraw .45s var(--ease) .65s forwards; }
.ty-check.sm { width: 60px; height: 60px; margin: 0 auto .8rem; } .ty-check.sm svg { width: 42px; height: 42px; }
@keyframes tyDraw { to { stroke-dashoffset: 0; } }
.ty-h1 { margin-top: 1rem; font: 900 clamp(2rem, 1.3rem + 3vw, 3.3rem)/1.08 var(--head); letter-spacing: -.025em; max-width: 46rem; text-wrap: balance; }
.ty-h1 .grad-text { display: block; }
.ty-lead { margin-top: 1rem; color: var(--ink-2); font-size: 1.06rem; max-width: 38rem; }
.ty-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2rem; }
.ty-steps li { display: flex; align-items: center; gap: .65rem; padding: .6rem 1rem .6rem .6rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-align: left; box-shadow: 0 8px 20px -16px rgba(0,0,0,.3); }
.ty-steps span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 .8rem var(--head); color: var(--muted); background: var(--soft); border: 1px solid var(--line); flex-shrink: 0; }
.ty-steps strong { display: block; font: 800 .86rem var(--head); }
.ty-steps small { font-size: .72rem; color: var(--muted); }
.ty-steps li.done span { color: #fff; background: #22C55E; border-color: #22C55E; font-size: 0; }
.ty-steps li.done span::after { content: "✓"; font-size: .85rem; }
.ty-steps li.now { border-color: #FAD1CC; box-shadow: 0 0 0 3px rgba(229,40,30,.08); }
.ty-steps li.now span { color: #fff; background: var(--red); border-color: var(--red); animation: ping 2s infinite; }

.ty-book { padding: 1rem 0 5rem; }
.ty-book-in { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 980px) { .ty-book-in { grid-template-columns: 340px 1fr; gap: 2rem; } .ty-side { position: sticky; top: calc(var(--hdr) + 1.5rem); } }
.ty-side { padding: 1.6rem; border-radius: 24px; color: var(--d-ink); background: radial-gradient(70% 50% at 0% 0%, rgba(229,40,30,.3), transparent 70%), #0E0E16; box-shadow: 0 30px 60px -30px rgba(20,5,5,.7); }
.ty-kicker { display: inline-flex; align-items: center; gap: .5rem; font: 800 .7rem var(--head); text-transform: uppercase; letter-spacing: .14em; color: #FF8A7A; }
.ty-side h2 { margin-top: .6rem; font: 900 1.45rem/1.15 var(--head); color: #fff; }
.ty-list { display: grid; gap: .9rem; margin-top: 1.25rem; }
.ty-list li { display: flex; gap: .8rem; }
.ty-list b { font: 900 .9rem var(--head); color: #FF8A7A; padding-top: .1rem; }
.ty-list strong { display: block; font: 700 .95rem var(--head); color: #fff; }
.ty-list span { font-size: .82rem; color: var(--d-muted); }
.ty-meta { display: grid; gap: .55rem; margin-top: 1.4rem; padding: 1rem 0; border-block: 1px solid rgba(255,255,255,.08); }
.ty-meta div { display: flex; align-items: center; gap: .6rem; font-size: .86rem; color: #E4E4EC; }
.ty-meta .i { color: #FF8A7A; }
.ty-host { display: flex; gap: .75rem; align-items: center; margin-top: 1.2rem; }
.ty-host img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 20%; box-shadow: 0 0 0 2px rgba(229,40,30,.6); }
.ty-host strong { display: block; font: 800 .92rem var(--head); color: #fff; }
.ty-host span { font-size: .75rem; color: var(--d-muted); }

.ty-cal { position: relative; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); box-shadow: 0 30px 70px -36px rgba(20,10,10,.45); }
.ty-cal-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.ty-cal-head strong { display: block; font: 800 1.02rem var(--head); }
.ty-cal-head small { font-size: .78rem; color: var(--muted); }
.ty-live { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font: 700 .7rem var(--head); color: #15803D; background: #DCFCE7; white-space: nowrap; }
.ty-live i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; animation: ping 2s infinite; }
@media (max-width: 520px) { .ty-live { display: none; } }
.ty-cal-body { position: relative; }
.ty-cal-body iframe { display: block; width: 100%; height: 720px; border: 0; }
@media (max-width: 640px) { .ty-cal-body iframe { height: 980px; } }
.ty-booked { position: absolute; inset: 70px 0 auto; margin: 0 auto; width: min(420px, 90%); padding: 1.5rem; border-radius: 20px; text-align: center; background: #fff; border: 1px solid #BBF7D0; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); animation: svmIn .4s var(--ease) both; }
.ty-booked h3 { font: 900 1.4rem var(--head); }
.ty-booked p { margin-top: .4rem; color: var(--ink-2); font-size: .92rem; }

.ty-more { padding: 0 0 4.5rem; }
.ty-more-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.5rem 1.75rem; border-radius: 22px; background: var(--soft); border: 1px solid var(--line); }
.ty-more h2 { font: 900 1.3rem var(--head); }
.ty-more p { color: var(--muted); font-size: .92rem; }
.ty-more-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 520px) { .ty-more-btns .btn { flex: 1 1 100%; } }
.ty-page .ftr { padding: 1.4rem 0; }
.ty-h1 { text-transform: none; }
.ty-h1 #tyName { display: inline; }
@media (max-width: 979px) { .ty-cal { order: -1; } }

/* ---------- Booked (call confirmed) page ---------- */
.tag-green { background: #DCFCE7; color: #15803D; border-color: #BBF7D0; }
.bk-hero { position: relative; }
.bk-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bk-confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: bkFall 3s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes bkFall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), 520px) rotate(var(--r)); } }
.bk-main { padding: 1rem 0 3rem; }
.bk-grid { display: grid; gap: 1.25rem; }
@media (min-width: 960px) {
  .bk-grid { grid-template-columns: 1.15fr .85fr; grid-template-areas: "next host" "prep host" "prep change"; align-items: start; }
  .bk-next { grid-area: next; } .bk-prep { grid-area: prep; } .bk-host { grid-area: host; } .bk-change { grid-area: change; }
}
.bk-card { padding: 1.5rem 1.6rem; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 40px -28px rgba(20,10,10,.35); --c: var(--red); }
.bk-card h2 { display: flex; align-items: center; gap: .7rem; font: 800 1.15rem var(--head); }
.bk-timeline { display: grid; gap: 1rem; margin-top: 1.25rem; position: relative; }
.bk-timeline::before { content: ""; position: absolute; left: 14px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(var(--red), var(--orange), #22C55E); opacity: .35; }
.bk-timeline li { position: relative; display: flex; gap: .9rem; }
.bk-timeline b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font: 800 .8rem var(--head); color: #fff; background: linear-gradient(135deg, var(--red), var(--orange)); box-shadow: 0 6px 14px -6px rgba(229,40,30,.7); position: relative; z-index: 1; }
.bk-timeline strong { display: block; font: 800 .98rem var(--head); }
.bk-timeline span { font-size: .88rem; color: var(--ink-2); }
.bk-ticks .i { color: #16A34A; }
.bk-host { border-radius: 22px; overflow: hidden; color: var(--d-ink); background: radial-gradient(80% 50% at 0% 0%, rgba(229,40,30,.3), transparent 70%), #0E0E16; box-shadow: 0 30px 60px -30px rgba(20,5,5,.7); }
.bk-host > img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 22%; }
.bk-host-body { padding: 1.3rem 1.4rem 1.5rem; display: grid; gap: .3rem; }
.bk-host-body > strong { font: 900 1.25rem var(--head); color: #fff; margin-top: .3rem; }
.bk-host-body > span { font-size: .82rem; color: var(--d-muted); }
.bk-host-body > p:not(.ty-kicker) { margin-top: .5rem; font-size: .9rem; color: #D6D6E0; }
.bk-contact { display: flex; gap: .6rem; margin-top: 1rem; }
.bk-contact a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .65rem; border-radius: 12px; font: 700 .85rem var(--head); color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background-color .25s, border-color .25s; }
.bk-contact a:hover { background: rgba(229,40,30,.18); border-color: rgba(229,40,30,.6); }
.bk-reel-wrap { padding: 0 0 4.5rem; }
.bk-reel { display: grid; gap: 1.5rem; align-items: center; padding: 1.75rem; border-radius: 26px; color: var(--d-ink); overflow: hidden; background: radial-gradient(60% 80% at 100% 50%, rgba(249,115,22,.25), transparent 70%), #0E0E16; }
@media (min-width: 760px) { .bk-reel { grid-template-columns: 1fr 200px; padding: 2rem 2.25rem; } }
.bk-reel h2 { margin-top: .5rem; font: 900 clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem)/1.15 var(--head); color: #fff; }
.bk-reel-copy > p:not(.ty-kicker) { margin-top: .5rem; color: var(--d-muted); }
.bk-reel .ty-more-btns { margin-top: 1.2rem; }
.bk-reel img { width: 100%; max-width: 200px; justify-self: center; aspect-ratio: 9 / 14; object-fit: cover; border-radius: 18px; box-shadow: 0 0 0 6px rgba(255,255,255,.05), 0 20px 40px -20px rgba(0,0,0,.8); transform: rotate(3deg); }
@media (max-width: 759px) { .bk-reel img { display: none; } }
.ty-h1 #bkName { display: inline; }

/* ---------- About page ---------- */
.ab-page { background: #fff; }
.ab-hero { padding: calc(var(--hdr) + 2.5rem) 0 2rem; text-align: center;
  background: radial-gradient(55% 80% at 50% 0%, rgba(249,115,22,.13), transparent 70%), radial-gradient(40% 60% at 0% 40%, rgba(229,40,30,.07), transparent 70%), linear-gradient(180deg, #FFF8F4, #fff); }
.ab-hero .wrap { display: grid; justify-items: center; }
.ab-crumb { display: flex; gap: .5rem; font-size: .82rem; color: var(--muted); margin-bottom: 1.1rem; }
.ab-crumb a:hover { color: var(--red); }
.ab-crumb [aria-current] { color: var(--ink); font-weight: 600; }
.ab-h1 { margin-top: 1rem; font: 900 clamp(2.3rem, 1.4rem + 4vw, 4rem)/1.04 var(--head); letter-spacing: -.03em; max-width: 52rem; text-wrap: balance; }
.ab-lead { margin-top: 1.25rem; max-width: 46rem; color: var(--ink-2); font-size: 1.08rem; }
.ab-jumps { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.75rem; }
@media (max-width: 479px) { .ab-jumps .btn { flex: 1 1 100%; } }

.ab-visual { padding: 1.5rem 0 4rem; }
.ab-collage { position: relative; height: clamp(300px, 42vw, 520px); border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 80% at 50% 100%, rgba(229,40,30,.35), transparent 70%), #0E0E16; box-shadow: 0 40px 90px -40px rgba(20,5,5,.7); }
.cl { position: absolute; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); transition: transform .8s var(--ease); }
.cl img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.cl-1 { left: 4%; top: 10%; width: 46%; aspect-ratio: 16/9; transform: rotate(-4deg); z-index: 2; }
.cl-2 { right: 4%; top: 7%; width: 42%; aspect-ratio: 16/9; transform: rotate(3deg); z-index: 1; }
.cl-3 { left: 20%; bottom: -6%; width: 40%; aspect-ratio: 16/9; transform: rotate(2deg); z-index: 3; }
.cl-4 { right: 10%; bottom: -10%; width: 34%; aspect-ratio: 16/10; transform: rotate(-3deg); z-index: 2; }
.ab-collage:hover .cl-1 { transform: rotate(-6deg) translate(-8px,-6px); }
.ab-collage:hover .cl-2 { transform: rotate(5deg) translate(8px,-6px); }
.ab-collage:hover .cl-3 { transform: rotate(0) translateY(-10px); }
.ab-collage:hover .cl-4 { transform: rotate(-5deg) translate(8px,-6px); }
.cl-badge { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 999px; font: 800 .78rem var(--head); text-transform: uppercase; letter-spacing: .1em; color: #fff; background: rgba(14,14,22,.85); border: 1px solid rgba(255,255,255,.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ab-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: -2.5rem; position: relative; z-index: 6; padding: 0 1rem; }
@media (min-width: 820px) { .ab-stats { grid-template-columns: repeat(4, 1fr); padding: 0 3rem; } }
.ab-stats > div { padding: 1.2rem 1rem; border-radius: 18px; text-align: center; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -26px rgba(20,10,10,.45); }
.ab-stats strong { display: block; font: 900 clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem)/1 var(--head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-stats > div > span { display: block; margin-top: .4rem; font-size: .8rem; color: var(--muted); }

.ab-exps { display: grid; gap: 1rem; }
@media (min-width: 640px) { .ab-exps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ab-exps { grid-template-columns: repeat(6, 1fr); } .ab-exp { grid-column: span 2; } .ab-exp:nth-child(4) { grid-column: 2 / span 2; } }
.ab-exp { padding: 1.5rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--c); transition: transform .35s var(--ease), box-shadow .35s; }
.ab-exp:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.ab-exp h3 { margin-top: 1rem; font: 800 1.15rem var(--head); }
.ab-role { font: 700 .72rem var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--c); margin: .2rem 0 .6rem; }
.ab-exp p:not(.ab-role) { font-size: .9rem; color: var(--ink-2); }

.ab-mv { display: grid; gap: 1.25rem; max-width: 980px; margin: 0 auto; }
@media (min-width: 760px) { .ab-mv { grid-template-columns: 1fr 1fr; } }
.ab-mv-card { position: relative; overflow: hidden; padding: 1.75rem; border-radius: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 7%, #fff), #fff 55%); border: 1px solid var(--line); box-shadow: var(--sh); }
.ab-mv-card h3 { margin-top: 1rem; font: 900 1.4rem var(--head); }
.ab-ticks { grid-template-columns: 1fr !important; }
.ab-ticks .i { color: var(--c); }

.ab-f { display: grid; gap: 2.5rem; align-items: center; max-width: 1040px; margin: 0 auto; }
@media (min-width: 900px) { .ab-f { grid-template-columns: 360px 1fr; gap: 3.5rem; } }
.ab-f-photo { position: relative; justify-self: center; width: min(360px, 100%); }
.ab-f-frame { padding: 8px; border-radius: 30px; background: conic-gradient(from 200deg, #E5281E, #F97316, #FBBF24, #F97316, #E5281E); box-shadow: 0 30px 70px -24px rgba(229,40,30,.55); }
.ab-f-frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 23px; border: 4px solid #0E0E16; }
.ab-avail { right: 50%; transform: translateX(50%); bottom: -14px; }
.ab-f-body h3 { font: 900 clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem) var(--head); color: #fff; }
.ab-f-title { margin-top: .2rem; color: #FF8A7A; font-weight: 600; font-size: .95rem; }
.ab-f-body > p:not(.ab-f-title) { margin-top: 1rem; color: #D6D6E0; }
.ab-f-body b { color: #fff; }
.ab-skills { margin-top: 1.25rem; }
.ab-f-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1.5rem; }
@media (min-width: 560px) { .ab-f-stats { grid-template-columns: repeat(4, 1fr); } }
.ab-f-stats > div { padding: .9rem; border-radius: 14px; background: var(--d-card); border: 1px solid var(--d-line); }
.ab-f-stats strong { display: block; font: 900 1.25rem var(--head); color: #fff; }
.ab-f-stats span { font-size: .74rem; color: var(--d-muted); }
.ab-f-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.ab-f-links a { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: 12px; font: 700 .85rem var(--head); color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background-color .25s, border-color .25s; }
.ab-f-links a:hover { background: rgba(229,40,30,.2); border-color: rgba(229,40,30,.6); }

.ab-vals { display: grid; gap: 1rem; }
@media (min-width: 640px) { .ab-vals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ab-vals { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.ab-val { padding: 1.5rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.ab-val:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.ab-val .w-top b { font: 900 1.8rem var(--head); color: color-mix(in srgb, var(--c) 25%, #fff); }
.ab-val h4 { margin-top: .9rem; font: 800 1.08rem var(--head); }
.ab-val p { margin-top: .3rem; font-size: .9rem; color: var(--ink-2); }

.ab-cta-wrap { padding: 0 0 5rem; }
.ab-cta { padding: clamp(2rem, 5vw, 3.5rem); border-radius: 28px; text-align: center; color: #fff; background: linear-gradient(115deg, #E5281E, #F05A1A 50%, #D91E3A); box-shadow: 0 30px 70px -30px rgba(229,40,30,.7); position: relative; overflow: hidden; }
.ab-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 15% 0%, rgba(255,255,255,.2), transparent 70%); pointer-events: none; }
.ab-cta h2 { position: relative; font: 900 clamp(1.7rem, 1.2rem + 2vw, 2.6rem)/1.1 var(--head); max-width: 36rem; margin: 0 auto; }
.ab-cta p { position: relative; margin-top: .7rem; opacity: .92; }
.btn-outline-w { color: #fff; border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.08); }
.btn-outline-w:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.ab-page .ftr { padding: 1.4rem 0; }
.ab-more { display: inline-flex; margin-top: 1rem; color: var(--red); }

/* ---------- Services page ---------- */
.sv-all-link { text-align: center; margin-top: 2rem; }
.sv-hero { padding-bottom: 2.5rem; }
.sv-chips { position: sticky; top: var(--hdr); z-index: 40; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block: 1px solid var(--line); }
.sv-chips-in { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding: .65rem 0; }
.sv-chips-in::-webkit-scrollbar { display: none; }
.sv-chips a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem .45rem .5rem; border-radius: 999px; font: 600 .82rem var(--head); color: var(--ink-2); background: #fff; border: 1px solid var(--line); transition: all .25s; }
.sv-chips a span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); }
.sv-chips a svg { width: 13px; height: 13px; fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-chips a:hover { border-color: var(--c); color: var(--ink); }
.sv-chips a.on { color: #fff; background: var(--c); border-color: var(--c); }
.sv-chips a.on span { background: rgba(255,255,255,.25); } .sv-chips a.on svg { stroke: #fff; }

.sv-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sv-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.sv-card { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.5rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.sv-card::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.sv-card:hover { transform: translateY(-6px); box-shadow: var(--sh); border-color: transparent; }
.sv-card:hover::after { transform: scaleX(1); }
.sv-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.sv-card-top b { font: 900 2rem var(--head); color: color-mix(in srgb, var(--c) 20%, #fff); }
.sv-card h3 { font: 800 1.2rem var(--head); }
.sv-tag { font: 700 .7rem var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--c); }
.sv-card > p:not(.sv-tag) { color: var(--ink-2); font-size: .9rem; margin-top: .3rem; }
.sv-more { margin-top: auto; padding-top: .9rem; display: inline-flex; align-items: center; gap: .35rem; font: 700 .85rem var(--head); color: var(--c); }
.sv-more .i { transition: transform .3s var(--ease); } .sv-card:hover .sv-more .i { transform: translateX(4px); }

.sv-flow { display: grid; gap: .6rem; margin-top: 2.5rem; padding: 1.25rem; border-radius: 22px; background: #0E0E16; color: #fff; }
@media (min-width: 860px) { .sv-flow { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; padding: 1.4rem 1.75rem; } }
.sv-flow div { padding: .8rem 1rem; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.sv-flow b { display: block; font: 900 1.05rem var(--head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-flow span { font-size: .78rem; color: var(--d-muted); }
.sv-flow i { justify-self: center; width: 22px; height: 22px; background: no-repeat center/100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F97316' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
@media (max-width: 859px) { .sv-flow i { transform: rotate(90deg); } }

.sv-rows { padding: 1rem 0 2rem; }
.sv-row { display: grid; gap: 2rem; align-items: center; padding: clamp(2.5rem, 5vw, 4.5rem) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hdr) + 60px); }
@media (min-width: 960px) { .sv-row { grid-template-columns: 1fr 1fr; gap: 3.5rem; } .sv-row.flip .sv-copy { order: 2; } }
.sv-num { display: flex; align-items: center; gap: .6rem; font: 700 .74rem var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--c); }
.sv-num .mi { background: color-mix(in srgb, var(--c) 12%, #fff); border-color: color-mix(in srgb, var(--c) 25%, transparent); }
.sv-num .mi svg { stroke: var(--c); }
.sv-copy h2 { margin-top: .8rem; font: 900 clamp(1.8rem, 1.3rem + 2vw, 2.6rem)/1.08 var(--head); letter-spacing: -.02em; }
.sv-desc { margin-top: .8rem; color: var(--ink-2); font-size: 1rem; }
.sv-lbl { margin-top: 1.4rem; font: 800 .72rem var(--head); text-transform: uppercase; letter-spacing: .12em; }
.sv-inc { display: grid; gap: .5rem 1rem; margin-top: .7rem; }
@media (min-width: 560px) { .sv-inc { grid-template-columns: 1fr 1fr; } }
.sv-inc li { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; color: var(--ink-2); }
.sv-inc .i { width: 17px; height: 17px; margin-top: .15rem; color: var(--c); }
.sv-best { margin-top: 1.2rem; padding: .75rem .9rem; border-radius: 12px; font-size: .88rem; color: var(--ink-2); background: color-mix(in srgb, var(--c) 7%, #fff); border-left: 3px solid var(--c); }
.sv-best b { color: var(--ink); }
.sv-tools { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.sv-tools li { padding: .25rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 600; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line); }
.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.sv-link { font: 700 .88rem var(--head); color: var(--ink-2); border-bottom: 1.5px solid var(--line); }
.sv-link:hover { color: var(--red); border-color: var(--red); }

.sv-visual { position: relative; }
.sv-visual::before { content: ""; position: absolute; inset: 8% -4% -6% 8%; border-radius: 28px; background: color-mix(in srgb, var(--c) 14%, transparent); z-index: -1; transform: rotate(3deg); transition: transform .6s var(--ease); }
.sv-row:hover .sv-visual::before { transform: rotate(5deg) scale(1.02); }
.sv-shot { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 30px 60px -30px rgba(20,10,10,.45); aspect-ratio: 16 / 10.5; }
.sv-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sv-row:hover .sv-shot img { transform: scale(1.03); }

.sv-mock { border-radius: 20px; padding: 1.25rem; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(20,10,10,.45); font-family: var(--body); }
.mk-meta { display: grid; gap: 1rem; background: linear-gradient(160deg, #EEF3FF, #fff 60%); }
@media (min-width: 560px) { .mk-meta { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.mk-post { border-radius: 14px; background: #fff; border: 1px solid #E3E8F2; overflow: hidden; box-shadow: 0 12px 24px -16px rgba(0,0,0,.3); }
.mk-ph { display: flex; gap: .55rem; align-items: center; padding: .7rem; }
.mk-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--red), var(--orange)); }
.mk-ph b { display: block; font-size: .8rem; } .mk-ph small { font-size: .68rem; color: var(--muted); }
.mk-post > p { padding: 0 .7rem .6rem; font-size: .78rem; color: var(--ink-2); }
.mk-img { height: 120px; display: grid; place-items: center; background: linear-gradient(135deg, #2563EB, #7C3AED); }
.mk-img span { font: 900 1.1rem var(--head); color: #fff; }
.mk-cta { display: flex; justify-content: space-between; align-items: center; padding: .6rem .7rem; background: #F4F6FA; font-size: .72rem; color: var(--muted); }
.mk-cta b { padding: .3rem .7rem; border-radius: 6px; background: #E4E8F0; color: var(--ink); }
.mk-kpis { display: grid; gap: .6rem; }
.mk-kpis div { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-radius: 12px; background: #fff; border: 1px solid #E3E8F2; }
.mk-kpis small { font-size: .78rem; color: var(--ink-2); font-weight: 600; }
.mk-kpis b { color: #16A34A; } .mk-kpis div:nth-child(2) b { color: #16A34A; }
.mk-google { display: grid; gap: .75rem; }
.mk-search { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 999px; border: 1px solid #DFE1E5; box-shadow: 0 4px 12px -8px rgba(0,0,0,.3); font-size: .9rem; }
.mk-search svg { width: 18px; height: 18px; fill: none; stroke: #9AA0A6; stroke-width: 2.2; stroke-linecap: round; }
.mk-res { padding: .8rem .9rem; border-radius: 12px; }
.mk-res.ad { background: #F1FBF4; border: 1px solid #C9EDD5; }
.mk-res small { font-size: .72rem; color: #4D5156; } .mk-res small b { color: #202124; }
.mk-res h5 { margin-top: .2rem; font: 600 1rem var(--body); color: #1A0DAB; }
.mk-res p { font-size: .8rem; color: #4D5156; margin-top: .15rem; }
.mk-sl { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; font-size: .78rem; color: #1A0DAB; }
.mk-res i { display: block; height: 8px; margin-top: .5rem; border-radius: 4px; background: #ECEEF1; width: 80%; } .mk-res i.s { width: 55%; }
.mk-seo { background: linear-gradient(160deg, #ECFDF5, #fff 60%); }
.mk-seo-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mk-seo-top b { font: 800 1rem var(--head); }
.mk-up { padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #15803D; background: #DCFCE7; }
.mk-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 1rem; padding-bottom: 4px; border-bottom: 1px solid #D1E7DD; }
.mk-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #34D399, #10B981); transform-origin: bottom; }
.sv-row.in-view .mk-bars i, .js .rv.in .mk-bars i { animation: growBar .9s var(--ease) both; }
.mk-bars i:nth-child(n) { animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes growBar { from { transform: scaleY(0); } }
.mk-kw { display: grid; gap: .45rem; margin-top: 1rem; }
.mk-kw div { display: flex; justify-content: space-between; padding: .55rem .8rem; border-radius: 10px; background: #fff; border: 1px solid #D1E7DD; font-size: .82rem; }
.mk-kw b { color: #15803D; }

.sv-faq-wrap { max-width: 820px; }
.sv-faq { margin-top: .75rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.sv-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; cursor: pointer; font: 800 1rem var(--head); list-style: none; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary span { position: relative; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: #FDECEA; }
.sv-faq summary span::before, .sv-faq summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; background: var(--red); border-radius: 2px; transition: transform .3s var(--ease); }
.sv-faq summary span::after { transform: rotate(90deg); }
.sv-faq[open] summary span::after { transform: rotate(0); }
.sv-faq p { padding: 0 1.25rem 1.2rem; color: var(--ink-2); font-size: .94rem; }
.sv-rows, .sv-page main { overflow-x: clip; }

/* ---------- Skills page ---------- */
.sk-hero { position: relative; overflow: hidden; padding-bottom: 0; }
.sk-orbs i { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; animation: skFloat 14s ease-in-out infinite; pointer-events: none; }
.sk-orbs i:nth-child(1) { width: 320px; height: 320px; left: -80px; top: 60px; background: rgba(229,40,30,.25); }
.sk-orbs i:nth-child(2) { width: 280px; height: 280px; right: -60px; top: 20px; background: rgba(249,115,22,.25); animation-delay: -5s; }
.sk-orbs i:nth-child(3) { width: 240px; height: 240px; left: 45%; top: 260px; background: rgba(59,169,224,.18); animation-delay: -9s; }
@keyframes skFloat { 50% { transform: translate(40px, -30px) scale(1.1); } }
.sk-hero .wrap { position: relative; }
.sk-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: 2rem; width: min(640px, 100%); }
@media (min-width: 600px) { .sk-stats { grid-template-columns: repeat(4, 1fr); } }
.sk-stats > div { padding: .9rem; border-radius: 16px; background: rgba(255,255,255,.8); border: 1px solid var(--line); box-shadow: 0 14px 30px -24px rgba(0,0,0,.4); }
.sk-stats strong { display: block; font: 900 1.8rem/1 var(--head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sk-stats strong b { font: inherit; }
.sk-stats span { font-size: .78rem; color: var(--muted); }
.sk-mq { margin-top: 3rem; padding: 1.1rem 0; display: grid; gap: .7rem; background: #0E0E16; transform: rotate(-1.5deg); margin-inline: -2%; }
.sk-mq-row { overflow: hidden; }
.sk-mq-track { display: flex; gap: .7rem; width: max-content; animation: marquee 30s linear infinite; }
.sk-mq-row.rev .sk-mq-track { animation-direction: reverse; animation-duration: 36s; }
.sk-mq-track span { padding: .5rem 1.1rem; border-radius: 999px; font: 700 .9rem var(--head); color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
.sk-mq-row:nth-child(1) .sk-mq-track span:nth-child(3n+1) { background: linear-gradient(90deg, var(--red), var(--orange)); border-color: transparent; }
.sk-mq-row.rev .sk-mq-track span:nth-child(4n+2) { color: #FFB199; border-color: rgba(229,40,30,.5); }
.sk-hero + .sec { padding-top: clamp(4.5rem, 3rem + 5vw, 7rem); }

.skcats { display: grid; gap: 1rem; }
@media (min-width: 640px) { .skcats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .skcats { grid-template-columns: repeat(4, 1fr); } .skcat:nth-child(5) { grid-column: 1 / span 1; } }
.skcat { position: relative; padding: 1.4rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.skcat:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--sh); }
.skcat::before { content: ""; position: absolute; width: 140px; height: 140px; right: -50px; top: -50px; border-radius: 50%; background: color-mix(in srgb, var(--c) 10%, transparent); transition: transform .6s var(--ease); }
.skcat:hover::before { transform: scale(1.6); }
.skcat-top { position: relative; display: flex; justify-content: space-between; align-items: center; }
.skcat-top b { font: 900 2rem var(--head); color: color-mix(in srgb, var(--c) 30%, #fff); }
.skcat .mi { background: color-mix(in srgb, var(--c) 12%, #fff); border-color: color-mix(in srgb, var(--c) 25%, transparent); }
.skcat .mi svg { stroke: var(--c); }
.skcat h3 { position: relative; margin-top: .9rem; font: 800 1.15rem var(--head); }
.skcat p { position: relative; font-size: .86rem; color: var(--muted); margin-top: .2rem; }
.skcat-bar { margin-top: 1rem; height: 6px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.skcat-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff)); transition: width 1.2s var(--ease) .2s; }
.skcat.go .skcat-bar i { width: var(--w); }
.skcat-n { display: block; margin-top: .45rem; font: 700 .72rem var(--head); color: var(--c); text-transform: uppercase; letter-spacing: .1em; }

.skf-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
.skf { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: 999px; cursor: pointer; font: 700 .85rem var(--head); color: #D8D8E2; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); transition: all .25s; }
.skf span { display: grid; } .skf svg { width: 15px; height: 15px; fill: none; stroke: var(--c, #FF8A7A); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skf small { font-size: .7rem; opacity: .6; }
.skf:hover { border-color: rgba(255,255,255,.3); color: #fff; }
.skf.on { color: #fff; background: var(--c, var(--red)); border-color: var(--c, var(--red)); box-shadow: 0 10px 24px -10px var(--c, var(--red)); }
.skf.on svg { stroke: #fff; }
.skgrid { display: grid; gap: .75rem; }
@media (min-width: 560px) { .skgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .skgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1160px) { .skgrid { grid-template-columns: repeat(4, 1fr); } }
.skc { position: relative; display: flex; gap: .8rem; align-items: center; padding: 1rem; border-radius: 16px; background: var(--d-card); border: 1px solid var(--d-line); overflow: hidden; transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.skc[hidden] { display: none; }
.skc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(220px circle at var(--mx, -100px) var(--my, -100px), color-mix(in srgb, var(--c) 28%, transparent), transparent 70%); opacity: 0; transition: opacity .3s; }
.skc:hover::before { opacity: 1; }
.skc:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--c) 80%, transparent); }
.skc > * { position: relative; }
.skc-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.skc-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--c); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.skc small { font: 700 .6rem var(--head); text-transform: uppercase; letter-spacing: .1em; color: color-mix(in srgb, var(--c) 70%, #fff); }
.skc strong { display: block; font: 700 .95rem/1.25 var(--head); color: #fff; }
.skc div > span { font-size: .74rem; color: var(--d-muted); }
.skc-ok { margin-left: auto; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid #10B981; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 62% no-repeat; }
.js .skgrid .skc { opacity: 0; transform: translateY(16px); }
.js .skgrid.in .skc { animation: skIn .6s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes skIn { to { opacity: 1; transform: none; } }
.sk-page #reviews .reel { margin-top: .5rem; }
@media (prefers-reduced-motion: reduce) { .js .skgrid .skc { opacity: 1; transform: none; } .skcat-bar i { width: var(--w); } }

/* ---------- Section CTA strips ---------- */
.cta-band { padding: clamp(1.5rem, 3vw, 2.5rem) 0; background: #fff; }
.cta-strip { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.1rem 1.25rem; border-radius: 20px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(110deg, #E5281E, #F97316, #D9A441, #3BA9E0) border-box; border: 1.5px solid transparent;
  box-shadow: 0 18px 40px -28px rgba(229,40,30,.55); }
.cta-strip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(249,115,22,.10), transparent); transform: skewX(-20deg); animation: ctaShine 6s ease-in-out infinite; pointer-events: none; }
@keyframes ctaShine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.cta-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--red), var(--orange)); box-shadow: 0 10px 20px -10px rgba(229,40,30,.7); animation: ctaBob 3s ease-in-out infinite; }
.cta-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ctaBob { 50% { transform: translateY(-3px) rotate(-4deg); } }
.cta-txt { flex: 1 1 260px; display: grid; }
.cta-txt strong { font: 800 1.08rem/1.25 var(--head); }
.cta-txt span { font-size: .88rem; color: var(--muted); }
.cta-btns { display: flex; flex-wrap: wrap; gap: .55rem; }
@media (max-width: 560px) { .cta-btns { width: 100%; } .cta-btns .btn { flex: 1 1 100%; } }
.sv-rows .cta-strip { margin: 1rem 0; }
.dt-list .cta-strip { --c: var(--red); }
@media (prefers-reduced-motion: reduce) { .cta-strip::after, .cta-ic { animation: none; } }

/* ---------- Experience page ---------- */
.ex-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: 2rem; width: min(680px, 100%); }
@media (min-width: 640px) { .ex-kpis { grid-template-columns: repeat(4, 1fr); } }
.ex-kpis > div { padding: 1rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -24px rgba(0,0,0,.4); }
.ex-kpis strong { display: block; font: 900 1.9rem/1 var(--head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ex-kpis strong b { font: inherit; }
.ex-kpis span { font-size: .78rem; color: var(--muted); }

.ex-tl { position: relative; display: grid; gap: 1.5rem; max-width: 920px; margin: 0 auto; padding-left: 64px; }
.ex-line { position: absolute; left: 23px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--line); }
.ex-line i { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(var(--red), var(--orange), #0EA5E9, #A855F7); transform-origin: top; transform: scaleY(0); transition: transform .15s linear; }
.ex-step { position: relative; }
.ex-dot { position: absolute; left: -64px; top: 1.25rem; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); transition: all .45s var(--ease); z-index: 1; }
.ex-dot svg { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s; }
.ex-step.lit .ex-dot { background: var(--c); border-color: var(--c); box-shadow: 0 12px 24px -10px var(--c); transform: scale(1.06) rotate(-6deg); }
.ex-step.lit .ex-dot svg { stroke: #fff; }
.ex-card { padding: 1.5rem 1.6rem; border-radius: 22px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--c); box-shadow: 0 16px 40px -30px rgba(20,10,10,.35); transition: transform .35s var(--ease), box-shadow .35s; }
.ex-card:hover { transform: translateX(6px); box-shadow: var(--sh); }
.ex-card-top { display: flex; justify-content: space-between; align-items: center; }
.ex-tag { padding: .25rem .7rem; border-radius: 999px; font: 700 .72rem var(--head); color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.ex-card-top b { font: 900 2rem var(--head); color: color-mix(in srgb, var(--c) 22%, #fff); }
.ex-card h3 { margin-top: .5rem; font: 900 1.4rem var(--head); }
.ex-org { font-size: .86rem; color: var(--muted); margin-bottom: .6rem; }
.ex-card > p:not(.ex-org) { color: var(--ink-2); font-size: .94rem; }
.ex-pts { display: grid; gap: .45rem 1rem; margin-top: 1rem; }
@media (min-width: 640px) { .ex-pts { grid-template-columns: 1fr 1fr; } }
.ex-pts li { display: flex; gap: .5rem; font-size: .88rem; color: var(--ink-2); }
.ex-pts .i { width: 17px; height: 17px; margin-top: .15rem; color: var(--c); }
@media (max-width: 560px) { .ex-tl { padding-left: 0; } .ex-line { display: none; } .ex-dot { position: static; margin-bottom: -.5rem; } }

.ex-cls { display: grid; gap: .75rem; }
@media (min-width: 640px) { .ex-cls { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ex-cls { grid-template-columns: repeat(3, 1fr); } }
.ex-cl { display: flex; align-items: center; gap: .8rem; padding: 1rem; border-radius: 16px; background: var(--d-card); border: 1px solid var(--d-line); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.ex-cl:hover { transform: translateY(-4px); border-color: rgba(229,40,30,.55); box-shadow: 0 16px 30px -18px rgba(229,40,30,.6); }
.ex-cl-av { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font: 900 .95rem var(--head); color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.ex-cl strong { display: block; font: 700 .95rem/1.25 var(--head); color: #fff; }
.ex-cl div > span { font-size: .76rem; color: var(--d-muted); }
.ex-cl em { margin-left: auto; font-style: normal; font-size: .66rem; font-weight: 700; color: #FFB199; text-align: right; max-width: 6.5rem; }
.ex-cl.main { border-color: rgba(229,40,30,.75); background: linear-gradient(135deg, rgba(229,40,30,.25), var(--d-card) 70%); }
.ex-cl.main .ex-cl-av { background: linear-gradient(135deg, var(--red), var(--orange)); border: 0; }
@media (min-width: 1000px) { .ex-cl.main { grid-column: span 2; } }
.ex-ind { margin-top: 2.5rem; text-align: center; }
.ex-ind > p { font: 700 .72rem var(--head); text-transform: uppercase; letter-spacing: .14em; color: var(--d-muted); margin-bottom: 1rem; }
.ex-ind-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ex-ind-track > div { display: flex; gap: .6rem; width: max-content; animation: marquee 34s linear infinite; }
.ex-ind-track span { padding: .45rem 1rem; border-radius: 999px; font: 700 .85rem var(--head); color: #E4E4EC; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); white-space: nowrap; }

.ex-prs { display: grid; gap: 1rem; }
@media (min-width: 640px) { .ex-prs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ex-prs { grid-template-columns: repeat(4, 1fr); } }
.ex-pr { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.ex-pr:hover { transform: translateY(-6px); box-shadow: var(--sh); }
.ex-pr-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); }
.ex-pr-img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 1s var(--ease); }
.ex-pr:hover .ex-pr-img img { transform: scale(1.06); }
.ex-pr-body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .2rem; }
.ex-pr-body small { font: 700 .66rem var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--red); }
.ex-pr-body strong { font: 800 1.02rem var(--head); }
.ex-pr-body span { font-size: .84rem; color: var(--muted); }
@media (min-width: 1000px) { .skcats .skcat:nth-child(5) { grid-column: auto; } }

/* ---------- Process page (3D) ---------- */
.pr-hero { text-align: left; overflow: hidden; }
.pr-hero .wrap { justify-items: stretch; }
.pr-hero-in { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1000px) { .pr-hero-in { grid-template-columns: 1fr 1fr; } }
.pr-hero-copy { display: grid; justify-items: start; }
.pr-hero .ab-crumb { justify-content: flex-start; }
.pr-hero .ab-jumps { justify-content: flex-start; }
.pr-hero .ab-h1 { text-align: left; }
.r3-scene { position: relative; height: 440px; perspective: 1100px; display: grid; place-items: center; --R: 230px; }
@media (max-width: 560px) { .r3-scene { height: 360px; --R: 150px; } }
.r3-floor { position: absolute; width: 520px; max-width: 100%; height: 520px; border-radius: 50%; bottom: -230px; transform: rotateX(78deg); background: radial-gradient(closest-side, rgba(229,40,30,.22), rgba(249,115,22,.08) 55%, transparent 72%); }
.r3 { position: relative; width: 180px; height: 210px; transform-style: preserve-3d; }
.r3-card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; padding: 1.1rem; border-radius: 22px; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 92%, #fff), color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--c) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
  transform: rotateY(calc(var(--i) * 72deg)) translateZ(var(--R)); backface-visibility: visible; transition: opacity .2s; }
.r3-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,.35), transparent 40%); pointer-events: none; }
.r3-ic { position: absolute; top: 1rem; left: 1rem; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35); }
.r3-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r3-card b { position: absolute; top: .9rem; right: 1rem; font: 900 1.8rem var(--head); color: rgba(255,255,255,.35); }
.r3-card strong { font: 900 1.45rem var(--head); }
.r3-card small { font-size: .78rem; opacity: .9; }

.ps { position: relative; height: 500vh; background: #0B0B12; color: var(--d-ink); }
.ps::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 30% at 75% 20%, rgba(229,40,30,.16), transparent 70%), radial-gradient(40% 30% at 20% 80%, rgba(249,115,22,.10), transparent 70%); pointer-events: none; }
.ps-sticky { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; overflow: hidden; }
.ps-grid { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 960px) { .ps-grid { grid-template-columns: .9fr 1.1fr; gap: 3rem; } }
.ps-texts { position: relative; min-height: 15rem; }
.ps-txt { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.ps-txt.on { opacity: 1; transform: none; pointer-events: auto; }
.ps-n { display: inline-flex; align-items: center; gap: .55rem; font: 800 .74rem var(--head); text-transform: uppercase; letter-spacing: .14em; color: var(--c); }
.ps-n span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.ps-n svg { width: 17px; height: 17px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ps-txt h2 { margin-top: .8rem; font: 900 clamp(2.4rem, 1.6rem + 3vw, 3.8rem)/1 var(--head); color: #fff; letter-spacing: -.02em; }
.ps-tag { margin-top: .4rem; font: 700 1.05rem var(--head); color: var(--c); }
.ps-d { margin-top: .9rem; color: var(--d-muted); max-width: 30rem; }
.ps-dots { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.ps-dot { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem .4rem .45rem; border-radius: 999px; cursor: pointer; font: 700 .78rem var(--head); color: var(--d-muted); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: all .3s; }
.ps-dot i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); transition: all .3s; }
.ps-dot.done i { background: var(--c); border-color: var(--c); }
.ps-dot.on { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.ps-dot.on i { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); }
.ps-bar { height: 4px; margin-top: 1rem; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.ps-bar i { display: block; height: 100%; background: linear-gradient(90deg, #E5281E, #F59E0B, #0EA5E9, #10B981, #A855F7); transform-origin: left; transform: scaleX(0); }

.iso-scene { height: min(56vh, 480px); display: grid; place-items: center; perspective: 1600px; }
.iso { --tx: 0deg; --tz: 0deg; position: relative; width: min(340px, 70vw); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(calc(56deg + var(--tx))) rotateZ(calc(-40deg + var(--tz))); transition: transform .5s var(--ease); }
.iso-base { position: absolute; inset: -8%; border-radius: 30px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px), rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); transform: translateZ(-2px); }
.iso-l { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--i) * var(--gap, 46px) + 260px)); opacity: 0; transition: transform .9s cubic-bezier(.2,.9,.25,1.15), opacity .5s; }
.iso-l.in { opacity: 1; transform: translateZ(calc(var(--i) * var(--gap, 46px))); }
.iso-l.on { transform: translateZ(calc(var(--i) * var(--gap, 46px) + var(--lift, 34px))); }
.iso-face { position: absolute; inset: 0; border-radius: 22px; padding: 14px; background: linear-gradient(145deg, #1D1D2B, #13131D); border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 30px 40px -10px rgba(0,0,0,.7); transition: box-shadow .5s, border-color .5s, background .5s; }
.iso-face::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; border-radius: 0 0 22px 22px; background: color-mix(in srgb, var(--c) 55%, #000); transform-origin: top; transform: rotateX(-90deg); }
.iso-l.on .iso-face { border-color: var(--c); background: linear-gradient(145deg, color-mix(in srgb, var(--c) 30%, #1D1D2B), #13131D); box-shadow: 0 0 60px -6px var(--c), 0 30px 40px -10px rgba(0,0,0,.7); }
.iso-l:not(.on) .iso-body { opacity: .35; }
.iso-head { display: flex; align-items: center; gap: .5rem; }
.iso-head span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--c); }
.iso-head svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.iso-head b { font: 800 .9rem var(--head); color: #fff; }
.iso-body { position: absolute; inset: 56px 14px 14px; transition: opacity .4s; }
/* mini UIs */
.m-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.m-row i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); } .m-row i.s { flex: .6; }
.m-dot { width: 10px; height: 10px; border-radius: 50%; } .m-dot.r { background: #EF4444; } .m-dot.y { background: #F59E0B; }
.m-big { position: absolute; right: 6px; bottom: 4px; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: rgba(229,40,30,.18); border: 2px solid rgba(229,40,30,.6); }
.m-big svg { width: 34px; height: 34px; fill: none; stroke: #FF8A7A; stroke-width: 2; stroke-linecap: round; }
.iso-l.on .m-big { animation: mPulse 1.8s ease-in-out infinite; }
@keyframes mPulse { 50% { transform: scale(1.1); } }
.m-nodes { position: absolute; inset: 0; }
.m-nodes span { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; margin: -13px; border-radius: 8px; background: #F59E0B; box-shadow: 0 0 14px rgba(245,158,11,.6); z-index: 1; }
.m-nodes svg { position: absolute; inset: 0; width: 100%; height: 100%; } .m-nodes path { fill: none; stroke: rgba(245,158,11,.7); stroke-width: 1.2; stroke-dasharray: 4 3; }
.iso-l.on .m-nodes path { animation: dash 2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -14; } }
.m-flow { display: grid; gap: 7px; }
.m-flow span { padding: 5px 10px; border-radius: 8px; font: 700 .7rem var(--head); color: #fff; background: rgba(14,165,233,.18); border-left: 3px solid #0EA5E9; }
.iso-l.on .m-flow span { animation: mFlow 2.5s ease-in-out infinite; }
.m-flow span:nth-child(2) { animation-delay: .2s !important; } .m-flow span:nth-child(3) { animation-delay: .4s !important; } .m-flow span:nth-child(4) { animation-delay: .6s !important; } .m-flow span:nth-child(5) { animation-delay: .8s !important; background: rgba(16,185,129,.25); border-color: #10B981; }
@keyframes mFlow { 0%, 100% { transform: none; } 30% { transform: translateX(8px); background: rgba(14,165,233,.4); } }
.m-checks p { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font: 700 .76rem var(--head); color: #E4E4EC; }
.m-checks b { width: 16px; height: 16px; border-radius: 5px; background: #10B981; position: relative; }
.m-checks b::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.m-live { position: absolute; right: 4px; bottom: 4px; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 900 .78rem var(--head); color: #fff; background: #10B981; box-shadow: 0 0 24px rgba(16,185,129,.7); }
.m-live i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
.m-chart { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 6px; padding-top: 10px; }
.m-chart i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #C084FC, #A855F7); transform-origin: bottom; }
.iso-l.on .m-chart i { animation: growBar 1s var(--ease) both; }
.m-chart i:nth-child(2) { animation-delay: .06s !important; } .m-chart i:nth-child(3) { animation-delay: .12s !important; } .m-chart i:nth-child(4) { animation-delay: .18s !important; } .m-chart i:nth-child(5) { animation-delay: .24s !important; } .m-chart i:nth-child(6) { animation-delay: .3s !important; } .m-chart i:nth-child(7) { animation-delay: .36s !important; } .m-chart i:nth-child(8) { animation-delay: .42s !important; }
@media (max-width: 959px) {
  .ps-sticky { align-items: start; padding-top: calc(var(--hdr) + .5rem); }
  .ps-texts { min-height: 13.5rem; }
  .ps-d { font-size: .9rem; }
  .iso-scene { height: 38vh; }
  .iso { width: min(230px, 56vw); }
  .ps-dot span { display: none; } .ps-dot { padding: .4rem; }
}

/* detail cards with spinning 3D cube */
.pds { display: grid; gap: 1.25rem; max-width: 1000px; margin: 0 auto; }
.pd { display: grid; gap: 1.5rem; align-items: center; padding: 1.75rem; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 40px -30px rgba(20,10,10,.35); scroll-margin-top: calc(var(--hdr) + 1rem); transition: box-shadow .35s; }
.pd:hover { box-shadow: var(--sh); }
@media (min-width: 760px) { .pd { grid-template-columns: 170px 1fr; gap: 2rem; } }
.pd-cube { height: 150px; display: grid; place-items: center; perspective: 600px; }
.cube { position: relative; width: 90px; height: 90px; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(35deg); }
.pd.spin .cube { animation: cubeSpin 9s linear infinite; }
@keyframes cubeSpin { from { transform: rotateX(-24deg) rotateY(35deg); } to { transform: rotateX(-24deg) rotateY(395deg); } }
.cube span { position: absolute; inset: 0; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c)); border: 1px solid rgba(255,255,255,.4); box-shadow: inset 0 0 20px rgba(0,0,0,.15); }
.cube .f1 { transform: translateZ(45px); } .cube .f2 { transform: rotateY(90deg) translateZ(45px); } .cube .f3 { transform: rotateY(180deg) translateZ(45px); } .cube .f4 { transform: rotateY(-90deg) translateZ(45px); } .cube .f5 { transform: rotateX(90deg) translateZ(45px); background: color-mix(in srgb, var(--c) 60%, #fff); } .cube .f6 { transform: rotateX(-90deg) translateZ(45px); }
.cube svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cube .f2 { font: 900 2rem var(--head); color: #fff; }
.pd-n { font: 800 .72rem var(--head); text-transform: uppercase; letter-spacing: .14em; color: var(--c); }
.pd h3 { font: 900 1.8rem var(--head); margin-top: .2rem; }
.pd-tag { font: 700 .95rem var(--head); color: var(--c); margin-bottom: .5rem; }
.pd-body > p:not(.pd-n):not(.pd-tag):not(.pd-lbl) { color: var(--ink-2); }
.pd-lbl { margin-top: 1.1rem; font: 800 .7rem var(--head); text-transform: uppercase; letter-spacing: .12em; }
.pd-list { display: grid; gap: .45rem 1rem; margin-top: .6rem; }
@media (min-width: 560px) { .pd-list { grid-template-columns: 1fr 1fr; } }
.pd-list li { display: flex; gap: .5rem; font-size: .9rem; color: var(--ink-2); }
.pd-list .i { width: 17px; height: 17px; margin-top: .15rem; color: var(--c); }
.pd-out { margin-top: 1.1rem; padding: .7rem .9rem; border-radius: 12px; font-size: .9rem; background: color-mix(in srgb, var(--c) 8%, #fff); border-left: 3px solid var(--c); }

.fy { display: grid; gap: 1rem; }
@media (min-width: 640px) { .fy { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fy { grid-template-columns: repeat(4, 1fr); } }
.fy-card { padding: 1.4rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--c); transition: transform .35s var(--ease), box-shadow .35s; }
.fy-card:hover { transform: translateY(-5px) rotateX(4deg); box-shadow: var(--sh); }
.fy-card b { font: 900 1.8rem var(--head); color: color-mix(in srgb, var(--c) 30%, #fff); }
.fy-card h4 { margin-top: .4rem; font: 800 1.08rem var(--head); }
.fy-card p { margin-top: .3rem; font-size: .88rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .ps { height: auto; } .ps-sticky { position: static; height: auto; padding: 4rem 0; } .iso-l { opacity: 1; transform: translateZ(calc(var(--i) * 46px)); } }
@media (max-width: 959px) {
  .ps-right { margin-top: 3.5rem; }
  .iso-scene { height: 34vh; }
  .iso { width: min(200px, 50vw); }
}
@media (max-width: 959px) { .iso { --gap: 22px; --lift: 18px; } .ps-right { margin-top: 4.5rem; } }

/* Process story: auto-play instead of scroll */
.ps { height: auto; }
.ps-sticky { position: relative; height: auto; min-height: min(100vh, 760px); padding: clamp(4rem, 8vw, 6rem) 0; }
.ps-bar i { transition: transform 3s linear; }
@media (max-width: 959px) { .ps-sticky { padding-top: 3.5rem; } .ps-right { margin-top: 2rem; } }

/* ---------- Home: in-section CTA banners ---------- */
.hcta { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.4rem, 3.5vw, 2.4rem); border-radius: 26px; color: #fff;
  background: linear-gradient(115deg, #E5281E 0%, #F05A1A 55%, #F59E0B 130%); box-shadow: 0 30px 60px -30px rgba(229,40,30,.75); }
.hcta::before { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; right: -120px; top: -200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.28), transparent 70%); animation: hctaGlow 7s ease-in-out infinite; }
.hcta::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); }
@keyframes hctaGlow { 50% { transform: translate(-60px, 40px) scale(1.15); } }
.hcta-l { display: flex; align-items: center; gap: 1.1rem; flex: 1 1 380px; min-width: 0; }
.hcta-av { position: relative; flex-shrink: 0; width: 64px; height: 64px; }
.hcta-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
.hcta-av i { position: absolute; right: 1px; bottom: 3px; width: 15px; height: 15px; border-radius: 50%; background: #22C55E; border: 3px solid #fff; animation: ping 2s infinite; }
.hcta-k { font: 700 .7rem var(--head); text-transform: uppercase; letter-spacing: .12em; opacity: .85; }
.hcta-t strong { display: block; margin-top: .15rem; font: 900 clamp(1.25rem, 1rem + 1vw, 1.65rem)/1.15 var(--head); letter-spacing: -.01em; }
.hcta-t > span { display: block; margin-top: .2rem; font-size: .95rem; opacity: .92; }
.hcta-b { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; }
.hcta .btn-white { border: 0; color: var(--red-2); box-shadow: 0 12px 24px -12px rgba(0,0,0,.45); }
.hcta .btn-white:hover { color: var(--red); transform: translateY(-2px); }
.hcta-2 { display: inline-flex; align-items: center; gap: .4rem; font: 700 .9rem var(--head); color: #fff; border-bottom: 1.5px solid rgba(255,255,255,.5); padding-bottom: 2px; transition: border-color .2s, gap .25s; }
.hcta-2:hover { border-color: #fff; gap: .65rem; }
/* dark-section variant */
.hcta-dark { background: linear-gradient(#15151F, #15151F) padding-box, linear-gradient(110deg, #E5281E, #F97316, #D9A441, #3BA9E0) border-box; border: 1.5px solid transparent; box-shadow: 0 0 60px -20px rgba(229,40,30,.55), 0 30px 60px -30px rgba(0,0,0,.8); }
.hcta-dark::before { background: radial-gradient(closest-side, rgba(229,40,30,.35), transparent 70%); }
.hcta-dark::after { background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); }
.hcta-dark .hcta-k { color: #FF8A7A; opacity: 1; }
.hcta-dark .hcta-t > span { color: var(--d-muted); opacity: 1; }
.hcta-dark .hcta-av img { border-color: rgba(229,40,30,.8); }
.hcta-dark .hcta-av i { border-color: #15151F; }
.hcta-dark .hcta-2 { color: #E4E4EC; border-color: rgba(255,255,255,.25); }
@media (max-width: 600px) { .hcta-b { width: 100%; } .hcta-b .btn { flex: 1 1 100%; } .hcta-2 { margin: 0 auto; } .hcta-av { width: 54px; height: 54px; } }
@media (prefers-reduced-motion: reduce) { .hcta::before { animation: none; } }
.hcta { grid-column: 1 / -1; width: 100%; }
.sv-rows .hcta { margin: 0 0 1rem; }
.dt-list .hcta { margin-top: .25rem; }
.dt-list .hcta .hcta-l { flex-basis: 300px; }

/* ---------- Portfolio page (3D) ---------- */
.pf3-hero { text-align: left; overflow: hidden; padding-bottom: 3rem; }
.pf3-hero .wrap { justify-items: stretch; }
.pf3-in { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1000px) { .pf3-in { grid-template-columns: 1fr 1.05fr; } }
.pf3-copy { display: grid; justify-items: start; position: relative; z-index: 2; }
.pf3-copy .ab-crumb, .pf3-copy .ab-jumps { justify-content: flex-start; }
.pf3-copy .ab-h1 { text-align: left; }
.pf3-stats { display: flex; gap: 1.75rem; margin-top: 1.5rem; }
.pf3-stats strong { display: block; font: 900 1.9rem/1 var(--head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf3-stats strong b { font: inherit; }
.pf3-stats span { font-size: .78rem; color: var(--muted); }
.w3-scene { position: relative; height: 560px; perspective: 1600px; }
@media (max-width: 999px) { .w3-scene { height: 380px; margin: 0 -1rem; } }
.w3 { --rx: 22deg; --ry: -24deg; position: absolute; inset: -10% -20% -10% 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(6deg); transition: transform .8s var(--ease); }
.w3-col { overflow: hidden; transform-style: preserve-3d; }
.w3-col.c1 { transform: translateZ(60px); } .w3-col.c2 { transform: translateZ(-30px); }
.w3-track { display: grid; gap: 18px; animation: w3Up 38s linear infinite; }
.w3-col.c1 .w3-track { animation-direction: reverse; animation-duration: 44s; }
.w3-col.c2 .w3-track { animation-duration: 50s; }
@keyframes w3Up { to { transform: translateY(-50%); } }
.w3 figure { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 11; background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 30px 50px -24px rgba(20,10,10,.45); }
.w3 figure img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.w3-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #FFF8F4 0%, transparent 18%, transparent 80%, #fff 100%), linear-gradient(90deg, #FFF8F4 0%, transparent 14%); }
@media (max-width: 999px) { .w3-fade { background: linear-gradient(180deg, #fff 0%, transparent 18%, transparent 80%, #fff 100%); } }

.pf-feat { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .pf-feat { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; } }
.pf-feat-cl { margin-top: .5rem; font: 700 .9rem var(--head); color: var(--red); }
.pf-feat-list { display: grid; gap: .6rem; margin-top: 1.25rem; }
.pf-feat-list li { display: grid; padding: .75rem 1rem; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); border-left: 3px solid var(--red); }
.pf-feat-list b { font: 800 .95rem var(--head); } .pf-feat-list span { font-size: .84rem; color: var(--muted); }
.pf-feat .ab-jumps { margin-top: 1.5rem; }
.lap-scene { perspective: 1800px; padding: 2rem 0 3rem; }
.lap { --lx: 8deg; --ly: -14deg; position: relative; width: min(620px, 100%); margin: 0 auto; transform-style: preserve-3d; transform: rotateX(var(--lx)) rotateY(var(--ly)); transition: transform .8s var(--ease); }
.lap-screen { position: relative; aspect-ratio: 16 / 10; padding: 3.2% 3.2% 4%; border-radius: 18px 18px 6px 6px; background: linear-gradient(160deg, #2A2A36, #121219); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 50px 80px -40px rgba(20,10,10,.6);
  transform-origin: bottom center; transform: rotateX(-88deg); transition: transform 1.4s cubic-bezier(.2,.9,.25,1.1) .2s; }
.lap.open .lap-screen { transform: rotateX(-6deg); }
.lap-cam { position: absolute; top: 1.3%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3A3A48; }
.lap-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 6px; }
.lap-base { position: relative; height: 18px; margin: 0 -6%; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #D7D7DE, #9C9CA8); box-shadow: 0 30px 40px -20px rgba(0,0,0,.5); transform: rotateX(70deg); transform-origin: top; }
.lap-base i { position: absolute; left: 50%; top: 0; width: 18%; height: 6px; margin-left: -9%; border-radius: 0 0 8px 8px; background: #8A8A96; }
.lap-chip { position: absolute; padding: .5rem .9rem; border-radius: 12px; font: 800 .8rem var(--head); color: var(--ink); background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -18px rgba(20,10,10,.45); transform: translateZ(80px); opacity: 0; transition: opacity .6s 1.2s, transform .8s var(--ease) 1.2s; white-space: nowrap; }
.lap.open .lap-chip { opacity: 1; }
.ch1 { left: -4%; top: 12%; } .ch2 { right: -6%; top: 40%; display: flex; align-items: center; gap: .4rem; color: #15803D; } .ch2 i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; animation: ping 2s infinite; }
.ch3 { left: 10%; bottom: 6%; color: #fff; background: linear-gradient(90deg, var(--red), var(--orange)); border: 0; }
.lap.open .ch1 { animation: chipF 5s ease-in-out 2s infinite; } .lap.open .ch2 { animation: chipF 6s ease-in-out 2.4s infinite; } .lap.open .ch3 { animation: chipF 5.5s ease-in-out 2.8s infinite; }
@keyframes chipF { 50% { transform: translateZ(80px) translateY(-8px); } }
@media (max-width: 600px) { .lap-chip { font-size: .68rem; padding: .35rem .6rem; } .ch2 { right: -2%; } .ch1 { left: 0; } }

.pf-fbar { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
.pf-f { padding: .55rem 1rem; border-radius: 999px; cursor: pointer; font: 700 .85rem var(--head); color: #D8D8E2; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); transition: all .25s; }
.pf-f small { opacity: .6; margin-left: .25rem; }
.pf-f:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.pf-f.on { color: #fff; background: var(--c, var(--red)); border-color: var(--c, var(--red)); box-shadow: 0 10px 24px -10px var(--c, var(--red)); }
.pc-grid { display: grid; gap: 1.25rem; perspective: 1400px; }
@media (min-width: 640px) { .pc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pc-grid { grid-template-columns: repeat(3, 1fr); } }
.pc { cursor: pointer; perspective: 1000px; outline: none; }
.pc[hidden] { display: none; }
.pc-in { position: relative; height: 100%; border-radius: 22px; overflow: hidden; background: var(--d-card); border: 1px solid var(--d-line); transform-style: preserve-3d; transition: transform .5s var(--ease), border-color .35s, box-shadow .35s; }
.pc:hover .pc-in, .pc:focus-visible .pc-in { border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--c) 70%, transparent); }
.pc-shot { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.pc-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 1s var(--ease); }
.pc:hover .pc-shot img { transform: scale(1.06); }
.pc-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.18), transparent 50%); opacity: 0; transition: opacity .3s; }
.pc:hover .pc-glare { opacity: 1; }
.pc-cat { position: absolute; left: .9rem; top: .9rem; padding: .3rem .7rem; border-radius: 999px; font: 800 .66rem var(--head); text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--c); box-shadow: 0 8px 18px -8px var(--c); transform: translateZ(40px); }
.pc-body { padding: 1rem 1.2rem 1.25rem; transform: translateZ(30px); }
.pc-body small { font: 700 .7rem var(--head); text-transform: uppercase; letter-spacing: .1em; color: color-mix(in srgb, var(--c) 70%, #fff); }
.pc-body h3 { margin-top: .2rem; font: 800 1.15rem/1.25 var(--head); color: #fff; }
.pc-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.pc-tags li { padding: .2rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 600; color: #D8D8E2; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.pc-open { position: absolute; right: .9rem; top: .9rem; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(15,15,20,.75); border: 1px solid rgba(255,255,255,.2); opacity: 0; transform: translateZ(50px) scale(.8); transition: all .3s var(--ease); }
.pc:hover .pc-open { opacity: 1; transform: translateZ(50px) scale(1); }
.pc-video .pc-shot { background: #000; }
.pc-play { position: absolute; left: 50%; top: 31%; width: 64px; height: 64px; margin: -32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--red), var(--orange)); box-shadow: 0 0 0 10px rgba(229,40,30,.2); transform: translateZ(60px); animation: ping 2.2s infinite; }
.pc-play svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }
.js .pc-grid .pc { opacity: 0; transform: translateY(30px) rotateX(18deg); }
.js .pc-grid.in .pc { animation: pcIn .8s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes pcIn { to { opacity: 1; transform: none; } }

.pf-reel { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .pf-reel { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }
.ph3-scene { position: relative; perspective: 1400px; display: grid; justify-items: center; padding: 1rem 0 2rem; }
.ph3 { position: relative; width: min(280px, 70vw); aspect-ratio: 9 / 19; border-radius: 44px; padding: 12px; background: linear-gradient(160deg, #2E2E3A, #0F0F15); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 50px 80px -30px rgba(20,10,10,.7), 0 0 80px -20px rgba(229,40,30,.45);
  transform: rotateY(-22deg) rotateX(8deg) rotateZ(2deg); animation: ph3Float 7s ease-in-out infinite; transition: transform .8s var(--ease); }
.ph3.playing { animation: none; transform: none; }
@keyframes ph3Float { 50% { transform: rotateY(-12deg) rotateX(4deg) rotateZ(0deg) translateY(-12px); } }
.ph3 video { width: 100%; height: 100%; object-fit: cover; border-radius: 33px; background: #000; display: block; }
.ph3-notch { position: absolute; left: 50%; top: 20px; z-index: 2; width: 90px; height: 24px; margin-left: -45px; border-radius: 999px; background: #0B0B10; }
.ph3-play { position: absolute; inset: 12px; border: 0; border-radius: 33px; cursor: pointer; display: grid; place-items: center; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.5)); transition: opacity .3s; }
.ph3-play svg { width: 74px; height: 74px; padding: 22px 20px 22px 26px; border-radius: 50%; fill: #fff; background: linear-gradient(135deg, var(--red), var(--orange)); box-shadow: 0 0 0 12px rgba(229,40,30,.2); }
.ph3.playing .ph3-play { opacity: 0; pointer-events: none; }
.ph3-shadow { width: 60%; height: 26px; margin-top: 1.2rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(20,10,10,.35), transparent); }

.pm { margin: auto; border: 0; padding: 0; background: transparent; width: min(980px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow: visible; }
.pm::backdrop { background: rgba(8,8,14,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pm[open] .pm-card { animation: pmIn .55s cubic-bezier(.2,.9,.25,1.05) both; }
@keyframes pmIn { from { opacity: 0; transform: perspective(1200px) rotateX(18deg) translateY(40px) scale(.94); } }
.pm-card { position: relative; display: grid; max-height: calc(100dvh - 1.5rem); overflow: auto; border-radius: 26px; background: #15151F; color: var(--d-ink); border-top: 4px solid var(--c, var(--red)); box-shadow: 0 50px 100px -40px rgba(0,0,0,.9); }
@media (min-width: 860px) { .pm-card { grid-template-columns: 1.4fr 1fr; } }
.pm-x { position: absolute; right: .9rem; top: .9rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(0,0,0,.55); }
.pm-media { background: #fff; display: grid; place-items: center; min-height: 260px; }
.pm-media img { width: 100%; height: 100%; max-height: 70vh; object-fit: contain; }
.pm-video { width: 100%; max-height: 72vh; background: #000; }
.pm-media:has(.pm-video) { background: #000; }
.pm-body { padding: 1.75rem; display: grid; align-content: start; gap: .5rem; }
.pm-cat { font: 800 .7rem var(--head); text-transform: uppercase; letter-spacing: .12em; color: var(--c, #FF8A7A); }
.pm-body h3 { font: 900 1.6rem/1.15 var(--head); color: #fff; }
.pm-client { font-size: .88rem; color: var(--d-muted); }
.pm-desc { margin-top: .4rem; color: #D6D6E0; }
.pm-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .w3-track, .ph3 { animation: none; } .lap-screen { transform: rotateX(-6deg); } .lap-chip { opacity: 1; } .js .pc-grid .pc { opacity: 1; transform: none; } }
@media (max-width: 760px) { .lap-scene { overflow-x: clip; } .ch1 { left: 2%; } .ch2 { right: 2%; } }
.w3 figure img[src*=workflow] { object-position: center; object-fit: cover; transform: scale(1.5); }
.lap-scene { padding-left: 2rem; padding-right: 2rem; }
@media (max-width: 760px) { .lap-scene { padding-left: 0; padding-right: 0; } }
.pf-page main { overflow-x: clip; }
.w3-fade { display: none; }
.w3-scene { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 82%, transparent 100%); }
.pm-media { background: #F4F4F7; }
@media (min-width: 1040px) { .pc-grid[data-f=video] { grid-template-columns: repeat(4, 1fr); } }
.pc-grid[data-f=video] .pc-video .pc-shot { aspect-ratio: 4 / 5; }
.pm-media:has(.pm-video) .pm-video { max-height: 78vh; }

/* ---------- Why Me page (3D) ---------- */
.why-hero { text-align: left; overflow: hidden; }
.why-hero .wrap { justify-items: stretch; }
.wh-in { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 980px) { .wh-in { grid-template-columns: 1.05fr .95fr; } }
.wh-copy { display: grid; justify-items: start; }
.wh-copy .ab-crumb, .wh-copy .ab-jumps { justify-content: flex-start; }
.wh-copy .ab-h1 { text-align: left; }
.wh-stage { position: relative; height: 470px; perspective: 1200px; display: grid; place-items: center; }
@media (max-width: 979px) { .wh-stage { height: 380px; } }
.wh-orbit { --tx: 0deg; --ty: 0deg; position: relative; width: 100%; height: 100%; display: grid; place-items: center; transform-style: preserve-3d; transform: rotateX(var(--tx)) rotateY(var(--ty)); transition: transform .6s var(--ease); }
.coin { position: relative; width: 230px; height: 230px; transform-style: preserve-3d; animation: coinSpin 9s cubic-bezier(.45,0,.55,1) infinite; }
@media (max-width: 600px) { .coin { width: 180px; height: 180px; } }
@keyframes coinSpin { 0%, 30% { transform: rotateY(0) rotateX(8deg); } 50%, 80% { transform: rotateY(180deg) rotateX(8deg); } 100% { transform: rotateY(360deg) rotateX(8deg); } }
.coin-f { position: absolute; inset: 0; border-radius: 50%; display: grid; place-content: center; justify-items: center; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(9px); }
.coin-front { background: radial-gradient(circle at 30% 25%, #FF7A4D, #E5281E 55%, #A3160F); color: #fff; box-shadow: inset 0 0 0 10px rgba(255,255,255,.14), inset 0 0 0 13px rgba(0,0,0,.12), 0 0 70px -10px rgba(229,40,30,.7); }
.coin-front small { font: 800 .72rem var(--head); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.coin-front strong { font: 900 3.6rem/1 var(--head); letter-spacing: -.03em; }
.coin-front span { font: 800 .9rem var(--head); text-transform: uppercase; letter-spacing: .1em; }
.coin-back { transform: rotateY(180deg) translateZ(9px); background: radial-gradient(circle at 30% 25%, #3A3A4A, #15151F 70%); box-shadow: inset 0 0 0 10px rgba(255,255,255,.06), inset 0 0 0 13px rgba(229,40,30,.5), 0 0 70px -10px rgba(249,115,22,.6); color: #fff; gap: .6rem; }
.coin-back img { width: 62%; height: auto; }
.coin-back span { font: 700 .72rem var(--head); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.coin-edge { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, #8E130C, #E5281E, #8E130C); transform: translateZ(0); box-shadow: 0 0 0 0 transparent; }
.coin-edge::before, .coin-edge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; }
.coin-edge::before { transform: translateZ(4px); } .coin-edge::after { transform: translateZ(-4px); }
.wh-chip { position: absolute; padding: .55rem .95rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 22px 40px -20px rgba(20,10,10,.45); font: 600 .82rem var(--body); color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: .4rem; }
.wh-chip b { font: 900 1.05rem var(--head); color: var(--ink); }
.wc1 { left: 2%; top: 14%; transform: translateZ(90px); animation: chipB 6s ease-in-out infinite; }
.wc2 { right: 0; top: 26%; transform: translateZ(140px); animation: chipB 7s ease-in-out .8s infinite; }
.wc3 { left: 6%; bottom: 20%; transform: translateZ(120px); animation: chipB 6.5s ease-in-out 1.4s infinite; }
.wc4 { right: 6%; bottom: 10%; transform: translateZ(60px); animation: chipB 7.5s ease-in-out .4s infinite; color: #15803D; font-weight: 700; }
.wc4 i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; animation: ping 2s infinite; }
@keyframes chipB { 50% { translate: 0 -12px; } }
.wh-floor { position: absolute; left: 50%; bottom: 6%; width: 240px; height: 34px; margin-left: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(229,40,30,.35), transparent); filter: blur(4px); animation: floorP 9s ease-in-out infinite; }
@keyframes floorP { 0%, 30%, 50%, 80%, 100% { transform: scaleX(1); } 40%, 90% { transform: scaleX(.3); } }
@media (max-width: 600px) { .wh-chip { font-size: .7rem; padding: .4rem .65rem; } .wh-chip b { font-size: .9rem; } .wc2 { right: 2%; } }

.wf-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .wf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wf-grid { grid-template-columns: repeat(3, 1fr); } }
.wf { perspective: 1200px; height: 270px; cursor: pointer; outline: none; }
.wf-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,1.3,.4,1); }
@media (hover: hover) { .wf:hover .wf-in { transform: rotateY(180deg); } }
.wf.flip .wf-in, .wf:focus-visible .wf-in { transform: rotateY(180deg); }
.wf-face { position: absolute; inset: 0; padding: 1.6rem; border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; align-content: start; gap: .7rem; overflow: hidden; }
.wf-front { background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -32px rgba(20,10,10,.4); }
.wf-front::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent); }
.wf-n { position: absolute; right: 1.3rem; top: 1rem; font: 900 3.4rem/1 var(--head); color: color-mix(in srgb, var(--c) 14%, #fff); }
.wf-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); }
.wf-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--c); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wf h3 { font: 800 1.25rem/1.25 var(--head); }
.wf-proof { font-size: .9rem; font-weight: 600; color: var(--c); }
.wf-hint { position: absolute; left: 1.6rem; bottom: 1.3rem; display: flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--muted); }
.wf-hint svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (hover: none) { .wf-hint { font-size: 0; } .wf-hint::before { content: "Tap to flip"; font-size: .75rem; } }
.wf-back { transform: rotateY(180deg); color: #fff; background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 55%, #120A0A)); box-shadow: 0 30px 60px -28px var(--c); }
.wf-back .wf-ic { background: rgba(255,255,255,.18); } .wf-back .wf-ic svg { stroke: #fff; }
.wf-back p { color: rgba(255,255,255,.92); }

.wn-sec { padding: 4.5rem 0; }
.wn { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; perspective: 1000px; }
@media (min-width: 900px) { .wn { grid-template-columns: repeat(4, 1fr); } }
.wn-c { position: relative; padding: 1.75rem 1.25rem; border-radius: 22px; text-align: center; background: var(--d-card); border: 1px solid var(--d-line); transform-style: preserve-3d; transition: transform .4s var(--ease); opacity: 0; transform: rotateX(-70deg) translateY(30px); transform-origin: bottom; }
.wn.in .wn-c { opacity: 1; transform: none; animation: wnUp .9s cubic-bezier(.3,1.3,.4,1) backwards; }
.wn.in .wn-c:nth-child(2) { animation-delay: .12s; } .wn.in .wn-c:nth-child(3) { animation-delay: .24s; } .wn.in .wn-c:nth-child(4) { animation-delay: .36s; }
@keyframes wnUp { from { opacity: 0; transform: rotateX(-70deg) translateY(30px); } }
.wn-c::before { content: ""; position: absolute; left: 20%; right: 20%; top: -1px; height: 2px; background: var(--c); box-shadow: 0 0 20px var(--c); }
.wn-c strong { display: block; font: 900 clamp(2.2rem, 5vw, 3.2rem)/1 var(--head); color: #fff; transform: translateZ(40px); }
.wn-c strong b { font: inherit; }
.wn-c span { display: block; margin-top: .5rem; font-size: .85rem; color: var(--d-muted); transform: translateZ(25px); }

.wc-scene { perspective: 1400px; max-width: 920px; margin: 0 auto; }
.wc-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .75rem; font: 800 .95rem var(--head); }
.wc-me { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 16px; color: #fff; background: linear-gradient(90deg, var(--red), var(--orange)); }
.wc-me img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.7); }
.wc-them { display: flex; align-items: center; padding: .7rem 1rem; border-radius: 16px; color: var(--muted); background: #fff; border: 1px solid var(--line); }
.wc { display: grid; gap: .6rem; transform-style: preserve-3d; }
.wc li { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; opacity: 0; transform: rotateX(-80deg) translateY(-10px); transform-origin: top; }
.wc-scene.in .wc li { animation: wcIn .8s cubic-bezier(.3,1.3,.4,1) both; animation-delay: calc(var(--i) * 110ms + .1s); }
@keyframes wcIn { to { opacity: 1; transform: none; } }
.wc span { display: flex; align-items: flex-start; gap: .6rem; padding: .9rem 1rem; border-radius: 14px; font-size: .92rem; }
.wc svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wc-y { font-weight: 600; color: var(--ink); background: #fff; border: 1px solid color-mix(in srgb, var(--red) 25%, transparent); box-shadow: 0 14px 30px -22px rgba(229,40,30,.6); transition: transform .3s var(--ease); }
.wc-y svg { background: #22C55E; }
.wc-n { color: var(--muted); background: rgba(255,255,255,.55); border: 1px dashed var(--line); }
.wc-n svg { background: #CBD5E1; }
@media (hover: hover) { .wc li:hover .wc-y { transform: translateZ(30px) scale(1.03); } }
@media (max-width: 600px) { .wc span, .wc-head > span { font-size: .8rem; padding: .7rem; } .wc li, .wc-head { gap: .5rem; } .wc-me img { display: none; } }

.wp { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .wp { grid-template-columns: .9fr 1.1fr; gap: 4rem; } }
.wp-copy { display: grid; justify-items: start; }
.wp-copy .h2 { text-align: left; }
.wp-stack { position: relative; height: 560px; perspective: 1400px; transform-style: preserve-3d; }
.wp-card { position: absolute; left: 50%; top: 50%; width: min(340px, 86%); padding: 1.6rem; border-radius: 24px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); box-shadow: 0 40px 70px -35px rgba(20,10,10,.5); transform: translate(-50%, -50%) translateZ(calc(var(--k) * -40px)) translateY(calc(var(--k) * -14px)); transition: transform 1.1s cubic-bezier(.3,1.25,.4,1), box-shadow .3s; transition-delay: calc(var(--k) * 120ms); }
.wp-stack.in .wp-card:nth-child(1) { transform: translate(-50%, -50%) translate3d(-20%, -112%, 0) rotateY(16deg) rotateX(6deg); }
.wp-stack.in .wp-card:nth-child(2) { transform: translate(-50%, -50%) translate3d(4%, 0, 70px) rotateY(-4deg) rotateX(6deg); }
.wp-stack.in .wp-card:nth-child(3) { transform: translate(-50%, -50%) translate3d(26%, 112%, 0) rotateY(-16deg) rotateX(6deg); }
.wp-stack.in .wp-card:hover { translate: 0 0 40px; }
.wp-stack.in .wp-card:hover { z-index: 3; box-shadow: 0 50px 80px -30px color-mix(in srgb, var(--c) 60%, transparent); }
.wp-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--c); margin-bottom: .8rem; }
.wp-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wp-card h3 { font: 800 1.15rem var(--head); } .wp-card p { margin-top: .3rem; font-size: .9rem; color: var(--muted); }
@media (max-width: 600px) {
  .wp-stack { height: auto; display: grid; gap: 1rem; perspective: none; }
  .wp-card, .wp-stack.in .wp-card:nth-child(n) { position: relative; left: auto; top: auto; width: 100%; transform: none; }
}

.wv-arc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; perspective: 1600px; transform-style: preserve-3d; padding: 1rem 0 2rem; }
.wv { margin: 0; border-radius: 22px; overflow: hidden; background: var(--d-card); border: 1px solid var(--d-line); transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,1.2,.4,1), box-shadow .4s, opacity .5s; opacity: 0; transform: rotateY(calc((var(--k) - 1.5) * -40deg)) translateZ(-200px); }
.wv-arc.in .wv { opacity: 1; transform: rotateY(calc((var(--k) - 1.5) * -14deg)) translateZ(calc(abs(var(--k) - 1.5) * 30px)); transition-delay: calc(var(--k) * 90ms); }
@supports not (transform: translateZ(calc(abs(1px)))) { .wv-arc.in .wv { transform: rotateY(calc((var(--k) - 1.5) * -14deg)); } }
.wv-arc.in .wv:hover, .wv-arc.in .wv.on { transform: translateZ(60px) scale(1.04); box-shadow: 0 40px 80px -30px rgba(229,40,30,.55); border-color: rgba(229,40,30,.6); z-index: 2; transition-delay: 0s; }
.wv video { display: block; width: 100%; aspect-ratio: 9 / 13; object-fit: cover; background: #000; }
.wv figcaption { display: grid; padding: .8rem 1rem; }
.wv strong { font: 800 1rem var(--head); color: #fff; } .wv span { font-size: .78rem; color: var(--d-muted); }
@media (max-width: 899px) { .wv-arc { grid-template-columns: repeat(2, 1fr); } .wv-arc.in .wv { transform: none; } }

.wq-wrap { max-width: 820px; }
.wq { margin-top: .75rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: box-shadow .3s, border-color .3s; }
.wq[open] { border-color: color-mix(in srgb, var(--red) 35%, transparent); box-shadow: 0 20px 40px -28px rgba(229,40,30,.5); }
.wq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; font: 700 1rem var(--head); }
.wq summary::-webkit-details-marker { display: none; }
.wq summary i { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--soft); transition: transform .4s var(--ease), background .3s; }
.wq summary i::before, .wq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px -6px; background: var(--ink); }
.wq summary i::after { transform: rotate(90deg); transition: transform .3s; }
.wq[open] summary i { transform: rotate(180deg); background: var(--red); } .wq[open] summary i::before { background: #fff; } .wq[open] summary i::after { transform: rotate(0); background: #fff; }
.wq p { padding: 0 1.3rem 1.2rem; color: var(--muted); animation: wqIn .5s var(--ease); transform-origin: top; }
@keyframes wqIn { from { opacity: 0; transform: perspective(600px) rotateX(-40deg); } }
@media (prefers-reduced-motion: reduce) { .coin, .wh-chip, .wh-floor { animation: none; } .wn-c, .wc li, .wv { opacity: 1; transform: none; } }

/* Why Me: 3D skills ring */
.wr-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: 1rem; }
.wr-tab { padding: .5rem .95rem; border-radius: 999px; cursor: pointer; font: 700 .82rem var(--head); color: var(--ink); background: #fff; border: 1px solid var(--line); transition: all .3s; }
.wr-tab:hover { border-color: var(--c); color: var(--c); }
.wr-tab.on { color: #fff; background: var(--c); border-color: var(--c); box-shadow: 0 10px 24px -10px var(--c); }
.wr-scene { --w: 280px; --r: calc(var(--w) * 1.207 + 24px); position: relative; height: 470px; perspective: 1500px; display: grid; place-items: center; }
.wr-ring { --a: 0deg; position: relative; width: var(--w); height: 380px; transform-style: preserve-3d; transform: translateZ(calc(var(--r) * -1)) rotateX(-6deg) rotateY(var(--a)); transition: transform 1.1s cubic-bezier(.5,.05,.2,1); }
.wr-face { --d: 4; position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.3rem; border-radius: 22px; cursor: pointer; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); box-shadow: 0 30px 60px -32px rgba(20,10,10,.45); transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); opacity: calc(1 - var(--d) * .22); transition: opacity .8s, box-shadow .5s; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.wr-face.on { box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--c) 60%, transparent); }
.wr-face header { position: relative; padding-right: 2.5rem; }
.wr-n { position: absolute; right: 0; top: -.2rem; font: 900 2rem/1 var(--head); color: color-mix(in srgb, var(--c) 22%, #fff); }
.wr-face h3 { font: 800 1.2rem/1.2 var(--head); color: var(--c); }
.wr-face header p { font-size: .8rem; color: var(--muted); }
.wr-face ul { display: grid; gap: .4rem; margin-top: .9rem; }
.wr-face li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem .65rem; border-radius: 10px; background: color-mix(in srgb, var(--c) 7%, #fff); font-size: .8rem; }
.wr-face li b { font-weight: 700; color: var(--ink); } .wr-face li span { font-size: .7rem; color: var(--muted); text-align: right; }
.wr-face footer { margin-top: auto; padding-top: .6rem; font: 800 .72rem var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--c); }
.wr-floor { position: absolute; left: 50%; bottom: 10px; width: 520px; max-width: 90%; height: 40px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(229,40,30,.18), transparent); }
@media (max-width: 700px) { .wr-scene { --w: 220px; height: 440px; perspective: 1100px; } .wr-ring { height: 360px; } .wr-face { padding: 1rem; } .wr-face li span { display: none; } .wr-tab { font-size: .72rem; padding: .4rem .7rem; } }
.wr-mq { display: grid; gap: .6rem; margin-top: 1.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.wr-mq-t { display: flex; gap: .6rem; width: max-content; animation: wrMq 50s linear infinite; }
.wr-mq-t.rev { animation-direction: reverse; animation-duration: 56s; }
@keyframes wrMq { to { transform: translateX(-50%); } }
.wr-mq span { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; white-space: nowrap; font: 700 .82rem var(--head); color: var(--ink); background: #fff; border: 1px solid var(--line); }
.wr-mq span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
@media (prefers-reduced-motion: reduce) { .wr-mq-t { animation: none; } .wr-ring { transition: none; } }
.wr-scene { overflow-x: clip; isolation: isolate; height: 440px; }
.wr-floor { z-index: -1; bottom: -6px; }
.why-page main { overflow-x: clip; }
@media (max-width: 700px) { .wr-scene { height: 410px; } }
.wr-ring { height: 450px; } .wr-scene { height: 520px; }
.wr-face li { padding: .38rem .6rem; }
@media (max-width: 700px) { .wr-ring { height: 410px; } .wr-scene { height: 470px; } }

/* ---------- Reviews page (3D) ---------- */
.rvw-hero { text-align: left; overflow: hidden; }
.rvw-hero .wrap { justify-items: stretch; }
.rh-in { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 980px) { .rh-in { grid-template-columns: 1fr 1fr; } }
.rh-copy { display: grid; justify-items: start; }
.rh-copy .ab-crumb, .rh-copy .ab-jumps { justify-content: flex-start; }
.rh-copy .ab-h1 { text-align: left; }
.rh-stats { display: flex; gap: 1.75rem; margin-top: 1.4rem; }
.rh-stats strong { display: block; font: 900 1.8rem/1 var(--head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rh-stats strong b { font: inherit; }
.rh-stats .rh-stars { font-size: 1.35rem; letter-spacing: .05em; background: none; color: #F59E0B; padding: .2rem 0; }
.rh-stats span { font-size: .78rem; color: var(--muted); }
.rc-scene { --w: 220px; --r: 200px; position: relative; height: 520px; perspective: 1300px; display: grid; place-items: center; }
.rc-ring { --a: 0deg; --tx: 0deg; position: relative; width: var(--w); height: 330px; transform-style: preserve-3d; transform: translateZ(calc(var(--r) * -1)) rotateX(var(--tx)) rotateY(var(--a)); transition: transform 1.1s cubic-bezier(.5,.05,.2,1); }
.rc-card { --d: 2; position: absolute; inset: 0; padding: 0; border: 0; cursor: pointer; border-radius: 26px; overflow: hidden; background: #000; transform: rotateY(calc(var(--k) * 90deg)) translateZ(var(--r)); box-shadow: 0 40px 70px -30px rgba(20,10,10,.6); opacity: calc(1 - var(--d) * .35); filter: brightness(calc(1 - var(--d) * .25)); transition: opacity .8s, filter .8s; }
.rc-card img { width: 100%; height: 100%; object-fit: cover; }
.rc-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.75)); }
.rc-play { position: absolute; left: 50%; top: 44%; width: 64px; height: 64px; margin: -32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--red), var(--orange)); box-shadow: 0 0 0 10px rgba(229,40,30,.22); transform: scale(.6); opacity: 0; transition: all .5s var(--ease); }
.rc-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.rc-card.on .rc-play { opacity: 1; transform: none; animation: ping 2.2s infinite; }
.rc-name { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; display: grid; text-align: left; color: #fff; }
.rc-name b { font: 800 1.15rem var(--head); } .rc-name small { font-size: .74rem; opacity: .8; }
.rc-floor { position: absolute; left: 50%; bottom: 20px; width: 360px; max-width: 80%; height: 40px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(229,40,30,.3), transparent); z-index: -1; }
.rc-dots { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; gap: .5rem; }
.rc-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(20,10,10,.18); transition: all .35s; }
.rc-dots button.on { width: 28px; background: var(--red); }
@media (max-width: 600px) { .rc-scene { --w: 180px; --r: 150px; height: 430px; } .rc-ring { height: 270px; } }

.rs-sec { padding: 5rem 0; overflow: hidden; }
.rs { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .rs { grid-template-columns: .9fr 1.1fr; gap: 4rem; } }
.rs-stage { position: relative; display: grid; place-items: center; perspective: 1400px; padding: 1rem 0; }
.rs-glow { position: absolute; width: 420px; height: 420px; max-width: 100%; border-radius: 50%; background: conic-gradient(from 0deg, #E5281E, #F97316, #EC4899, #A855F7, #E5281E); filter: blur(70px); opacity: .45; animation: rsSpin 14s linear infinite; }
@keyframes rsSpin { to { transform: rotate(360deg); } }
.rs-phone { position: relative; width: min(290px, 72vw); aspect-ratio: 9 / 19; border-radius: 46px; padding: 12px; background: linear-gradient(160deg, #34343F, #0E0E14); box-shadow: inset 0 0 0 2px rgba(255,255,255,.1), 0 60px 90px -30px rgba(0,0,0,.8); transform: rotateY(-35deg) rotateX(12deg) scale(.9); opacity: 0; transition: transform 1.4s cubic-bezier(.2,.9,.25,1.05), opacity .8s; }
.rs-stage.in .rs-phone { opacity: 1; transform: rotateY(-14deg) rotateX(4deg); }
.rs-stage.in .rs-phone.playing { transform: none; }
.rs-phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 35px; display: block; background: #000; }
.rs-notch { position: absolute; left: 50%; top: 20px; z-index: 2; width: 92px; height: 24px; margin-left: -46px; border-radius: 999px; background: #0A0A0F; }
.rs-play { position: absolute; inset: 12px; border: 0; border-radius: 35px; cursor: pointer; display: grid; place-items: center; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); transition: opacity .3s; }
.rs-play span { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--red), var(--orange)); box-shadow: 0 0 0 12px rgba(229,40,30,.22); animation: ping 2.2s infinite; }
.rs-play svg { width: 30px; height: 30px; fill: #fff; margin-left: 4px; }
.rs-phone.playing .rs-play { opacity: 0; pointer-events: none; }
.rs-copy { display: grid; justify-items: start; }
.rs-copy .h2, .rs-copy .sub { text-align: left; margin-left: 0; }
.rs-faces { display: flex; gap: .8rem; margin: 1.4rem 0 .4rem; }
.rs-faces li { display: grid; justify-items: center; gap: .35rem; font-size: .78rem; color: var(--d-muted); }
.rs-faces img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.2); }

.rt-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); perspective: 1400px; }
@media (min-width: 980px) { .rt-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .rt-grid { gap: .75rem; } }
.rt { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; perspective: 1000px; }
.rt-in { position: relative; display: block; aspect-ratio: 3 / 4.4; border-radius: 24px; overflow: hidden; background: #111; transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .4s; box-shadow: 0 30px 60px -34px rgba(20,10,10,.6); }
.rt:hover .rt-in, .rt:focus-visible .rt-in { box-shadow: 0 40px 70px -30px rgba(229,40,30,.55); }
.rt-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.rt:hover .rt-in img { transform: scale(1.06); }
.rt-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 30%, rgba(0,0,0,.85)); }
.rt-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.22), transparent 50%); opacity: 0; transition: opacity .3s; }
.rt:hover .rt-glare { opacity: 1; }
.rt-badge { position: absolute; left: .8rem; top: .8rem; z-index: 2; padding: .28rem .65rem; border-radius: 999px; font: 800 .62rem var(--head); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(229,40,30,.9); transform: translateZ(30px); }
.rt-play { position: absolute; left: 50%; top: 42%; z-index: 2; width: 60px; height: 60px; margin: -30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transform: translateZ(50px); transition: all .35s var(--ease); }
.rt-play svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.rt:hover .rt-play { background: linear-gradient(135deg, var(--red), var(--orange)); border-color: transparent; transform: translateZ(50px) scale(1.12); box-shadow: 0 0 0 10px rgba(229,40,30,.25); }
.rt-foot { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; display: grid; gap: .1rem; color: #fff; transform: translateZ(35px); }
.rt-stars { color: #FBBF24; font-size: .8rem; letter-spacing: .08em; }
.rt-foot b { font: 800 1.2rem var(--head); } .rt-foot small { font-size: .74rem; opacity: .8; }
.rt-watch { display: flex; align-items: center; gap: .3rem; margin-top: .35rem; font: 700 .76rem var(--head); color: #FFB59E; }
.rt-watch .i { width: 14px; height: 14px; transition: transform .3s; } .rt:hover .rt-watch .i { transform: translateX(4px); }
@media (max-width: 480px) { .rt-foot b { font-size: 1rem; } .rt-watch { display: none; } }
.js .rt-grid .rt.rv { opacity: 0; transform: translateY(40px) rotateX(25deg); transition: opacity .8s var(--ease), transform 1s cubic-bezier(.2,.9,.25,1.05); transition-delay: calc(var(--i) * 100ms); }
.js .rt-grid .rt.rv.in { opacity: 1; transform: none; }

.rm-scene { display: grid; gap: .8rem; overflow: hidden; perspective: 900px; padding: .5rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.rm-t { display: flex; gap: .9rem; width: max-content; animation: wrMq 40s linear infinite; transform: rotateX(18deg); }
.rm-t.rev { animation-direction: reverse; animation-duration: 46s; transform: rotateX(-18deg); }
.rm-t span { padding: 1rem 1.6rem; border-radius: 18px; white-space: nowrap; font: 800 1.05rem var(--head); color: var(--ink); background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 30px -24px rgba(20,10,10,.5); }
.rm-t span:first-child { color: #fff; background: linear-gradient(90deg, var(--red), var(--orange)); border: 0; }
.rm-scene:hover .rm-t { animation-play-state: paused; }

.rb { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .rb { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }
.rb-media { position: relative; perspective: 1400px; padding: 1rem 2.5rem 3rem 0; }
.rb-shot { border-radius: 20px; overflow: hidden; border: 8px solid #15151F; box-shadow: 0 50px 80px -40px rgba(20,10,10,.6); transform: rotateY(18deg) rotateX(6deg) scale(.95); opacity: .4; transition: transform 1.3s cubic-bezier(.2,.9,.25,1.05), opacity .8s; }
.rb-media.in .rb-shot { transform: rotateY(8deg) rotateX(3deg); opacity: 1; }
.rb-shot img { display: block; width: 100%; height: auto; }
.rb-face { position: absolute; right: 0; bottom: 0; width: 34%; aspect-ratio: 3 / 4; padding: 0; border: 4px solid #fff; border-radius: 22px; overflow: hidden; cursor: pointer; background: #000; box-shadow: 0 30px 60px -24px rgba(20,10,10,.7); transform: translateZ(80px) rotate(4deg) translateY(30px); opacity: 0; transition: transform 1.2s cubic-bezier(.2,.9,.25,1.2) .4s, opacity .6s .4s; }
.rb-media.in .rb-face { transform: rotate(4deg); opacity: 1; }
.rb-face:hover { transform: rotate(0) scale(1.05) !important; }
.rb-face img { width: 100%; height: 100%; object-fit: cover; }
.rb-face span { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--red), var(--orange)); animation: ping 2.2s infinite; }
.rb-face svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.rb-copy { display: grid; justify-items: start; }
.rb-copy .h2, .rb-copy .sub { text-align: left; margin-left: 0; }
.rb-list { display: grid; gap: .55rem; width: 100%; margin-top: 1.2rem; }
.rb-list li { display: grid; padding: .75rem 1rem; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); border-left: 3px solid var(--red); }
.rb-list b { font: 800 .95rem var(--head); } .rb-list span { font-size: .84rem; color: var(--muted); }

.rl { margin: auto; border: 0; padding: 0; background: transparent; width: min(440px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow: visible; }
.rl::backdrop { background: rgba(8,8,14,.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rl[open] .rl-card { animation: pmIn .55s cubic-bezier(.2,.9,.25,1.05) both; }
.rl-card { position: relative; border-radius: 28px; overflow: hidden; background: #15151F; box-shadow: 0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
.rl-x { position: absolute; right: .8rem; top: .8rem; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(0,0,0,.55); }
.rl-x svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.rl-media video { display: block; width: 100%; max-height: calc(100dvh - 9rem); aspect-ratio: 9 / 16; object-fit: contain; background: #000; }
.rl-cap { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; padding: 1rem 1.2rem; color: #fff; }
.rl-cap .rt-stars { grid-column: 1; } .rl-cap b { grid-column: 1; font: 800 1.1rem var(--head); } .rl-cap small { grid-column: 1; font-size: .78rem; color: var(--d-muted); }
.rl-cap .btn { grid-column: 2; grid-row: 1 / 4; }
.rvw-page main { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { .rs-glow, .rm-t { animation: none; } .rs-phone, .rb-shot, .rb-face { opacity: 1; transform: none; } .js .rt-grid .rt.rv { opacity: 1; transform: none; } }
/* hero coverflow (replaces ring) */
.rc-ring { transform: rotateX(var(--tx)); width: var(--w); }
.rc-card { --s: 0; transform: translateX(calc(var(--s) * 62%)) translateZ(calc(var(--d) * -140px)) rotateY(calc(var(--s) * -38deg)); opacity: calc(1 - var(--d) * .3); filter: brightness(calc(1 - var(--d) * .22)); transition: transform 1s cubic-bezier(.5,.05,.2,1), opacity .8s, filter .8s; }
.rc-card[style*="--d: 2"] { opacity: 0; pointer-events: none; }

/* Reviews: client story rows */
.rcs-list-wrap { display: grid; gap: 4.5rem; margin-top: 1rem; }
.rcs { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .rcs { grid-template-columns: .8fr 1.2fr; gap: 4rem; } .rcs:nth-child(even) .rcs-media { order: 2; } }
.rcs-media { position: relative; display: grid; justify-items: center; perspective: 1300px; }
.rcs-card { --rx: 4deg; --ry: -14deg; position: relative; width: min(330px, 100%); aspect-ratio: 3 / 4.2; padding: 0; border: 0; border-radius: 28px; overflow: hidden; cursor: pointer; background: #111; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .7s var(--ease), box-shadow .4s; box-shadow: 0 50px 80px -40px rgba(20,10,10,.65), 0 0 0 1px rgba(255,255,255,.06); }
.rcs:nth-child(even) .rcs-card { --ry: 14deg; }
.rcs-card:hover { box-shadow: 0 60px 90px -40px color-mix(in srgb, var(--c) 70%, transparent); }
.rcs-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.rcs-card:hover img { transform: scale(1.06); }
.rcs-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.85)); }
.rcs-badge { position: absolute; left: 1rem; top: 1rem; padding: .3rem .7rem; border-radius: 999px; font: 800 .64rem var(--head); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--c); }
.rcs-play { position: absolute; left: 50%; top: 44%; width: 72px; height: 72px; margin: -36px; border-radius: 50%; display: grid; place-items: center; background: var(--c); box-shadow: 0 0 0 12px color-mix(in srgb, var(--c) 28%, transparent); animation: ping 2.4s infinite; transition: transform .35s var(--ease); }
.rcs-card:hover .rcs-play { transform: scale(1.12); }
.rcs-play svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }
.rcs-cap { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; display: grid; text-align: left; color: #fff; }
.rcs-cap b { font: 800 1.3rem var(--head); } .rcs-cap small { font-size: .78rem; opacity: .85; }
.rcs-num { position: absolute; z-index: -1; top: -2.2rem; left: 50%; transform: translateX(-80%); font: 900 9rem/1 var(--head); color: color-mix(in srgb, var(--c) 12%, #fff); pointer-events: none; }
.rcs:nth-child(even) .rcs-num { transform: translateX(-20%); }
.rcs-body { display: grid; align-content: start; }
.rcs-kick { font: 800 .72rem var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.rcs-body h3 { margin-top: .3rem; font: 900 clamp(1.7rem, 3.4vw, 2.3rem)/1.1 var(--head); }
.rcs-body h3 span { font-weight: 700; font-size: .55em; color: var(--muted); }
.rcs-q { position: relative; margin: 1.2rem 0 0; padding: 1.2rem 1.3rem 1.1rem 3.2rem; border-radius: 18px; background: color-mix(in srgb, var(--c) 7%, #fff); border: 1px solid color-mix(in srgb, var(--c) 20%, transparent); }
.rcs-q::before { content: "“"; position: absolute; left: .8rem; top: -.2rem; font: 900 4rem/1 Georgia, serif; color: var(--c); }
.rcs-q p { font: 600 1.05rem/1.55 var(--body); color: var(--ink); font-style: italic; }
.rcs-q cite { display: block; margin-top: .5rem; font: 700 .78rem var(--head); font-style: normal; color: var(--c); }
.rcs-cols { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
@media (min-width: 640px) { .rcs-cols { grid-template-columns: 1fr 1fr; } }
.rcs-cols h4 { font: 800 .8rem var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: .45rem; }
.rcs-cols p { font-size: .92rem; color: var(--muted); }
.rcs-list { display: grid; gap: .45rem; }
.rcs-list li { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; color: var(--ink); }
.rcs-list svg { flex: none; width: 18px; height: 18px; margin-top: .1rem; padding: 3px; border-radius: 50%; background: var(--c); fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rcs-tags { margin-top: 1.2rem; }
.rcs-tags li { color: var(--ink); background: #fff; border-color: var(--line); }
.rcs-act { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.rcs-watch { background: var(--c); box-shadow: 0 14px 30px -14px var(--c); }
.js .rcs.rv { transform: perspective(1200px) rotateX(14deg) translateY(50px); }
.js .rcs.rv.in { transform: none; }
@media (max-width: 899px) { .rcs-card { width: min(300px, 82%); } .rcs-num { font-size: 6rem; top: -1.4rem; } }
.rcs-num { display: none; }
/* review story cards: straight, no tilt */
.rcs-card, .rcs:nth-child(even) .rcs-card { transform: none !important; }
.js .rcs.rv { transform: translateY(30px); }
.js .rcs.rv.in { transform: none; }

/* ---------- Contact page ---------- */
.ct-hero { text-align: left; position: relative; overflow: hidden; }
.ct-hero .wrap { justify-items: stretch; }
.ct-in { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .ct-in { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } }
.ct-copy { display: grid; justify-items: start; }
.ct-copy .ab-crumb { justify-content: flex-start; }
.ct-copy .ab-h1 { text-align: left; }
.ct-ways { display: grid; gap: .75rem; width: 100%; margin-top: 1.6rem; perspective: 900px; }
.ct-way { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(20,10,10,.5); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.ct-way:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 24px 44px -26px color-mix(in srgb, var(--c) 60%, transparent); }
.ct-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--c); box-shadow: 0 10px 20px -10px var(--c); }
.ct-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-way-t { flex: 1; min-width: 0; display: grid; font: 700 .98rem var(--head); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ct-way-t small { font: 600 .74rem var(--body); color: var(--muted); }
.ct-go { flex: none; color: var(--c); transition: transform .3s; } .ct-way:hover .ct-go { transform: translateX(4px); }
.ct-copy-btn { flex: none; display: flex; align-items: center; gap: .35rem; padding: .45rem .75rem; border-radius: 999px; cursor: pointer; font: 700 .76rem var(--head); color: var(--ink); background: var(--soft); border: 1px solid var(--line); transition: all .25s; }
.ct-copy-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.ct-copy-btn:hover { border-color: var(--red); color: var(--red); }
.ct-copy-btn.done { color: #fff; background: #16A34A; border-color: #16A34A; }
.ct-promise { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.2rem; font-size: .84rem; font-weight: 600; color: var(--muted); }
.ct-promise li { display: flex; align-items: center; gap: .45rem; }
.ct-promise i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
@media (max-width: 480px) { .ct-copy-btn span { display: none; } }
.ct-form-wrap { position: relative; perspective: 1400px; }
.ct-form-glow { position: absolute; inset: 8% -4% -4% 8%; border-radius: 40px; background: conic-gradient(from 120deg, #E5281E, #F97316, #EC4899, #E5281E); filter: blur(60px); opacity: .28; animation: rsSpin 18s linear infinite; }
.ct-form { position: relative; border-top: 4px solid var(--red); box-shadow: 0 50px 90px -40px rgba(20,10,10,.45); }
.js .ct-form-wrap.rv { opacity: 0; transform: perspective(1400px) rotateX(16deg) translateY(50px); transition: opacity .9s var(--ease), transform 1.2s cubic-bezier(.2,.9,.25,1.05); }
.js .ct-form-wrap.rv.in { opacity: 1; transform: none; }
.ct-plane { position: absolute; z-index: 0; width: 64px; height: 64px; left: -80px; top: 60%; pointer-events: none; animation: ctFly 16s cubic-bezier(.45,0,.55,1) infinite; filter: drop-shadow(0 14px 14px rgba(229,40,30,.25)); }
.ct-plane svg { width: 100%; height: 100%; }
@keyframes ctFly {
  0% { transform: translate(0, 0) rotate(-8deg) scale(.7); opacity: 0; }
  8% { opacity: 1; }
  45% { transform: translate(45vw, -38vh) rotate(-18deg) scale(1); }
  60% { transform: translate(60vw, -30vh) rotate(8deg) scale(.95); opacity: 1; }
  80%, 100% { transform: translate(110vw, -60vh) rotate(-20deg) scale(.6); opacity: 0; }
}
.ct-in { position: relative; z-index: 1; }

.cn { position: relative; display: grid; gap: 1.25rem; counter-reset: s; }
@media (min-width: 860px) { .cn { grid-template-columns: repeat(3, 1fr); } .cn::before { content: ""; position: absolute; left: 16%; right: 16%; top: 34px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #E5281E, #F97316, #10B981); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .3s; } .cn.in::before { transform: scaleX(1); } }
.cn-s { position: relative; display: grid; justify-items: center; text-align: center; padding: 0 1rem; opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .8s var(--ease); transition-delay: calc(var(--k) * 250ms + .2s); }
.cn.in .cn-s { opacity: 1; transform: none; }
.cn-n { position: relative; z-index: 1; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font: 900 1.6rem var(--head); color: #fff; background: var(--c); box-shadow: 0 0 0 8px #fff, 0 0 0 10px color-mix(in srgb, var(--c) 30%, transparent), 0 20px 30px -12px var(--c); }
.cn-s h3 { margin-top: 1.1rem; font: 800 1.2rem var(--head); }
.cn-s p { margin-top: .35rem; max-width: 30ch; color: var(--muted); font-size: .92rem; }

.ct-book { padding: 5rem 0; }
.ct-book-in { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 980px) { .ct-book-in { grid-template-columns: .8fr 1.2fr; gap: 3.5rem; } }
.ct-book-copy { display: grid; justify-items: start; }
.ct-book-copy .h2, .ct-book-copy .sub { text-align: left; margin-left: 0; }
.ct-book-list { display: grid; gap: .55rem; margin-top: 1.2rem; }
.ct-book-list li { display: flex; align-items: center; gap: .6rem; color: #E6E6EE; font-weight: 600; }
.ct-book-list li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #16A34A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ct-book-me { display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; padding: .7rem 1rem .7rem .7rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--d-line); }
.ct-book-me img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--red); }
.ct-book-me strong { display: block; color: #fff; font: 800 .95rem var(--head); } .ct-book-me small { color: var(--d-muted); font-size: .78rem; }
.ct-cal { width: 100%; }
.ct-page main { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { .ct-plane, .ct-form-glow { animation: none; } .ct-plane { display: none; } .cn-s { opacity: 1; transform: none; } }
.ct-cal .ty-cal-head strong { color: var(--ink); }
@media (max-width: 480px) { .ct-way-t { font-size: .86rem; } .ct-ic { width: 40px; height: 40px; } }
@media (max-width: 999px) { .ct-plane { display: none; } }

/* ---------- "Everything inside GoHighLevel" hub ---------- */
.hub-wrap { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1000px) { .hub-wrap { grid-template-columns: .9fr 1.1fr; gap: 3rem; } }
.hub-copy { display: grid; justify-items: start; }
.hub-copy .h2, .hub-copy .sub { text-align: left; margin-left: 0; }
.hub-pts { display: grid; gap: .6rem; margin-top: 1.4rem; width: 100%; }
.hub-pts li { display: grid; padding: .8rem 1rem .8rem 2.8rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); position: relative; }
.hub-pts li::before { content: ""; position: absolute; left: 1rem; top: 1rem; width: 20px; height: 20px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.hub-pts b { font: 800 .98rem var(--head); } .hub-pts span { font-size: .86rem; color: var(--muted); }
.hub { --r: 215px; position: relative; width: min(560px, 100%); aspect-ratio: 1; margin: 0 auto; }
.hub-orbit { position: absolute; inset: 0; }
.hub-n { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.hub-line { position: absolute; left: 0; top: -1px; width: calc(var(--r) - 40px); height: 2px; transform-origin: left center; transform: rotate(var(--a)); background: linear-gradient(90deg, rgba(229,40,30,.35), color-mix(in srgb, var(--c) 45%, transparent)); }
.hub-line i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: hubPulse 2.8s linear infinite; animation-delay: calc(var(--k) * -.31s); }
@keyframes hubPulse { 0% { left: 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
.hub-node { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: .35rem; width: 104px; text-align: center; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)) translate(-50%, -50%); }
.hub-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--c) 70%, transparent); transition: transform .35s var(--ease); }
.hub-n:hover .hub-ic { transform: translateY(-4px) scale(1.06); }
.hub-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--c); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hub-node b { font: 800 .76rem/1.2 var(--head); color: var(--ink); }
.hub-core { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; transform: translate(-50%, -50%); display: grid; place-items: center; }
.hub-core-ring { position: absolute; inset: -14px; border-radius: 50%; border: 2px dashed rgba(229,40,30,.3); animation: spin 30s linear infinite; }
.hub-core-in { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-content: center; justify-items: center; text-align: center; color: #fff; background: radial-gradient(circle at 30% 25%, #FF7A4D, #E5281E 60%, #A3160F); box-shadow: 0 0 0 10px rgba(229,40,30,.12), 0 30px 60px -20px rgba(229,40,30,.7); animation: hubBeat 3s ease-in-out infinite; }
.hub-core-in small { font: 700 .66rem var(--head); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.hub-core-in strong { font: 900 1.25rem/1.1 var(--head); }
.hub-core-in em { font: 600 .72rem var(--body); font-style: normal; opacity: .85; }
@keyframes hubBeat { 50% { box-shadow: 0 0 0 18px rgba(229,40,30,.08), 0 30px 60px -20px rgba(229,40,30,.7); } }
@media (max-width: 600px) {
  .hub { --r: 128px; width: 100%; max-width: 360px; }
  .hub-core { width: 112px; height: 112px; } .hub-core-in strong { font-size: .92rem; } .hub-core-in em { display: none; }
  .hub-node { width: 76px; } .hub-ic { width: 42px; height: 42px; border-radius: 13px; } .hub-ic svg { width: 20px; height: 20px; } .hub-node b { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) { .hub-line i, .hub-core-ring, .hub-core-in { animation: none; } }

/* ---------- Home: lead follow-up funnel ---------- */
.hm-kick { font: 800 .74rem var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.dark .hm-kick, .hm-final .hm-kick { color: #FF8A7A; }
.hm-h2 { font: 900 clamp(2rem, 4.6vw, 3.3rem)/1.05 var(--head); letter-spacing: -.02em; margin-top: .6rem; }
.hm-h2 span { color: var(--red); }
.dark .hm-h2 span { color: #FF5A4D; }
.hm-sub { margin-top: 1rem; max-width: 62ch; font-size: 1.05rem; color: var(--muted); }
.dark .hm-sub { color: var(--d-muted); }
.hm-head { margin-bottom: 2.4rem; }
.hm-btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.hm-btns-c { justify-content: center; }

.hm-hero { position: relative; padding: 8.5rem 0 4rem; background: radial-gradient(900px 500px at 85% 10%, rgba(249,115,22,.12), transparent 60%), radial-gradient(800px 500px at 5% 0%, rgba(229,40,30,.1), transparent 60%), #FFF9F6; overflow: hidden; }
.hm-hero-in { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1020px) { .hm-hero-in { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; } }
.hm-eyebrow { font: 800 .78rem var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.hm-h1 { margin-top: 1rem; font: 900 clamp(2.6rem, 6.4vw, 4.8rem)/1 var(--head); letter-spacing: -.03em; color: var(--ink); }
.hm-h1 span { display: block; background: linear-gradient(90deg, #E5281E, #F97316); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-lead { margin-top: 1.4rem; max-width: 58ch; font-size: 1.1rem; line-height: 1.65; color: var(--muted); }
.hm-lead b { color: var(--ink); }
.hm-ticks { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: 1.2rem; font-size: .88rem; font-weight: 600; color: var(--muted); }
.hm-ticks li { display: flex; align-items: center; gap: .35rem; }
.hm-ticks svg, .hm-final-list svg, .hm-way li svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hm-already { margin-top: 1rem; font-size: .92rem; color: var(--muted); }
.hm-already a { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.hm-calc { position: relative; padding: 1.6rem; border-radius: 26px; background: #15151F; color: var(--d-ink); box-shadow: 0 50px 90px -40px rgba(20,10,10,.6), 0 0 0 1px rgba(255,255,255,.05); }
.hm-calc::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 28px; background: linear-gradient(140deg, #E5281E, #F97316 50%, transparent 80%); opacity: .7; }
.hm-calc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hm-calc-top .hm-kick { color: #FF8A7A; } .hm-calc-top span { font-size: .78rem; color: var(--d-muted); }
.hm-calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.1rem; }
.hm-f { display: grid; gap: .4rem; font-size: .82rem; color: #C9C9D6; }
.hm-f input, .hm-money { width: 100%; height: 48px; border-radius: 12px; background: #0D0D14; border: 1px solid rgba(255,255,255,.12); color: #fff; font: 700 1.05rem var(--body); }
.hm-f input { padding: 0 .9rem; }
.hm-money { display: flex; align-items: center; overflow: hidden; }
.hm-money select { height: 100%; padding: 0 .3rem 0 .7rem; border: 0; background: transparent; color: #FF8A7A; font: 800 1rem var(--head); cursor: pointer; }
.hm-money select option { color: #000; }
.hm-money input { border: 0; height: 100%; background: transparent; padding-left: .3rem; }
.hm-f input:focus, .hm-money:focus-within { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(229,40,30,.25); }
.hm-sl { display: grid; gap: .55rem; margin-top: 1.1rem; font-size: .84rem; color: #C9C9D6; }
.hm-sl > span { display: flex; justify-content: space-between; gap: 1rem; }
.hm-sl b { font: 800 .95rem var(--head); color: #fff; }
.hm-sl input[type=range] { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #E5281E, #F97316) 0 / var(--p) 100% no-repeat, rgba(255,255,255,.14); cursor: pointer; }
.hm-sl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--red); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.hm-sl input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--red); }
.hm-calc-out { margin-top: 1.3rem; padding: 1.1rem 1.2rem; border-radius: 18px; background: #0D0D14; border: 1px solid rgba(229,40,30,.35); }
.hm-calc-out small { font-size: .82rem; color: var(--d-muted); }
.hm-calc-out strong { display: block; margin: .2rem 0 .3rem; font: 900 clamp(2.2rem, 5vw, 3rem)/1 var(--head); color: #FF4A3D; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hm-calc-out span { font-size: .88rem; color: #D8D8E2; }
.hm-calc-note { margin: .8rem 0 1rem; font-size: .72rem; line-height: 1.5; color: var(--d-muted); }
@media (max-width: 480px) { .hm-calc { padding: 1.2rem; } .hm-calc-row { grid-template-columns: 1fr; } }

.hm-trust { padding: 2.4rem 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
@media (min-width: 860px) { .hm-stats { grid-template-columns: repeat(4, 1fr); } }
.hm-stats strong { display: block; font: 900 1.6rem var(--head); color: var(--ink); }
.hm-stats span { font-size: .86rem; color: var(--muted); }
.hm-inds { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.hm-inds li { padding: .4rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--muted); background: var(--soft); border: 1px solid var(--line); }

.hm-crs { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .hm-crs { grid-template-columns: 1fr 1fr; } }
.hm-cr { display: grid; grid-template-columns: 150px 1fr; gap: 1.2rem; padding: 1.2rem; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -36px rgba(20,10,10,.45); transition: box-shadow .35s, border-color .35s; }
.hm-cr:hover { border-color: rgba(229,40,30,.35); box-shadow: 0 30px 60px -32px rgba(229,40,30,.35); }
@media (max-width: 520px) { .hm-cr { grid-template-columns: 1fr; } .hm-cr-vid { aspect-ratio: 16 / 11 !important; } }
.hm-cr-vid { position: relative; align-self: start; padding: 0; border: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4.2; cursor: pointer; background: #111; }
.hm-cr-vid img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .8s var(--ease); }
.hm-cr-vid:hover img { transform: scale(1.06); }
.hm-cr-vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.5)); }
.hm-cr-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; display: grid; place-items: center; background: var(--red); box-shadow: 0 0 0 8px rgba(229,40,30,.25); animation: ping 2.4s infinite; }
.hm-cr-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.hm-cr-body { display: grid; align-content: start; gap: .55rem; }
.hm-cr-body h3 { font: 900 1.45rem var(--head); }
.hm-cr-biz { font-size: .84rem; color: var(--muted); margin-top: -.3rem; }
.hm-cr-body p { font-size: .92rem; line-height: 1.55; color: var(--muted); }
.hm-cr-body p b { color: var(--ink); }
.hm-cr-res { font-weight: 700; color: var(--red) !important; }
.hm-cr-watch { justify-self: start; display: flex; align-items: center; gap: .4rem; padding: 0; border: 0; background: none; cursor: pointer; font: 800 .92rem var(--head); color: var(--red); }
.hm-cr-watch svg { width: 14px; height: 14px; fill: currentColor; }
.hm-cr-watch:hover { text-decoration: underline; text-underline-offset: 3px; }

.hm-leak-sec { padding: 5.5rem 0; }
.hm-try { margin-top: 1.6rem; font-size: .82rem; color: var(--d-muted); }
.hm-mos { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; margin-top: .7rem; }
@media (max-width: 700px) { .hm-mos { grid-template-columns: repeat(3, 1fr); } }
.hm-mo { display: grid; justify-items: center; gap: .2rem; padding: 1.1rem .5rem; border-radius: 18px; cursor: pointer; font: inherit; color: #fff; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); transition: all .35s var(--ease); }
.hm-mo:hover { transform: translateY(-3px); }
.hm-mo-n { font: 900 1.8rem var(--head); }
.hm-mo b { font: 800 .95rem var(--head); text-align: center; }
.hm-mo small { font-size: .78rem; font-weight: 700; }
.hm-mo.held { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.45); } .hm-mo.held small { color: #4ADE80; }
.hm-mo.drop { background: rgba(229,40,30,.14); border-color: #E5281E; box-shadow: 0 0 0 1px #E5281E, 0 16px 34px -16px rgba(229,40,30,.7); } .hm-mo.drop small { color: #FF6B5E; }
.hm-mo.cold { opacity: .4; border-style: dashed; } .hm-mo.cold small { color: var(--d-muted); }
.hm-outs { display: grid; gap: .9rem; margin-top: 1.2rem; }
@media (min-width: 760px) { .hm-outs { grid-template-columns: 1fr 1fr; } }
.hm-out { padding: 1.2rem 1.3rem; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); opacity: .45; transition: all .4s var(--ease); }
.hm-out b { display: block; font: 800 1rem var(--head); }
.hm-out p { margin-top: .35rem; font-size: .92rem; color: #D0D0DA; }
.hm-out.good b { color: #4ADE80; } .hm-out.bad b { color: #FF6B5E; }
.hm-out.on { opacity: 1; transform: translateY(-2px); }
.hm-out.good.on { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.08); }
.hm-out.bad.on { border-color: rgba(229,40,30,.6); background: rgba(229,40,30,.08); }

.hm-sts { display: grid; gap: .8rem; }
.hm-st { display: flex; gap: 1.3rem; align-items: flex-start; padding: 1.3rem 1.4rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, transform .3s var(--ease); }
.hm-st:hover { border-color: rgba(229,40,30,.4); transform: translateX(4px); }
.hm-st-n { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 900 1.3rem var(--head); color: #fff; background: linear-gradient(135deg, #E5281E, #F97316); }
.hm-st h3 { font: 800 1.12rem var(--head); }
.hm-st p { margin-top: .25rem; color: var(--muted); font-size: .94rem; }

.hm-gets { display: grid; gap: 1rem; }
@media (min-width: 640px) { .hm-gets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .hm-gets { grid-template-columns: repeat(3, 1fr); } }
.hm-get { padding: 1.4rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.hm-get:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -30px rgba(229,40,30,.5); }
.hm-get-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #FDECEA; }
.hm-get-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hm-get h3 { margin-top: .9rem; font: 800 1.08rem var(--head); }
.hm-get p { margin-top: .3rem; font-size: .92rem; color: var(--muted); }
.hm-a2p { margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: 16px; background: #fff; border: 1px dashed rgba(229,40,30,.4); font-size: .94rem; color: var(--muted); }
.hm-a2p b { color: var(--ink); }

.hm-who { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hm-who { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }
.hm-who-img { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 440px; box-shadow: 0 50px 80px -40px rgba(20,10,10,.55); }
.hm-who-img img { width: 100%; height: 100%; object-fit: cover; }
.hm-who-tag { position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 999px; font: 700 .82rem var(--head); color: var(--ink); background: rgba(255,255,255,.92); }
.hm-who-tag i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
.hm-who-copy > p:not(.hm-kick) { margin-top: 1rem; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }

.hm-ways { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .hm-ways { grid-template-columns: 1fr 1fr; } }
.hm-way { display: flex; flex-direction: column; padding: 1.8rem; border-radius: 24px; background: var(--d-card); border: 1px solid var(--d-line); transition: border-color .35s, transform .35s var(--ease); }
.hm-way:hover { border-color: rgba(229,40,30,.55); transform: translateY(-4px); }
.hm-way h3 { margin-top: .5rem; font: 900 1.6rem var(--head); color: #fff; }
.hm-way-who { margin-top: .7rem; color: var(--d-muted); }
.hm-price { margin-top: 1rem; font: 800 1.1rem var(--head); color: #fff; }
.hm-way ul { display: grid; gap: .55rem; margin: 1.1rem 0 1.5rem; }
.hm-way li { display: flex; gap: .55rem; align-items: flex-start; color: #DADAE4; }
.hm-way li svg { margin-top: .25rem; stroke: #FF6B5E; }
.hm-way-act { margin-top: auto; display: grid; gap: .7rem; justify-items: center; }
.hm-more { font: 700 .88rem var(--head); color: #FFB59E; }

.hm-final-sec { padding: 1rem 0 5.5rem; }
.hm-final { padding: clamp(2rem, 5vw, 3.5rem); border-radius: 32px; text-align: center; color: #fff; background: radial-gradient(600px 300px at 80% 0%, rgba(249,115,22,.35), transparent 60%), linear-gradient(135deg, #1A0F12, #120E16); box-shadow: 0 50px 90px -40px rgba(20,10,10,.7); }
.hm-final .hm-h2 { color: #fff; } .hm-final .hm-h2 span { color: #FF5A4D; }
.hm-final-list { display: inline-grid; gap: .55rem; margin-top: 1.4rem; text-align: left; }
.hm-final-list li { display: flex; gap: .55rem; align-items: center; color: #E2E2EA; }
.hm-final-list svg { stroke: #FF6B5E; }
.hm-final-note { margin-top: 1rem; font-size: .86rem; color: #B5B5C2; }
.hm-page main { overflow-x: clip; }
.hm-h1 { text-transform: none; font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.02; }
.hm-h2 { text-transform: none; }
.hm-cr-body .hm-kick { color: var(--red); }

/* ---------- Home: lead leak check (under hero) ---------- */
.lk { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1000px) { .lk { grid-template-columns: 1fr .95fr; gap: 3.5rem; } }
.lk-copy .h2 { text-transform: none; }
.lk-strong { margin-top: 1rem; font: 700 1.08rem/1.6 var(--body); color: var(--ink); max-width: 56ch; }
.lk-ticks { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: 1.2rem; font-size: .9rem; font-weight: 600; color: var(--muted); }
.lk-ticks li { display: flex; align-items: center; gap: .35rem; }
.lk-ticks svg, .way-list svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lk-already { margin-top: 1rem; font-size: .94rem; color: var(--muted); }
.lk-already a { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lk-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 3rem; }
@media (min-width: 860px) { .lk-stats { grid-template-columns: repeat(4, 1fr); } }
.lk-stats > div { padding: 1.1rem 1.2rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--red); box-shadow: 0 18px 40px -32px rgba(20,10,10,.5); }
.lk-stats strong { display: block; font: 900 1.45rem var(--head); color: var(--ink); }
.lk-stats span { font-size: .85rem; color: var(--muted); }
.lk-sec .hm-inds { justify-content: center; }
/* 5 moments (dark, original style) */
#the-leak .hm-try { text-align: center; }
#the-leak .hm-mos, #the-leak .hm-outs { max-width: 1000px; margin-left: auto; margin-right: auto; }
/* hub: 5 steps list */
.hub-steps { display: grid; gap: .55rem; margin-top: 1.4rem; width: 100%; }
.hub-steps li { display: flex; gap: .9rem; align-items: flex-start; padding: .8rem 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, transform .3s var(--ease); }
.hub-steps li:hover { border-color: rgba(229,40,30,.4); transform: translateX(4px); }
.hub-sn { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font: 900 .95rem var(--head); color: #fff; background: linear-gradient(135deg, #E5281E, #F97316); }
.hub-steps b { display: block; font: 800 .95rem var(--head); }
.hub-steps span { display: block; font-size: .84rem; color: var(--muted); line-height: 1.45; }
/* two ways bullet list */
.way-list { display: grid; gap: .45rem; margin: 1rem 0 .4rem; }
.way-list li { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; color: #DADAE4; }
.way-list svg { margin-top: .2rem; stroke: #FF6B5E; }
/* review cards inside reviews section */
#reviews .hm-crs { margin-top: 1rem; }
.lk > * { min-width: 0; } .lk-copy .h2 { overflow-wrap: anywhere; } .hm-page main, body:not(.ab-page) main { overflow-x: clip; }
.hub-steps .hub-sn { display: grid; color: #fff; font: 900 .95rem var(--head); line-height: 1; }
.ways { align-items: stretch; }
.hm-calc-top { flex-wrap: wrap; row-gap: .2rem; }
.sv-prob { margin-top: .6rem; padding: .7rem .9rem; border-radius: 12px; font-size: .94rem; line-height: 1.55; color: #7F1D1D; background: #FEF2F2; border-left: 3px solid var(--red); }
.sv-prob b, .sv-desc b { color: var(--ink); }
.sv-prob + .sv-desc { margin-top: .7rem; }

/* About: problem / fix / what changed cards */
.ab-pfr { display: grid; gap: .65rem; margin-top: 1rem; }
.ab-pfr > div { padding: .7rem .85rem; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.ab-pfr > div:first-child { background: #FEF2F2; border-color: rgba(229,40,30,.18); }
.ab-pfr > div:last-child { background: color-mix(in srgb, var(--c) 8%, #fff); border-color: color-mix(in srgb, var(--c) 30%, transparent); }
.ab-pfr dt { font: 800 .7rem var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.ab-pfr > div:first-child dt { color: #B91C1C; }
.ab-pfr > div:last-child dt { color: var(--c); }
.ab-pfr dd { margin: .2rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
.ab-exp { display: flex; flex-direction: column; }
/* About founder: what changes for you */
.ab-f-lbl { margin-top: 1.2rem; font: 800 .74rem var(--head); letter-spacing: .14em; text-transform: uppercase; color: #FF8A7A; }
.ab-easy { display: grid; gap: .55rem; margin: .7rem 0 1.2rem; }
@media (min-width: 700px) { .ab-easy { grid-template-columns: 1fr 1fr; } }
.ab-easy li { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .85rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--d-line); font-size: .88rem; line-height: 1.5; color: #CFCFDA; }
.ab-easy li b { color: #fff; }
.ab-easy svg { flex: none; width: 20px; height: 20px; padding: 3px; margin-top: .1rem; border-radius: 50%; background: #16A34A; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Home: 3D lead journey (5 moments) ---------- */
#the-leak { overflow: hidden; }
.lj-scene { --mx: 24deg; --my: 0deg; position: relative; max-width: 1080px; margin: 1.2rem auto 0; height: 360px; perspective: 1500px; }
.lj-floor { position: absolute; left: -6%; right: -6%; top: 46%; height: 340px; transform: rotateX(78deg); transform-origin: top center; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(229,40,30,.22), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 60px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 60px);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); }
.lj-track { position: absolute; left: 12%; right: 12%; top: 10%; height: 10px; border-radius: 10px; background: linear-gradient(90deg, #22C55E, #F97316 55%, #E5281E); opacity: .55; box-shadow: 0 0 30px rgba(249,115,22,.6); }
.lj-row { --stop: 5; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; height: 100%; align-items: center; padding: 0 6%; transform-style: preserve-3d; transform: rotateX(var(--mx)) rotateY(var(--my)); transition: transform .8s var(--ease); }
#the-leak .hm-mo { position: relative; padding: 0; border: 0; background: none; opacity: 1; cursor: pointer; transform-style: preserve-3d; transform: translateZ(28px); transition: transform .8s cubic-bezier(.3,1.4,.4,1), filter .5s; animation: ljBob 4s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .2s); }
#the-leak .hm-mo:nth-of-type(1) { --d: 0 } #the-leak .hm-mo:nth-of-type(2) { --d: 1 } #the-leak .hm-mo:nth-of-type(3) { --d: 2 } #the-leak .hm-mo:nth-of-type(4) { --d: 3 } #the-leak .hm-mo:nth-of-type(5) { --d: 4 }
@keyframes ljBob { 50% { translate: 0 -6px; } }
#the-leak .hm-mo:hover { transform: translateZ(48px) scale(1.04); }
.lj-face { position: relative; display: grid; justify-items: center; gap: .25rem; padding: 1.1rem .5rem 1rem; border-radius: 20px; color: #fff; background: linear-gradient(160deg, #1B2A22, #0F1A14); border: 1px solid rgba(34,197,94,.55); box-shadow: 0 0 0 1px rgba(34,197,94,.15), 0 30px 40px -24px rgba(0,0,0,.9), 0 0 40px -12px rgba(34,197,94,.55); transition: all .5s var(--ease); }
.lj-side { position: absolute; left: 6px; right: 6px; bottom: -16px; height: 16px; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #14532D, #052E16); transform-origin: top; transform: rotateX(-70deg); transition: background .5s; }
.lj-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(34,197,94,.16); transition: background .5s; }
.lj-ic svg { width: 21px; height: 21px; fill: none; stroke: #4ADE80; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
#the-leak .hm-mo-n { font: 900 1.6rem/1 var(--head); margin-top: .2rem; }
#the-leak .hm-mo b { font: 800 .92rem var(--head); text-align: center; }
#the-leak .hm-mo small { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #4ADE80; }
/* dropped: tips over */
#the-leak .hm-mo.drop { transform: translateZ(10px) translateY(26px) rotateX(-58deg); animation: none; }
#the-leak .hm-mo.drop .lj-face { background: linear-gradient(160deg, #3A1110, #1C0807); border-color: #E5281E; box-shadow: 0 0 0 1px rgba(229,40,30,.4), 0 0 60px -6px rgba(229,40,30,.75); }
#the-leak .hm-mo.drop .lj-side { background: linear-gradient(180deg, #7F1D1D, #3B0A0A); }
#the-leak .hm-mo.drop .lj-ic { background: rgba(229,40,30,.2); } #the-leak .hm-mo.drop .lj-ic svg { stroke: #FF6B5E; }
#the-leak .hm-mo.drop small { color: #FF6B5E; }
/* after the drop: sunk and cold */
#the-leak .hm-mo.cold { transform: translateZ(-50px) translateY(14px); animation: none; filter: saturate(.3); }
#the-leak .hm-mo.cold .lj-face { background: linear-gradient(160deg, #1A2230, #10151F); border: 1px dashed rgba(148,163,184,.35); box-shadow: 0 20px 30px -24px rgba(0,0,0,.9); color: #8A94A6; }
#the-leak .hm-mo.cold .lj-side { background: #1E293B; }
#the-leak .hm-mo.cold .lj-ic { background: rgba(148,163,184,.12); } #the-leak .hm-mo.cold .lj-ic svg { stroke: #94A3B8; }
#the-leak .hm-mo.cold small { color: #64748B; }
/* start / goal labels */
.lj-start, .lj-goal { position: absolute; top: 50%; translate: 0 -50%; font: 800 .72rem var(--head); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.lj-start { left: -1%; color: #A1A1B5; writing-mode: vertical-rl; rotate: 180deg; }
.lj-goal { right: -2%; display: flex; flex-direction: column; align-items: center; gap: .35rem; color: #4ADE80; opacity: .35; transform: translateZ(20px); transition: opacity .5s, transform .5s; }
.lj-goal svg { width: 34px; height: 34px; padding: 7px; border-radius: 50%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; background: #16A34A; box-shadow: 0 0 0 6px rgba(34,197,94,.18); }
.lj-row.won .lj-goal { opacity: 1; transform: translateZ(40px) scale(1.12); }
/* the lead orb */
.lj-orb { --pos: -1; --dur: 2s; position: absolute; z-index: 5; top: 6%; left: calc(6% + (88% / 5) * (var(--pos) + .5)); width: 36px; height: 36px; margin-left: -18px; transform: translateZ(90px); transition: left var(--dur) cubic-bezier(.45,.05,.4,1); pointer-events: none; }
.lj-orb.reset { transition: none; }
.lj-orb i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #FDBA74 35%, #F97316 70%); box-shadow: 0 0 24px 6px rgba(249,115,22,.7), 0 0 60px 10px rgba(249,115,22,.35); animation: ljPulse 1.2s ease-in-out infinite; transition: background .5s, box-shadow .5s, transform .6s; }
@keyframes ljPulse { 50% { transform: scale(1.12); } }
.lj-orb em { position: absolute; left: 50%; top: -24px; translate: -50% 0; font: 800 .62rem var(--head); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #FDBA74; white-space: nowrap; }
.lj-row.lost .lj-orb.arrived i { background: radial-gradient(circle at 35% 30%, #fff, #BAE6FD 35%, #38BDF8 75%); box-shadow: 0 0 20px 4px rgba(56,189,248,.6); animation: none; transform: translateY(70px) scale(.8); }
.lj-row.lost .lj-orb.arrived em { color: #7DD3FC; }
.lj-row.lost .lj-orb.arrived em::after { content: " · gone cold"; }
.lj-row.won .lj-orb.arrived i { background: radial-gradient(circle at 35% 30%, #fff, #86EFAC 35%, #22C55E 75%); box-shadow: 0 0 26px 8px rgba(34,197,94,.7); }
.lj-row.won .lj-orb.arrived em::after { content: " · booked"; }
.lj-row.won .lj-orb { left: calc(6% + 88% + 1.4rem); }
.lj-row.won .lj-orb.reset { left: calc(6% + (88% / 5) * (var(--pos) + .5)); }
/* outcome panels in 3D */
.lj-outs { perspective: 1200px; }
#the-leak .hm-out { transform: rotateX(18deg) translateZ(-40px); transform-origin: top; transition: all .7s cubic-bezier(.3,1.3,.4,1); }
#the-leak .hm-out.on { transform: rotateX(0) translateZ(0); box-shadow: 0 40px 70px -40px rgba(0,0,0,.9); }
@media (max-width: 760px) {
  .lj-scene { height: 300px; --mx: 16deg; }
  .lj-row { gap: .35rem; padding: 0 2%; }
  .lj-face { padding: .7rem .2rem; border-radius: 14px; }
  .lj-ic { width: 30px; height: 30px; border-radius: 9px; } .lj-ic svg { width: 16px; height: 16px; }
  #the-leak .hm-mo-n { font-size: 1.1rem; } #the-leak .hm-mo b { font-size: .62rem; } #the-leak .hm-mo small { font-size: .52rem; }
  .lj-start, .lj-goal { display: none; }
  .lj-orb { left: calc(2% + (96% / 5) * (var(--pos) + .5)); width: 26px; height: 26px; margin-left: -13px; }
  .lj-row.won .lj-orb { left: calc(2% + (96% / 5) * 4.5); }
}
@media (prefers-reduced-motion: reduce) { #the-leak .hm-mo, .lj-orb i { animation: none; } .lj-orb { transition: none; } }
#the-leak .hm-mo, #the-leak .hm-mo.held, #the-leak .hm-mo.drop, #the-leak .hm-mo.cold { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; }
.lj-orb { top: 21%; transition: left var(--dur) cubic-bezier(.45,.05,.4,1), transform .6s cubic-bezier(.3,1.4,.4,1); }
.lj-orb em { top: -22px; }
.lj-row.lost .lj-orb.arrived { transform: translateZ(90px) translateY(46px); }
.lj-row.lost .lj-orb.arrived i { transform: scale(.85); }
.lj-row.won .lj-orb.arrived { transform: translateZ(90px) translateY(70px); }
@media (max-width: 760px) { .lj-orb { top: 24%; } .lj-orb em { font-size: .52rem; } .lj-row.lost .lj-orb.arrived { transform: translateZ(90px) translateY(34px); } .lj-row.won .lj-orb.arrived { transform: translateZ(90px) translateY(40px); } }

/* ---------- Home: Sound familiar? (problem -> fix flip cards) ---------- */
.pb-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 1.6rem; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -22px rgba(20,10,10,.5); }
.pb-switch button { position: relative; z-index: 1; padding: .6rem 1.2rem; border: 0; background: none; cursor: pointer; font: 800 .86rem var(--head); color: var(--muted); border-radius: 999px; transition: color .3s; white-space: nowrap; }
.pb-switch button.on { color: #fff; }
.pb-switch i { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: linear-gradient(135deg, #E5281E, #F97316); box-shadow: 0 8px 20px -8px rgba(229,40,30,.7); transition: transform .45s cubic-bezier(.3,1.3,.4,1), background .45s; }
.pb-switch.fix i { transform: translateX(100%); background: linear-gradient(135deg, #16A34A, #22C55E); box-shadow: 0 8px 20px -8px rgba(34,197,94,.7); }
.pb-grid { display: grid; gap: 1.1rem; perspective: 1600px; }
@media (min-width: 640px) { .pb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pb-grid { grid-template-columns: repeat(4, 1fr); } }
.pb { height: 290px; perspective: 1100px; cursor: pointer; outline: none; }
.pb-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,1.25,.4,1); }
@media (hover: hover) { .pb:hover .pb-in { transform: rotateY(180deg); } }
.pb.flip .pb-in, .pb:focus-visible .pb-in { transform: rotateY(180deg); }
.pb.flip:hover .pb-in { transform: rotateY(180deg); }
.pb-face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem; border-radius: 22px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pb-front { background: linear-gradient(165deg, #fff, #FFF5F4); border: 1px solid rgba(229,40,30,.22); box-shadow: 0 26px 50px -34px rgba(229,40,30,.55); }
.pb-front::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(229,40,30,.14), transparent); }
.pb-back { transform: rotateY(180deg); color: #fff; background: linear-gradient(160deg, #16A34A, #0F5132); box-shadow: 0 30px 60px -30px rgba(22,163,74,.8); }
.pb-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; font: 800 .64rem var(--head); letter-spacing: .1em; text-transform: uppercase; }
.pb-tag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.pb-front .pb-tag { color: #B91C1C; background: #FEE2E2; }
.pb-back .pb-tag { color: #fff; background: rgba(255,255,255,.18); }
.pb-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.pb-ic svg { width: 22px; height: 22px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pb-front .pb-ic { background: #FEE2E2; } .pb-front .pb-ic svg { stroke: #DC2626; }
.pb-back .pb-ic { background: rgba(255,255,255,.18); } .pb-back .pb-ic svg { stroke: #fff; }
.pb h3 { font: 800 1.08rem/1.25 var(--head); }
.pb-fut { margin-top: auto; padding: .65rem .75rem; border-radius: 12px; font-size: .84rem; line-height: 1.5; color: #7F1D1D; background: rgba(254,226,226,.7); border-left: 3px solid #DC2626; }
.pb-fut b { color: #B91C1C; }
.pb-back p { font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.92); }
.js .pb-grid .pb.rv { opacity: 0; transform: translateY(30px) rotateX(18deg); transition: opacity .7s var(--ease), transform .9s cubic-bezier(.2,.9,.25,1.05); transition-delay: calc(var(--i) * 60ms); }
.js .pb-grid .pb.rv.in { opacity: 1; transform: none; }
@media (max-width: 480px) { .pb { height: 270px; } .pb-switch button { padding: .55rem .9rem; font-size: .8rem; } }
.pb-ic { flex: none; }