/*
 * SevenTech Global — additions on top of site.css:
 * animations that used to be driven by JavaScript, WordPress adjustments,
 * and styling for ordinary pages and blog posts.
 */

[hidden] { display: none !important; }

/* Logo (vector): horizontal in the header, stacked in the footer. */
.st-logo { display: block; height: 38px; width: auto; }
@media (min-width: 768px) { .st-logo { height: 44px; } }
.st-logo--stacked { height: 92px; }

/* Scroll-in animations: only hide content when JavaScript is running. */
.st-js [data-reveal] { opacity: 0; will-change: opacity, transform; }

/* Client names strip. */
@keyframes st-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.st-marquee { width: max-content; animation: st-marquee 110s linear infinite; }

/* Floating labels on the hero code window. */
@keyframes st-float-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes st-float-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.st-float-up { animation: st-float-up 4s ease-in-out infinite; }
.st-float-down { animation: st-float-down 5s ease-in-out infinite; }

/* Cards that lift on hover. */
.st-lift { transition: transform .35s cubic-bezier(.25, 1.25, .5, 1); }
.st-lift:hover { transform: translateY(-6px); }

/* Carousel. */
[data-carousel-track] { will-change: transform; touch-action: pan-y; }
[data-carousel] { -webkit-user-select: none; user-select: none; }

/* Spam-trap field: invisible to people. */
.st-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/* Keep the fixed header below the WordPress toolbar for logged-in editors. */
.admin-bar .st-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .st-header { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar .st-header { position: absolute; } }

@media (prefers-reduced-motion: reduce) {
	.st-marquee, .st-float-up, .st-float-down { animation: none; }
	.st-lift, .st-lift:hover { transition: none; transform: none; }
}

/* ------------------------------------------------------------------
 * Ordinary pages and blog posts.
 * ---------------------------------------------------------------- */
.st-page { position: relative; padding: 9rem 0 5rem; }
.st-page__inner { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 2rem; }
.st-page__inner--wide { max-width: 1100px; }
.st-page__kicker { display: inline-block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--gold)); margin-bottom: 1rem; }
.st-page__title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.1; margin: 0 0 1.5rem; }
.st-page__meta { color: hsl(var(--muted-foreground)); font-size: .875rem; margin-bottom: 2.5rem; }
.st-page__thumb { border-radius: 1rem; overflow: hidden; margin-bottom: 2.5rem; border: 1px solid hsl(var(--border) / .5); }
.st-page__thumb img { display: block; width: 100%; height: auto; }

.st-content { color: hsl(var(--foreground) / .88); font-size: 1.0625rem; line-height: 1.8; }
.st-content > * + * { margin-top: 1.4em; }
.st-content h2, .st-content h3, .st-content h4 { color: hsl(var(--foreground)); font-weight: 700; line-height: 1.25; margin-top: 2em; }
.st-content h2 { font-size: 1.875rem; }
.st-content h3 { font-size: 1.5rem; }
.st-content h4 { font-size: 1.25rem; }
.st-content a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }
.st-content a:hover { color: hsl(var(--gold)); }
.st-content ul, .st-content ol { padding-left: 1.5em; }
.st-content ul { list-style: disc; }
.st-content ol { list-style: decimal; }
.st-content li + li { margin-top: .4em; }
.st-content blockquote { border-left: 3px solid hsl(var(--gold)); padding: .25em 0 .25em 1.25em; color: hsl(var(--foreground)); font-style: italic; }
.st-content img, .st-content video, .st-content iframe { max-width: 100%; height: auto; border-radius: .75rem; }
.st-content figcaption { color: hsl(var(--muted-foreground)); font-size: .875rem; margin-top: .5em; text-align: center; }
.st-content pre { background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .6); border-radius: .75rem; padding: 1.25em; overflow-x: auto; font-size: .9rem; }
.st-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .9em; }
.st-content hr { border-color: hsl(var(--border) / .6); margin: 2.5em 0; }
.st-content table { width: 100%; border-collapse: collapse; }
.st-content th, .st-content td { border: 1px solid hsl(var(--border) / .6); padding: .6em .8em; text-align: left; }
.st-content .alignwide { margin-left: -4rem; margin-right: -4rem; max-width: none; }
.st-content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 960px) { .st-content .alignwide { margin-left: 0; margin-right: 0; } }

