/* ==========================================================================
   v1.3 polish: clearer section separation, showcase, richer animation
   ========================================================================== */

/* ---------- section rhythm & separation ---------- */
.section { padding: 112px 0; }
.section.alt { background-color: #f3f5fd; background-image: radial-gradient(rgba(91, 80, 245, .13) 1.2px, transparent 1.2px); background-size: 24px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-sec { background-color: #f3f5fd; background-image: radial-gradient(rgba(91, 80, 245, .13) 1.2px, transparent 1.2px); background-size: 24px 24px; }
.section.alt::before { content: ""; position: absolute; left: 50%; top: -1px; width: 180px; height: 3px; margin-left: -90px; background: var(--grad); border-radius: 0 0 6px 6px; }
.section.alt .card, .section.alt .mini, .section.alt .faq-item { background: #fff; }
.section:not(.alt):not(.method):not(.showcase):not(.dark-sec) + .section:not(.alt):not(.method):not(.showcase) { border-top: 1px solid var(--line); }

/* dark / gradient blocks become inset rounded panels */
.method, .showcase { margin: 28px clamp(8px, 2vw, 30px); border-radius: 40px; }
.stats-band { margin: 0 clamp(8px, 2vw, 30px); border-radius: 32px; background: linear-gradient(120deg, #5b50f5, #8b3df0, #f0745b, #8b3df0, #5b50f5); background-size: 300% 100%; animation: gshift 14s ease-in-out infinite; }
@keyframes gshift { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
.stats-band + .section { padding-top: 120px; }

/* section heading ornaments */
.sec-head .eyebrow { position: relative; padding: 0 0 12px; }
.sec-head .eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; border-radius: 3px; background: var(--grad); transition: width .9s .25s cubic-bezier(.2, .7, .2, 1); }
.sec-head.center .eyebrow::after { left: 50%; transform: translateX(-50%); }
.sec-head.in .eyebrow::after, .no-js .sec-head .eyebrow::after { width: 56px; }
.sec-head.light .eyebrow::after { background: #ff9a7c; }
.js .sec-head.reveal h2 { opacity: 0; filter: blur(8px); transform: translateY(28px); transition: opacity .8s .1s ease, filter .8s .1s ease, transform .9s .1s cubic-bezier(.2, .7, .2, 1); }
.js .sec-head.reveal.in h2 { opacity: 1; filter: none; transform: none; }
.js .sec-head.reveal > p { opacity: 0; transform: translateY(14px); transition: opacity .8s .35s, transform .8s .35s; }
.js .sec-head.reveal.in > p { opacity: 1; transform: none; }

/* ---------- reveal animation variants ---------- */
/* variants use the individual translate/scale/rotate properties so hover transforms keep working */
.js .reveal[data-anim] { transform: none; transition: opacity .7s ease var(--d, 0ms), translate .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), scale .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), rotate .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .3s, box-shadow .3s, border-color .3s, background .3s; }
.js .reveal[data-anim="zoom"] { scale: .86; translate: 0 16px; }
.js .reveal[data-anim="rise"] { translate: 0 70px; rotate: 1 0 0 14deg; transform-origin: 50% 100%; }
.js .reveal[data-anim="left"] { translate: -56px 0; }
.js .reveal[data-anim="right"] { translate: 56px 0; }
.js .reveal[data-anim="up"] { translate: 0 44px; }
.js .reveal[data-anim="pop"] { scale: .55; }
.js .reveal[data-anim="flip"] { rotate: 0 1 0 -32deg; translate: -24px 0; transform-origin: 0 50%; }
.js .reveal.in[data-anim] { opacity: 1; translate: none; scale: none; rotate: none; }
.js .card.reveal:hover, .js .pillar.reveal:hover { transform: translateY(-6px); }
.js .mini.reveal:hover { transform: translateX(4px); }
.js .eng.reveal:hover { transform: translateX(6px); }
.js .industry.reveal:hover { transform: translateY(-5px); }
.js a.contact-item.reveal:hover { transform: translateX(4px); }

.js .step.reveal::after { width: 0; transition: width .8s .5s; }
.js .step.reveal.in::after { width: 22px; }

/* cursor spotlight on cards */
.card, .pillar, .eng, .industry, .mini, .faq-item, .contact-item { position: relative; }
.card::after, .pillar::after, .eng::after, .industry::after, .mini::after, .contact-item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 80, 245, .14), transparent 45%); }
.card:hover::after, .pillar:hover::after, .eng:hover::after, .industry:hover::after, .mini:hover::after, .contact-item:hover::after { opacity: 1; }

