/* Cathund Digital - Modern Technology Visual Experience Phase 3 */

/* Larger colourful rolling text, same ribbon */
.rolling-track-large{font-size:1.18rem;line-height:1.05;padding:7px 0;gap:64px;font-weight:800}
.marquee{text-shadow:0 1px 0 rgba(255,255,255,.45)}
.mg1{color:#6b157d}.mg2{color:#b5122b}.mg3{color:#06603f}.mg4{color:#103db6}.mg5{color:#5a2586}

/* Signature tech hero */
.hero{background:radial-gradient(circle at 78% 18%,rgba(208,117,255,.26),transparent 26%),radial-gradient(circle at 20% 82%,rgba(198,152,43,.13),transparent 22%),linear-gradient(135deg,#16022d 0%,#351061 48%,#6829a8 100%)!important}
.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:42px 42px;pointer-events:none;mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 92%)}
.hero-grid{z-index:2}
.hero-card{position:relative;overflow:hidden;box-shadow:0 28px 80px rgba(9,0,24,.28)!important}
.hero-card:before{content:"";position:absolute;left:-60%;top:-120%;width:55%;height:280%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:techSheen 9s linear infinite}
@keyframes techSheen{0%{left:-60%}45%,100%{left:150%}}
.hero-actions .btn{transition:transform .24s ease,box-shadow .24s ease}
.hero-actions .btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.16)}

/* Modern bento feel for existing cards */
.grid-4 .card,.grid-3 .card,.why-card,.feature-tile,.capability{position:relative;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.grid-4 .card:after,.grid-3 .card:after,.why-card:after,.feature-tile:after,.capability:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-55px;top:-55px;background:radial-gradient(circle,rgba(108,38,169,.12),transparent 70%);pointer-events:none}
.grid-4 .card:hover,.grid-3 .card:hover,.why-card:hover,.feature-tile:hover,.capability:hover{transform:translateY(-6px);box-shadow:0 22px 52px rgba(47,10,104,.13);border-color:#d8c5e9}
.icon,.feature-icon{box-shadow:0 8px 22px rgba(47,10,104,.09)}

/* Capability band looks more like premium SaaS */
.capability-band{background:radial-gradient(circle at 92% 8%,rgba(198,152,43,.13),transparent 22%),linear-gradient(135deg,#f8f3ff,#fffaf0)!important;box-shadow:0 18px 50px rgba(47,10,104,.07)}
.trust-chip{transition:.25s ease}.trust-chip:hover{transform:translateY(-2px);border-color:#cfb5e8;box-shadow:0 8px 20px rgba(47,10,104,.08)}

/* Stronger premium CTA */
.premium-cta{background:radial-gradient(circle at 86% 15%,rgba(236,191,68,.22),transparent 24%),linear-gradient(135deg,#1b0635,#5b1da0)!important;box-shadow:0 28px 75px rgba(47,10,104,.22)}

/* Modern navigation interactions */
.main-nav>a:not(.nav-cta):not(.nav-login){transition:color .2s ease,transform .2s ease}
.main-nav>a:not(.nav-cta):not(.nav-login):hover{color:#5d22a5;transform:translateY(-1px)}
.nav-cta,.nav-login{transition:transform .2s ease,box-shadow .2s ease}
.nav-cta:hover,.nav-login:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(47,10,104,.15)}

/* Remove unwanted gap above footer */
.site-footer{margin-top:0!important}

/* Keep final content visible even if animation observer misses it */
.premium-cta{opacity:1!important;transform:none!important}

@media(max-width:980px){.rolling-track-large{font-size:1.02rem;gap:44px}}
@media(max-width:640px){.rolling-track-large{font-size:.94rem;gap:34px}.hero-card:before{display:none}}
@media(prefers-reduced-motion:reduce){.hero-card:before{animation:none}.grid-4 .card,.grid-3 .card,.why-card,.feature-tile,.capability,.hero-actions .btn{transition:none}}
