/* Non-critical CSS - loaded async via media="print" onload trick */ /* Critical CSS is inlined in for instant FCP */ /* ===== Buttons (hover states) ===== */ .btn-primary:hover{background:#9A3412;transform:translateY(-2px);box-shadow:0 8px 25px rgba(154,52,18,.45)} .btn-outline:hover{background:var(--orange);color:#fff;transform:translateY(-2px)} /* ===== Sections ===== */ .section{padding:100px 0} .section-title{font-size:2.2rem;font-weight:700;line-height:1.3;margin-bottom:16px} .orange-text{color:var(--orange-text)} .text-center{text-align:center} /* ===== Accessibility ===== */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ===== Hero extras ===== */ .hero-bg-shapes{position:absolute;inset:0;pointer-events:none} .cloud{position:absolute;will-change:transform;animation:float 6s ease-in-out infinite} .cloud svg{filter:drop-shadow(0 4px 12px rgba(0,0,0,.05))} .cloud-1{top:15%;left:-3%;width:140px} .cloud-2{top:60%;right:5%;width:100px;animation-delay:2s} .cloud-3{bottom:20%;left:10%;width:80px;animation-delay:4s} .cloud-4{top:25%;right:15%;width:90px;animation-delay:1s} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}} .hero-tags{display:flex;gap:20px;flex-wrap:wrap} .tag{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text);font-weight:500} .tag-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center} .tag-icon-orange{background:var(--orange)} .tag-icon-blue{background:var(--blue)} .hero-image{display:flex;justify-content:center;align-items:center} .hero-character{width:380px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.1));will-change:transform;animation:heroFloat 4s ease-in-out infinite} @keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}} /* ===== Why Choose Us ===== */ .why-choose{background:var(--white)} .section-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin-bottom:60px} .section-header-row .section-title{white-space:nowrap;margin-bottom:0} .section-desc-inline{color:var(--text);font-size:.95rem;max-width:500px;padding-top:8px} .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .feature-card{background:var(--white);border:1px solid #F3F4F6;border-radius:var(--radius);padding:36px 28px;text-align:center;transition:transform .4s,box-shadow .4s} .feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .feature-card-highlight{background:var(--dark);color:#fff;border-color:var(--dark);box-shadow:var(--shadow-lg)} .feature-card-highlight p{color:#E5E7EB} .feature-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px} .feature-icon-orange{background:var(--orange)} .feature-icon-blue{background:var(--blue)} .feature-icon-red{background:var(--red)} .feature-card h3{font-size:1.1rem;font-weight:600;margin-bottom:10px} .feature-card p{color:var(--text);font-size:.9rem;line-height:1.7} /* ===== Who We Are ===== */ .who-we-are{background:var(--orange-bg);content-visibility:auto;contain-intrinsic-size:auto 600px} .who-we-are-container{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .who-image{position:relative} .who-image-bg{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:280px;height:280px;border-radius:50%;background:linear-gradient(135deg,var(--orange-light),var(--orange));opacity:.3} .who-character{position:relative;z-index:2;width:280px;margin:0 auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.1))} .who-stat{position:absolute;bottom:20px;left:20px;background:#fff;border-radius:14px;padding:12px 20px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);z-index:3} .who-stat-number{font-weight:700;font-size:1.1rem;color:var(--dark)} .who-content p{color:var(--text);font-size:.95rem;margin-bottom:24px} .read-more{display:inline-flex;align-items:center;gap:6px;color:var(--orange-text);font-weight:700;text-decoration:none;font-size:.95rem;transition:gap .3s} .read-more:hover{gap:12px} .read-more-dark{color:var(--dark);text-decoration:underline;text-underline-offset:4px} /* ===== Achievements ===== */ .achievements{background:var(--white);content-visibility:auto;contain-intrinsic-size:auto 600px} .achievements-container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start} .achievements-content p{color:var(--text);font-size:.95rem;margin-bottom:16px} .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .stat-card{background:var(--white);border:1px solid #F3F4F6;border-radius:var(--radius);padding:28px 22px;transition:transform .3s,box-shadow .3s} .stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .stat-card-highlight{background:linear-gradient(135deg,#EDE9FE,#F5F3FF);border-color:#DDD6FE} .stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px} .stat-icon-orange{background:var(--orange)} .stat-icon-purple{background:var(--purple)} .stat-icon-red{background:var(--red)} .stat-icon-green{background:var(--green)} .stat-number{font-size:1.3rem;font-weight:700;color:var(--dark);margin-bottom:4px} .stat-label{font-size:.85rem;color:var(--text-light);font-weight:500} /* ===== Testimonials ===== */ .testimonials{background:var(--bg);content-visibility:auto;contain-intrinsic-size:auto 500px} .testimonials .section-title{margin-bottom:50px} .testimonial-wrapper{display:flex;align-items:center;justify-content:center;gap:40px} .testimonial-avatars-left,.testimonial-avatars-right{display:flex;flex-direction:column;gap:20px} .avatar-bubble{display:flex;align-items:center;gap:10px;background:#fff;border-radius:50px;padding:8px 16px 8px 8px;box-shadow:var(--shadow);transition:transform .3s} .avatar-bubble:hover{transform:scale(1.05)} .avatar-bubble svg{width:40px;height:40px;border-radius:50%;flex-shrink:0} .avatar-name{font-size:.85rem;font-weight:600;color:var(--dark);white-space:nowrap} .testimonial-card{background:#fff;border-radius:var(--radius);padding:40px;max-width:440px;box-shadow:var(--shadow-lg);position:relative} .quote-marks{margin-bottom:16px} .testimonial-text{color:var(--text);font-size:.95rem;line-height:1.8;margin-bottom:20px;font-style:italic} .testimonial-author strong{color:var(--dark);font-size:.9rem} /* ===== Contact ===== */ .contact{background:var(--white);content-visibility:auto;contain-intrinsic-size:auto 500px} .contact-container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start} .contact-info p{color:var(--text);font-size:.95rem;margin-bottom:28px} .contact-details{font-style:normal;display:flex;flex-direction:column;gap:16px} .contact-detail-item{display:flex;align-items:center;gap:12px;color:var(--text);font-size:.9rem} .contact-detail-item a{color:var(--text);text-decoration:none;transition:color .3s} .contact-detail-item a:hover{color:var(--orange-text)} .contact-icon{font-size:1.1rem;flex-shrink:0;display:flex} .contact-form-wrapper{background:var(--white);border:1px solid #F3F4F6;border-radius:var(--radius);padding:36px;box-shadow:var(--shadow)} .contact-form-wrapper h3{font-size:1.3rem;font-weight:700;margin-bottom:24px;color:var(--dark)} .contact-form{display:flex;flex-direction:column;gap:16px} .contact-form input,.contact-form textarea{width:100%;padding:14px 18px;border:1px solid #E5E7EB;border-radius:var(--radius-sm);font-family:inherit;font-size:.9rem;color:var(--dark);background:#FAFAFA;transition:border-color .3s,box-shadow .3s;outline:none;resize:none} .contact-form input:focus,.contact-form textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.1);background:#fff} .contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--text-light)} .contact-form .btn-primary{align-self:flex-start} /* ===== Footer ===== */ .footer{background:var(--white);border-top:1px solid #F3F4F6;padding-top:60px} .footer-container{display:grid;grid-template-columns:1fr 2fr;gap:60px;padding-bottom:40px} .footer-brand .logo{margin-bottom:20px} .footer-social{display:flex;gap:12px} .social-btn{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--dark);background:#F3F4F6;text-decoration:none;transition:transform .3s} .social-btn:hover{transform:translateY(-2px)} .social-btn-orange{background:var(--orange);color:#fff} .footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .footer-col h4{font-size:.95rem;font-weight:600;color:var(--dark);margin-bottom:16px} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px} .footer-col a{text-decoration:none;color:var(--text);font-size:.9rem;transition:color .3s} .footer-col a:hover{color:var(--orange-text)} .footer-bottom{text-align:center;padding:20px 0;border-top:1px solid #F3F4F6;font-size:.85rem;color:var(--text-light)} /* ===== Scroll Animations ===== */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease} .reveal.visible{opacity:1;transform:translateY(0)} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.cloud,.hero-character{animation:none}} /* ===== Responsive ===== */ @media(max-width:1024px){ .hero-tags{justify-content:center} .hero-character{width:280px} .who-we-are-container,.achievements-container,.contact-container{grid-template-columns:1fr;gap:40px} .section-header-row{flex-direction:column;gap:16px} .features-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto} } @media(max-width:768px){ .hero{min-height:auto;padding:120px 0 60px} .hero h1{font-size:1.8rem} .section{padding:60px 0} .section-title{font-size:1.6rem} .testimonial-wrapper{flex-direction:column;gap:20px} .testimonial-avatars-left,.testimonial-avatars-right{flex-direction:row} .stats-grid{grid-template-columns:1fr} .footer-container{grid-template-columns:1fr;gap:30px} .footer-links{grid-template-columns:repeat(3,1fr)} } @media(max-width:480px){ .hero-content{padding:24px} .hero h1{font-size:1.5rem} .hero-buttons{flex-direction:column;align-items:center} .footer-links{grid-template-columns:1fr} }