:root{--orange-hsl:45,89%,57%;--purple-light-hsl:280,100%,77%;--purple-dark-hsl:280,89%,44%;--pink-purple-hsl:297,57%,90%;--dark-hsl:0,0%,4%;--dark-purple-hsl:257,59%,11%;--orange:hsl(var(--orange-hsl));--purple-light:hsl(var(--purple-light-hsl));--purple-dark:hsl(var(--purple-dark-hsl));--pink-purple:hsl(var(--pink-purple-hsl));--dark:hsl(var(--dark-hsl));--dark-purple:hsl(var(--dark-purple-hsl));--text-primary:hsla(0,0%,100%,0.9);--text-secondary:hsla(0,0%,100%,0.7);--text-muted:hsla(0,0%,100%,0.5);--border-color:hsla(0,0%,100%,0.1);--gradient-primary:linear-gradient(45deg,hsl(var(--orange-hsl)),hsl(var(--purple-light-hsl)) );--gradient-dark:linear-gradient(45deg,hsl(var(--purple-dark-hsl)),hsl(var(--dark-purple-hsl)) );--button-transform:translate3d(0,0,0);--button-backface:hidden;--button-padding-base:0.5rem 1rem;--button-padding-mobile:clamp(0.5rem,2vw,0.75rem) clamp(1rem,3vw,1.5rem);--button-padding-tablet:clamp(0.75rem,1.5vw,1rem) clamp(1.5rem,2.5vw,2rem);--button-padding-desktop:clamp(0.875rem,1vw,1rem) clamp(1.75rem,2vw,2.25rem);--button-font-size-base:1rem;--button-font-size-mobile:clamp(0.875rem,2vw,1rem);--button-font-size-tablet:clamp(0.9375rem,1.5vw,1.125rem);--button-font-size-desktop:clamp(1rem,1vw,1.125rem);--button-min-touch-target:max(44px,2.75rem);--button-safe-area-inset:env(safe-area-inset-bottom,0);--spacing-unit:0.5rem;--spacing-xs:var(--spacing-unit);--spacing-sm:calc(var(--spacing-unit) * 1.618);--spacing-md:calc(var(--spacing-unit) * 2.618);--spacing-lg:calc(var(--spacing-unit) * 4.236);--spacing-xl:calc(var(--spacing-unit) * 6.854);--font-size-base:16px;--font-size-sm:calc(var(--font-size-base) * 0.875);--font-size-md:var(--font-size-base);--font-size-lg:calc(var(--font-size-base) * 1.25);--font-size-xl:calc(var(--font-size-base) * 1.5);--font-size-xxl:calc(var(--font-size-base) * 2);--line-height-tight:1.2;--line-height-base:1.5;--line-height-loose:1.8;--border-radius-unit:0.25rem;--border-radius-sm:var(--border-radius-unit);--border-radius-md:calc(var(--border-radius-unit) * 2);--border-radius-lg:calc(var(--border-radius-unit) * 4);--transition-function:cubic-bezier(0.4,0,0.2,1);--transition-fast:150ms var(--transition-function);--transition-base:200ms var(--transition-function);--transition-slow:300ms var(--transition-function);--shadow-color:0deg 0% 0%;--shadow-sm:0 1px 3px hsla(var(--shadow-color),0.12);--shadow-md:0 4px 6px hsla(var(--shadow-color),0.1);--shadow-lg:0 10px 15px hsla(var(--shadow-color),0.1);--header-height:5rem} @supports (backdrop-filter:blur(10px)){.navbar{backdrop-filter:blur(10px)} } .hw-accelerated{transform:translateZ(0);backface-visibility:hidden} .optimized-image{contain:layout;image-rendering:-webkit-optimize-contrast} @media (min-width:1400px){.container{max-width:1320px} .hero-title{font-size:4rem} } html{font-size:var(--font-size-base);scroll-behavior:smooth} body{line-height:var(--line-height-base);color:var(--dark);margin:0;padding:0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background-color:var(--dark);color:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} @media (max-width:768px){:root{--font-size-base:14px;--spacing-md:1.5rem;--spacing-lg:2rem} } @media print{body{background:#fff;color:#000} @page{margin:2cm} } ::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-track{background:var(--dark)} ::-webkit-scrollbar-thumb{background:var(--gradient-primary);border-radius:4px} .navbar{background:rgba(var(--dark),0.95) !important;backdrop-filter:blur(10px);padding:var(--spacing-xs) 0;transition:var(--transition-base);position:fixed;top:0;width:100%;z-index:1000} .nav-featured-logo-img{height:60px;width:auto;transition:var(--transition-base);display:block;object-fit:contain} .nav-featured.scrolled .nav-featured-logo-img{height:50px} @media (max-width:991.98px){.nav-featured-logo-img{height:35px} .nav-featured.scrolled .nav-featured-logo-img{height:35px} } .nav-featured{background:rgba(var(--dark),0.95);backdrop-filter:blur(10px);padding:var(--spacing-xs) 0;transition:all var(--transition-base);animation:navSlideDown 0.5s ease} .nav-featured.scrolled{background:rgba(var(--dark-purple),0.98);box-shadow:var(--shadow-md);padding:calc(var(--spacing-sm) * 0.6) 0} .nav-featured-brand{text-decoration:none;position:relative} .nav-featured-logo{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:var(--font-size-xl);font-weight:700;transition:all var(--transition-base)} .nav-featured-logo:hover{background:var(--gradient-dark);-webkit-background-clip:text;background-clip:text} .nav-featured-toggler{border:1px solid var(--purple-light);padding:var(--spacing-xs) var(--spacing-xs)} .nav-featured-toggler:focus{box-shadow:0 0 0 0.2rem rgba(var(--purple-light),0.25)} .nav-featured-menu{gap:1rem} .nav-featured-item{position:relative} .nav-featured-link{color:var(--pink-purple) !important;font-weight:500;padding:var(--spacing-xs) var(--spacing-md) !important;transition:all var(--transition-base);position:relative} .nav-featured-link::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--gradient-primary);transition:all var(--transition-base);transform:translateX(-50%)} .nav-featured-link:hover{color:var(--orange) !important;transform:translateY(-2px)} .nav-featured-link:hover::after{width:80%} .nav-featured-link.active{color:var(--orange) !important} .nav-featured-link.active::after{width:80%} @keyframes navSlideDown{from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} } @media (max-width:991.98px){.nav-featured-logo-img{height:50px} .nav-featured.scrolled .nav-featured-logo-img{height:45px} .nav-featured-menu{padding:var(--spacing-md) 0;gap:var(--spacing-xs)} .nav-featured-link{padding:var(--spacing-sm) var(--spacing-md) !important} .nav-featured-link::after{display:none} .mobile-menu{backdrop-filter:blur(10px);background:rgba(var(--dark),0.95)} .nav-featured-link:hover{background:var(--gradient-primary);color:var(--dark) !important;border-radius:var(--border-radius-md);transform:none} } .navbar.scrolled{padding:var(--spacing-xs) 0;box-shadow:0 2px 20px rgba(var(--purple-dark),0.2)} .navbar-brand{font-size:calc(var(--font-size-xl) * 1.2);font-weight:800} .nav-link{font-weight:500;position:relative;padding:var(--spacing-xs) var(--spacing-md);margin:0 var(--spacing-xs);transition:all var(--transition-base)} .nav-link::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--gradient-primary);transform:scaleX(0);transition:transform var(--transition-base)} .nav-link:hover::after{transform:scaleX(1)} .nav-featured-brand{display:flex;align-items:center;z-index:1060} .hamburger-menu{display:none;background:transparent;border:none;cursor:pointer;padding:0;width:30px;height:22px;position:absolute;right:15px;top:50%;transform:translateY(-50%);z-index:1100} .hamburger-menu span{display:block;width:100%;height:2px;background:var(--pink-purple);position:absolute;left:0;transition:all 0.3s ease} .hamburger-menu span:first-child{top:0} .hamburger-menu span:nth-child(2){top:50%;transform:translateY(-50%)} .hamburger-menu span:last-child{bottom:0} .hamburger-menu.active span:first-child{transform:rotate(45deg);top:10px} .hamburger-menu.active span:nth-child(2){opacity:0} .hamburger-menu.active span:last-child{transform:rotate(-45deg);bottom:10px} .mobile-menu{display:none;visibility:hidden;position:fixed;top:0;right:-100%;width:100%;height:100vh;background:rgba(var(--dark),0.98);backdrop-filter:blur(10px);padding-top:100px;transition:all 0.4s ease;z-index:1050} .mobile-menu.active{visibility:visible;right:0} .mobile-menu .navbar-nav{flex-direction:column;align-items:flex-end;padding:0 2rem;height:calc(100vh - 100px);overflow-y:auto} .mobile-menu .nav-featured-link{font-size:1.25rem;font-weight:500;color:var(--pink-purple) !important;opacity:0;transform:translateX(-20px);transition:all 0.3s ease;display:block;width:100%;padding:1.25rem 0 !important;text-align:left;position:relative} .mobile-menu.active .nav-featured-link{opacity:1;transform:translateX(0);pointer-events:auto} .mobile-menu .nav-featured-link:hover{color:var(--orange) !important;transform:translateX(0) !important;padding-left:1rem !important} .mobile-menu .nav-featured-link::after{content:'→';position:absolute;right:1rem;top:50%;transform:translateY(-50%);opacity:0;transition:all 0.3s ease} .mobile-menu .nav-featured-link:hover::after{opacity:1;right:0} @media (max-width:991.98px){.hamburger-menu{display:block} .mobile-menu{background:rgba(var(--dark-purple),0.85);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:0 4px 30px rgba(0,0,0,0.2);border-left:1px solid rgba(var(--purple-light),0.1)} .mobile-menu::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient( circle at 100% 0%,rgba(var(--purple-dark),0.3) 0%,rgba(var(--dark),0.3) 100% );pointer-events:none;opacity:0;transition:opacity 0.4s ease} .mobile-menu.active::before{opacity:1} .mobile-menu .navbar-nav{padding:2rem} .mobile-menu .nav-featured-link{border-radius:var(--border-radius-md);margin:0.5rem 0;padding:1rem 1.5rem !important;background:rgba(var(--dark),0.3);border:1px solid rgba(var(--purple-light),0.1);transition:all 0.3s ease} .mobile-menu .nav-featured-link:hover{background:rgba(var(--purple-light),0.1);border-color:rgba(var(--purple-light),0.2);transform:translateX(0.5rem) !important;padding-left:2rem !important} .mobile-menu .nav-featured-link::after{content:'→';position:absolute;right:1.5rem;opacity:0;transform:translateX(-10px);transition:all 0.3s ease} .mobile-menu .nav-featured-link:hover::after{opacity:1;transform:translateX(0)} .mobile-menu .nav-featured-link{opacity:0;transform:translateX(-2rem);transition:all 0.4s cubic-bezier(0.4,0,0.2,1)} .mobile-menu.active .nav-featured-link{opacity:1;transform:translateX(0)} .mobile-menu.active .nav-featured-item:nth-child(1) .nav-featured-link{transition-delay:0.1s} .mobile-menu.active .nav-featured-item:nth-child(2) .nav-featured-link{transition-delay:0.15s} .mobile-menu.active .nav-featured-item:nth-child(3) .nav-featured-link{transition-delay:0.2s} .mobile-menu.active .nav-featured-item:nth-child(4) .nav-featured-link{transition-delay:0.25s} } .mobile-trigger{background:transparent;border:none;cursor:pointer;padding:0;width:30px;height:22px;position:fixed;right:15px;top:28px;z-index:1200} .mobile-trigger-line{display:block;width:100%;height:2px;background:var(--pink-purple);position:absolute;left:0;transition:all 0.3s ease} .mobile-trigger-line:first-child{top:0} .mobile-trigger-line:nth-child(2){top:50%;transform:translateY(-50%)} .mobile-trigger-line:last-child{bottom:0} .mobile-trigger.is-active .mobile-trigger-line{background:var(--orange)} .mobile-trigger.is-active .mobile-trigger-line:first-child{transform:rotate(45deg);top:10px} .mobile-trigger.is-active .mobile-trigger-line:nth-child(2){opacity:0;transform:translateX(-100%)} .mobile-trigger.is-active .mobile-trigger-line:last-child{transform:rotate(-45deg);bottom:10px} .mobile-nav-close{position:absolute;top:28px;right:15px;width:30px;height:30px;background:transparent;border:none;cursor:pointer;z-index:1200;padding:0} .mobile-nav-close-line{position:absolute;left:0;top:50%;width:100%;height:2px;background-color:var(--orange);transition:transform 0.3s ease} .mobile-nav-close-line:first-child{transform:rotate(45deg)} .mobile-nav-close-line:last-child{transform:rotate(-45deg)} .mobile-nav-close:hover .mobile-nav-close-line{background-color:var(--purple-light)} .mobile-nav{visibility:hidden;opacity:0;position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1090;transition:visibility 0.3s,opacity 0.3s;pointer-events:none} .mobile-nav.is-active{visibility:visible;opacity:1;pointer-events:auto} .mobile-nav-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(26,11,46,0.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity 0.3s ease} .mobile-nav.is-active .mobile-nav-overlay{opacity:1} .mobile-nav-container{position:relative;width:100%;height:100%;padding-top:calc(var(--header-height) + 1rem);overflow-y:auto;-webkit-overflow-scrolling:touch} .mobile-nav-list{list-style:none;padding:2rem;margin:0;max-width:400px;margin:0 auto} .mobile-nav-item{opacity:0;transform:translateX(-20px);transition:opacity 0.3s ease,transform 0.3s ease;margin-bottom:1rem} .mobile-nav.is-active .mobile-nav-item{opacity:1;transform:translateX(0)} .mobile-nav.is-active .mobile-nav-item:nth-child(1){transition-delay:0.1s} .mobile-nav.is-active .mobile-nav-item:nth-child(2){transition-delay:0.2s} .mobile-nav.is-active .mobile-nav-item:nth-child(3){transition-delay:0.3s} .mobile-nav.is-active .mobile-nav-item:nth-child(4){transition-delay:0.4s} .mobile-nav-link{display:block;padding:1.25rem 1.75rem;color:var(--pink-purple);font-size:1.25rem;text-decoration:none;background:rgba(255,255,255,0.03);border:1px solid rgba(243,217,244,0.1);border-radius:var(--border-radius-md);transition:all 0.3s ease;position:relative;box-shadow:0 4px 15px rgba(0,0,0,0.1)} .mobile-nav-link:after{content:'→';position:absolute;right:1.5rem;opacity:0;transform:translateX(-10px);transition:all 0.3s ease} .mobile-nav-link:hover{background:rgba(243,192,49,0.1);border-color:rgba(243,192,49,0.2);transform:translateX(10px);color:var(--orange);box-shadow:0 4px 20px rgba(243,192,49,0.15)} .mobile-nav-link:hover:after{opacity:1;transform:translateX(0)} body.nav-is-active{overflow:hidden} .mobile-menu.active .nav-delay-1{transition-delay:0.1s} .mobile-menu.active .nav-delay-2{transition-delay:0.2s} .mobile-menu.active .nav-delay-3{transition-delay:0.3s} .mobile-menu.active .nav-delay-4{transition-delay:0.4s} .hamburger-menu{background:transparent;border:none;cursor:pointer;padding:0;width:30px;height:22px;position:absolute;right:15px;top:50%;transform:translateY(-50%);z-index:1100} .hamburger-menu span{display:block;width:100%;height:2px;background:var(--pink-purple);position:absolute;left:0;transition:all 0.3s ease} .hamburger-menu span:first-child{top:0} .hamburger-menu span:nth-child(2){top:50%;transform:translateY(-50%)} .hamburger-menu span:last-child{bottom:0} .hamburger-menu.active span{background:var(--orange)} .hamburger-menu.active span:first-child{transform:rotate(45deg);top:10px} .hamburger-menu.active span:nth-child(2){opacity:0;transform:translateX(-100%)} .hamburger-menu.active span:last-child{transform:rotate(-45deg);bottom:10px} .hamburger-menu:hover span{background:var(--orange)} .hamburger-menu:hover span:nth-child(2){transform:translateY(-50%) scaleX(0.75)} .mobile-menu.active::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(var(--dark-purple),0.1) 0%,rgba(var(--dark-purple),0) 100%);pointer-events:none} .no-scroll{overflow:hidden} :root{--bg-primary:hsl(257,59%,11%);--bg-card:hsla(0,0%,100%,0.03);--text-primary:hsla(0,0%,100%,0.9);--text-secondary:hsla(0,0%,100%,0.7);--color-accent:hsl(45,89%,57%);--color-accent-hover:hsl(45,92%,65%);--color-purple:hsl(280,89%,44%);--color-purple-light:hsl(280,100%,77%);--gradient-primary:linear-gradient(135deg,var(--color-accent),var(--color-purple-light));--gradient-hover:linear-gradient(135deg,var(--color-purple-light),var(--color-accent));--shadow-sm:0 4px 12px rgba(0,0,0,0.1);--shadow-md:0 8px 24px rgba(0,0,0,0.15);--shadow-lg:0 16px 32px rgba(0,0,0,0.2);--radius-sm:12px;--radius-md:16px;--radius-lg:24px;--transition-base:0.3s cubic-bezier(0.25,1,0.5,1)} body{background-color:var(--dark);color:var(--text-primary);font-family:'Segoe UI',system-ui,-apple-system,sans-serif} .container{max-width:1280px;margin:0 auto;padding:1rem} .text-center{text-align:center} .bento-hero,.bento-stats{padding:clamp(7.5rem,4vw,3rem) clamp(1rem,3vw,2rem);overflow:hidden;position:relative;padding-top:6rem} .bento-heading{margin-bottom:clamp(1.5rem,3vw,2.5rem);padding:0 clamp(1rem,2vw,1.5rem)} .bento-heading h1{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:clamp(700,1vw + 700,800);line-height:clamp(1.1,0.1vw + 1.1,1.3);margin:0} .gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent} .bento-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(clamp(200px,20vw,300px),auto);gap:clamp(0.75rem,2vw,1.5rem);padding:0 clamp(0.5rem,2vw,1rem);position:relative;max-width:clamp(1200px,90vw,1400px);margin:0 auto} .bento-item{border-radius:clamp(12px,1.5vw,20px);background:var(--bg-card);backdrop-filter:blur(clamp(8px,1vw,15px));border:clamp(1px,0.1vw,2px) solid rgba(255,255,255,0.05);overflow:hidden;transition:var(--transition-base);min-height:clamp(180px,15vw,250px)} .bento-item:hover{transform:translateY(clamp(-3px,-0.5vw,-8px));border-color:rgba(255,255,255,clamp(0.08,0.02vw,0.15));box-shadow:var(--shadow-md)} .bento-item-lg{grid-column:span 8;grid-row:span 2;min-height:clamp(400px,30vw,500px)} .bento-item-md{grid-column:span 4;grid-row:span 2;min-height:clamp(350px,25vw,450px)} .bento-service{grid-column:span 4;grid-row:span 1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:clamp(200px,25vw,250px);padding:clamp(1.25rem,3vw,2rem);gap:clamp(0.5rem,1vw,1rem)} .bento-item-accent{background:linear-gradient(145deg,rgba(154,8,215,0.15),rgba(26,11,46,0.3));position:relative} .bento-item-image{background:linear-gradient(145deg,rgba(26,11,46,0.3),rgba(154,8,215,0.15))} .service-web{background:linear-gradient(165deg,rgba(26,11,46,0.4),rgba(243,192,49,0.08))} .service-mobile{background:linear-gradient(165deg,rgba(26,11,46,0.4),rgba(154,8,215,0.08))} .service-design{background:linear-gradient(165deg,rgba(26,11,46,0.4),rgba(243,192,49,0.08))} .stat-projects{background:linear-gradient(165deg,rgba(26,11,46,0.4),rgba(243,192,49,0.08))} .stat-clients{background:linear-gradient(165deg,rgba(26,11,46,0.4),rgba(154,8,215,0.08))} .stat-experience{background:linear-gradient(165deg,rgba(26,11,46,0.4),rgba(243,192,49,0.08))} .bento-item-accent::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent,rgba(255,255,255,0.05),transparent);transform:translateX(-100%);transition:transform clamp(0.6s,0.1vw + 0.6s,1s) ease} .bento-item-accent:hover::before{transform:translateX(100%)} .bento-content{height:100%;padding:clamp(1rem,3vw,2rem);display:flex;flex-direction:column;gap:clamp(0.5rem,1vw,1rem)} .bento-subtitle{font-weight:clamp(600,1vw + 600,700);font-size:clamp(1.1rem,2.5vw,1.4rem);margin-bottom:clamp(1rem,2vw,1.5rem);color:var(--color-accent);line-height:clamp(1.2,0.1vw + 1.2,1.4)} .bento-description{font-size:clamp(0.9rem,2vw,1.1rem);line-height:clamp(1.4,0.1vw + 1.4,1.6);margin-bottom:clamp(1rem,2vw,1.5rem);color:var(--text-secondary)} .feature-list{list-style:none;padding:1.5rem 2rem;margin:0 0 clamp(1rem,2vw,1.5rem);display:flex;flex-direction:column;gap:0.75rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.1);border-radius:1rem} .feature-list li{display:flex;align-items:flex-start;gap:0.75rem;color:var(--text-primary);font-size:clamp(0.9rem,1.8vw,1rem);line-height:1.4;transition:background 0.3s ease;border-left:3px solid transparent;padding-left:0.5rem} .feature-list{list-style:none;padding:1.5rem 2rem;margin:0 0 clamp(1rem,2vw,1.5rem);display:flex;flex-direction:column;gap:0.75rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.1);border-radius:1rem} .feature-list li{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 0.5rem;color:var(--text-primary);font-size:clamp(0.9rem,1.8vw,1rem);line-height:1.4;border-left:3px solid transparent;border-radius:0.5rem;transition:all 0.3s ease;min-height:3rem} .feature-list li:hover{background:rgba(255,255,255,0.05);border-left-color:var(--color-accent);transform:translateX(0.25rem)} .feature-list li i{flex-shrink:0;color:var(--color-accent);font-size:1.2em;width:1.5rem;text-align:center} .feature-list strong{color:var(--text-primary)} .feature-list li:hover{background:rgba(255,255,255,0.03);border-left-color:var(--color-accent)} .feature-list li i{color:var(--color-accent);flex-shrink:0;font-size:1.2em;margin-top:0.2em} .feature-list strong{color:var(--text-primary)} .bento-cta{margin-top:auto} .bento-image-wrapper{height:100%;display:flex;align-items:center;justify-content:center;padding:clamp(0.5rem,2vw,1rem)} .bento-image{max-width:100%;height:auto;border-radius:clamp(8px,1vw,16px);object-fit:contain} .floating{animation:float clamp(4s,0.5vw + 4s,6s) ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0px)} 50%{transform:translateY(clamp(-10px,-1vw,-20px))} } .service-icon-wrap{width:clamp(48px,8vw,64px);height:clamp(48px,8vw,64px);display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);border-radius:clamp(12px,2vw,16px);font-size:clamp(1.25rem,2.5vw,1.5rem);color:black;margin-bottom:clamp(0.75rem,2vw,1rem)} .bento-service h3{font-size:clamp(1.1rem,2.5vw,1.25rem);font-weight:clamp(600,1vw + 600,700);margin:clamp(0.25rem,1vw,0.5rem) 0;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:clamp(1.2,0.1vw + 1.2,1.4)} .bento-service p{font-size:clamp(0.85rem,1.8vw,0.9rem);color:var(--text-secondary);margin-bottom:clamp(0.75rem,2vw,1rem);line-height:clamp(1.4,0.1vw + 1.4,1.6)} .service-price{font-size:clamp(1.1rem,2.5vw,1.25rem);font-weight:clamp(600,1vw + 600,700);color:var(--color-accent);margin:clamp(0.25rem,1vw,0.5rem) 0 clamp(1rem,2vw,1.25rem)} .service-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--gradient-primary);color:black;padding:clamp(0.625rem,2vw,0.75rem) clamp(1.25rem,3vw,2rem);font-size:clamp(0.9rem,2vw,1.125rem);min-height:clamp(44px,6vw,48px);border-radius:clamp(6px,1vw,8px);font-weight:clamp(500,1vw + 500,600);transition:var(--transition-base);text-decoration:none;border:none;cursor:pointer;width:100%;line-height:1} .service-btn:hover{transform:translateY(clamp(-2px,-0.3vw,-4px));box-shadow:var(--shadow-sm);background:var(--gradient-hover)} .bento-item-cta{padding:clamp(2rem,4vw,3rem);background:linear-gradient(125deg,rgba(26,11,46,0.9),rgba(26,11,46,0.7));text-align:left;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(1rem,2vw,1.5rem)} .bento-item-cta .bento-title,.bento-item-cta .bento-subtitle,.bento-item-cta .bento-benefits,.bento-item-cta .btn-primary{position:relative;z-index:1;max-width:clamp(85%,5vw + 85%,95%)} .bento-item-cta::before{content:'';position:absolute;top:0;right:0;width:100%;height:100%;background:radial-gradient(circle at top right,rgba(243,192,49,clamp(0.08,0.02vw,0.15)),transparent 70%);pointer-events:none;z-index:0} .bento-title{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:clamp(700,1vw + 700,800);line-height:clamp(1.1,0.1vw + 1.1,1.3);margin-bottom:clamp(0.75rem,2vw,1rem)} .bento-subtitle{font-size:clamp(1rem,2.2vw,1.1rem);margin-bottom:clamp(1rem,2vw,1.5rem);color:var(--text-secondary);line-height:clamp(1.4,0.1vw + 1.4,1.6)} .highlight{color:var(--color-accent);font-weight:700} .bento-benefits{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:clamp(0.75rem,1.5vw,1rem);margin-bottom:clamp(1.5rem,3vw,2rem)} .benefit-tag{background:rgba(255,255,255,clamp(0.03,0.01vw,0.08));padding:clamp(0.375rem,1vw,0.5rem) clamp(0.75rem,2vw,1rem);border-radius:clamp(20px,4vw,50px);font-size:clamp(0.8rem,1.8vw,0.9rem);display:flex;align-items:center;gap:clamp(0.375rem,1vw,0.5rem);border:clamp(1px,0.1vw,1px) solid rgba(255,255,255,0.1)} .benefit-tag i{color:var(--color-accent);font-size:clamp(0.875rem,1.8vw,1rem)} .btn-primary{display:inline-flex;align-items:center;justify-content:center;background:var(--gradient-primary);color:black;padding:clamp(0.625rem,2vw,0.75rem) clamp(1.25rem,3vw,2rem);border-radius:clamp(6px,1vw,8px);font-weight:clamp(500,1vw + 500,600);min-height:clamp(44px,6vw,48px);font-size:clamp(0.9rem,2vw,1.125rem);transition:var(--transition-base);text-decoration:none;border:none;cursor:pointer;gap:clamp(0.375rem,1vw,0.5rem);line-height:1} .btn-primary:hover{transform:translateY(clamp(-2px,-0.3vw,-4px));box-shadow:var(--shadow-md);background:var(--gradient-hover)} .btn-lg{padding:clamp(0.875rem,2.5vw,1rem) clamp(2rem,4vw,2.5rem);font-size:clamp(1.125rem,2.5vw,1.25rem);min-height:clamp(52px,8vw,56px)} .btn-glow{box-shadow:0 0 clamp(10px,2vw,20px) rgba(243,192,49,clamp(0.2,0.05vw,0.4))} .btn-glow:hover{box-shadow:0 0 clamp(15px,3vw,30px) rgba(243,192,49,clamp(0.3,0.1vw,0.6))} .bento-stat{grid-column:span 4;grid-row:span 1;padding:clamp(1.25rem,3vw,1.5rem);display:flex;align-items:center;justify-content:center;text-align:center;min-height:clamp(180px,20vw,220px)} .stat-content{display:flex;flex-direction:column;align-items:center;gap:clamp(0.375rem,1vw,0.5rem)} .stat-number{font-size:clamp(2rem,5vw,2.5rem);font-weight:clamp(700,1vw + 700,800);background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:clamp(0.25rem,1vw,0.5rem);line-height:1} .bento-stat p{color:var(--text-secondary);font-size:clamp(0.9rem,2vw,1rem);margin:0;line-height:clamp(1.3,0.1vw + 1.3,1.5)} .bento-featured-box{grid-column:span 8;grid-row:span 1;padding:clamp(1.5rem,3vw,2rem);background:linear-gradient(165deg,rgba(154,8,215,0.15),rgba(26,11,46,0.3));display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:clamp(0.75rem,1.5vw,1rem);min-height:clamp(200px,20vw,250px)} .featured-icon{width:clamp(56px,8vw,64px);height:clamp(56px,8vw,64px);background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(1.5rem,3vw,1.75rem);color:black;margin-bottom:clamp(0.75rem,1.5vw,1rem)} .featured-title{font-size:clamp(1.125rem,2.5vw,1.25rem);font-weight:clamp(600,1vw + 600,700);margin-bottom:clamp(0.5rem,1vw,0.75rem);color:var(--color-accent);line-height:clamp(1.2,0.1vw + 1.2,1.4)} .featured-text{font-size:clamp(0.9rem,2vw,1rem);line-height:clamp(1.4,0.1vw + 1.4,1.6);color:var(--text-secondary);margin-bottom:clamp(0.75rem,1.5vw,1rem);max-width:clamp(90%,5vw + 90%,95%)} .text-link{color:var(--color-accent);text-decoration:none;display:inline-flex;align-items:center;gap:clamp(0.375rem,1vw,0.5rem);transition:var(--transition-base);font-weight:clamp(500,1vw + 500,600);font-size:clamp(0.85rem,1.8vw,0.9rem)} .text-link:hover{color:var(--color-accent-hover);transform:translateX(clamp(2px,0.5vw,4px))} @media (min-width:1400px){.bento-grid{max-width:1600px;gap:2rem} .bento-item{min-height:280px} .bento-item-lg{min-height:550px} .bento-item-md{min-height:480px} } @media (max-width:1200px) and (min-width:1025px){.bento-item-lg{grid-column:span 8;min-height:clamp(350px,25vw,450px)} .bento-item-md{grid-column:span 4;min-height:clamp(300px,20vw,400px)} .bento-service{padding:clamp(1rem,2.5vw,1.75rem)} } @media (max-width:1024px) and (min-width:769px){.bento-grid{grid-template-columns:repeat(6,1fr);gap:clamp(1rem,2vw,1.5rem);max-width:100%} .bento-item-lg{grid-column:span 6;grid-row:span 1;min-height:clamp(280px,25vw,320px)} .bento-item-md{grid-column:span 6;grid-row:span 1;min-height:clamp(250px,20vw,280px)} .bento-service{grid-column:span 3;min-height:clamp(220px,18vw,260px);padding:clamp(1rem,2.5vw,1.5rem)} .bento-stat{grid-column:span 3;min-height:clamp(200px,18vw,240px)} .bento-featured-box{grid-column:span 6;min-height:clamp(180px,15vw,220px)} .bento-item-cta{grid-column:span 6;padding:clamp(1.5rem,3vw,2rem)} } @media (max-width:768px) and (min-width:481px){.bento-grid{grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.25rem);padding:0 clamp(1rem,2vw,1.5rem)} .bento-item-lg,.bento-item-md,.bento-service,.bento-stat,.bento-featured-box,.bento-item-cta{grid-column:span 2;grid-row:span 1;min-height:clamp(200px,25vw,280px)} .bento-service,.bento-stat{min-height:clamp(180px,20vw,220px)} .bento-content{padding:clamp(1.25rem,3vw,1.75rem)} .bento-item-cta{padding:clamp(1.5rem,4vw,2rem);text-align:center} .bento-item-cta .bento-title,.bento-item-cta .bento-subtitle,.bento-item-cta .bento-benefits,.bento-item-cta .btn-primary{max-width:100%} .bento-benefits{justify-content:center;flex-direction:column;align-items:center} .benefit-tag{width:fit-content} } @media (max-width:480px){.bento-grid{grid-template-columns:1fr;gap:clamp(0.75rem,3vw,1rem);padding:0 clamp(0.75rem,3vw,1rem)} .bento-item-lg,.bento-item-md,.bento-service,.bento-stat,.bento-featured-box,.bento-item-cta{grid-column:span 1;grid-row:span 1;min-height:clamp(200px,30vw,250px)} .bento-service{min-height:clamp(180px,25vw,220px);padding:clamp(1rem,4vw,1.5rem)} .bento-stat{min-height:clamp(150px,20vw,180px);padding:clamp(1rem,3vw,1.25rem)} .bento-featured-box{min-height:clamp(160px,22vw,200px)} .bento-item-cta{padding:clamp(1.25rem,4vw,1.75rem);text-align:center;min-height:clamp(220px,35vw,280px)} .bento-content{padding:clamp(1rem,4vw,1.5rem)} .bento-heading{text-align:center;padding:0 clamp(1rem,3vw,1.5rem)} .bento-heading h1{font-size:clamp(2rem,6vw,2.5rem)} .service-btn,.btn-primary{width:100%;min-height:clamp(48px,8vw,56px);font-size:clamp(0.9rem,3vw,1rem)} .service-icon-wrap{width:clamp(40px,8vw,52px);height:clamp(40px,8vw,52px);font-size:clamp(1rem,3vw,1.25rem)} .featured-icon{width:clamp(48px,8vw,56px);height:clamp(48px,8vw,56px);font-size:clamp(1.25rem,3vw,1.5rem)} .stat-number{font-size:clamp(1.75rem,6vw,2.25rem)} .bento-benefits{flex-direction:column;align-items:center;gap:clamp(0.5rem,2vw,0.75rem)} .benefit-tag{width:100%;justify-content:center;max-width:280px} } @media (max-width:360px){.bento-hero,.bento-stats{padding:clamp(6rem,4vw,2rem) clamp(0.75rem,3vw,1rem);padding-top:5rem} .bento-grid{gap:clamp(0.5rem,3vw,0.75rem);padding:0 clamp(0.5rem,3vw,0.75rem)} .bento-item{min-height:clamp(160px,35vw,200px)} .bento-service{min-height:clamp(160px,30vw,200px);padding:clamp(0.75rem,4vw,1.25rem)} .bento-stat{min-height:clamp(140px,25vw,170px)} .bento-item-cta{min-height:clamp(200px,40vw,250px);padding:clamp(1rem,4vw,1.5rem)} .service-btn,.btn-primary{font-size:clamp(0.8rem,4vw,0.9rem);padding:clamp(0.5rem,3vw,0.625rem) clamp(1rem,4vw,1.25rem);min-height:clamp(44px,10vw,52px)} .bento-heading h1{font-size:clamp(1.75rem,7vw,2.25rem)} .service-icon-wrap{width:clamp(36px,10vw,48px);height:clamp(36px,10vw,48px);font-size:clamp(0.9rem,3.5vw,1.1rem)} } @media (min-height:800px) and (min-width:769px){.bento-item{min-height:clamp(220px,20vh,300px)} .bento-item-lg{min-height:clamp(450px,35vh,600px)} .bento-item-md{min-height:clamp(400px,30vh,500px)} } @media (hover:none) and (pointer:coarse){.bento-item:hover,.service-btn:hover,.btn-primary:hover,.text-link:hover{transform:none} .service-btn,.btn-primary{min-height:clamp(48px,8vw,56px);padding:clamp(0.75rem,3vw,1rem) clamp(1.5rem,4vw,2rem)} .bento-item{border-width:clamp(1px,0.2vw,2px)} } @media (max-width:768px) and (orientation:landscape) and (max-height:500px){.bento-grid{grid-template-columns:repeat(2,1fr);gap:clamp(0.5rem,2vw,0.75rem)} .bento-item-lg,.bento-item-md,.bento-service,.bento-stat,.bento-featured-box,.bento-item-cta{grid-column:span 1;min-height:clamp(140px,25vh,180px)} .bento-service,.bento-stat{min-height:clamp(120px,20vh,150px);padding:clamp(0.75rem,2vw,1rem)} } @media print{.bento-grid{display:block;gap:0} .bento-item{break-inside:avoid;margin-bottom:1rem;transform:none !important} .floating{animation:none} } @media (prefers-reduced-motion:reduce){.bento-item,.service-btn,.btn-primary,.text-link{transition:none} .floating{animation:none} .bento-item-accent::before{display:none} } @media (prefers-contrast:high){.bento-item{border-width:2px;border-color:rgba(255,255,255,0.3)} .benefit-tag{border-width:1px;border-color:rgba(255,255,255,0.2)} } .testimonials-dashboard{padding:6rem 0;position:relative;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif} .testimonials-dashboard::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,rgba(139,69,255,0.05) 0%,transparent 70%);pointer-events:none} .testimonials-container{max-width:1200px;margin:0 auto;padding:0 2rem;position:relative;z-index:1} .dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem;flex-wrap:wrap;gap:1rem} .dashboard-title{font-size:clamp(2rem,4vw,3rem);font-weight:700;color:#ffffff;margin:0} .dashboard-filters{display:flex;gap:0.75rem;background:#2d1b3d;padding:0.5rem;border-radius:12px;border:1px solid rgba(139,69,255,0.2)} .filter-btn{display:flex;align-items:center;gap:0.5rem;background:transparent;border:none;color:rgba(255,255,255,0.7);padding:0.75rem 1rem;border-radius:8px;cursor:pointer;transition:all 0.3s ease;font-size:0.875rem;font-weight:500} .filter-btn:hover{color:#ffffff;background:rgba(139,69,255,0.2)} .filter-btn.active{background:linear-gradient(135deg,#ff8b3a,#ffb347);color:#1a1326} .dashboard-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,120px);gap:1.5rem;height:960px} .main-metric{grid-column:1 / 4;grid-row:1 / 5} .recent-review{grid-column:4 / 12;grid-row:1 / 5} .platform-stats{grid-column:1 / 4;grid-row:5 / 8} .sentiment-chart{grid-column:4 / 8;grid-row:5 / 8} .keywords-cloud{grid-column:8 / 12;grid-row:5 / 8} .bento-item{background:#2d1b3d;border-radius:20px;padding:2rem;border:1px solid rgba(139,69,255,0.2);transition:all 0.3s ease;position:relative;overflow:hidden;cursor:pointer} .bento-item::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(135deg,#ff8b3a,#ffb347);opacity:0;transition:opacity 0.3s ease} .bento-item:hover::before{opacity:1} .bento-item:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(45,27,61,0.4);border-color:rgba(139,69,255,0.4)} .main-metric{background:linear-gradient(135deg,#ff8b3a,#ffb347);color:#1a1326;display:flex;flex-direction:column;justify-content:space-between;text-align:center;position:relative;overflow:hidden;padding:2rem 1.5rem;border-radius:20px;box-shadow:0 10px 30px rgba(255,139,58,0.3);min-height:100%} .main-metric::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 70%);animation:rotate 20s linear infinite;pointer-events:none} .main-metric .metric-header{display:flex;align-items:center;justify-content:center;gap:0.75rem;font-weight:700;font-size:1rem;position:relative;z-index:2;color:#1a1326;margin-bottom:1rem} .main-metric .metric-header i{font-size:1.25rem;color:#1a1326} .main-metric .metric-value{font-size:3.5rem;font-weight:800;position:relative;z-index:2;color:#1a1326;line-height:1;margin:1rem 0;text-shadow:0 2px 4px rgba(26,19,38,0.1)} .main-metric .metric-trend{display:flex;align-items:center;justify-content:center;gap:0.5rem;font-size:0.875rem;font-weight:600;color:#1a1326;position:relative;z-index:2;background:rgba(26,19,38,0.15);padding:0.5rem 1rem;border-radius:20px;margin-bottom:1.25rem} .main-metric .metric-trend i{color:#1a1326;font-size:0.875rem} .main-metric .metric-stats{display:flex;justify-content:center;gap:0.75rem;margin-bottom:1.25rem;position:relative;z-index:2} .main-metric .stat-item{display:flex;align-items:center;gap:0.5rem;background:rgba(26,19,38,0.15);padding:0.75rem 0.5rem;border-radius:12px;flex:1;transition:transform 0.3s ease} .main-metric .stat-item:hover{transform:scale(1.02);background:rgba(26,19,38,0.2)} .main-metric .stat-item i{font-size:1.125rem;color:#1a1326;flex-shrink:0} .main-metric .stat-info{display:flex;flex-direction:column;text-align:left;flex:1} .main-metric .stat-number{font-size:1.25rem;font-weight:700;color:#1a1326;line-height:1;margin-bottom:0.25rem} .main-metric .stat-label{font-size:0.75rem;color:rgba(26,19,38,0.8);font-weight:500;line-height:1.2} .main-metric .metric-footer{display:flex;flex-direction:column;gap:0.75rem;position:relative;z-index:2} .main-metric .metric-footer p{font-size:0.875rem;color:rgba(26,19,38,0.85);margin:0;line-height:1.3;font-weight:500} .main-metric .metric-badge{display:flex;align-items:center;justify-content:center;gap:0.5rem;background:rgba(26,19,38,0.18);padding:0.625rem 1rem;border-radius:20px;font-size:0.8125rem;font-weight:600;color:#1a1326;transition:all 0.3s ease} .main-metric .metric-badge:hover{transform:translateY(-1px);background:rgba(26,19,38,0.25)} .main-metric .metric-badge i{font-size:0.875rem;color:#1a1326} @keyframes rotate{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } @media (max-width:1024px){.main-metric .metric-value{font-size:3rem} .main-metric .metric-stats{flex-direction:column;gap:0.5rem} .main-metric .stat-item{padding:0.5rem} } @media (max-width:768px){.main-metric{padding:1.5rem 1rem} .main-metric .metric-value{font-size:2.5rem} .main-metric .metric-header{font-size:0.9375rem} .main-metric .stat-number{font-size:1.125rem} .main-metric .stat-label{font-size:0.6875rem} } .metric-description{position:relative;z-index:2;display:flex;flex-direction:column;gap:1rem} .recent-review{display:flex;flex-direction:column;justify-content:space-between;background:#2d1b3d;border:1px solid rgba(139,69,255,0.2)} .review-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem} .review-badge{display:flex;align-items:center;gap:0.375rem;background:rgba(255,139,58,0.2);color:#ff8b3a;padding:0.375rem 0.75rem;border-radius:20px;font-size:0.75rem;font-weight:500} .review-badge.new{animation:pulse 2s infinite} .review-rating{color:#ff8b3a;font-size:0.875rem} .review-content{color:#ffffff;font-size:1.5rem;line-height:1.6;margin-bottom:2rem;flex:1;font-weight:500;position:relative;text-align:left} .review-content::before{content:'"';font-size:4rem;color:rgba(255,139,58,0.3);position:absolute;top:-1rem;left:-1rem;font-family:Georgia,serif;line-height:1} .review-content::after{content:'"';font-size:4rem;color:rgba(255,139,58,0.3);position:absolute;bottom:-2rem;right:-0.5rem;font-family:Georgia,serif;line-height:1} .review-author{display:flex;align-items:center;gap:0.75rem;font-size:0.875rem;color:rgba(255,255,255,0.8)} .review-author img{width:30px;height:30px;border-radius:50%;object-fit:cover} .review-time{color:rgba(255,255,255,0.5);margin-left:auto} .platform-stats{background:#2d1b3d;border:1px solid rgba(139,69,255,0.2)} .platform-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem;color:#ffffff;font-weight:600;font-size:1rem} .platform-header i{font-size:1.25rem;color:#ff8b3a} .platform-item{display:flex;align-items:center;gap:1rem;padding:0.75rem 0;border-bottom:1px solid rgba(139,69,255,0.1)} .platform-item:last-child{border-bottom:none} .platform-item i{font-size:1.125rem;color:#ff8b3a;width:20px;text-align:center} .platform-name{color:rgba(255,255,255,0.8);flex:1;font-size:0.9375rem} .platform-count{background:rgba(139,69,255,0.2);color:#8b45ff;padding:0.25rem 0.75rem;border-radius:12px;font-size:0.8125rem;font-weight:600} .sentiment-chart{background:#2d1b3d;border:1px solid rgba(139,69,255,0.2)} .chart-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem;color:#ffffff;font-weight:600;font-size:1rem} .chart-header i{font-size:1.25rem;color:#ff8b3a} .chart-summary{text-align:center;margin:1rem 0;flex:1;display:flex;flex-direction:column;justify-content:center} .chart-main-score{font-size:2.5rem;font-weight:700;color:#ff8b3a;margin-bottom:0.5rem} .chart-main-label{color:rgba(255,255,255,0.8);font-size:1rem;margin-bottom:0.5rem} .chart-description{color:rgba(255,255,255,0.6);font-size:0.875rem;line-height:1.4} .sentiment-bars{display:flex;flex-direction:column;gap:0.75rem} .sentiment-bar{display:flex;align-items:center;gap:1rem} .bar-label{font-size:0.8125rem;color:rgba(255,255,255,0.8);min-width:70px} .bar-fill{height:6px;border-radius:3px;position:relative;flex:1;max-width:120px} .sentiment-bar.positive .bar-fill{background:linear-gradient(90deg,#10b981,#34d399)} .sentiment-bar.neutral .bar-fill{background:linear-gradient(90deg,#f59e0b,#fbbf24)} .sentiment-bar.negative .bar-fill{background:linear-gradient(90deg,#ef4444,#f87171)} .bar-value{font-size:0.8125rem;font-weight:600;color:#ffffff;min-width:30px} .keywords-cloud{background:#2d1b3d;border:1px solid rgba(139,69,255,0.2)} .keywords-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem;color:#ffffff;font-weight:600;font-size:1rem} .keywords-header i{font-size:1.25rem;color:#ff8b3a} .keywords-list{display:flex;flex-wrap:wrap;gap:0.75rem} .keyword{background:rgba(139,69,255,0.2);color:#8b45ff;padding:0.5rem 1rem;border-radius:20px;font-size:0.875rem;font-weight:500;border:1px solid rgba(139,69,255,0.3);transition:all 0.3s ease} .keyword:hover{background:#8b45ff;color:#ffffff;transform:scale(1.05)} @keyframes rotate{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } @keyframes pulse{0%,100%{opacity:1} 50%{opacity:0.7} } @keyframes slideIn{from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } .bento-item{animation:slideIn 0.6s ease-out} @media (max-width:1024px){.dashboard-bento{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(10,100px);height:1000px} .main-metric{grid-column:1 / 3;grid-row:1 / 4} .recent-review{grid-column:3 / 9;grid-row:1 / 5} .platform-stats{grid-column:1 / 3;grid-row:4 / 7} .sentiment-chart{grid-column:3 / 6;grid-row:5 / 8} .keywords-cloud{grid-column:6 / 9;grid-row:5 / 8} } @media (max-width:768px){.dashboard-header{flex-direction:column;align-items:stretch;text-align:center} .dashboard-filters{justify-content:center} .dashboard-bento{grid-template-columns:1fr;grid-template-rows:auto;gap:1rem;height:auto} .bento-item{grid-column:1;grid-row:auto;padding:1.5rem} .testimonials-container{padding:0 1rem} .metric-value{font-size:2.5rem} .review-content{font-size:1.125rem;margin-bottom:1.5rem} .review-content::before,.review-content::after{font-size:3rem} .chart-main-score{font-size:2rem} .sentiment-bar{flex-direction:column;align-items:flex-start;gap:0.5rem} .bar-fill{max-width:100%;width:100%;height:8px} } @media (max-width:480px){.testimonials-dashboard{padding:4rem 0} .filter-btn{padding:0.5rem 0.75rem;font-size:0.8125rem} .keywords-list{gap:0.5rem} .keyword{padding:0.375rem 0.75rem;font-size:0.8125rem} .platform-item{padding:0.5rem 0} .metric-value{font-size:2rem} .chart-main-score{font-size:1.75rem} .review-content{font-size:1rem} .bento-item{padding:1rem} } .why-choose-us-section{padding:10rem 0;position:relative;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif} .why-choose-us-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,hsla(var(--purple-light-hsl),0.05) 0%,transparent 70%);pointer-events:none} .why-container{max-width:1200px;margin:0 auto;padding:0 2rem;position:relative;z-index:1} .why-header{text-align:center;margin-bottom:4rem} .why-badge{display:inline-flex;align-items:center;gap:0.5rem;background:hsla(var(--orange-hsl),0.1);border:1px solid hsla(var(--orange-hsl),0.2);padding:0.75rem 1.5rem;border-radius:50px;font-weight:600;color:var(--orange);margin-bottom:1.5rem;box-shadow:0 4px 20px hsla(var(--orange-hsl),0.2)} .why-title{font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--text-primary);margin-bottom:1rem;line-height:1.2} .highlight{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .why-subtitle{font-size:1.125rem;color:var(--text-secondary);max-width:600px;margin:0 auto} .why-bento-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(6,120px);gap:1.5rem;height:720px} .main-feature{grid-column:1 / 7;grid-row:1 / 5} .stats-feature{grid-column:10 / 13;grid-row:1 / 5} .code-feature{grid-column:7 / 10;grid-row:1 / 3} .security-feature{grid-column:7 / 10;grid-row:3 / 5} .support-feature{grid-column:1 / 4;grid-row:5 / 7} .tech-feature{grid-column:4 / 13;grid-row:5 / 7} .why-item{background:hsla(var(--purple-dark-hsl),0.4);border-radius:20px;padding:2rem;border:1px solid var(--border-color);transition:all 0.3s ease;position:relative;overflow:hidden;cursor:pointer} .why-item::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);opacity:0;transition:opacity 0.3s ease} .why-item:hover::before{opacity:1} .why-item:hover{transform:translateY(-5px);box-shadow:0 15px 30px hsla(var(--dark-hsl),0.4);border-color:hsla(var(--purple-light-hsl),0.4)} .main-feature{background:var(--gradient-primary);color:var(--dark)} .feature-content{height:100%;display:flex;flex-direction:column;justify-content:space-between} .feature-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem} .feature-icon-large{width:70px;height:70px;background:hsla(var(--dark-hsl),0.1);border-radius:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .feature-icon-large i{font-size:2rem;color:var(--dark)} .feature-title-large{font-size:2.25rem;font-weight:700;color:var(--dark);line-height:1.2} .feature-desc-large{font-size:1.125rem;color:hsla(var(--dark-hsl),0.8);line-height:1.6;margin-bottom:2rem;flex:1} .feature-metrics{display:flex;align-items:center;justify-content:space-between;background:hsla(var(--dark-hsl),0.1);padding:1.5rem;border-radius:16px} .metric-item{text-align:center} .metric-number{display:block;font-size:2.5rem;font-weight:800;color:var(--dark);margin-bottom:0.25rem;line-height:1} .metric-label{font-size:0.9375rem;color:hsla(var(--dark-hsl),0.7);font-weight:600} .metric-separator{width:2px;height:40px;background:hsla(var(--dark-hsl),0.2);border-radius:1px} .stats-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:2rem;color:var(--text-primary);font-weight:600;font-size:1rem} .stats-header i{font-size:1.25rem;color:var(--orange)} .stats-content{display:flex;flex-direction:column;gap:1.5rem;height:calc(100% - 60px)} .stat-item{text-align:center;padding:1.5rem 1rem;background:hsla(var(--purple-light-hsl),0.1);border-radius:16px;border:1px solid hsla(var(--purple-light-hsl),0.2);transition:all 0.3s ease} .stat-item:hover{background:hsla(var(--purple-light-hsl),0.2);transform:scale(1.02)} .stat-value{display:block;font-size:2rem;font-weight:700;color:var(--orange);margin-bottom:0.5rem;line-height:1} .stat-value1{display:block;font-size:2rem;font-weight:700;color:white;margin-bottom:0.5rem;line-height:1} .stat-label{font-size:0.875rem;color:var(--text-secondary);font-weight:500} .feature-icon{width:50px;height:50px;background:var(--gradient-primary);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;box-shadow:0 4px 15px hsla(var(--orange-hsl),0.3)} .feature-icon i{font-size:1.25rem;color:var(--dark)} .feature-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:0.75rem} .feature-desc{color:var(--text-secondary);font-size:0.9375rem;line-height:1.5;margin-bottom:1.5rem} .code-preview{display:flex;flex-direction:column;gap:0.5rem;margin-top:auto} .code-line{height:6px;background:linear-gradient(90deg,var(--purple-light),#a855f7);border-radius:3px;animation:codeAnimation 3s ease-in-out infinite} .code-line.short{width:60%} .code-line.medium{width:80%} @keyframes codeAnimation{0%,100%{opacity:0.6} 50%{opacity:1} } .security-status{margin-top:auto} .security-bars{display:flex;gap:0.5rem;margin-bottom:1rem} .security-bar{width:30px;height:6px;background:hsla(var(--purple-light-hsl),0.3);border-radius:3px;transition:all 0.3s ease} .security-bar.active{background:linear-gradient(90deg,#10b981,#34d399);box-shadow:0 0 10px rgba(16,185,129,0.3)} .security-text{font-size:0.8125rem;color:#10b981;font-weight:500} .support-status{margin-top:auto} .status-indicator{display:flex;align-items:center;gap:0.75rem;padding:1rem;background:rgba(16,185,129,0.1);border-radius:12px;border:1px solid rgba(16,185,129,0.2)} .status-dot{width:10px;height:10px;background:#10b981;border-radius:50%;animation:pulse 2s infinite} .status-indicator span{color:#10b981;font-size:0.875rem;font-weight:500} .tech-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:2rem;color:var(--text-primary);font-weight:600;font-size:1rem} .tech-header i{font-size:1.25rem;color:var(--orange)} .tech-stack{display:flex;justify-content:space-around;gap:1.5rem} .tech-item{display:flex;flex-direction:column;align-items:center;gap:0.75rem;padding:1.5rem 1rem;background:hsla(var(--purple-light-hsl),0.1);border-radius:12px;border:1px solid hsla(var(--purple-light-hsl),0.2);transition:all 0.3s ease;flex:1} .tech-item:hover{transform:translateY(-3px);background:hsla(var(--purple-light-hsl),0.2)} .tech-item i{font-size:2rem;color:var(--purple-light)} .tech-item span{color:var(--text-secondary);font-size:0.9375rem;font-weight:500} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.7;transform:scale(1.1)} } @media (max-width:1024px){.why-bento-grid{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,100px);height:800px} .main-feature{grid-column:1 / 6;grid-row:1 / 4} .stats-feature{grid-column:6 / 9;grid-row:1 / 4} .code-feature{grid-column:1 / 5;grid-row:4 / 6} .security-feature{grid-column:5 / 9;grid-row:4 / 6} .support-feature{grid-column:1 / 5;grid-row:6 / 8} .tech-feature{grid-column:5 / 9;grid-row:6 / 8} } @media (max-width:768px){.why-choose-us-section{padding:4rem 0} .why-bento-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:1rem;height:auto} .why-item{grid-column:1;grid-row:auto;padding:1.5rem} .why-container{padding:0 1rem} .feature-header{flex-direction:column;text-align:center;gap:1rem} .feature-title-large{font-size:1.75rem} .tech-stack{flex-direction:column;gap:1rem} .stats-content{flex-direction:row;gap:1rem} .feature-metrics{flex-direction:column;gap:1rem} .metric-separator{width:40px;height:2px} } @media (max-width:480px){.why-item{padding:1rem} .feature-title-large{font-size:1.5rem} .metric-number{font-size:2rem} .stat-value{font-size:1.5rem} } .portfolio-section{padding:6rem 0;position:relative;overflow:hidden;z-index:1} .portfolio-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,hsla(var(--purple-light-hsl),0.05) 0%,transparent 70%);pointer-events:none;z-index:-1} .container{max-width:1400px;margin:0 auto;padding:0 2rem;position:relative;z-index:2} .portfolio-header{text-align:center;margin-bottom:4rem;position:relative;z-index:3} .portfolio-badge{display:inline-flex;align-items:center;gap:0.5rem;background:hsla(var(--orange-hsl),0.1);border:1px solid hsla(var(--orange-hsl),0.2);color:var(--orange);padding:0.75rem 1.5rem;border-radius:50px;font-weight:600;font-size:0.875rem;margin-bottom:1.5rem} .portfolio-title{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;color:var(--text-primary);margin-bottom:1rem;line-height:1.2} .portfolio-subtitle{color:var(--text-secondary);font-size:1.125rem;margin:0;max-width:600px;margin:0 auto} .portfolio-slider{position:relative;max-width:1200px;margin:0 auto;overflow:hidden;border-radius:20px;z-index:2} .portfolio-track{display:flex;transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);will-change:transform} .portfolio-slide{flex:0 0 100%;position:relative} .slide-content{display:grid;grid-template-columns:1fr 1fr;min-height:500px;background:hsla(var(--purple-dark-hsl),0.4);border:1px solid var(--border-color);border-radius:20px;overflow:hidden;backdrop-filter:blur(10px)} .slide-image{position:relative;overflow:hidden;background:var(--dark)} .slide-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;cursor:zoom-in} .slide-image img:hover{transform:scale(1.02)} .slide-info{padding:3rem;display:flex;flex-direction:column;justify-content:center;position:relative;background:hsla(var(--purple-dark-hsl),0.6)} .slide-category{display:inline-block;background:hsla(var(--orange-hsl),0.1);color:var(--orange);padding:0.5rem 1rem;border-radius:20px;font-size:0.8rem;font-weight:600;margin-bottom:1.5rem;width:fit-content;border:1px solid hsla(var(--orange-hsl),0.2)} .slide-title{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;color:var(--text-primary);margin-bottom:1rem;line-height:1.3} .slide-description{color:var(--text-secondary);font-size:1rem;line-height:1.6;margin-bottom:2rem} .slide-tags{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:2rem} .slide-tag{background:hsla(var(--purple-light-hsl),0.1);color:var(--purple-light);padding:0.4rem 0.8rem;border-radius:15px;font-size:0.8rem;font-weight:500;border:1px solid hsla(var(--purple-light-hsl),0.2)} .slide-link{display:inline-flex;align-items:center;gap:0.5rem;color:var(--orange);font-weight:600;text-decoration:none;font-size:1rem;transition:all 0.3s ease} .slide-link:hover{gap:1rem;color:var(--purple-light);text-decoration:none} .slide-link i{transition:all 0.3s ease} .slider-controls{display:flex;justify-content:center;align-items:center;gap:2rem;margin-top:3rem;position:relative;z-index:3} .slider-nav{background:hsla(var(--purple-dark-hsl),0.6);border:1px solid var(--border-color);color:var(--text-primary);width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;backdrop-filter:blur(10px)} .slider-nav:hover{background:var(--orange);color:var(--dark);transform:translateY(-2px);box-shadow:0 10px 20px hsla(var(--orange-hsl),0.3)} .slider-nav:disabled{opacity:0.4;cursor:not-allowed;transform:none} .slider-nav:disabled:hover{background:hsla(var(--purple-dark-hsl),0.6);color:var(--text-primary);box-shadow:none} .slider-dots{display:flex;gap:0.8rem} .slider-dot{width:12px;height:12px;border-radius:50%;background:hsla(var(--text-primary),0.3);cursor:pointer;transition:all 0.3s ease;border:none} .slider-dot.active{background:var(--orange);transform:scale(1.2)} .slider-dot:hover{background:var(--orange)} .slider-counter{color:var(--text-secondary);font-size:1rem;font-weight:500} .current-slide{color:var(--orange);font-weight:700} @media (max-width:900px){.slider-controls{gap:1.2rem;margin-top:2rem} .slider-nav{width:40px;height:40px;font-size:1.1rem} .slider-dots{gap:0.5rem} .slider-dot{width:10px;height:10px} .slider-counter{font-size:0.95rem} } @media (max-width:600px){.slider-controls{flex-direction:column;align-items:stretch;gap:0.8rem;margin-top:1.2rem;position:relative} .slider-nav{width:36px;height:36px;font-size:1rem;margin:0 auto} .slider-dots{flex-wrap:wrap;justify-content:center;gap:0.4rem;margin:0.4rem 0;order:2} .slider-dot{width:9px;height:9px} .slider-counter{font-size:0.85rem;text-align:center;order:3;margin:0.2rem 0} .slider-nav.prev-btn,.slider-nav.next-btn{order:1} } @media (max-width:400px){.slider-dots{flex-wrap:wrap;gap:0.25rem;max-width:95vw} .slider-dot{width:8px;height:8px} } .autoplay-indicator{position:absolute;bottom:0;left:0;height:3px;background:var(--orange);transition:width 0.1s linear;border-radius:0 3px 3px 0} .slide-image::after{content:'🔍';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;color:var(--text-primary);background:hsla(var(--dark-hsl),0.8);width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:all 0.3s ease;pointer-events:none;border:2px solid var(--orange)} .slide-image:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1.1)} .image-modal{display:none;position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);backdrop-filter:blur(10px);overflow:auto;animation:modalFadeIn 0.3s ease} .image-modal.show{display:flex;align-items:center;justify-content:center;padding:2rem} .modal-content-wrapper{position:relative;max-width:95%;max-height:95%;display:flex;flex-direction:column;align-items:center} .image-modal .modal-content{max-width:100%;max-height:85vh;object-fit:contain;border-radius:15px;box-shadow:0 25px 50px rgba(0,0,0,0.5),0 0 30px hsla(var(--orange-hsl),0.3);border:2px solid hsla(var(--orange-hsl),0.3);animation:imageZoomIn 0.4s cubic-bezier(0.4,0,0.2,1)} .close-modal{position:absolute;top:-50px;right:-10px;color:var(--text-primary);font-size:2.5rem;font-weight:bold;cursor:pointer;transition:all 0.3s ease;user-select:none;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:hsla(var(--dark-hsl),0.7);border-radius:50%;border:2px solid hsla(var(--orange-hsl),0.3);backdrop-filter:blur(10px)} .close-modal:hover{color:var(--orange);background:hsla(var(--orange-hsl),0.1);border-color:var(--orange);transform:rotate(90deg) scale(1.1)} .modal-caption{margin-top:1.5rem;text-align:center;color:var(--text-primary);font-size:1.1rem;font-weight:600;max-width:600px;background:hsla(var(--dark-purple-hsl),0.8);padding:1rem 2rem;border-radius:50px;border:1px solid hsla(var(--orange-hsl),0.2);backdrop-filter:blur(10px)} .modal-info{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap;justify-content:center} .modal-category{background:hsla(var(--orange-hsl),0.1);color:var(--orange);padding:0.5rem 1rem;border-radius:20px;font-size:0.85rem;font-weight:600;border:1px solid hsla(var(--orange-hsl),0.3)} .modal-zoom-controls{position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);display:flex;gap:1rem;align-items:center} .zoom-btn{background:hsla(var(--dark-purple-hsl),0.8);border:1px solid hsla(var(--orange-hsl),0.3);color:var(--text-primary);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;backdrop-filter:blur(10px)} .zoom-btn:hover{background:var(--orange);color:var(--dark);transform:scale(1.1)} .zoom-level{color:var(--text-secondary);font-size:0.9rem;font-weight:500;min-width:60px;text-align:center} @keyframes modalFadeIn{from{opacity:0} to{opacity:1} } @keyframes imageZoomIn{from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} } @keyframes slideIn{from{opacity:0;transform:translateX(50px)} to{opacity:1;transform:translateX(0)} } .slide-info > *{animation:slideIn 0.6s ease forwards} .slide-category{animation-delay:0.1s} .slide-title{animation-delay:0.2s} .slide-description{animation-delay:0.3s} .slide-tags{animation-delay:0.4s} .slide-link{animation-delay:0.5s} @media (max-width:1024px){.slide-content{grid-template-columns:1fr;min-height:600px} .slide-info{padding:2rem} .slide-image{min-height:300px} } @media (max-width:768px){.portfolio-section{padding:4rem 0} .container{padding:0 1rem} .slide-content{min-height:500px} .slide-info{padding:1.5rem} .slider-controls{gap:1rem;margin-top:2rem} .slider-nav{width:40px;height:40px} .image-modal{padding:1rem} .close-modal{top:-40px;right:0;font-size:2rem;width:40px;height:40px} .modal-caption{font-size:1rem;padding:0.8rem 1.5rem;margin-top:1rem} .modal-zoom-controls{bottom:-50px;gap:0.5rem} .zoom-btn{width:35px;height:35px} } @media (max-width:480px){.slide-content{min-height:400px} .slide-info{padding:1rem} .slide-title{font-size:1.3rem} .slide-description{font-size:0.9rem} .image-modal .modal-content{max-height:70vh} .modal-info{gap:0.5rem} .modal-category{font-size:0.75rem;padding:0.4rem 0.8rem} } @media (prefers-reduced-motion:reduce){.portfolio-track,.slide-info > *,.why-item{transition:none;animation:none} .why-item:hover,.slide-image img:hover{transform:none} } .faq-section{padding:6rem 0;position:relative;overflow:hidden} .faq-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,hsla(var(--purple-light-hsl),0.05) 0%,transparent 70%);pointer-events:none} .faq-header{text-align:center;margin-bottom:4rem} .faq-badge{display:inline-flex;align-items:center;gap:0.5rem;background:hsla(var(--orange-hsl),0.1);border:1px solid hsla(var(--orange-hsl),0.2);color:var(--orange);padding:0.75rem 1.5rem;border-radius:50px;font-weight:600;font-size:0.875rem;margin-bottom:1.5rem} .faq-title{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;color:var(--text-primary);margin-bottom:1rem;line-height:1.2} .faq-subtitle{color:var(--text-secondary);font-size:1.125rem;margin:0;max-width:600px;margin:0 auto} .faq-content{max-width:900px;margin:0 auto} .faq-accordion{display:flex;flex-direction:column;gap:1.5rem} .faq-item{background:hsla(var(--purple-dark-hsl),0.4);border:1px solid var(--border-color);border-radius:20px;overflow:hidden;backdrop-filter:blur(10px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)} .faq-item:hover{border-color:hsla(var(--orange-hsl),0.3);transform:translateY(-2px);box-shadow:0 10px 30px hsla(var(--dark-hsl),0.2)} .faq-question{width:100%;padding:2rem;background:transparent;border:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all 0.3s ease;text-align:left} .faq-question:hover{background:hsla(var(--orange-hsl),0.05)} .faq-question-content{display:flex;align-items:center;gap:1rem;flex:1} .faq-icon{color:var(--orange);font-size:1.25rem;width:24px;flex-shrink:0} .faq-question-text{color:var(--text-primary);font-size:1.125rem;font-weight:600;line-height:1.4} .faq-toggle{width:40px;height:40px;border-radius:50%;background:hsla(var(--orange-hsl),0.1);border:1px solid hsla(var(--orange-hsl),0.2);display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;flex-shrink:0} .faq-toggle i{color:var(--orange);font-size:0.875rem;transition:all 0.3s ease} .faq-item.active .faq-toggle{background:var(--orange);border-color:var(--orange);transform:rotate(45deg)} .faq-item.active .faq-toggle i{color:var(--dark)} .faq-answer{max-height:0;overflow:hidden;transition:all 0.4s cubic-bezier(0.4,0,0.2,1)} .faq-item.active .faq-answer{max-height:500px} .faq-answer-content{padding:0 2rem 2rem 2rem;color:var(--text-secondary);line-height:1.6} .faq-answer-content p{margin-bottom:1rem} .faq-answer-content p:last-child{margin-bottom:0} .faq-answer-content ul{list-style:none;padding-left:0;margin:1rem 0} .faq-answer-content li{position:relative;padding-left:1.5rem;margin-bottom:0.5rem} .faq-answer-content li::before{content:'→';position:absolute;left:0;color:var(--orange);font-weight:bold} .faq-answer-content strong{color:var(--text-primary)} .faq-cta{margin-top:4rem;text-align:center;padding:3rem;border:1px solid hsla(var(--orange-hsl),0.1);border-radius:20px;backdrop-filter:blur(10px)} .faq-cta h3{color:var(--text-primary);font-size:1.5rem;font-weight:700;margin-bottom:0.5rem} .faq-cta p{color:var(--text-secondary);font-size:1rem;margin-bottom:2rem} .faq-cta-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap} .btn-primary,.btn-secondary{display:inline-flex;align-items:center;gap:0.5rem;padding:1rem 2rem;border-radius:50px;font-weight:600;text-decoration:none;transition:all 0.3s ease;border:1px solid transparent} .btn-primary{background:var(--orange);color:var(--dark);box-shadow:0 10px 25px hsla(var(--orange-hsl),0.3)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 35px hsla(var(--orange-hsl),0.4);color:var(--dark);text-decoration:none} .btn-secondary{background:transparent;color:var(--text-primary);border-color:var(--border-color)} .btn-secondary:hover{background:hsla(var(--purple-dark-hsl),0.3);border-color:var(--orange);color:var(--text-primary);text-decoration:none} @media (max-width:768px){.faq-section{padding:4rem 0} .container{padding:0 1rem} .faq-question{padding:1.5rem} .faq-question-content{gap:0.75rem} .faq-question-text{font-size:1rem} .faq-answer-content{padding:0 1.5rem 1.5rem 1.5rem} .faq-cta{padding:2rem;margin-top:2rem} .faq-cta-buttons{flex-direction:column;align-items:center} .btn-primary,.btn-secondary{width:100%;max-width:250px;justify-content:center} } @media (max-width:480px){.faq-question{padding:1rem} .faq-answer-content{padding:0 1rem 1rem 1rem} .faq-icon{font-size:1rem;width:20px} .faq-toggle{width:35px;height:35px} .faq-cta{padding:1.5rem} } .faq-item{opacity:0;transform:translateY(30px);animation:fadeInUp 0.6s ease forwards} .faq-item:nth-child(1){animation-delay:0.1s} .faq-item:nth-child(2){animation-delay:0.2s} .faq-item:nth-child(3){animation-delay:0.3s} .faq-item:nth-child(4){animation-delay:0.4s} .faq-item:nth-child(5){animation-delay:0.5s} .faq-item:nth-child(6){animation-delay:0.6s} @keyframes fadeInUp{to{opacity:1;transform:translateY(0)} } @media (prefers-reduced-motion:reduce){.faq-item{animation:none;opacity:1;transform:none} .faq-toggle,.faq-answer{transition:none} } .contact-section{padding:6rem 0;position:relative;overflow:hidden} .select-wrapper{position:relative;width:100%;max-width:340px;margin-bottom:1.2rem;border-radius:10px;background:#19171e;box-shadow:0 2px 16px rgba(255,140,0,0.08);border:1.5px solid #2a2320;transition:border-color 0.22s,box-shadow 0.22s} .select-wrapper:focus-within{border-color:#ff9800;box-shadow:0 4px 24px rgba(255,122,0,0.18)} .select-wrapper select{width:100%;padding:14px 46px 14px 18px;font-size:1.08rem;color:#ffae54;background:transparent;border:none;border-radius:10px;outline:none;appearance:none;font-family:inherit;cursor:pointer;box-shadow:none;transition:color 0.2s,background 0.2s;z-index:2} .select-wrapper select:focus{color:#ff9800;background:#1d1915} .select-wrapper option{color:#ffae54;background:#19171e} .select-arrow{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#ffae54;font-size:1.2em;pointer-events:none;transition:color 0.2s;z-index:3} .select-wrapper select:focus ~ .select-arrow{color:#ff9800} @media (max-width:600px){.select-wrapper{max-width:100%} .select-wrapper select{font-size:1.13rem;padding:15px 46px 15px 14px} } .contact-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,hsla(var(--purple-light-hsl),0.05) 0%,transparent 70%);pointer-events:none} .contact-header{text-align:center;margin-bottom:4rem} .contact-badge{display:inline-flex;align-items:center;gap:0.5rem;background:hsla(var(--orange-hsl),0.1);border:1px solid hsla(var(--orange-hsl),0.2);color:var(--orange);padding:0.75rem 1.5rem;border-radius:50px;font-weight:600;font-size:0.875rem;margin-bottom:1.5rem} .contact-title{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;color:var(--text-primary);margin-bottom:1rem;line-height:1.2} .highlight{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .contact-subtitle{color:var(--text-secondary);font-size:1.125rem;margin:0;max-width:600px;margin:0 auto} .contact-bento-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(120px,auto);gap:1.5rem;max-width:1200px;margin:0 auto} .contact-card{background:hsla(var(--bg-card));border:1px solid var(--border-color);border-radius:20px;padding:2rem;backdrop-filter:blur(10px);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column} .contact-card:hover{border-color:hsla(var(--orange-hsl),0.3);transform:translateY(-2px);box-shadow:0 10px 30px hsla(var(--dark-hsl),0.2)} .card-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem} .card-icon{color:var(--orange);font-size:1.25rem;width:24px;flex-shrink:0} .card-header h3{color:var(--text-primary);font-size:1.25rem;font-weight:600;margin:0} .contact-form-card{grid-column:span 7;grid-row:span 6} .contact-info-card{grid-column:span 5;grid-row:span 3} .working-hours-card{grid-column:span 5;grid-row:span 3} .quick-contact-card{grid-column:span 6;grid-row:span 3} .benefits-card{grid-column:span 3;grid-row:span 3} .testimonial-card{grid-column:span 3;grid-row:span 3} .contact-form{display:flex;flex-direction:column;gap:2rem;flex:1} .form-group{position:relative;display:flex;flex-direction:column} .contact-form input,.contact-form select,.contact-form textarea{background:rgba(255,255,255,0.05);border:2px solid rgba(255,255,255,0.15);border-radius:12px;padding:1.5rem 1.25rem 0.75rem 1.25rem;color:var(--text-primary);font-size:1rem;font-weight:500;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);resize:vertical;width:100%;box-sizing:border-box} .contact-form input::placeholder,.contact-form textarea::placeholder{color:transparent} .form-group label{position:absolute;top:1.25rem;left:1.25rem;color:rgba(255,255,255,0.5);font-size:1rem;font-weight:500;pointer-events:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);background:transparent;padding:0;z-index:2} .contact-form input:focus ~ label,.contact-form input:valid ~ label,.contact-form input:not(:placeholder-shown) ~ label,.contact-form textarea:focus ~ label,.contact-form textarea:valid ~ label,.contact-form textarea:not(:placeholder-shown) ~ label{top:-0.6rem;left:1rem;font-size:0.8rem;color:var(--orange) !important;font-weight:600;background:var(--dark-purple);padding:0 0.5rem;border-radius:4px} .select-wrapper{position:relative} .select-wrapper select{appearance:none;background-image:none;cursor:pointer;padding-right:3rem} .select-wrapper label{top:1.25rem;left:1.25rem} .select-wrapper select:focus ~ label,.select-wrapper select.has-value ~ label{top:-0.6rem;left:1rem;font-size:0.8rem;color:var(--orange) !important;font-weight:600;background:var(--dark-purple);padding:0 0.5rem;border-radius:4px} .select-arrow{position:absolute;top:50%;right:1.25rem;transform:translateY(-50%);pointer-events:none;color:rgba(255,255,255,0.5);font-size:0.875rem;transition:all 0.3s ease;z-index:2} .select-wrapper:hover .select-arrow,.select-wrapper select:focus + .select-arrow{color:var(--orange);transform:translateY(-50%) rotate(180deg)} .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px hsla(var(--orange-hsl),0.1),0 4px 12px hsla(var(--orange-hsl),0.1);background:transparent} .contact-form input:hover,.contact-form select:hover,.contact-form textarea:hover{border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.07)} .contact-form textarea{min-height:120px;resize:vertical} .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none !important;-webkit-appearance:none;-moz-appearance:none;appearance:none} .contact-form input:-webkit-autofill,.contact-form input:-webkit-autofill:hover,.contact-form input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,0.05) inset !important;-webkit-text-fill-color:var(--text-primary) !important;border:2px solid rgba(255,255,255,0.15) !important} .btn-submit{background:linear-gradient(135deg,var(--orange),#ff8b3a);color:var(--dark);border:none;border-radius:50px;padding:1.25rem 2.5rem;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center;gap:0.75rem;margin-top:1rem;box-shadow:0 8px 25px hsla(var(--orange-hsl),0.3),0 4px 12px hsla(var(--orange-hsl),0.2);position:relative;overflow:hidden} .btn-submit::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.6s ease} .btn-submit:hover{background:linear-gradient(135deg,#ff8b3a,var(--purple-light));transform:translateY(-3px);box-shadow:0 15px 35px hsla(var(--orange-hsl),0.4),0 8px 20px hsla(var(--orange-hsl),0.3)} .btn-submit:hover::before{left:100%} .btn-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none;background:var(--text-secondary)} .btn-submit.loading{background:linear-gradient(135deg,var(--text-secondary),#6b7280);cursor:wait} .contact-info-list{display:flex;flex-direction:column;gap:1.25rem;flex:1} .contact-info-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:hsla(var(--dark-hsl),0.2);border-radius:12px;border:1px solid hsla(var(--orange-hsl),0.1);transition:all 0.3s ease} .contact-info-item:hover{background:hsla(var(--orange-hsl),0.05);border-color:hsla(var(--orange-hsl),0.3);transform:translateY(-2px)} .contact-info-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;flex-shrink:0;font-size:1.1rem} .contact-info-icon.email{background:linear-gradient(135deg,#ea4335,#fbbc04)} .contact-info-icon.telegram{background:linear-gradient(135deg,#0088cc,#00a8e6)} .contact-info-icon.instagram{background:linear-gradient(135deg,#e4405f,#fd6a85)} .contact-info-details{display:flex;flex-direction:column;gap:0.25rem} .contact-label{color:var(--text-secondary);font-size:0.8rem;font-weight:500;text-transform:uppercase;letter-spacing:0.5px} .contact-value{color:var(--text-primary);font-size:0.95rem;font-weight:600;text-decoration:none;transition:color 0.3s ease} .contact-value:hover{color:var(--orange);text-decoration:none} .working-hours-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem} .hours-row{display:flex;justify-content:space-between;align-items:center;padding:0.875rem 1rem;background:hsla(var(--dark-hsl),0.2);border-radius:10px;border-left:3px solid var(--orange)} .day-label{color:var(--text-primary);font-weight:600;font-size:0.9rem} .time-label{color:var(--text-secondary);font-size:0.85rem;font-weight:500} .timezone-info{display:flex;align-items:center;gap:0.5rem;color:var(--text-muted);font-size:0.8rem;padding:0.75rem 1rem;background:hsla(var(--purple-dark-hsl),0.3);border-radius:8px;margin-top:auto} .quick-contact-desc{color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.5;font-size:0.95rem} .telegram-contacts{display:flex;flex-direction:column;gap:1rem;flex:1} .telegram-contact{display:flex;align-items:center;gap:1rem;padding:1rem;background:linear-gradient(135deg,hsla(199,100%,40%,0.1),hsla(199,100%,52%,0.05));border:1px solid hsla(199,100%,40%,0.2);border-radius:12px;text-decoration:none;transition:all 0.3s ease} .telegram-contact:hover{background:linear-gradient(135deg,hsla(199,100%,40%,0.2),hsla(199,100%,52%,0.1));border-color:hsla(199,100%,40%,0.4);transform:translateY(-2px);text-decoration:none} .telegram-avatar{width:40px;height:40px;background:linear-gradient(135deg,#0088cc,#00a8e6);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.1rem;flex-shrink:0} .telegram-info{display:flex;flex-direction:column;gap:0.25rem} .telegram-name{color:var(--text-primary);font-size:0.85rem;font-weight:600} .telegram-username{color:#0088cc;font-size:0.8rem;font-weight:500} .benefits-grid{display:flex;flex-direction:column;gap:0.875rem;flex:1} .benefit-item{display:flex;align-items:center;gap:0.75rem;color:var(--text-secondary);font-size:0.85rem;padding:0.5rem;border-radius:8px;transition:all 0.3s ease} .benefit-item:hover{background:hsla(var(--orange-hsl),0.05);color:var(--text-primary)} .benefit-item i{color:var(--orange);background:hsla(var(--orange-hsl),0.15);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.7rem;flex-shrink:0} .testimonial-quote{color:var(--text-secondary);font-style:italic;line-height:1.5;font-size:0.9rem;margin:0 0 1.5rem 0;position:relative;padding-left:1rem;border-left:3px solid var(--orange)} .testimonial-author{display:flex;align-items:center;gap:0.75rem;margin-top:auto} .author-avatar{width:35px;height:35px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--dark);font-size:0.9rem;flex-shrink:0} .author-info{display:flex;flex-direction:column;gap:0.25rem} .author-name{color:var(--text-primary);font-size:0.85rem;font-weight:600} .author-project{color:var(--text-muted);font-size:0.75rem} .notification{position:fixed;top:20px;right:20px;background:var(--dark);border:1px solid var(--border-color);border-radius:12px;padding:1rem 1.5rem;max-width:350px;transform:translateX(400px);transition:all 0.3s ease;z-index:10000;backdrop-filter:blur(10px)} .notification.show{transform:translateX(0)} .notification.success{border-color:#10b981;background:hsla(158,64%,52%,0.1)} .notification.error{border-color:#ef4444;background:hsla(0,84%,60%,0.1)} .notification-content{display:flex;align-items:center;gap:0.75rem} .notification.success .notification-content i{color:#10b981} .notification.error .notification-content i{color:#ef4444} .notification-content span{color:var(--text-primary);font-size:0.9rem;line-height:1.4} @media (max-width:1024px){.contact-bento-grid{grid-template-columns:repeat(8,1fr)} .contact-form-card{grid-column:span 8;grid-row:span 6} .contact-info-card{grid-column:span 4;grid-row:span 3} .working-hours-card{grid-column:span 4;grid-row:span 3} .quick-contact-card{grid-column:span 4;grid-row:span 3} .benefits-card{grid-column:span 4;grid-row:span 3} .testimonial-card{grid-column:span 4;grid-row:span 3} } @media (max-width:768px){.contact-section{padding:4rem 0} .contact-bento-grid{grid-template-columns:1fr;gap:1rem} .contact-form-card,.contact-info-card,.working-hours-card,.quick-contact-card,.benefits-card,.testimonial-card{grid-column:span 1;grid-row:auto} .contact-card{padding:1.5rem} .contact-form input,.contact-form select,.contact-form textarea{padding:1.25rem 1rem 0.75rem 1rem;font-size:0.95rem} .form-group label{top:1.125rem;left:1rem;font-size:0.95rem} .contact-form input:focus ~ label,.contact-form input:valid ~ label,.contact-form input:not(:placeholder-shown) ~ label,.contact-form textarea:focus ~ label,.contact-form textarea:valid ~ label,.contact-form textarea:not(:placeholder-shown) ~ label,.select-wrapper select:focus ~ label,.select-wrapper select.has-value ~ label{top:-0.6rem;left:0.75rem;font-size:0.75rem} .btn-submit{padding:1rem 2rem;font-size:1rem} .telegram-contacts{flex-direction:row;gap:0.75rem} .telegram-contact{flex:1;flex-direction:column;text-align:center;gap:0.75rem} .telegram-info{align-items:center} .notification{top:10px;right:10px;left:10px;max-width:none;transform:translateY(-100px)} .notification.show{transform:translateY(0)} } @media (max-width:480px){.contact-card{padding:1rem} .contact-form{gap:1.5rem} .contact-form input,.contact-form select,.contact-form textarea{padding:1rem 0.875rem 0.5rem 0.875rem;font-size:0.9rem;border-radius:10px} .form-group label{top:1rem;left:0.875rem;font-size:0.9rem} .contact-form input:focus ~ label,.contact-form input:valid ~ label,.contact-form input:not(:placeholder-shown) ~ label,.contact-form textarea:focus ~ label,.contact-form textarea:valid ~ label,.contact-form textarea:not(:placeholder-shown) ~ label,.select-wrapper select:focus ~ label,.select-wrapper select.has-value ~ label{top:-0.6rem;left:0.5rem;font-size:0.7rem} .btn-submit{padding:0.875rem 1.5rem;font-size:0.95rem;border-radius:40px} } .contact-card{opacity:0;transform:translateY(30px);animation:fadeInUp 0.6s ease forwards} .contact-form-card{animation-delay:0.1s} .contact-info-card{animation-delay:0.2s} .working-hours-card{animation-delay:0.3s} .quick-contact-card{animation-delay:0.4s} .benefits-card{animation-delay:0.5s} .testimonial-card{animation-delay:0.6s} .form-group{opacity:0;transform:translateY(20px);animation:slideInUp 0.5s ease forwards} .form-group:nth-child(1){animation-delay:0.2s} .form-group:nth-child(2){animation-delay:0.3s} .form-group:nth-child(3){animation-delay:0.4s} .form-group:nth-child(4){animation-delay:0.5s} .btn-submit{animation:slideInUp 0.5s ease forwards;animation-delay:0.6s;opacity:0} @keyframes fadeInUp{to{opacity:1;transform:translateY(0)} } @keyframes slideInUp{to{opacity:1;transform:translateY(0)} } @media (prefers-reduced-motion:reduce){.contact-card,.form-group,.btn-submit{animation:none;opacity:1;transform:none} .contact-card:hover,.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{transform:translateY(-2px)} .form-group label{transition:all 0.3s cubic-bezier(0.4,0,0.2,1)} } .footer-section{background:linear-gradient(145deg,hsl(var(--dark-hsl)),hsl(var(--dark-purple-hsl)));padding:3rem 1rem 1rem;border-top:1px solid rgba(255,255,255,0.1);color:var(--text-primary)} .footer-content{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:2rem;max-width:1200px;margin:0 auto 2rem} .footer-brand{padding:1rem} .footer-logo{height:50px;margin-bottom:1rem} .mobile-logo{display:none} .footer-brand-title{font-size:1.5rem;font-weight:700;margin-bottom:0.5rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .footer-brand-tagline{color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.5} .footer-social{display:flex;gap:1rem} .social-link{display:flex;align-items:center;gap:0.5rem;color:var(--text-secondary);text-decoration:none;padding:0.5rem 1rem;border:1px solid rgba(255,255,255,0.1);border-radius:8px;transition:all 0.3s ease;font-size:0.9rem} .social-link:hover{color:var(--orange);border-color:var(--orange)} .footer-column{padding:1rem} .footer-column-title{color:var(--text-primary);font-size:1.1rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem} .footer-column-title i{color:var(--orange)} .footer-links{list-style:none;padding:0;margin:0} .footer-links li{margin-bottom:0.5rem} .footer-links a{color:var(--text-secondary);text-decoration:none;transition:color 0.3s ease;font-size:0.9rem} .footer-links a:hover{color:var(--orange)} .contact-column{background:rgba(255,255,255,0.05);border-radius:12px;padding:1.5rem} .footer-contact-info{margin-bottom:1.5rem} .contact-item{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;padding:0.75rem;background:rgba(255,255,255,0.03);border-radius:8px} .contact-icon{width:36px;height:36px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--dark);font-size:0.9rem} .contact-details{display:flex;flex-direction:column;gap:0.25rem} .contact-label{color:var(--text-muted);font-size:0.75rem;text-transform:uppercase;font-weight:600} .contact-value{color:var(--text-primary);font-size:0.85rem;text-decoration:none} .contact-value:hover{color:var(--orange)} .footer-cta-btn{display:flex;align-items:center;justify-content:center;gap:0.5rem;background:var(--gradient-primary);color:var(--dark);padding:1rem 2rem;border-radius:25px;text-decoration:none;font-weight:700;font-size:0.9rem;text-transform:uppercase;transition:transform 0.3s ease} .footer-cta-btn:hover{transform:translateY(-2px)} .footer-divider{height:1px;background:linear-gradient(90deg,transparent,var(--orange),transparent);margin:2rem 0} .footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.5rem 0;gap:1rem;border-top:1px solid rgba(255,255,255,0.05)} .copyright{color:var(--text-muted);font-size:0.85rem;margin:0;display:flex;align-items:center;gap:0.5rem} .copyright i{color:var(--orange)} .footer-badges{display:flex;gap:1rem} .badge-item{display:flex;align-items:center;gap:0.5rem;color:var(--text-secondary);font-size:0.8rem;font-weight:600;padding:0.5rem 1rem;background:rgba(255,255,255,0.05);border-radius:15px;text-transform:uppercase} .badge-item i{color:var(--orange)} .footer-legal-links{list-style:none;padding:0;margin:0;display:flex;gap:1rem;justify-content:flex-end} .footer-legal-links a{color:var(--text-muted);text-decoration:none;font-size:0.8rem;transition:color 0.3s ease} .footer-legal-links a:hover{color:var(--orange)} .footer-decoration{display:none} @media (max-width:1024px){.footer-content{grid-template-columns:1fr 1fr;gap:1.5rem} .footer-brand{grid-column:span 2;text-align:center} .footer-bottom{grid-template-columns:1fr;text-align:center;gap:1rem} } @media (max-width:768px){.footer-content{grid-template-columns:1fr;gap:1.5rem} .footer-brand{grid-column:span 1;text-align:center} .footer-social{justify-content:center;flex-wrap:wrap} .footer-legal-links{justify-content:center;flex-wrap:wrap} .desktop-logo{display:none} .mobile-logo{display:block} } @media (max-width:480px){.footer-section{padding:2rem 1rem 1rem} .footer-social{flex-direction:column;align-items:center;gap:0.5rem} .social-link{width:100%;max-width:200px;justify-content:center} .footer-badges{flex-direction:column;align-items:center;gap:0.5rem} .footer-cta-btn{width:100%} .contact-item{flex-direction:column;text-align:center} }