.bg-banner-premium {background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(45,212,191,0.3),transparent),radial-gradient(ellipse 60% 40% at 80% 50%,rgba(20,184,166,0.2),transparent),radial-gradient(ellipse 50% 30% at 20% 80%,rgba(6,182,212,0.15),transparent),linear-gradient(135deg,#0d9488 0%,#0f766e 25%,#115e59 50%,#134e4a 75%,#164e4e 100%); position:relative; overflow:hidden} .bg-banner-premium::before {content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle at 30% 30%,rgba(45,212,191,0.4) 0%,transparent 40%),radial-gradient(circle at 70% 70%,rgba(20,184,166,0.3) 0%,transparent 35%),radial-gradient(circle at 50% 50%,rgba(6,182,212,0.2) 0%,transparent 50%); animation:glow-rotate 20s linear infinite; pointer-events:none} .bg-banner-premium::after {content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,0.8) 1px,transparent 1px),radial-gradient(circle at 80% 20%,rgba(255,255,255,0.6) 1px,transparent 1px),radial-gradient(circle at 40% 70%,rgba(255,255,255,0.7) 1px,transparent 1px),radial-gradient(circle at 70% 60%,rgba(255,255,255,0.5) 1px,transparent 1px),radial-gradient(circle at 10% 80%,rgba(255,255,255,0.4) 1px,transparent 1px),radial-gradient(circle at 90% 90%,rgba(255,255,255,0.6) 1px,transparent 1px); background-size:200px 200px,300px 300px,250px 250px,350px 350px,180px 180px,280px 280px; animation:particle-float 15s ease-in-out infinite; pointer-events:none} @keyframes glow-rotate {0% {transform:rotate(0deg) scale(1)} 50% {transform:rotate(180deg) scale(1.1)} 100% {transform:rotate(360deg) scale(1)} } @keyframes particle-float {0%,100% {transform:translateY(0) translateX(0); opacity:0.8} 25% {transform:translateY(-20px) translateX(10px); opacity:1} 50% {transform:translateY(-10px) translateX(-10px); opacity:0.6} 75% {transform:translateY(-30px) translateX(5px); opacity:0.9} } .wave-container-v2 {position:absolute; bottom:0; left:0; right:0; z-index:10; overflow:hidden} .wave-container-v2 svg {width:100%; height:120px; display:block} .wave-path-1 {fill:rgba(255,255,255,0.95); animation:wave-move-1 8s ease-in-out infinite} .wave-path-2 {fill:rgba(255,255,255,0.7); animation:wave-move-2 10s ease-in-out infinite} .wave-path-3 {fill:rgba(255,255,255,0.4); animation:wave-move-3 12s ease-in-out infinite} @keyframes wave-move-1 {0%,100% {transform:translateX(0)} 50% {transform:translateX(-25px)} } @keyframes wave-move-2 {0%,100% {transform:translateX(0)} 50% {transform:translateX(15px)} } @keyframes wave-move-3 {0%,100% {transform:translateX(0)} 50% {transform:translateX(-10px)} } .glass-card {background:rgba(255,255,255,0.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.5); border-radius:24px; box-shadow:0 4px 6px -1px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.08),0 20px 25px -5px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.6); transition:all 0.4s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden} .glass-card::before {content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.8),transparent)} .glass-card:hover {transform:translateY(-8px) scale(1.01); box-shadow:0 20px 25px -5px rgba(0,168,150,0.15),0 10px 10px -5px rgba(0,168,150,0.1),0 0 0 1px rgba(0,212,170,0.2)} .glass-card-dark {background:rgba(15,23,42,0.7); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.1); border-radius:24px; box-shadow:0 4px 6px -1px rgba(0,0,0,0.3),0 10px 15px -3px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.1); transition:all 0.4s cubic-bezier(0.4,0,0.2,1)} .glass-card-dark:hover {transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.4),0 0 0 1px rgba(45,212,191,0.3); border-color:rgba(45,212,191,0.3)} .premium-card {background:linear-gradient(145deg,#ffffff 0%,#f8fafc 100%); border-radius:20px; border:1px solid rgba(226,232,240,0.8); box-shadow:0 1px 3px rgba(0,0,0,0.02),0 4px 12px rgba(0,0,0,0.04),0 8px 24px rgba(0,0,0,0.04); transition:all 0.5s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden} .premium-card::after {content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient( 90deg,transparent,rgba(255,255,255,0.4),transparent ); transition:left 0.7s ease} .premium-card:hover {transform:translateY(-12px); box-shadow:0 20px 40px rgba(0,168,150,0.12),0 8px 16px rgba(0,168,150,0.08); border-color:rgba(0,212,170,0.3)} .premium-card:hover::after {left:100%} .card-top-line {position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#14b8a6,#06b6d4,#0ea5e9); border-radius:20px 20px 0 0} .scroll-reveal {opacity:0; transform:translateY(40px); transition:all 0.8s cubic-bezier(0.4,0,0.2,1)} .scroll-reveal.revealed {opacity:1; transform:translateY(0)} .scroll-reveal-scale {opacity:0; transform:scale(0.9); transition:all 0.6s cubic-bezier(0.4,0,0.2,1)} .scroll-reveal-scale.revealed {opacity:1; transform:scale(1)} .scroll-reveal-left {opacity:0; transform:translateX(-60px); transition:all 0.8s cubic-bezier(0.4,0,0.2,1)} .scroll-reveal-left.revealed {opacity:1; transform:translateX(0)} .scroll-reveal-right {opacity:0; transform:translateX(60px); transition:all 0.8s cubic-bezier(0.4,0,0.2,1)} .scroll-reveal-right.revealed {opacity:1; transform:translateX(0)} .stagger-1 {transition-delay:0.1s} .stagger-2 {transition-delay:0.2s} .stagger-3 {transition-delay:0.3s} .stagger-4 {transition-delay:0.4s} .stagger-5 {transition-delay:0.5s} .stagger-6 {transition-delay:0.6s} .btn-pulse {position:relative; overflow:hidden} .btn-pulse::before {content:''; position:absolute; top:50%; left:50%; width:0; height:0; background:rgba(255,255,255,0.3); border-radius:50%; transform:translate(-50%,-50%); transition:width 0.6s ease,height 0.6s ease} .btn-pulse:active::before {width:300px; height:300px} .icon-hover-rotate {transition:transform 0.4s cubic-bezier(0.4,0,0.2,1)} .icon-hover-rotate:hover {transform:rotate(15deg) scale(1.1)} .link-underline {position:relative; text-decoration:none} .link-underline::after {content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:linear-gradient(90deg,#14b8a6,#06b6d4); transition:width 0.3s ease} .link-underline:hover::after {width:100%} .img-hover-zoom {overflow:hidden} .img-hover-zoom img {transition:transform 0.6s cubic-bezier(0.4,0,0.2,1)} .img-hover-zoom:hover img {transform:scale(1.08)} .btn-premium {background:linear-gradient(135deg,#0d9488 0%,#0f766e 50%,#115e59 100%); color:white; padding:14px 32px; border-radius:12px; font-weight:600; font-size:15px; letter-spacing:0.5px; border:none; cursor:pointer; position:relative; overflow:hidden; transition:all 0.3s ease; box-shadow:0 4px 6px -1px rgba(13,148,136,0.3),0 2px 4px -1px rgba(13,148,136,0.2),inset 0 1px 0 rgba(255,255,255,0.2)} .btn-premium::before {content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient( 90deg,transparent,rgba(255,255,255,0.3),transparent ); transition:left 0.5s ease} .btn-premium:hover {transform:translateY(-3px); box-shadow:0 10px 20px -5px rgba(13,148,136,0.4),0 6px 10px -3px rgba(13,148,136,0.3)} .btn-premium:hover::before {left:100%} .btn-premium:active {transform:translateY(-1px)} .btn-premium-outline {background:transparent; color:#0d9488; padding:14px 32px; border-radius:12px; font-weight:600; font-size:15px; letter-spacing:0.5px; border:2px solid #0d9488; cursor:pointer; position:relative; overflow:hidden; transition:all 0.3s ease} .btn-premium-outline::before {content:''; position:absolute; top:0; left:0; width:0; height:100%; background:linear-gradient(135deg,#0d9488 0%,#0f766e 100%); transition:width 0.3s ease; z-index:-1} .btn-premium-outline:hover {color:white; border-color:transparent} .btn-premium-outline:hover::before {width:100%} .icon-wrapper-premium {width:72px; height:72px; background:linear-gradient(135deg,#14b8a6 0%,#0d9488 50%,#0f766e 100%); border-radius:20px; display:flex; align-items:center; justify-content:center; color:white; font-size:28px; position:relative; overflow:hidden; box-shadow:0 10px 20px rgba(20,184,166,0.3),0 4px 8px rgba(20,184,166,0.2),inset 0 1px 0 rgba(255,255,255,0.3); transition:all 0.4s cubic-bezier(0.4,0,0.2,1)} .icon-wrapper-premium::before {content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:linear-gradient( 45deg,transparent 30%,rgba(255,255,255,0.3) 50%,transparent 70% ); transform:rotate(45deg); transition:all 0.6s ease} .icon-wrapper-premium:hover {transform:translateY(-5px) scale(1.05); box-shadow:0 20px 30px rgba(20,184,166,0.4),0 8px 12px rgba(20,184,166,0.3)} .icon-wrapper-premium:hover::before {left:100%} .icon-wrapper-circle {width:64px; height:64px; background:linear-gradient(135deg,rgba(20,184,166,0.1) 0%,rgba(6,182,212,0.1) 100%); border:2px solid rgba(20,184,166,0.3); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#0d9488; font-size:24px; transition:all 0.4s ease} .icon-wrapper-circle:hover {background:linear-gradient(135deg,#14b8a6 0%,#0d9488 100%); color:white; border-color:transparent; transform:scale(1.1); box-shadow:0 10px 20px rgba(20,184,166,0.3)} .tag-premium {display:inline-flex; align-items:center; padding:8px 16px; background:linear-gradient(135deg,rgba(20,184,166,0.1) 0%,rgba(6,182,212,0.1) 100%); border:1px solid rgba(20,184,166,0.2); border-radius:50px; color:#0d9488; font-size:13px; font-weight:500; transition:all 0.3s ease} .tag-premium:hover {background:linear-gradient(135deg,#14b8a6 0%,#0d9488 100%); color:white; border-color:transparent; transform:translateY(-2px); box-shadow:0 4px 12px rgba(20,184,166,0.3)} .tag-premium i {margin-right:6px; font-size:12px} .tag-premium-active {background:linear-gradient(135deg,#14b8a6 0%,#0d9488 100%); color:white; border-color:transparent; box-shadow:0 4px 12px rgba(20,184,166,0.3)} .text-gradient-premium {background:linear-gradient(135deg,#14b8a6 0%,#06b6d4 50%,#0ea5e9 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text} .text-glow {color:#14b8a6; text-shadow:0 0 20px rgba(20,184,166,0.5)} .title-decoration {position:relative; display:inline-block} .title-decoration::after {content:''; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); width:60px; height:4px; background:linear-gradient(90deg,#14b8a6,#06b6d4); border-radius:2px} .divider-premium {height:1px; background:linear-gradient( 90deg,transparent 0%,rgba(20,184,166,0.3) 20%,rgba(20,184,166,0.6) 50%,rgba(20,184,166,0.3) 80%,transparent 100% ); margin:40px 0} @keyframes shimmer {0% {background-position:-200% 0} 100% {background-position:200% 0} } .loading-shimmer {background:linear-gradient( 90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75% ); background-size:200% 100%; animation:shimmer 1.5s infinite} @media (max-width:768px) {.glass-card,.glass-card-dark,.premium-card {border-radius:16px} .icon-wrapper-premium {width:56px; height:56px; font-size:22px; border-radius:16px} .btn-premium,.btn-premium-outline {padding:12px 24px; font-size:14px} .wave-container-v2 svg {height:80px} } .shadow-premium {box-shadow:0 1px 3px rgba(0,0,0,0.02),0 4px 12px rgba(0,0,0,0.04),0 8px 24px rgba(0,0,0,0.04)} .shadow-premium-hover:hover {box-shadow:0 20px 40px rgba(0,168,150,0.12),0 8px 16px rgba(0,168,150,0.08)} .transition-premium {transition:all 0.4s cubic-bezier(0.4,0,0.2,1)} .focus-ring:focus {outline:none; box-shadow:0 0 0 3px rgba(20,184,166,0.3)} @keyframes pulse-slow {0%,100% {opacity:0.4; transform:scale(1)} 50% {opacity:0.6; transform:scale(1.05)} } .animate-pulse-slow {animation:pulse-slow 4s ease-in-out infinite} .particles-container {position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1} .particle {position:absolute; width:4px; height:4px; background:rgba(255,255,255,0.5); border-radius:50%; animation:particle-float 6s ease-in-out infinite} .banner-waves {position:absolute; bottom:0; left:0; right:0; z-index:10; overflow:hidden; line-height:0} .banner-waves svg {width:100%; height:120px; display:block} .sub-nav-v2 {background:rgba(255,255,255,0.8) !important; backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; border-radius:16px !important; padding:8px !important; box-shadow:0 4px 6px -1px rgba(0,0,0,0.05) !important; border:none !important; border-bottom:none !important; margin-bottom:0 !important} .sub-nav-v2 ul {display:flex !important; flex-wrap:wrap !important; gap:8px !important; list-style:none !important; margin:0 !important; padding:0 !important; border-bottom:none !important} .sub-nav-v2 li {flex:1 !important; min-width:120px !important} .sub-nav-v2 a {display:block !important; padding:12px 24px !important; text-align:center !important; color:#64748b !important; font-weight:500 !important; border-radius:12px !important; transition:all 0.3s ease !important; text-decoration:none !important; border-bottom:none !important; border-bottom-color:transparent !important} .sub-nav-v2 a:hover {background:rgba(20,184,166,0.1) !important; color:#0d9488 !important; border-bottom:none !important; border-bottom-color:transparent !important} .sub-nav-v2 a.active {background:linear-gradient(135deg,#14b8a6 0%,#0d9488 100%) !important; color:white !important; box-shadow:0 4px 12px rgba(20,184,166,0.3) !important; border-bottom:none !important; border-bottom-color:transparent !important} .section-bg-gradient {background:linear-gradient(180deg,#f8fffe 0%,#f0fdfa 50%,#f8fffe 100%); position:relative} .decoration-circle {position:fixed; border-radius:50%; pointer-events:none; z-index:-1} .decoration-circle-light {background:radial-gradient(circle,rgba(20,184,166,0.08) 0%,transparent 70%)} .decoration-circle-medium {background:radial-gradient(circle,rgba(6,182,212,0.06) 0%,transparent 70%)} .wave-divider {line-height:0; overflow:hidden} .wave-divider svg {width:100%; height:120px; display:block} .breadcrumb {display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem} .breadcrumb a {color:inherit; text-decoration:none; transition:color 0.3s ease} .breadcrumb a:hover {color:#14b8a6} .breadcrumb span {display:inline-flex; align-items:center} .image-hover-zoom {overflow:hidden; border-radius:1rem; position:relative} .image-hover-zoom img {transition:transform 0.5s ease; width:100%; height:auto; display:block} .image-hover-zoom:hover img {transform:scale(1.05)} .image-hover-zoom::after {content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(13,148,136,0.3),transparent); opacity:0; transition:opacity 0.3s ease; border-radius:1rem} .image-hover-zoom:hover::after {opacity:1} .tech-tag {transition:all 0.3s ease; cursor:default} .tech-tag:hover {transform:translateY(-2px); box-shadow:0 8px 20px -4px rgba(0,0,0,0.2)}