.st-posts { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.st-post-card { display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden; border: 1px solid hsl(var(--border) / .5); background: var(--gradient-card); transition: transform .3s ease, border-color .3s ease; }
.st-post-card:hover { transform: translateY(-4px); border-color: hsl(var(--gold) / .4); }
.st-post-card__thumb img { display: block; width: 100%; height: 190px; object-fit: cover; }
.st-post-card__body { padding: 1.5rem; }
.st-post-card__date { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--gold)); }
.st-post-card__title { font-size: 1.25rem; font-weight: 700; margin: .5rem 0; line-height: 1.3; }
.st-post-card__excerpt { color: hsl(var(--muted-foreground)); font-size: .9rem; line-height: 1.6; }
.st-pagination { margin-top: 3rem; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.st-pagination .page-numbers { display: inline-flex; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; align-items: center; justify-content: center; border-radius: .5rem; border: 1px solid hsl(var(--border) / .6); font-size: .875rem; }
.st-pagination .page-numbers.current, .st-pagination a.page-numbers:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.st-comments { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid hsl(var(--border) / .5); }
.st-comments input[type="text"], .st-comments input[type="email"], .st-comments input[type="url"], .st-comments textarea { width: 100%; background: hsl(var(--background) / .4); border: 1px solid hsl(var(--border) / .6); border-radius: .5rem; padding: .6rem .8rem; color: inherit; }
.st-comments input[type="submit"] { background: var(--gradient-primary); color: hsl(var(--primary-foreground)); font-weight: 600; border-radius: .75rem; padding: .7rem 1.5rem; cursor: pointer; }
.st-comments .comment-list { list-style: none; padding: 0; }
.st-comments .comment-body { padding: 1rem 0; border-bottom: 1px solid hsl(var(--border) / .4); }


/* ------------------------------------------------------------------
 * Portfolio cards: "Read the case study" line.
 * ---------------------------------------------------------------- */
.st-card-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground)); opacity: .85; transition: gap .25s ease, color .25s ease, opacity .25s ease; }
.group:hover .st-card-more { gap: .7rem; color: hsl(var(--gold)); opacity: 1; }

/* ------------------------------------------------------------------
 * Case-study pages. Each page sets two brand colours:
 * --cs-a (main) and --cs-b (second), plus a background pattern.
 * ---------------------------------------------------------------- */
.cs { --cs-a: #ffc629; --cs-b: #1a8cff; --cs-ink: #0d0d0d; position: relative; overflow: hidden; padding-bottom: 5rem; }
.cs-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .cs-wrap { padding: 0 2rem; } }

/* Hero */
.cs-hero { position: relative; padding: 8.5rem 0 4rem; }
.cs-hero__art { position: absolute; inset: 0; pointer-events: none; background:
	radial-gradient(60rem 34rem at 85% -5%, color-mix(in srgb, var(--cs-a) 26%, transparent), transparent 70%),
	radial-gradient(44rem 30rem at -5% 30%, color-mix(in srgb, var(--cs-b) 20%, transparent), transparent 70%); }