/* idle motion */
.ico-badge.lg { animation: bobsm 5s ease-in-out infinite; }
@keyframes bobsm { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.orb { transform: translate3d(0, calc(var(--py, 0) * var(--k, .08) * 1px), 0); will-change: transform; }
.orb.o2 { --k: -.06; }
.orb.o3 { --k: .04; }
.cta-box .orb { animation: drift 12s ease-in-out infinite alternate; }
@keyframes drift { to { translate: 60px -30px; } }
.rotator { display: inline-block; transition: opacity .35s ease, transform .35s ease, filter .35s; }
.rotator.swap { opacity: 0; transform: translateY(.35em); filter: blur(6px); }
.scroll-progress { display: none !important; }

/* ---------- project showcase ---------- */
.showcase { background: var(--ink); color: #c9d0ec; position: relative; isolation: isolate; overflow: hidden; padding: 104px 0 88px; }
.showcase .container { position: relative; z-index: 1; }
.sc-wrap { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 40px; align-items: center; }
.sc-list { display: grid; gap: 10px; }
.sc-item { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: #c9d0ec; text-align: left; position: relative; overflow: hidden; transition: transform .35s, background .35s, border-color .35s; }
.sc-item:hover { background: rgba(255, 255, 255, .09); }
.sc-n { font-family: var(--font-h); font-weight: 800; font-size: .85rem; opacity: .5; width: 24px; }
.sc-t { min-width: 0; flex: 1; }
.sc-t b { display: block; color: #fff; font-family: var(--font-h); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-t small { display: block; font-size: .76rem; opacity: .7; }
.sc-item > .ic { flex: none; opacity: 0; transform: translateX(-10px); transition: .3s; color: #fff; }
.sc-item.is-active { background: linear-gradient(135deg, rgba(91, 80, 245, .5), rgba(240, 116, 91, .28)); border-color: rgba(255, 255, 255, .3); transform: translateX(12px); box-shadow: 0 20px 40px -20px rgba(91, 80, 245, .9); }
.sc-item.is-active .sc-n { opacity: 1; color: #ffd3c6; }
.sc-item.is-active > .ic { opacity: 1; transform: none; }
.sc-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, #fff, #ff9a7c); }
.sc-item.is-active .sc-prog { animation: prog var(--dur, 5.5s) linear forwards; }
.sc-paused .sc-item.is-active .sc-prog { animation-play-state: paused; }
@keyframes prog { to { width: 100%; } }
.sc-stage { position: relative; perspective: 1500px; padding: 10px 14px 0 0; }
.sc-device { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 60px 100px -34px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .14); transform: rotateY(var(--ry, -7deg)) rotateX(var(--rx, 3deg)); transition: transform .25s ease-out; }
.sc-device .wf-bar { background: linear-gradient(180deg, #2a3170, #1c2255); border-bottom-color: rgba(255, 255, 255, .1); }
.sc-device .wf-bar em { background: rgba(255, 255, 255, .1); color: #c9d0ec; }
.sc-screens { position: relative; aspect-ratio: 16 / 10; background: #0e1440; }
.sc-screen { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity .7s ease, transform 1s ease; }
.sc-screen.is-active { opacity: 1; transform: none; }
.sc-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.sc-screen.is-active img { animation: pan 9s ease-in-out .8s infinite alternate; }
@keyframes pan { to { object-position: 50% 100%; } }
.sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.sc-count { font-family: var(--font-h); font-size: .9rem; color: #aeb7dd; }
.sc-count b { font-size: 1.6rem; color: #fff; }
.sc-tags { padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .8rem; font-weight: 600; color: #ffd3c6; }
.sc-tags:empty { display: none; }
.sc-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.sc-actions .btn { padding: .7em 1.3em; font-size: .88rem; }
.sc-actions .sc-visit[href=""], .sc-actions .sc-visit[href="#"] { display: none; }
.sc-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: .8rem; box-shadow: var(--shadow-lg); animation: bob 5s ease-in-out infinite; }
.sc-chip .ic { width: 16px; height: 16px; color: var(--brand); }
.sc-chip.c1 { top: -4px; right: 0; }
.sc-chip.c2 { bottom: 96px; left: -22px; animation-delay: -2s; }
.name-marquee { margin: 64px -24px 8px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.name-marquee .track { animation-duration: 90s; animation-direction: reverse; gap: 12px; }
.name-marquee .track span { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); color: #b7bfe0; padding: 9px 22px; }
.name-marquee .track span::before { content: "\2726"; margin-right: 10px; color: #ff9a7c; }
.showcase .center-btn { margin-top: 40px; }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
	.section { padding: 84px 0; }
	.sc-wrap { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.sc-list { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 8px; scrollbar-width: none; margin: 0 -4px; }
	.sc-list li { flex: none; }
	.sc-item { width: 230px; }
	.sc-item.is-active { transform: none; }
	.sc-stage { padding: 0; }
	.sc-device { transform: none; }
	.sc-actions { margin-left: 0; width: 100%; }
}
@media (max-width: 680px) {
	.section { padding: 64px 0; }
	.method, .showcase { border-radius: 26px; margin: 18px 8px; }
	.stats-band { border-radius: 22px; margin: 0 8px; }
	.showcase { padding: 64px 0 56px; }
	.sc-chip { display: none; }
	.sc-actions .btn { flex: 1; }
	.name-marquee { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.stats-band, .ico-badge.lg, .sc-chip, .cta-box .orb, .sc-screen.is-active img, .sc-item.is-active .sc-prog { animation: none !important; }
	.js .sec-head.reveal h2, .js .sec-head.reveal > p { filter: none; opacity: 1; transform: none; }
	.js .reveal[data-anim] { opacity: 1; transform: none; }
}
.faq-item .faq-a { padding: 0 0 0 80px; } @media (max-width: 680px) { .faq-item .faq-a { padding-left: 16px; } }