.cs-hero__art::after { content: ""; position: absolute; inset: 0; opacity: .5; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%); mask-image: linear-gradient(to bottom, #000 30%, transparent 95%); }
.cs--bars .cs-hero__art::after { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--cs-a) 22%, transparent) 0 3px, transparent 3px 22px); -webkit-mask-image: linear-gradient(to top, #000, transparent 55%); mask-image: linear-gradient(to top, #000, transparent 55%); opacity: .35; }
.cs--dots .cs-hero__art::after { background-image: radial-gradient(color-mix(in srgb, var(--cs-a) 55%, transparent) 1.5px, transparent 2px), radial-gradient(color-mix(in srgb, var(--cs-b) 45%, transparent) 1.5px, transparent 2px); background-size: 34px 34px, 34px 34px; background-position: 0 0, 17px 17px; opacity: .35; }
.cs--spark .cs-hero__art::after { background-image: radial-gradient(circle at 12% 30%, var(--cs-a) 0 4px, transparent 5px), radial-gradient(circle at 78% 18%, var(--cs-b) 0 5px, transparent 6px), radial-gradient(circle at 60% 70%, var(--cs-a) 0 3px, transparent 4px), radial-gradient(circle at 30% 80%, var(--cs-b) 0 4px, transparent 5px), radial-gradient(circle at 92% 58%, var(--cs-a) 0 3px, transparent 4px); background-size: 420px 360px; opacity: .35; }
.cs--rays .cs-hero__art::after { background: repeating-conic-gradient(from -70deg at 78% 105%, color-mix(in srgb, var(--cs-a) 26%, transparent) 0deg .6deg, transparent .6deg 9deg); -webkit-mask-image: radial-gradient(60rem 40rem at 78% 100%, #000, transparent 70%); mask-image: radial-gradient(60rem 40rem at 78% 100%, #000, transparent 70%); opacity: .6; }
.cs--rings .cs-hero__art::after { background: repeating-radial-gradient(circle at 80% 40%, transparent 0 46px, color-mix(in srgb, var(--cs-a) 28%, transparent) 46px 48px); -webkit-mask-image: radial-gradient(46rem 34rem at 80% 40%, #000, transparent 72%); mask-image: radial-gradient(46rem 34rem at 80% 40%, #000, transparent 72%); opacity: .55; }

.cs-hero__grid { position: relative; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .cs-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4rem; } }
.cs-back { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: hsl(var(--muted-foreground)); margin-bottom: 2rem; transition: color .2s ease, gap .2s ease; }
.cs-back:hover { color: var(--cs-a); gap: .75rem; }
.cs-kicker { display: flex; align-items: center; gap: .6rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-a); }
.cs-kicker__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cs-a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cs-a) 25%, transparent); }
.cs-client { margin: 1.25rem 0 .5rem; font-size: 1.125rem; font-weight: 600; color: hsl(var(--foreground) / .7); }
.cs-title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; background: linear-gradient(100deg, #fff 30%, var(--cs-a) 115%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-intro { margin-top: 1.5rem; max-width: 34rem; font-size: 1.1875rem; line-height: 1.65; color: hsl(var(--foreground) / .8); }
.cs-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.cs-btn { display: inline-flex; align-items: center; gap: .5rem; height: 3rem; padding: 0 1.5rem; border-radius: .75rem; font-size: .9375rem; font-weight: 600; white-space: nowrap; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.cs-btn:hover { transform: translateY(-2px); }
.cs-btn--solid { background: linear-gradient(135deg, var(--cs-a), color-mix(in srgb, var(--cs-a) 60%, var(--cs-b))); color: var(--cs-ink); box-shadow: 0 10px 34px -10px color-mix(in srgb, var(--cs-a) 70%, transparent); }
.cs-btn--solid:hover { box-shadow: 0 14px 44px -8px color-mix(in srgb, var(--cs-a) 85%, transparent); }
.cs-btn--ghost { border: 1px solid color-mix(in srgb, var(--cs-a) 40%, transparent); color: hsl(var(--foreground)); background: color-mix(in srgb, var(--cs-a) 6%, transparent); }
.cs-btn--ghost:hover { border-color: var(--cs-a); background: color-mix(in srgb, var(--cs-a) 14%, transparent); }

/* Screenshot in a browser frame */
.cs-shot { position: relative; border-radius: 1rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--cs-a) 35%, hsl(var(--border))); background: hsl(var(--card)); box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--cs-a) 55%, transparent), 0 0 0 1px rgb(255 255 255 / .03) inset; }
@media (min-width: 1024px) { .cs-shot { transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); transform-origin: left center; transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .cs-shot:hover { transform: perspective(1400px) rotateY(0) rotateX(0); } }
.cs-shot__bar { display: flex; align-items: center; gap: .4rem; height: 2.5rem; padding: 0 1rem; background: hsl(0 0% 13%); border-bottom: 1px solid hsl(var(--border) / .7); }
.cs-shot__bar i { width: .625rem; height: .625rem; border-radius: 50%; background: hsl(0 0% 28%); }
.cs-shot__bar i:first-child { background: var(--cs-a); }
.cs-shot__bar span { margin-left: .75rem; flex: 1; max-width: 16rem; height: 1.5rem; padding: 0 .75rem; border-radius: 999px; background: hsl(0 0% 9%); color: hsl(var(--muted-foreground)); font-size: .75rem; line-height: 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-shot__img { overflow: hidden; max-height: 30rem; }
.cs-shot__img img { display: block; width: 100%; height: auto; }

/* Quick facts */
.cs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid hsl(var(--border) / .6); border-radius: 1rem; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--cs-a) 7%, hsl(var(--card))), hsl(var(--card))); margin: 0; }
@media (min-width: 900px) { .cs-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-facts > div { padding: 1.4rem 1.5rem; border-right: 1px solid hsl(var(--border) / .5); border-bottom: 1px solid hsl(var(--border) / .5); margin: 0 -1px -1px 0; }
.cs-facts dt { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cs-a); margin-bottom: .4rem; }
.cs-facts dd { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: hsl(var(--foreground)); }

/* Story blocks */
.cs-story { display: grid; gap: 3.5rem; padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 900px) { .cs-story { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }
.cs-block__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; }
.cs-block__head--wide { margin-bottom: 2.5rem; }
.cs-block__head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.15; margin: 0; }
.cs-num { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; color: var(--cs-a); padding: .2rem .55rem; border-radius: .4rem; border: 1px solid color-mix(in srgb, var(--cs-a) 40%, transparent); background: color-mix(in srgb, var(--cs-a) 8%, transparent); transform: translateY(-.25rem); }
.cs-block__body p { font-size: 1.0625rem; line-height: 1.8; color: hsl(var(--foreground) / .82); }
.cs-block__body p + p { margin-top: 1.1em; }

/* The product */
.cs-band { position: relative; padding: 5rem 0; background: linear-gradient(180deg, color-mix(in srgb, var(--cs-b) 9%, transparent), color-mix(in srgb, var(--cs-a) 5%, transparent)); border-top: 1px solid hsl(var(--border) / .5); border-bottom: 1px solid hsl(var(--border) / .5); }
.cs-features { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .cs-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cs-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-feature { position: relative; padding: 1.75rem; border-radius: 1rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .75); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.cs-feature:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cs-a) 55%, transparent); box-shadow: 0 20px 50px -25px color-mix(in srgb, var(--cs-a) 60%, transparent); }
.cs-feature__mark { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .65rem; color: var(--cs-ink); background: linear-gradient(135deg, var(--cs-a), color-mix(in srgb, var(--cs-a) 55%, var(--cs-b))); margin-bottom: 1.1rem; }
.cs-feature h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .5rem; }
.cs-feature p { font-size: .9375rem; line-height: 1.65; color: hsl(var(--muted-foreground)); margin: 0; }

/* In numbers */
.cs-numbers { padding-top: 5rem; padding-bottom: 5rem; }
.cs-stats { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cs-stat { padding: 1.75rem 1.5rem; border-radius: 1rem; border: 1px solid hsl(var(--border) / .6); border-top: 3px solid var(--cs-a); background: hsl(var(--card) / .6); }
.cs-stat strong { display: block; font-family: Outfit, sans-serif; font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; background: linear-gradient(120deg, var(--cs-a), var(--cs-b)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; }
.cs-stat span { display: block; margin-top: .75rem; font-size: .9375rem; line-height: 1.5; color: hsl(var(--foreground) / .78); }
.cs-note { margin-top: 1.25rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); }

/* Our part */
.cs-band + .cs-wrap { padding-top: 5rem; }
.cs-role { position: relative; padding: 2.5rem 1.75rem; border-radius: 1.25rem; border: 1px solid color-mix(in srgb, var(--cs-a) 30%, hsl(var(--border))); background: linear-gradient(135deg, color-mix(in srgb, var(--cs-a) 10%, hsl(var(--card))), hsl(var(--card)) 60%); }
@media (min-width: 768px) { .cs-role { padding: 3.5rem; } }
.cs-role .cs-block__body { max-width: 46rem; }
.cs-role .cs-block__body p:last-child:not(:first-child) { font-size: 1.25rem; line-height: 1.6; color: hsl(var(--foreground)); padding-left: 1.25rem; border-left: 3px solid var(--cs-a); }
.cs-quote { margin: 2.5rem 0 0; max-width: 46rem; }
.cs-quote blockquote { font-size: 1.35rem; line-height: 1.55; font-style: italic; color: hsl(var(--foreground)); margin: 0; }
.cs-quote figcaption { margin-top: 1rem; font-size: .9rem; color: var(--cs-a); }

/* Call to action */
.cs-cta { margin-top: 5rem; display: flex; flex-direction: column; gap: 1.75rem; align-items: flex-start; justify-content: space-between; padding: 2.5rem 1.75rem; border-radius: 1.25rem; background: linear-gradient(120deg, color-mix(in srgb, var(--cs-a) 26%, hsl(var(--card))), color-mix(in srgb, var(--cs-b) 22%, hsl(var(--card)))); border: 1px solid color-mix(in srgb, var(--cs-a) 35%, transparent); }
@media (min-width: 860px) { .cs-cta { flex-direction: row; align-items: center; padding: 3rem 3.5rem; } }
.cs-cta h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; line-height: 1.2; margin: 0 0 .5rem; text-wrap: balance; }
.cs-cta p { margin: 0; color: hsl(var(--foreground) / .8); }

/* Previous / next */
.cs-more { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 720px) { .cs-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-more__item { display: flex; align-items: center; gap: 1.25rem; padding: 1rem; border-radius: 1rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .6); transition: transform .3s ease, border-color .3s ease; }
.cs-more__item:hover { transform: translateY(-3px); border-color: var(--cs-a); }
.cs-more__img { flex: none; width: 7.5rem; aspect-ratio: 16 / 10; border-radius: .6rem; overflow: hidden; }
.cs-more__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cs-more__text { display: flex; flex-direction: column; min-width: 0; }
.cs-more__text small { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.cs-more__text b { font-size: 1.125rem; font-weight: 700; margin: .2rem 0; }
.cs-more__text em { font-style: normal; font-size: .8125rem; color: var(--cs-a); }

/* Publishing projects read better with a literary headline. */
.cs--rays .cs-title, .cs--rays .cs-block__head h2, .cs--rays .cs-cta h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.01em; }

@media (prefers-reduced-motion: reduce) {
	.cs-shot, .cs-shot:hover, .cs-btn:hover, .cs-feature:hover, .cs-more__item:hover { transform: none; transition: none; }
}

/* Decorative glows must never make the page scroll sideways. */
body { overflow-x: clip; }

/* Page not found */
.st-404 { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 9rem 1.5rem 5rem; overflow: hidden; text-align: center; }
.st-404__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42rem 24rem at 50% 38%, hsl(var(--primary) / .16), transparent 70%), radial-gradient(30rem 18rem at 72% 70%, hsl(var(--gold) / .08), transparent 70%); }
.st-404__inner { position: relative; width: 100%; max-width: 640px; }
.st-404__bars { display: flex; justify-content: center; align-items: flex-end; gap: .5rem; height: 3.25rem; margin-bottom: 1.75rem; }
.st-404__bars span { width: .5rem; height: 100%; border-radius: 999px; transform-origin: bottom; animation: st-404-bar .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes st-404-bar { from { transform: scaleY(.15); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.st-404__code { margin: 0; font-family: Outfit, sans-serif; font-weight: 800; font-size: clamp(5.5rem, 22vw, 11rem); line-height: .95; letter-spacing: -.03em; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--gold))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-404__title { margin: 1rem 0 .75rem; font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; line-height: 1.2; }
.st-404__text { margin: 0 auto 2rem; max-width: 30rem; color: hsl(var(--muted-foreground)); font-size: 1.0625rem; line-height: 1.6; }
.st-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; }
.st-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid hsl(var(--border) / .5); font-size: .9375rem; }
.st-404__links a { color: hsl(var(--muted-foreground)); transition: color .2s ease; }
.st-404__links a:hover { color: hsl(var(--primary)); }
@media (prefers-reduced-motion: reduce) { .st-404__bars span { animation: none; } }

/* Client strip: linked names, and the strip pauses while hovered or focused */
.st-client { transition: border-color .2s ease, transform .2s ease; }
.st-client:hover, .st-client:focus-visible { border-color: hsl(var(--gold) / .6); transform: translateY(-2px); }
.st-client:hover span, .st-client:focus-visible span { color: hsl(var(--gold)); }
.st-marquee:hover, .st-marquee:focus-within { animation-play-state: paused; }