/* ===================== HERO ===================== */ .hero{position:relative;min-height:85vh;display:flex;align-items:center;overflow:hidden;padding-top:110px;padding-bottom:0;background:#fff} /* animated background — video + premium overlay layers */ .hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero__video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;filter:brightness(.9) saturate(1.15) contrast(1.1)} .hero__glow{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse 70% 55% at 50% 20%,rgba(34,159,76,.06),transparent 60%),radial-gradient(ellipse 60% 40% at 30% 75%,rgba(34,159,76,.03),transparent 50%);pointer-events:none} .hero__beam{position:absolute;top:0;left:-30%;width:60%;height:100%;z-index:2;background:linear-gradient(90deg,transparent 0%,rgba(34,159,76,.03) 30%,rgba(34,159,76,.05) 50%,rgba(34,159,76,.03) 70%,transparent 100%);transform:skewX(-15deg);animation:heroBeam 8s ease-in-out infinite;pointer-events:none} @keyframes heroBeam{0%,100%{transform:translateX(-30%) skewX(-15deg);opacity:.3}50%{transform:translateX(180%) skewX(-15deg);opacity:.7}} .hero__bg::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.15) 100%);pointer-events:none} /* ===================== HERO INNER ===================== */ .hero__inner{ position:relative;z-index:5; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;width:100%;min-height:calc(100vh - 110px); } /* ===================== CONTENT COLUMN ===================== */ .hero__content{max-width:720px;display:flex;flex-direction:column;align-items:center} .hero__pre-logo{margin-bottom:8px;display:flex;justify-content:center;position:relative} .hero__logo-ring{position:absolute;width:150px;height:150px;border-radius:50%;border:1.5px solid rgba(62,192,105,.12);top:50%;left:50%;transform:translate(-50%,-50%);animation:logoPulse 3s ease-in-out infinite} .hero__logo-ring::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(62,192,105,.05);animation:logoPulse 3s ease-in-out .5s infinite} @keyframes logoPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}} .hero__pre-logo img{width:200px;height:200px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 0 30px rgba(62,192,105,.3)) drop-shadow(0 0 60px rgba(255,215,0,.15));animation:logoFloat 4s ease-in-out infinite} @keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} /* ---- dramatic two-line title ---- */ .hero__title{display:flex;flex-direction:column;gap:0;margin:0 0 10px} .hero__line--top{ font-size:clamp(1.1rem,2.6vw,2rem);font-weight:700;line-height:1.05;letter-spacing:-.01em; font-family:var(--font-serif); color:#1a1a1a; } @keyframes goldShimmer{0%{background-position:0% center}50%{background-position:100% center}100%{background-position:0% center}} .hero__line--bot{ font-size:clamp(.82rem,1.1vw,1rem);font-weight:500;line-height:1.3; font-family:var(--font-sans);color:#1a1a1a;letter-spacing:.18em; text-transform:uppercase; } /* decorative bar with gold dot */ .hero__bar-wrap{display:flex;align-items:center;gap:10px;margin:12px 0 18px} .hero__bar-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 10px rgba(62,192,105,.45)} .hero__shimmer-bar{flex:1;max-width:140px;height:1px;background:linear-gradient(90deg,var(--gold),var(--gold-2),transparent);background-size:300% 100%;animation:barShimmer 4s ease-in-out infinite;border-radius:2px} @keyframes barShimmer{0%,100%{background-position:-200% 0}50%{background-position:200% 0}} .hero__sub{color:#1a1a1a;font-size:.82rem;max-width:56ch;margin-bottom:22px;line-height:1.7;font-weight:500;letter-spacing:.025em;margin-left:auto;margin-right:auto} .hero__sub strong{color:var(--gold);font-weight:600} /* buttons */ .hero__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} /* ===================== SCROLL ===================== */ .hero__scroll{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:5;display:none;flex-direction:column;align-items:center;gap:6px;color:var(--muted-2);font-size:.45rem;letter-spacing:.4em;text-transform:uppercase;font-weight:600} .hero__scroll-track{width:1px;height:28px;position:relative;overflow:hidden;background:rgba(0,0,0,.02);border-radius:2px} .hero__scroll-dot{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:2px;height:7px;background:var(--gold);border-radius:2px;box-shadow:0 0 6px rgba(62,192,105,.3);animation:scrollDot 2.5s cubic-bezier(.16,1,.3,1) infinite} @keyframes scrollDot{0%{top:-7px;opacity:1}100%{top:28px;opacity:.1}} @keyframes scrollAppear{to{opacity:1}} /* hero premium enhancements */ .hero__content{animation:heroFadeIn 1s cubic-bezier(.16,1,.3,1) both} @keyframes heroFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} .hero__title{animation:heroTitleIn .9s cubic-bezier(.16,1,.3,1) .2s both} @keyframes heroTitleIn{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}} .hero__sub{animation:heroSubIn .8s cubic-bezier(.16,1,.3,1) .4s both} @keyframes heroSubIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .hero__actions{animation:heroActionsIn .7s cubic-bezier(.16,1,.3,1) .6s both} @keyframes heroActionsIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .hero__trust{animation:heroTrustIn .7s cubic-bezier(.16,1,.3,1) .8s both} @keyframes heroTrustIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ===================== OUR LEGACY — CREATIVE HERO ===================== */ #about-legacy{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;padding:0} #about-legacy .legacy__video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(1.25) contrast(1.1);transform:scale(1.05);animation:legacyVideoZoom 20s ease-in-out infinite alternate} @keyframes legacyVideoZoom{from{transform:scale(1.05)}to{transform:scale(1.15)}} #about-legacy::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(5,5,8,.65) 0%,rgba(10,10,15,.2) 30%,rgba(15,12,5,.3) 55%,rgba(5,5,8,.6) 100%);z-index:0} #about-legacy::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 20% 40%,rgba(62,192,105,.1) 0%,transparent 50%),radial-gradient(ellipse at 80% 60%,rgba(34,159,76,.06) 0%,transparent 40%),radial-gradient(ellipse at 50% 100%,rgba(62,192,105,.05) 0%,transparent 35%)} #about-legacy .legacy__vignette{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.55) 100%)} #about-legacy .legacy__pattern{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.03;background-image:radial-gradient(rgba(62,192,105,.5) 1px,transparent 1px);background-size:32px 32px} /* aurora glow — premium background accent */ .legacy__aurora{position:absolute;z-index:0;pointer-events:none;top:10%;left:-10%;width:120%;height:80%;background:radial-gradient(ellipse 60% 40% at 35% 50%,rgba(62,192,105,.06) 0%,transparent 55%),radial-gradient(ellipse 50% 50% at 75% 40%,rgba(34,159,76,.04) 0%,transparent 50%);animation:auroraPulse 8s ease-in-out infinite alternate;filter:blur(40px)} @keyframes auroraPulse{0%{opacity:.3;transform:translateX(0) scale(1)}100%{opacity:.7;transform:translateX(3%) scale(1.05)}} /* sparkles */ .legacy__sparkles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .sparkle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);animation:sparkleFloat 6s ease-in-out infinite} .s1{top:15%;left:12%;animation-delay:0s;animation-duration:7s;opacity:.3} .s2{top:25%;right:18%;animation-delay:1.5s;animation-duration:8s;opacity:.25} .s3{top:60%;left:8%;animation-delay:3s;animation-duration:6s;opacity:.35} .s4{top:70%;right:10%;animation-delay:2s;animation-duration:9s;opacity:.2} .s5{top:40%;left:50%;animation-delay:4s;animation-duration:7.5s;opacity:.15} .s6{top:80%;right:30%;animation-delay:1s;animation-duration:6.5s;opacity:.25} @keyframes sparkleFloat{0%,100%{transform:translateY(0) scale(1);opacity:0}20%{opacity:.4}50%{transform:translateY(-40px) scale(1.5);opacity:.6}80%{opacity:.3}} /* floating particles */ .legacy__particles{position:absolute;inset:0;z-index:0;pointer-events:none} .legacy__particles::before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(62,192,105,.07) 0%,transparent 70%);top:5%;left:0%;animation:floatA 12s ease-in-out infinite} .legacy__particles::after{content:"";position:absolute;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(62,192,105,.05) 0%,transparent 70%);bottom:10%;right:5%;animation:floatB 14s ease-in-out infinite} @keyframes floatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.1)}} @keyframes floatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,25px) scale(1.05)}} /* layout — refined 2-column */ .legacy__layout{display:grid;grid-template-columns:0.9fr 1.4fr;gap:clamp(40px,7vw,100px);align-items:center;position:relative;z-index:1;padding-top:90px;padding-bottom:90px} /* left column */ .legacy__left{display:flex;flex-direction:column;align-items:center;gap:52px;position:relative} /* ===================== ORBITAL RINGS ===================== */ .legacy__orbital{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);width:340px;height:340px;pointer-events:none;z-index:0} .legacy__orbital-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(62,192,105,.06)} .legacy__orbital-ring--1{animation:orbitalSpin 25s linear infinite} .legacy__orbital-ring--2{inset:15px;border-style:dashed;border-color:rgba(62,192,105,.04);animation:orbitalSpin 35s linear infinite reverse} .legacy__orbital-ring--3{inset:30px;border-color:rgba(62,192,105,.03);animation:orbitalSpin 45s linear infinite} @keyframes orbitalSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .legacy__orbital-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(62,192,105,.5),0 0 20px rgba(255,215,0,.2)} .legacy__orbital-dot--1{top:-2px;left:50%;animation:orbitalSpin 25s linear infinite;transform-origin:2px 172px} .legacy__orbital-dot--2{bottom:-2px;right:15%;width:3px;height:3px;opacity:.5;animation:orbitalSpin 35s linear infinite reverse;transform-origin:-8px -172px} /* stamp */ .legacy__stamp{position:relative;width:170px;height:170px;border-radius:50%;background:rgba(10,10,15,.6);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border:1.5px solid rgba(62,192,105,.18);display:grid;place-items:center;transition:transform 1s cubic-bezier(.23,1,.32,1),box-shadow 1s ease;z-index:1} .legacy__stamp-glow{position:absolute;inset:-28px;border-radius:50%;background:radial-gradient(circle,rgba(62,192,105,.14) 0%,transparent 65%);animation:stampGlowPulse 4s ease-in-out infinite;pointer-events:none} @keyframes stampGlowPulse{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.25);opacity:.75}} .legacy__stamp::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(62,192,105,.08);animation:ringRotate 15s linear infinite;pointer-events:none} .legacy__stamp::after{content:"";position:absolute;inset:-20px;border-radius:50%;border:1px dashed rgba(62,192,105,.05);animation:ringRotate 25s linear infinite reverse;pointer-events:none} @keyframes ringRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .legacy__stamp:hover{transform:rotate(-12deg) scale(1.08);animation:none;box-shadow:0 0 50px rgba(62,192,105,.1),0 0 100px rgba(255,215,0,.05)} .legacy__stamp:hover .legacy__stamp-glow{animation-duration:2s} .legacy__stamp svg{width:120px;height:120px;display:block;filter:drop-shadow(0 0 15px rgba(62,192,105,.18));animation:stampSvgPulse 4s ease-in-out infinite} @keyframes stampSvgPulse{0%,100%{filter:drop-shadow(0 0 15px rgba(62,192,105,.18))}50%{filter:drop-shadow(0 0 35px rgba(62,192,105,.35))}} /* years */ .legacy__years{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:1} .legacy__years-ring{position:absolute;inset:-32px;border-radius:50%;border:1px solid rgba(62,192,105,.07);animation:ringRotate 20s linear infinite} .legacy__years-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;border:1px dashed rgba(62,192,105,.04);animation:ringRotate 30s linear infinite reverse} .legacy__years-num{position:relative;font-family:var(--font-display);font-size:clamp(4rem,6vw,5.8rem);font-weight:800;line-height:1;letter-spacing:-.03em;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.6) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 20px rgba(62,192,105,.08))} .legacy__years-plus{font-size:clamp(2.5rem,3.5vw,3.5rem);vertical-align:super;font-weight:700;background:linear-gradient(135deg,#3ec069,#8fd9a8,#229f4c,#3ec069);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:goldShimmer 4s ease-in-out infinite} .legacy__years-lbl{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600;line-height:1.6;position:relative} .legacy__years-lbl::after{content:"";display:block;width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:8px auto 0;border-radius:2px;opacity:.35} /* right column */ .legacy__right{display:flex;flex-direction:column;gap:42px} /* body */ .legacy__body{padding:0} .legacy__label{display:flex;align-items:center;gap:16px;font-size:.52rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:18px;font-family:var(--font-sans)} .legacy__label-line{flex:0 0 28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .legacy__label-line:last-child{background:linear-gradient(90deg,var(--gold),transparent)} .legacy__label-text{white-space:nowrap} .legacy__title{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin:0;color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.35)} .legacy__title em{font-style:normal;background:linear-gradient(135deg,#3ec069 0%,#8fd9a8 20%,#3ec069 40%,#229f4c 60%,#3ec069 80%,#8fd9a8 100%);background-size:300% 300%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:legacyGold 5s ease-in-out infinite} @keyframes legacyGold{0%{background-position:0% center}50%{background-position:100% center}100%{background-position:0% center}} .legacy__rule{display:block;width:72px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-2),var(--gold),transparent);margin:20px 0 24px;border-radius:2px;position:relative} .legacy__rule::after{content:"";position:absolute;inset:0;background:inherit;filter:blur(8px);opacity:.35} .legacy__text{font-family:var(--font-serif);font-size:1.05rem;color:rgba(255,255,255,.65);line-height:1.95;margin:0;max-width:46ch;letter-spacing:.02em} /* ===================== STATS — PREMIUM GLASS CARDS ===================== */ .legacy__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .legacy__stat{padding:30px 14px 24px;border-radius:20px;background:linear-gradient(165deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 100%);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.07);text-align:center;transition:all .65s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden;transform-style:preserve-3d} /* animated gold top-edge on hover */ .legacy__stat::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,215,0,.3),rgba(62,192,105,.5),rgba(255,215,0,.3),transparent);background-size:200% 100%;opacity:0;transition:opacity .6s} .legacy__stat:hover::before{opacity:1;animation:goldSweep 2.5s ease-in-out infinite} @keyframes goldSweep{0%,100%{background-position:0% 0}50%{background-position:100% 0}} /* inner gold glow on hover */ .legacy__stat::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(62,192,105,.07),transparent 65%);opacity:0;transition:opacity .6s;pointer-events:none} .legacy__stat:hover::after{opacity:1} .legacy__stat-glow{position:absolute;top:-60%;left:-60%;width:220%;height:220%;background:radial-gradient(circle at center,rgba(62,192,105,.05),rgba(255,215,0,.02) 30%,transparent 60%);opacity:0;transition:opacity .6s;pointer-events:none} .legacy__stat:hover .legacy__stat-glow{opacity:1} .legacy__stat:hover{background:linear-gradient(165deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 100%);border-color:rgba(62,192,105,.28);transform:translateY(-10px) scale(1.03);box-shadow:0 28px 60px rgba(0,0,0,.35),0 0 40px rgba(62,192,105,.07),inset 0 1px 0 rgba(62,192,105,.08)} /* unique 3D tilt per card */ .legacy__stat:nth-child(2):hover{transform:translateY(-10px) rotateY(-3deg) scale(1.03)} .legacy__stat:nth-child(3):hover{transform:translateY(-10px) rotateY(3deg) scale(1.03)} .legacy__stat:nth-child(4):hover{transform:translateY(-10px) rotateX(2deg) scale(1.03)} /* stat icon */ .legacy__stat-icon{width:36px;height:36px;margin:0 auto 12px;position:relative;z-index:1;transition:all .5s ease;opacity:.5} .legacy__stat-icon svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 8px rgba(62,192,105,.1));transition:all .5s ease} .legacy__stat:hover .legacy__stat-icon{opacity:1;transform:translateY(-3px) scale(1.12)} .legacy__stat:hover .legacy__stat-icon svg{filter:drop-shadow(0 4px 16px rgba(62,192,105,.25))} /* stat number */ .legacy__stat-num{display:block;font-family:var(--font-display);font-size:2.4rem;font-weight:800;line-height:1;margin-bottom:6px;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.7) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;position:relative;z-index:1;transition:all .5s ease} .legacy__stat:hover .legacy__stat-num{background:linear-gradient(135deg,#3ec069,#8fd9a8,#3ec069);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(62,192,105,.15));transform:translateY(-2px) scale(1.05)} /* stat decorative bar */ .legacy__stat-bar{display:block;width:22px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto 8px;border-radius:2px;opacity:.2;transition:all .5s ease;position:relative;z-index:1} .legacy__stat:hover .legacy__stat-bar{opacity:.5;width:36px} /* stat label */ .legacy__stat-lbl{font-size:.48rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:600;position:relative;z-index:1;transition:all .5s ease;display:block} .legacy__stat:hover .legacy__stat-lbl{color:rgba(255,255,255,.7)} /* ===================== CTA LINK ===================== */ .legacy__link{display:inline-flex;align-items:center;gap:14px;padding:18px 42px;font-size:.58rem;font-weight:700;color:#fff;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(62,192,105,.22);border-radius:100px;transition:all .55s cubic-bezier(.23,1,.32,1);text-decoration:none;background:linear-gradient(135deg,rgba(62,192,105,.08),rgba(62,192,105,.01));align-self:flex-start;position:relative;overflow:hidden} .legacy__link-shine{position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:skewX(-20deg);transition:none;pointer-events:none} .legacy__link:hover .legacy__link-shine{left:150%;transition:left .8s ease} .legacy__link-arrow{transition:transform .5s cubic-bezier(.23,1,.32,1);font-size:.9rem} .legacy__link:hover{color:#fff;border-color:rgba(62,192,105,.55);background:linear-gradient(135deg,rgba(62,192,105,.2),rgba(62,192,105,.06));gap:22px;box-shadow:0 0 50px rgba(62,192,105,.1),inset 0 0 40px rgba(62,192,105,.03)} .legacy__link:hover .legacy__link-arrow{transform:translateX(6px)} /* counter base */ .legacy-counter{font-family:var(--font-display);font-size:2rem;font-weight:800;line-height:1} /* ===================== STATS STRIP — PREMIUM ENHANCEMENTS ===================== */ .stats-strip{position:relative;z-index:6;transition:all .5s cubic-bezier(.23,1,.32,1)} .stats-strip__grid{position:relative;background:rgba(255,255,255,.98);border:1px solid rgba(26,24,23,.08);border-radius:18px;overflow:hidden;box-shadow:0 34px 70px -28px rgba(26,24,23,.35);transition:all .5s cubic-bezier(.23,1,.32,1)} .stats-strip__item{position:relative;padding:34px 24px;text-align:center;transition:all .5s cubic-bezier(.23,1,.32,1);cursor:default} .stats-strip__item::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 100%,rgba(34,159,76,.04),transparent 70%);opacity:0;transition:opacity .5s} .stats-strip__item:hover::before{opacity:1} .stats-strip__item:hover{background:#fbfdfb;transform:translateY(-4px)} .stats-strip__num{position:relative;display:block;font-family:var(--font-display);font-size:2.3rem;font-weight:800;color:var(--charcoal);letter-spacing:-.02em;line-height:1;transition:all .5s cubic-bezier(.23,1,.32,1);background:linear-gradient(135deg,var(--charcoal),#45413d);-webkit-background-clip:text;background-clip:text;color:transparent} .stats-strip__item:hover .stats-strip__num{transform:translateY(-2px) scale(1.05);filter:drop-shadow(0 4px 12px rgba(34,159,76,.1))} .stats-strip__item span{position:relative;display:block;font-family:var(--font-sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px;transition:color .4s} .stats-strip__item:hover span{color:var(--gold)} /* gold top accent on hover */ .stats-strip__item::after{content:"";position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .5s} .stats-strip__item:hover::after{opacity:1;left:10%;right:10%} /* ===================== CATALOG — COLLECTION ===================== */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .mat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .infra-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:960px;margin:0 auto} .qual-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:860px;margin:0 auto} /* know-grid — base (keep for other pages) */ .know-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} /* ===================== PAN-INDIA PRESENCE ===================== */ #presence{position:relative;overflow:hidden;padding:100px 0;background:#fcfcfc} #presence .pres__bg{position:absolute;inset:0;background:radial-gradient(ellipse 50% 30% at 50% 0%,rgba(34,159,76,.03) 0%,transparent 60%);pointer-events:none;z-index:0} #presence::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.06) 30%,rgba(34,159,76,.10) 50%,rgba(34,159,76,.06) 70%,transparent 95%)} .pres__head{text-align:center;margin-bottom:52px;position:relative;z-index:1} .pres__tag{display:inline-flex;align-items:center;gap:14px;font-size:.46rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:.55;margin-bottom:16px} .pres__tag::before,.pres__tag::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .pres__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .pres__title{font-family:var(--font-display);font-size:clamp(1.8rem,3.4vw,3rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0 0 14px;color:#111} .pres__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#229f4c 50%,var(--gold-2) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:presGold 6s ease-in-out infinite} @keyframes presGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .pres__sub{font-size:.82rem;color:rgba(0,0,0,.6);max-width:56ch;margin:0 auto 20px;line-height:1.7;font-weight:500} .pres__line{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto} /* layout */ .pres__layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:1} /* map */ .pres__map{display:flex;justify-content:center} /* glassmorphism map card */ .pres__map-glass{position:relative;border-radius:24px;background:#fff;border:1px solid rgba(0,0,0,.04);padding:28px;box-shadow:0 8px 32px rgba(0,0,0,.04);transition:all .5s ease} .pres__map-glass::before{content:"";position:absolute;inset:-1px;border-radius:25px;background:linear-gradient(135deg,rgba(34,159,76,.10),transparent 40%,transparent 60%,rgba(34,159,76,.04));pointer-events:none;z-index:0;opacity:0;transition:opacity .5s ease} .pres__map-glass:hover{box-shadow:0 16px 48px rgba(0,0,0,.06);transform:translateY(-4px)} .pres__map-wrap{position:relative;width:clamp(220px,26vw,340px);height:clamp(220px,26vw,340px);display:grid;place-items:center;z-index:1} .pres__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(62,192,105,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(62,192,105,.03) 1px,transparent 1px);background-size:30px 30px;opacity:.5;pointer-events:none;z-index:0} .pres__glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(62,192,105,.06) 0%,transparent 60%);pointer-events:none;z-index:0;animation:presGlow 6s ease-in-out infinite alternate} @keyframes presGlow{0%{opacity:.5;transform:translate(-50%,-50%) scale(1)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}} .pres__svg{position:absolute;inset:0;width:100%;height:100%;z-index:1} /* GSAP entrance — initial hidden states removed by JS */ .pres__init .pres__map-glass{opacity:0;transform:translateY(30px)} .pres__init .pres__grid{opacity:0} .pres__init .pres__glow{opacity:0;transform:translate(-50%,-50%) scale(.4)} .pres__init .pres__svg{opacity:0;transform:scale(.88)} .pres__init .pres__dot{opacity:0;scale:0} .pres__init .pres__dot-ring{opacity:0;scale:0} .pres__init .pres__compass{opacity:0;scale:.6;translate:8px -8px} .pres__init .pres__region{opacity:0;transform:translateY(20px)} /* compass rose */ .pres__compass{position:absolute;bottom:12px;right:12px;z-index:5;opacity:.7;pointer-events:none;transform-origin:center} .pres__compass svg{display:block} /* diamond gem dots */ .pres__dot{position:absolute;translate:-50% -50%;z-index:3;cursor:pointer} .pres__dot-gem{width:12px;height:12px;background:linear-gradient(135deg,#3ec069,#8fd9a8,#3ec069);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);position:relative;filter:drop-shadow(0 0 4px rgba(62,192,105,.3)) drop-shadow(0 0 12px rgba(62,192,105,.12));transition:filter .35s ease} .pres__dot:hover .pres__dot-gem{filter:drop-shadow(0 0 6px rgba(62,192,105,.5)) drop-shadow(0 0 20px rgba(62,192,105,.2))} .pres__dot--hq .pres__dot-gem{width:20px;height:20px;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);filter:drop-shadow(0 0 6px rgba(62,192,105,.4)) drop-shadow(0 0 24px rgba(62,192,105,.15))} /* expanding ring */ .pres__dot-ring{position:absolute;top:50%;left:50%;translate:-50% -50%;width:24px;height:24px;border-radius:50%;border:1px solid rgba(62,192,105,.2);z-index:-1;animation:presRingPulse 3s ease-in-out infinite;pointer-events:none} .pres__dot--hq .pres__dot-ring{width:36px;height:36px;border-color:rgba(62,192,105,.15);animation-duration:2.5s} @keyframes presRingPulse{0%,100%{scale:1;opacity:.6}50%{scale:1.35;opacity:0}} /* dot labels */ .pres__dot-lbl{position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;white-space:nowrap;font-size:.42rem;font-weight:600;letter-spacing:.06em;color:rgba(0,0,0,.5);transition:color .3s ease;pointer-events:none} .pres__dot-nub{position:absolute;top:calc(100% + 4px);left:50%;translate:-50% 0;width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:0;transition:opacity .3s ease;pointer-events:none} .pres__dot:hover .pres__dot-lbl{color:var(--gold)} .pres__dot:hover .pres__dot-nub{opacity:.6} /* region-dot highlight */ .pres__region.is-highlight h4{color:#1a1a1a} .pres__dot.is-dim .pres__dot-gem{opacity:.2;filter:drop-shadow(0 0 2px rgba(62,192,105,.08))} .pres__dot.is-dim .pres__dot-lbl{opacity:.15} .pres__dot.is-highlight .pres__dot-gem{filter:drop-shadow(0 0 8px rgba(62,192,105,.6)) drop-shadow(0 0 28px rgba(62,192,105,.25))} .pres__dot.is-highlight .pres__dot-lbl{color:var(--gold);opacity:1} /* cities */ .pres__cities{display:grid;gap:24px} .pres__region h4{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:700} .pres__tags{display:flex;flex-wrap:wrap;gap:8px} .pres__tag{padding:8px 20px;border:1px solid rgba(0,0,0,.06);border-radius:100px;font-size:.78rem;color:rgba(0,0,0,.6);transition:all .35s ease;font-weight:500} .pres__tag:hover{color:var(--gold);border-color:rgba(34,159,76,.25);transform:translateY(-2px);background:rgba(34,159,76,.04)} .section{overflow:hidden;position:relative} .section>.container{position:relative;z-index:1} /* premium section depth layers */ .section--depth{position:relative} .section--depth::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(34,159,76,.04) 0%,transparent 60%)} .section--depth::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,159,76,.08) 30%,rgba(34,159,76,.12) 50%,rgba(34,159,76,.08) 70%,transparent)} /* premium section spacing */ .section--premium{padding:120px 0} .section--premium-top{padding-top:140px} .section--premium-bottom{padding-bottom:140px} /* light theme section variants */ .section--light{background:#fff} .section--light-alt{background:#fafbfa} .section--light-tint{background:#f5f8f5} .section--warm{background:#faf8f4} .section--cool{background:#f4f7f6} /* section divider - premium */ .section-divider{height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.08) 30%,rgba(34,159,76,.12) 50%,rgba(34,159,76,.08) 70%,transparent 95%);margin:0;position:relative;z-index:1} .section-divider--thick{height:2px;background:linear-gradient(90deg,transparent,rgba(34,159,76,.12) 20%,rgba(34,159,76,.18) 50%,rgba(34,159,76,.12) 80%,transparent)} .section-divider--gold{background:linear-gradient(90deg,transparent 5%,rgba(255,215,0,.15) 30%,rgba(34,159,76,.12) 50%,rgba(255,215,0,.15) 70%,transparent 95%)} /* ===================== HOMEPAGE SECTION ENHANCEMENTS ===================== */ #about{position:relative;overflow:hidden;padding:120px 0;background:#fff;border-top:1px solid rgba(34,159,76,.04)} #about::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 20% 10%,rgba(34,159,76,.03) 0%,transparent 55%)} #about::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.08) 30%,rgba(34,159,76,.12) 50%,rgba(34,159,76,.08) 70%,transparent 95%)} #about .about-row{position:relative;z-index:1} #why-us{position:relative;overflow:hidden;padding:120px 0;background:#fafbfa;border-top:1px solid rgba(34,159,76,.04)} #why-us::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 40% at 80% 20%,rgba(34,159,76,.025) 0%,transparent 55%)} #why-us::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.06) 30%,rgba(34,159,76,.10) 50%,rgba(34,159,76,.06) 70%,transparent 95%)} #why-us .why-split{position:relative;z-index:1} #industries{position:relative;overflow:hidden;padding:120px 0;background:#fafbfa;border-top:1px solid rgba(34,159,76,.04)} #industries::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(34,159,76,.025) 0%,transparent 55%)} #industries::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.06) 30%,rgba(34,159,76,.10) 50%,rgba(34,159,76,.06) 70%,transparent 95%)} #industries .industries-grid{position:relative;z-index:1} #gallery{position:relative;overflow:hidden;padding:120px 0;background:#fff;border-top:1px solid rgba(34,159,76,.04)} #gallery::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 50% 100%,rgba(34,159,76,.025) 0%,transparent 55%)} #gallery::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.06) 30%,rgba(34,159,76,.10) 50%,rgba(34,159,76,.06) 70%,transparent 95%)} #gallery .gallery-bento{position:relative;z-index:1} /* premium hover lift for all homepage cards */ .about-row__media,.why-row,.industry-card,.process-step,.quality-row,.testi-card,.reach-stat,.gallery-bento__item{transition:transform .5s cubic-bezier(.23,1,.32,1),box-shadow .5s cubic-bezier(.23,1,.32,1),border-color .5s ease} .why-row:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.04)} .industry-card:hover{transform:translateY(-6px) rotateX(1deg);box-shadow:0 20px 50px rgba(0,0,0,.05)} .process-step:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.05)} .quality-row:hover{transform:translateX(6px);box-shadow:0 12px 30px rgba(0,0,0,.04)} .reach-stat:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.05)} .gallery-bento__item:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.06)} /* ===================== TRUSTED ACROSS INDIA ===================== */ #trusted{position:relative;overflow:hidden;padding:100px 0;background:#fcfcfc;border-top:1px solid rgba(34,159,76,.04)} .trust__bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 35% at 50% 50%,rgba(34,159,76,.02) 0%,transparent 60%),radial-gradient(ellipse 40% 25% at 20% 80%,rgba(34,159,76,.01) 0%,transparent 50%);pointer-events:none;z-index:0} #trusted::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.06) 30%,rgba(34,159,76,.10) 50%,rgba(34,159,76,.06) 70%,transparent 95%)} .trust__head{text-align:center;margin-bottom:52px;position:relative;z-index:1} .trust__tag{display:inline-flex;align-items:center;gap:14px;font-size:.46rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:.55;margin-bottom:16px} .trust__tag::before,.trust__tag::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .trust__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .trust__title{font-family:var(--font-display);font-size:clamp(1.8rem,3.4vw,3rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0 0 14px;color:#111} .trust__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#229f4c 50%,var(--gold-2) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:trustGold 6s ease-in-out infinite} @keyframes trustGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .trust__sub{font-size:.82rem;color:rgba(0,0,0,.6);max-width:58ch;margin:0 auto;line-height:1.7;font-weight:500} .trust__line{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:48px auto 0;position:relative;z-index:1} /* premium card deck */ .trust__deck{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1} /* category card */ .trust__card{background:linear-gradient(180deg,#fff 0%,#fafbfa 100%);border:1px solid var(--line-soft);border-radius:20px;padding:28px 24px;transition:all .5s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden;transform-style:preserve-3d;perspective:var(--perspective);box-shadow:var(--shadow-xs)} .trust__card::before{content:"";position:absolute;inset:-1px;border-radius:21px;background:linear-gradient(135deg,rgba(34,159,76,.10),transparent 35%,transparent 65%,rgba(34,159,76,.04));opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:0} .trust__card::after{content:"";position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .5s ease;pointer-events:none;z-index:1} .trust__card:hover{transform:translateY(-8px) rotateX(2deg);border-color:rgba(34,159,76,.10);box-shadow:0 20px 50px rgba(0,0,0,.04),0 0 0 1px rgba(34,159,76,.03)} .trust__card:hover::before{opacity:1} .trust__card:hover::after{opacity:1;left:10%;right:10%} /* card header */ .trust__card-head{display:flex;align-items:center;gap:10px;margin-bottom:18px;position:relative;z-index:1} .trust__card-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(34,159,76,.08);color:var(--gold);flex-shrink:0} .trust__card-head h3{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#111;margin:0} .trust__card:nth-child(3) .trust__card-head h3{color:var(--gold)} .trust__card:nth-child(3) .trust__card-icon{background:rgba(34,159,76,.14);color:#111} /* pill grid inside card */ .trust__card-body{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1} /* premium pills */ .trust__pill{padding:10px 22px;border-radius:100px;font-size:.74rem;font-weight:600;color:#111;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.04);transition:all .35s ease;cursor:default;position:relative;overflow:hidden;white-space:nowrap} .trust__pill::before{content:"";position:absolute;inset:-1px;border-radius:101px;background:linear-gradient(135deg,rgba(34,159,76,.10),transparent 40%,transparent 60%,rgba(34,159,76,.04));opacity:0;transition:opacity .35s;z-index:0;pointer-events:none} .trust__pill:hover{color:var(--gold);border-color:rgba(34,159,76,.18);transform:translateY(-2px);background:rgba(34,159,76,.03)} /* ===================== OUR RANGE — CATALOG ===================== */ #products{position:relative;background:#fcfcfc;padding:100px 0} #products::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,159,76,.06),transparent)} /* header */ .col__head{text-align:center;margin-bottom:56px;position:relative;z-index:1} .col__head-tag{display:inline-flex;align-items:center;gap:14px;font-size:.46rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:.55;margin-bottom:18px} .col__head-tag::before,.col__head-tag::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));opacity:.6} .col__head-tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .col__head-title{font-family:var(--font-display);font-size:clamp(2rem,3.8vw,3.4rem);font-weight:800;line-height:1.06;letter-spacing:-.025em;margin:0 0 16px;color:#1a1a1a} .col__head-title em{font-style:normal;background:linear-gradient(135deg,#fff 0%,var(--gold) 30%,#fffbe6 55%,var(--gold) 80%,var(--gold-2) 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:colGold 7s ease-in-out infinite} @keyframes colGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .col__head-sub{display:none} .col__head-line{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:26px auto 0} /* grid */ .col__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1} /* card */ .col__card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.04);transition:all .45s ease;position:relative;box-shadow:0 4px 20px rgba(0,0,0,.015)} .col__card::before{content:"";position:absolute;inset:-1px;border-radius:17px;background:linear-gradient(135deg,rgba(34,159,76,.10),transparent 35%,transparent 65%,rgba(34,159,76,.04));opacity:0;transition:opacity .5s;z-index:0;pointer-events:none} .col__card::after{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(180deg,rgba(34,159,76,.02) 0%,transparent 30%);opacity:0;transition:opacity .5s;z-index:0;pointer-events:none} .col__card:hover{transform:translateY(-6px);border-color:rgba(34,159,76,.10);box-shadow:0 20px 50px rgba(0,0,0,.04),0 0 0 1px rgba(34,159,76,.03)} .col__card:hover::before{opacity:1} .col__card:hover::after{opacity:1} /* fig */ .col__card-fig{position:relative;overflow:hidden;background:#f5f5f5;aspect-ratio:4/3;transform:translateZ(0)} .col__card-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s ease,filter .6s ease;animation:imgBreathe 14s ease-in-out infinite;transform:translateZ(0);backface-visibility:hidden} @keyframes imgBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} .col__card:hover .col__card-fig img{animation-play-state:paused;transform:scale(1.12);filter:brightness(1.05)} .col__card-fig::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.015) 100%);z-index:2;pointer-events:none;animation:lightSweep 8s ease-in-out infinite} @keyframes lightSweep{0%,100%{opacity:.3}50%{opacity:1}} .col__card-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(255,255,255,.3) 100%);z-index:1;pointer-events:none} .col__card-body{padding:24px;position:relative;z-index:2;display:flex;flex-direction:column;flex:1} .col__card-name{font-size:.95rem;font-weight:700;color:#111;line-height:1.3;margin-bottom:20px;letter-spacing:-.01em;transition:color .3s} .col__card:hover .col__card-name{color:var(--gold)} /* actions */ .col__card-actions{display:flex;gap:12px;margin-top:auto} .col__card-btn{flex:1;text-align:center;padding:13px 10px;font-size:.58rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:all .35s ease;text-decoration:none;line-height:1;border-radius:8px;border:none} .col__card-btn--primary{background:var(--gold);color:#fff} .col__card-btn--primary:hover{background:#b8960a;transform:translateY(-2px);box-shadow:0 8px 25px rgba(34,159,76,.2)} .col__card-btn--ghost{background:rgba(0,0,0,.02);color:var(--gold);border:1px solid rgba(34,159,76,.10)} .col__card-btn--ghost:hover{background:rgba(34,159,76,.06);border-color:rgba(34,159,76,.25);transform:translateY(-2px)} /* ===================== PRODUCT SHOWCASE (image→video hover) ===================== */ .product-showcase{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1} .showcase-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fafbfa 100%);border:1px solid var(--line-soft);transition:all .5s cubic-bezier(.23,1,.32,1);position:relative;box-shadow:var(--shadow-xs);transform-style:preserve-3d;perspective:var(--perspective)} .showcase-card::before{content:"";position:absolute;inset:-1px;border-radius:15px;background:linear-gradient(135deg,rgba(34,159,76,.12),transparent 35%,transparent 65%,rgba(34,159,76,.05));opacity:0;transition:opacity .5s;z-index:0;pointer-events:none} .showcase-card:hover{transform:translateY(-6px);border-color:rgba(34,159,76,.12);box-shadow:0 20px 50px rgba(0,0,0,.06),0 0 0 1px rgba(34,159,76,.04)} .showcase-card:hover::before{opacity:1} .showcase-card__media{position:relative;overflow:hidden;background:#f8f8f8;aspect-ratio:1/1;transform:translateZ(0)} .showcase-card__img{width:100%;height:100%;object-fit:contain;display:block;transition:opacity .6s ease,transform .6s ease;padding:12px;position:relative;z-index:2} .showcase-card__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .6s ease;transform:scale(1.05)} .showcase-card:hover .showcase-card__img{opacity:0;transform:scale(1.08)} .showcase-card:hover .showcase-card__vid{opacity:1;transform:scale(1)} .showcase-card__overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.15);opacity:0;transition:opacity .4s ease;pointer-events:none} .showcase-card:hover .showcase-card__overlay{opacity:0} .showcase-card__play{width:44px;height:44px;border-radius:50%;background:rgba(34,159,76,.85);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(34,159,76,.3);transition:transform .3s ease} .showcase-card:hover .showcase-card__play{transform:scale(0);opacity:0} .showcase-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.04) 100%);z-index:4;pointer-events:none;opacity:0;transition:opacity .4s} .showcase-card:hover .showcase-card__media::after{opacity:1} .showcase-card__body{padding:18px 16px;position:relative;z-index:2;display:flex;flex-direction:column;flex:1} .showcase-card__name{font-size:.82rem;font-weight:700;color:#111;line-height:1.3;margin-bottom:6px;letter-spacing:-.01em;transition:color .3s} .showcase-card:hover .showcase-card__name{color:var(--gold)} .showcase-card__desc{font-size:.7rem;color:#666;line-height:1.5;margin-bottom:14px;flex:1} .showcase-card__actions{display:flex;gap:8px;margin-top:auto} .showcase-card__btn{flex:1;text-align:center;padding:10px 8px;font-size:.55rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:all .35s ease;text-decoration:none;line-height:1;border-radius:7px;border:none} .showcase-card__btn--primary{background:var(--gold);color:#fff} .showcase-card__btn--primary:hover{background:#b8960a;transform:translateY(-2px);box-shadow:0 8px 25px rgba(34,159,76,.2)} .showcase-card__btn--ghost{background:rgba(0,0,0,.02);color:var(--gold);border:1px solid rgba(34,159,76,.10)} .showcase-card__btn--ghost:hover{background:rgba(34,159,76,.06);border-color:rgba(34,159,76,.25);transform:translateY(-2px)} /* footer */ .col__foot{text-align:center;margin-top:52px;position:relative;z-index:1;padding-top:36px} .col__foot::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.3} .col__foot-link{display:inline-flex;align-items:center;gap:10px;font-size:.6rem;font-weight:600;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;padding:14px 34px;border:1px solid rgba(34,159,76,.10);border-radius:8px;transition:all .35s ease;text-decoration:none} .col__foot-link span{transition:transform .35s ease} .col__foot-link:hover{background:rgba(34,159,76,.04);border-color:rgba(34,159,76,.20);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.02)} .col__foot-link:hover span{transform:translateX(5px)} /* ===================== LAYOUT NORMALIZATION ===================== */ .section--dark{background:#f5f5f7} .section--darker{background:linear-gradient(180deg,var(--navy-deep),var(--navy))} /* light theme section depth */ .section--light-bg{background:linear-gradient(180deg,#ffffff 0%,#fafbfa 100%)} .section--warm-bg{background:linear-gradient(180deg,#fdfcf9 0%,#faf8f4 100%)} .section--cool-bg{background:linear-gradient(180deg,#f8faf9 0%,#f4f7f6 100%)} /* premium section with subtle 3D depth */ .section--elevated{background:#fff;box-shadow:inset 0 1px 0 rgba(0,0,0,.03)} .section--elevated::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,159,76,.06) 30%,rgba(34,159,76,.10) 50%,rgba(34,159,76,.06) 70%,transparent);z-index:1} /* premium text contrast for light theme */ .text-premium{color:var(--ink);font-weight:500;line-height:1.7} .text-premium-muted{color:var(--muted);font-weight:400;line-height:1.7} .sec-head--center{justify-content:center;text-align:center} .sec-head__left--center{margin:0 auto} .text-center{text-align:center} .flex-center{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px} /* centered eyebrow */ .text-center .eyebrow{justify-content:center} /* dark section base — clean, no grain */ .section--dark>.container,.section--darker>.container{position:relative;z-index:1} /* standard lead spacing */ .lead{margin-top:14px;color:var(--muted);font-weight:500} /* normalize section headings */ .sec-head__left .lead{margin-top:14px;color:var(--muted);font-weight:500} .section .sec-head{margin-bottom:44px} .section .sec-head--center .sec-head__left{display:flex;flex-direction:column;align-items:center} /* unified card — one glass style for all */ .card-base{ border-radius:var(--radius);border:1px solid var(--line-soft); background:linear-gradient(170deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 100%); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:transform .6s var(--ease),border-color .6s,box-shadow .6s; transform-style:preserve-3d;perspective:var(--perspective); box-shadow:var(--shadow-xs); } .card-base:hover{transform:translateY(-6px) rotateX(1deg);border-color:rgba(62,192,105,.25);box-shadow:var(--shadow-3d)} .card-base h3{font-size:1.05rem;font-weight:700;margin-bottom:5px;line-height:1.3;color:var(--charcoal)} .card-base p{color:var(--muted);font-size:.82rem;line-height:1.55} .card-base .card-ic{margin-bottom:14px} /* premium 3D card with glass effect */ .card-glass{ border-radius:var(--radius);border:1px solid rgba(34,159,76,.06); background:rgba(255,255,255,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); transition:transform .6s var(--ease),border-color .6s,box-shadow .6s; transform-style:preserve-3d;perspective:var(--perspective); box-shadow:var(--shadow-sm); } .card-glass:hover{transform:translateY(-8px) rotateX(2deg) scale(1.01);border-color:rgba(34,159,76,.15);box-shadow:var(--shadow-3d-lg)} /* apply to all card types - enhanced 3D */ .svc-card,.mat-card,.qual-card,.process-step,.know-card{ padding:28px;border-radius:var(--radius);border:1px solid var(--line-soft); background:linear-gradient(170deg,rgba(255,255,255,.95) 0%,rgba(250,251,250,.8) 100%); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:transform .6s var(--ease),border-color .6s,box-shadow .6s; transform-style:preserve-3d;perspective:var(--perspective); box-shadow:var(--shadow-xs);position:relative;overflow:hidden; } .svc-card::before,.mat-card::before,.qual-card::before,.process-step::before,.know-card::before{ content:"";position:absolute;top:0;left:20%;right:20%;height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .5s ease;z-index:2; } .svc-card:hover,.mat-card:hover,.qual-card:hover,.process-step:hover,.know-card:hover{ transform:translateY(-8px) rotateX(1deg);border-color:rgba(34,159,76,.12); box-shadow:var(--shadow-3d); } .svc-card:hover::before,.mat-card:hover::before,.qual-card:hover::before,.process-step:hover::before,.know-card:hover::before{opacity:1} .svc-card h3,.mat-card h3,.qual-card h3,.process-step h3,.know-card h3{font-size:1.05rem;font-weight:700;margin-bottom:5px;line-height:1.3;color:var(--charcoal)} .svc-card p,.mat-card p,.qual-card p,.process-step p,.know-card p{color:var(--muted);font-size:.82rem;line-height:1.55} /* ===================== INFRASTRUCTURE ===================== */ #infrastructure{position:relative;overflow:hidden;background:#fcfcfc} /* hero section with facility image */ .infra__hero{position:relative;min-height:55vh;display:flex;align-items:center;background:url('../../Solar Panels/40 watt Front.jpeg') center/cover no-repeat;background-attachment:fixed;padding:100px 0;overflow:hidden} .infra__hero::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.20) 50%,rgba(0,0,0,.08) 100%);z-index:0} .infra__hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(34,159,76,.10) 0%,transparent 60%);z-index:0;pointer-events:none} .infra__hero-glow{position:absolute;top:-20%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(34,159,76,.06) 0%,transparent 60%);z-index:0;pointer-events:none;animation:infraGlow 8s ease-in-out infinite alternate} @keyframes infraGlow{0%{opacity:.4;transform:translate(0,0)}100%{opacity:1;transform:translate(-30px,20px)}} .infra__hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(34,159,76,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(34,159,76,.03) 1px,transparent 1px);background-size:40px 40px} .infra__hero-content{position:relative;z-index:1;max-width:640px;padding:36px 40px;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:20px;border:1px solid rgba(255,255,255,.10);box-shadow:0 24px 60px rgba(0,0,0,.18)} .infra__tag{font-size:.5rem;letter-spacing:.35em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:.85;display:block;margin-bottom:16px} .infra__title{font-family:var(--font-display);font-size:clamp(2rem,4.2vw,3.6rem);font-weight:800;line-height:1.06;letter-spacing:-.025em;margin:0 0 14px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.3)} .infra__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#3ec069 50%,var(--gold) 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:infraGold 6s ease-in-out infinite} @keyframes infraGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .infra__sub{font-size:.82rem;color:rgba(255,255,255,.7);line-height:1.7;font-weight:500;max-width:56ch} .infra__purpose{font-size:.72rem;color:rgba(255,255,255,.5);line-height:1.6;max-width:54ch;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);font-weight:400} /* intro bar */ .infra__intro{display:flex;align-items:center;gap:16px;max-width:800px;margin:0 auto;padding:28px 0 10px;position:relative;z-index:1;text-align:center;justify-content:center} .infra__intro-line{width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));flex:none} .infra__intro-txt{font-size:.68rem;color:rgba(0,0,0,.5);line-height:1.6;letter-spacing:.02em} /* grid below hero */ #infrastructure .infra-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:40px 0 100px;position:relative;z-index:1} #infrastructure .infra-grid::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:600px;height:200px;background:radial-gradient(ellipse,rgba(34,159,76,.035) 0%,transparent 70%);pointer-events:none} #infrastructure .infra-card--featured{grid-column:span 2} #infrastructure .infra-card--bottom{grid-column:span 2} /* card */ #infrastructure .infra-card{display:flex;gap:24px;padding:28px 30px;border-radius:16px;background:#fff;border:1px solid rgba(34,159,76,.04);transition:all .5s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.012)} #infrastructure .infra-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .5s;z-index:2} #infrastructure .infra-card:hover{transform:translateY(-6px);border-color:rgba(34,159,76,.08);box-shadow:0 20px 50px rgba(0,0,0,.04),0 0 0 1px rgba(34,159,76,.02)} #infrastructure .infra-card:hover::before{opacity:1} .infra-card__stripe{position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .5s;z-index:2} #infrastructure .infra-card:hover .infra-card__stripe{opacity:1} /* card shine sweep */ .infra-card__shine{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.25) 45%,rgba(255,255,255,.40) 50%,rgba(255,255,255,.25) 55%,transparent 65%);transform:translateX(-100%);transition:transform .8s ease} #infrastructure .infra-card:hover .infra-card__shine{transform:translateX(100%)} /* stat */ .infra-card__stat{text-align:left;flex:none;width:110px;display:flex;flex-direction:column;padding-right:22px;border-right:1px solid rgba(34,159,76,.06);position:relative;justify-content:center} .infra-card__stat-val{display:flex;align-items:baseline;gap:4px} .infra-card__stat-num{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--gold);line-height:1;letter-spacing:-.03em} .infra-card__stat-unit{font-family:var(--font-display);font-size:.75rem;font-weight:600;color:rgba(34,159,76,.5);letter-spacing:.02em} .infra-card__stat-lbl{font-size:.42rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.5);font-weight:600;margin-top:4px} /* body */ .infra-card__body{flex:1;min-width:0} .infra-card__num{font-family:var(--font-display);font-size:.5rem;font-weight:700;color:var(--gold);opacity:.25;letter-spacing:.08em;margin-bottom:4px;transition:opacity .3s} #infrastructure .infra-card:hover .infra-card__num{opacity:.5} .infra-card__body h3{font-size:.95rem;font-weight:700;margin-bottom:5px;line-height:1.3;color:#1a1a1a;transition:color .3s} #infrastructure .infra-card:hover .infra-card__body h3{color:var(--gold)} .infra-card__body p{font-size:.74rem;color:rgba(0,0,0,.55);line-height:1.6;transition:color .3s} #infrastructure .infra-card:hover .infra-card__body p{color:rgba(0,0,0,.7)} /* featured card */ #infrastructure .infra-card--featured .infra-card__stat-num{font-size:2.6rem} #infrastructure .infra-card--featured .infra-card__stat-unit{font-size:.9rem} #infrastructure .infra-card--featured .infra-card__body h3{font-size:1.1rem} /* ===================== OUR JOURNEY — TIMELINE ===================== */ #history{position:relative;overflow:hidden;padding:100px 0;background:#fcfcfc;border-top:1px solid rgba(34,159,76,.04)} #history::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.06) 30%,rgba(34,159,76,.10) 50%,rgba(34,159,76,.06) 70%,transparent 95%)} .journey__head{text-align:center;margin-bottom:48px;position:relative;z-index:1} .journey__tag{display:inline-flex;align-items:center;gap:14px;font-size:.46rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:.55;margin-bottom:16px} .journey__tag::before,.journey__tag::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .journey__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .journey__title{font-family:var(--font-display);font-size:clamp(1.8rem,3.4vw,3rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0;color:#111} .journey__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#229f4c 50%,var(--gold-2) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:journeyGold 6s ease-in-out infinite} @keyframes journeyGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .journey__purpose{font-size:.78rem;color:rgba(0,0,0,.5);max-width:58ch;margin:12px auto 0;line-height:1.65;font-weight:400} /* horizontal track — alternating up/down */ .journey__track{display:flex;gap:0;position:relative;z-index:1;padding:0} .journey__track::before{content:"";position:absolute;top:50%;left:5%;right:5%;height:1.5px;background:linear-gradient(90deg,transparent,rgba(34,159,76,.12) 15%,rgba(34,159,76,.18) 50%,rgba(34,159,76,.12) 85%,transparent);z-index:0} .journey__item{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;padding:0 8px;min-height:380px} .journey__item--up{justify-content:flex-start} .journey__item--down{justify-content:flex-end} .journey__item--down .journey__connector{order:-1} .journey__card{padding:20px 16px 18px;border-radius:12px;background:linear-gradient(180deg,#fff 0%,#fafbfa 100%);border:1px solid var(--line-soft);transition:all .5s cubic-bezier(.23,1,.32,1);position:relative;width:100%;max-width:170px;text-align:center;box-shadow:var(--shadow-xs);transform-style:preserve-3d;perspective:var(--perspective);flex:none} .journey__card::before{content:"";position:absolute;inset:-1px;border-radius:13px;background:linear-gradient(135deg,rgba(34,159,76,.10),transparent 30%,transparent 60%,rgba(34,159,76,.04));opacity:0;transition:opacity .5s;z-index:0;pointer-events:none} .journey__card::after{content:"";position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .5s ease;pointer-events:none;z-index:1} .journey__card:hover{transform:translateY(-6px);border-color:rgba(34,159,76,.10);box-shadow:0 16px 40px rgba(0,0,0,.04),0 0 0 1px rgba(34,159,76,.03)} .journey__card:hover::before{opacity:1} .journey__card:hover::after{opacity:1;left:10%;right:10%} .journey__year{display:block;font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:var(--gold);line-height:1;margin-bottom:7px;letter-spacing:-.02em} .journey__card h3{font-size:.72rem;font-weight:700;margin-bottom:5px;line-height:1.3;color:#111;transition:color .3s;position:relative;z-index:1} .journey__card:hover h3{color:var(--gold)} .journey__card p{font-size:.58rem;color:rgba(0,0,0,.6);line-height:1.5;position:relative;z-index:1} .journey__connector{flex:1;width:1px;background:linear-gradient(180deg,rgba(34,159,76,.15),rgba(34,159,76,.04));min-height:30px} .journey__dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 4px rgba(62,192,105,.08),0 0 18px rgba(62,192,105,.06);z-index:3;animation:dotPulse 3s ease-in-out infinite} @keyframes dotPulse{0%,100%{box-shadow:0 0 0 4px rgba(62,192,105,.08),0 0 18px rgba(62,192,105,.06)}50%{box-shadow:0 0 0 6px rgba(62,192,105,.12),0 0 25px rgba(62,192,105,.1)}} /* ===================== OUR PROCESS ===================== */ #process{position:relative;overflow:hidden;padding:100px 0;background:#faf8f4;border-top:1px solid rgba(34,159,76,.06)} #process::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(34,159,76,.03) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;z-index:0} #process::after{content:"";position:absolute;top:-40%;left:0;right:0;height:400px;background:radial-gradient(ellipse at 50% 0%,rgba(34,159,76,.03) 0%,transparent 70%);pointer-events:none;z-index:0} .proc__float{position:absolute;pointer-events:none;z-index:0} .proc__float--ring{top:6%;right:2%;width:180px;height:180px;border-radius:50%;border:1.5px solid rgba(34,159,76,.07);animation:procFloatRing 20s linear infinite} .proc__float--ring::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(34,159,76,.05);animation:procFloatRing 15s linear infinite reverse} .proc__float--ring::after{content:"";position:absolute;inset:14px;border-radius:50%;border:1.5px solid rgba(34,159,76,.05);animation:procFloatRing 25s linear infinite} @keyframes procFloatRing{0%{transform:rotateZ(0deg) rotateX(60deg) rotateY(0deg)}100%{transform:rotateZ(360deg) rotateX(60deg) rotateY(15deg)}} .proc__float--sphere{top:12%;left:3%;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(34,159,76,.07),rgba(34,159,76,.02) 50%,transparent);animation:procFloatSphere 12s ease-in-out infinite alternate} @keyframes procFloatSphere{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-40px) scale(1.1)}} .proc__head{text-align:center;margin-bottom:50px;position:relative;z-index:1} .proc__tag{display:inline-flex;align-items:center;gap:12px;font-size:.48rem;letter-spacing:.35em;text-transform:uppercase;font-weight:700;color:#a88600;margin-bottom:14px} .proc__tag::before,.proc__tag::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,#a88600)} .proc__tag::before{background:linear-gradient(270deg,transparent,#a88600)} .proc__title{font-family:var(--font-display);font-size:clamp(1.8rem,3.6vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.025em;margin:0;color:#1a1a18} .proc__title em{font-style:normal;background:linear-gradient(135deg,#d4a800 0%,#b8920a 50%,#d4a800 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:procGold 5s ease-in-out infinite} @keyframes procGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .proc__purpose{font-size:.82rem;color:rgba(0,0,0,.55);max-width:56ch;margin:12px auto 0;line-height:1.7;font-weight:500} /* flow — horizontal step line */ .proc__flow{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;position:relative;z-index:1} .proc__line{position:absolute;top:50px;left:9%;right:9%;height:2px;background:linear-gradient(90deg,transparent,rgba(34,159,76,.12) 10%,rgba(34,159,76,.18) 50%,rgba(34,159,76,.12) 90%,transparent);z-index:0;pointer-events:none} .proc__line::after{content:"";position:absolute;top:-2px;left:0;right:0;height:6px;background:linear-gradient(90deg,transparent,rgba(180,150,30,.06) 20%,rgba(34,159,76,.10) 50%,rgba(180,150,30,.06) 80%,transparent);filter:blur(3px)} /* card */ .proc__card{padding:26px 18px 28px;border-radius:16px;background:#fff;border:1px solid rgba(34,159,76,.08);text-align:center;transition:all .5s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.04),0 2px 8px rgba(34,159,76,.02);display:flex;flex-direction:column;align-items:center;cursor:default} .proc__card::before{content:"";position:absolute;inset:-1px;border-radius:17px;background:linear-gradient(135deg,rgba(34,159,76,.10),transparent 35%,transparent 65%,rgba(34,159,76,.04));opacity:0;transition:opacity .5s;pointer-events:none;z-index:0} .proc__card:hover{transform:translateY(-8px);border-color:rgba(34,159,76,.15);box-shadow:0 24px 50px rgba(0,0,0,.06),0 0 0 1px rgba(34,159,76,.04)} .proc__card:hover::before{opacity:1} .proc__card-glow{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(34,159,76,.05) 0%,transparent 60%);transform:translate(-50%,-50%);transition:all .8s ease;pointer-events:none;z-index:0} .proc__card:hover .proc__card-glow{width:400px;height:400px} .proc__card-head{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:1;width:100%} .proc__card-icon{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;background:rgba(34,159,76,.05);border:1px solid rgba(34,159,76,.09);transition:all .5s ease;margin-bottom:2px;position:relative} .proc__card-icon::after{content:"";position:absolute;inset:-1px;border-radius:17px;background:linear-gradient(135deg,rgba(34,159,76,.12),transparent 50%,transparent);opacity:0;transition:opacity .5s;pointer-events:none} .proc__card:hover .proc__card-icon{background:rgba(34,159,76,.08);border-color:rgba(34,159,76,.18);transform:translateY(-3px) scale(1.06)} .proc__card:hover .proc__card-icon::after{opacity:1} .proc__card-icon svg{width:26px;height:26px;display:block;position:relative;z-index:1} .proc__card-tag{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8a6e00;transition:color .3s;background:rgba(34,159,76,.05);padding:3px 12px;border-radius:100px;border:1px solid rgba(34,159,76,.08)} .proc__card:hover .proc__card-tag{color:#a88600;border-color:rgba(34,159,76,.15);background:rgba(34,159,76,.07)} .proc__card-text{font-size:.82rem;font-weight:500;color:rgba(0,0,0,.75);line-height:1.55;margin:10px 0 0;transition:color .3s;position:relative;z-index:1;max-width:200px} .proc__card:hover .proc__card-text{color:rgba(0,0,0,.95)} /* ===================== QUALITY — PREMIUM ===================== */ #quality{position:relative;overflow:hidden;padding:100px 0;background:#fcfcfc;border-top:1px solid rgba(34,159,76,.04)} #quality::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.06) 30%,rgba(34,159,76,.10) 50%,rgba(34,159,76,.06) 70%,transparent 95%)} #quality::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(34,159,76,.025) 1px,transparent 1px);background-size:45px 45px;pointer-events:none;z-index:0} .qual__glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(62,192,105,.05) 0%,transparent 60%);pointer-events:none;z-index:0;animation:qualGlow 8s ease-in-out infinite alternate} @keyframes qualGlow{0%{opacity:.4;transform:translate(-50%,-50%) scale(1)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}} .qual__head{text-align:center;margin-bottom:52px;position:relative;z-index:2} .qual__tag{display:inline-flex;align-items:center;gap:14px;font-size:.46rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:.55;margin-bottom:16px} .qual__tag::before,.qual__tag::after{content:"";width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .qual__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .qual__title{font-family:var(--font-display);font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0 0 16px;color:#111} .qual__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#229f4c 50%,var(--gold-2) 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:qualGold 7s ease-in-out infinite} @keyframes qualGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .qual__sub{font-size:.82rem;color:rgba(0,0,0,.6);max-width:60ch;margin:0 auto 12px;line-height:1.7;font-weight:500} .qual__purpose{font-size:.74rem;color:rgba(0,0,0,.45);max-width:56ch;margin:0 auto;line-height:1.65;font-weight:400} #quality .qual-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;position:relative;z-index:1} #quality .qual-grid::before{content:"";position:absolute;top:50%;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.08) 20%,rgba(34,159,76,.12) 50%,rgba(34,159,76,.08) 80%,transparent 95%);z-index:0;pointer-events:none} #quality .qual-grid::after{content:"";position:absolute;left:50%;top:10%;bottom:10%;width:1px;background:linear-gradient(180deg,transparent 5%,rgba(34,159,76,.08) 20%,rgba(34,159,76,.12) 50%,rgba(34,159,76,.08) 80%,transparent 95%);z-index:0;pointer-events:none} #quality .qual-card{padding:0;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.03);transition:all .5s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.012);display:flex;flex-direction:column} #quality .qual-card::before{content:"";position:absolute;inset:-1px;border-radius:17px;background:linear-gradient(135deg,rgba(34,159,76,.08),transparent 30%,transparent 60%,rgba(34,159,76,.035));opacity:0;transition:opacity .5s;z-index:0;pointer-events:none} #quality .qual-card::after{content:"";position:absolute;top:0;left:15%;right:15%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .5s ease;z-index:2} #quality .qual-card:hover{transform:translateY(-6px);border-color:rgba(34,159,76,.06);box-shadow:0 24px 55px rgba(0,0,0,.04),0 0 0 1px rgba(34,159,76,.02)} #quality .qual-card:hover::before{opacity:1} #quality .qual-card:hover::after{opacity:1;left:10%;right:10%} .qual-card__top{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px 0;position:relative;z-index:1} .qual-card__num{font-family:var(--font-display);font-size:2.8rem;font-weight:800;color:rgba(34,159,76,.08);line-height:1;transition:all .5s;letter-spacing:-.04em} #quality .qual-card:hover .qual-card__num{color:rgba(34,159,76,.20)} .qual-card__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(34,159,76,.04);border:1px solid rgba(34,159,76,.06);transition:all .5s;flex:none} #quality .qual-card:hover .qual-card__icon{background:rgba(34,159,76,.08);border-color:rgba(34,159,76,.12);transform:scale(1.06)} .qual-card__body{padding:6px 24px 24px;position:relative;z-index:1} .qual-card__tag{display:inline-block;font-size:.48rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);padding:4px 14px;border:1px solid rgba(34,159,76,.10);border-radius:100px;margin-bottom:12px;transition:all .4s ease} #quality .qual-card:hover .qual-card__tag{border-color:rgba(34,159,76,.20);background:rgba(34,159,76,.04)} .qual-card__body h3{font-size:.95rem;font-weight:700;margin-bottom:6px;line-height:1.3;color:#111;transition:color .3s} #quality .qual-card:hover .qual-card__body h3{color:var(--gold)} .qual-card__body p{font-size:.74rem;color:rgba(0,0,0,.6);line-height:1.6;transition:color .3s;margin:0} #quality .qual-card:hover .qual-card__body p{color:rgba(0,0,0,.8)} /* ===================== TESTIMONIALS ===================== */ #testimonials{position:relative;overflow:hidden;padding:100px 0;background:linear-gradient(175deg,#faf8f4 0%,#f5f0e8 100%);border-top:1px solid rgba(34,159,76,.06)} #testimonials::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(34,159,76,.025) 1px,transparent 1px);background-size:45px 45px;pointer-events:none;z-index:0} #testimonials::after{content:"";position:absolute;top:-30%;left:-10%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(34,159,76,.03) 0%,transparent 60%);pointer-events:none;z-index:0} .testi__head{text-align:center;margin-bottom:48px;position:relative;z-index:1} .testi__tag{display:inline-flex;align-items:center;gap:12px;font-size:.46rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:#a88600;margin-bottom:16px} .testi__tag::before,.testi__tag::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,#a88600)} .testi__tag::before{background:linear-gradient(270deg,transparent,#a88600)} .testi__title{font-family:var(--font-display);font-size:clamp(1.8rem,3.4vw,3rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0 0 14px;color:#1a1a18} .testi__title em{font-style:normal;background:linear-gradient(135deg,#d4a800 0%,#b8920a 50%,#d4a800 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:testiGold 6s ease-in-out infinite} @keyframes testiGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .testi__sub{font-size:.82rem;color:rgba(0,0,0,.6);line-height:1.7;font-weight:500;max-width:58ch;margin:0 auto} .testi__purpose{font-size:.74rem;color:rgba(0,0,0,.45);max-width:56ch;margin:12px auto 0;line-height:1.65;font-weight:400} .testi__track{position:relative;max-width:620px;margin:0 auto;height:500px;overflow:hidden;mask-image:linear-gradient(180deg,transparent 0%,black 8%,black 92%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,black 8%,black 92%,transparent 100%)} .testi__scroll{display:flex;flex-direction:column;gap:20px;animation:testiScroll 40s linear infinite} .testi__track:hover .testi__scroll{animation-play-state:paused} @keyframes testiScroll{0%{transform:translateY(0)}100%{transform:translateY(calc(-100% / 3))}} .testi-card{padding:28px 26px 24px;border-radius:16px;background:#fff;border:1px solid rgba(34,159,76,.07);transition:all .4s ease;flex-shrink:0;position:relative;box-shadow:0 4px 20px rgba(0,0,0,.025),0 1px 4px rgba(34,159,76,.015)} .testi-card::before{content:"";position:absolute;inset:-1px;border-radius:17px;background:linear-gradient(135deg,rgba(34,159,76,.08),transparent 30%,transparent 70%,rgba(34,159,76,.03));opacity:0;transition:opacity .5s;pointer-events:none;z-index:0} .testi-card:hover{border-color:rgba(34,159,76,.14);box-shadow:0 16px 40px rgba(0,0,0,.04),0 0 0 1px rgba(34,159,76,.03);transform:translateY(-4px)} .testi-card:hover::before{opacity:1} .testi-card__quote{position:absolute;top:6px;right:18px;font-family:var(--font-serif);font-size:5rem;color:rgba(34,159,76,.05);line-height:1;pointer-events:none;user-select:none} .testi-card__stars{font-size:.85rem;letter-spacing:4px;color:#d4a800;display:block;margin-bottom:12px;position:relative;z-index:1} .testi-card p{font-size:.82rem;color:rgba(0,0,0,.7);line-height:1.75;margin-bottom:18px;position:relative;z-index:1;font-style:italic} .testi-card__author{display:flex;align-items:center;gap:14px;padding-top:14px;border-top:1px solid rgba(34,159,76,.06);position:relative;z-index:1} .testi-card__author img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid rgba(34,159,76,.12)} .testi-card__author strong{font-size:.82rem;font-weight:700;color:#1a1a18;display:block} .testi-card__author span{font-size:.66rem;color:rgba(0,0,0,.5)} /* ===================== TECHNOLOGY — PREMIUM ===================== */ #tech-home,#technology{position:relative;overflow:hidden;padding:100px 0;border-top:1px solid rgba(34,159,76,.04)} #tech-home .tech__bg,#technology .tech__bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 30% at 50% 0%,rgba(34,159,76,.03) 0%,transparent 60%),radial-gradient(ellipse 45% 25% at 50% 100%,rgba(34,159,76,.015) 0%,transparent 50%);pointer-events:none;z-index:0;animation:techBg 8s ease-in-out infinite alternate} #tech-home::before,#technology:not(.tech-section)::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.06) 30%,rgba(34,159,76,.10) 50%,rgba(34,159,76,.06) 70%,transparent 95%)} #tech-home::after,#technology:not(.tech-section)::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(34,159,76,.025) 1px,transparent 1px);background-size:45px 45px;pointer-events:none;z-index:0} .tech__float{position:absolute;pointer-events:none;z-index:0} .tech__float--ring{top:6%;right:2%;width:160px;height:160px;border-radius:50%;border:1.5px solid rgba(34,159,76,.08);animation:techFloatRing 20s linear infinite} .tech__float--ring::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(34,159,76,.04);animation:techFloatRing 15s linear infinite reverse} .tech__float--ring::after{content:"";position:absolute;inset:12px;border-radius:50%;border:1.5px solid rgba(34,159,76,.05);animation:techFloatRing 25s linear infinite} @keyframes techFloatRing{0%{transform:rotateZ(0deg) rotateX(60deg) rotateY(0deg)}100%{transform:rotateZ(360deg) rotateX(60deg) rotateY(15deg)}} .tech__float--cube{bottom:8%;left:4%;width:40px;height:40px;transform-style:preserve-3d;transform:rotateX(30deg) rotateY(20deg);animation:techFloatCube 18s ease-in-out infinite alternate} .tech__float--cube::before{content:"";position:absolute;inset:0;border:1.5px solid rgba(34,159,76,.08);border-radius:4px;transform:translateZ(8px)} .tech__float--cube::after{content:"";position:absolute;inset:0;border:1.5px solid rgba(34,159,76,.05);border-radius:4px;transform:translateZ(-8px)} @keyframes techFloatCube{0%{transform:rotateX(30deg) rotateY(20deg) translateY(0)}100%{transform:rotateX(50deg) rotateY(40deg) translateY(-20px)}} .tech__head{text-align:center;margin-bottom:52px;position:relative;z-index:1} .tech__icon{position:relative;width:64px;height:64px;margin:0 auto 22px} .tech__blade{position:absolute;top:50%;left:50%;width:100%;height:3px;transform-origin:center;background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:2px} .tech__blade:nth-child(1){animation:techSpin 8s linear infinite} .tech__blade:nth-child(2){animation:techSpin 8s linear infinite 2s} .tech__blade:nth-child(3){animation:techSpin 8s linear infinite 4s} .tech__blade:nth-child(4){animation:techSpin 8s linear infinite 6s} @keyframes techSpin{0%{transform:translate(-50%,-50%) rotate(0deg) scaleX(1);opacity:.3}30%{opacity:.8}50%{opacity:1}70%{opacity:.8}100%{transform:translate(-50%,-50%) rotate(360deg) scaleX(1);opacity:.3}} .tech__ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;border:1px solid rgba(62,192,105,.1);z-index:0} .tech__tag{font-size:.46rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);display:block;margin-bottom:14px} .tech__title{font-family:var(--font-display);font-size:clamp(1.8rem,3.6vw,3.2rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0 0 14px;color:#111} .tech__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#229f4c 50%,var(--gold-2) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:techGold 6s ease-in-out infinite} @keyframes techGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .tech__sub{font-size:.82rem;color:rgba(0,0,0,.6);max-width:60ch;margin:0 auto;line-height:1.7;font-weight:500} .tech__purpose{font-size:.74rem;color:rgba(0,0,0,.45);max-width:58ch;margin:12px auto 0;line-height:1.65;font-weight:400} #tech-home .tech-grid,#technology .tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1} .tech-card{padding:20px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.04);transition:all .5s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;box-shadow:0 4px 20px rgba(0,0,0,.012)} .tech-card::before{content:"";position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .5s ease;z-index:2} .tech-card::after{content:"";position:absolute;inset:-1px;border-radius:15px;background:linear-gradient(135deg,rgba(34,159,76,.10),transparent 30%,transparent 60%,rgba(34,159,76,.04));opacity:0;transition:opacity .5s;z-index:0;pointer-events:none} #tech-home .tech-card:hover,#technology .tech-card:hover{transform:translateY(-6px);border-color:rgba(34,159,76,.08);box-shadow:0 20px 50px rgba(0,0,0,.04),0 0 0 1px rgba(34,159,76,.03)} #tech-home .tech-card:hover::before,#technology .tech-card:hover::before{opacity:1;left:10%;right:10%} #tech-home .tech-card:hover::after,#technology .tech-card:hover::after{opacity:1} .tech-card__icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;background:rgba(34,159,76,.04);border:1px solid rgba(34,159,76,.06);transition:all .4s ease;position:relative;z-index:2} #tech-home .tech-card:hover .tech-card__icon,#technology .tech-card:hover .tech-card__icon{background:rgba(34,159,76,.08);border-color:rgba(34,159,76,.15);transform:translateY(-3px) scale(1.06)} .tech-card__body{flex:1;position:relative;z-index:2;min-width:0} .tech-card__tag{font-size:.44rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);opacity:.55;display:block;margin-bottom:3px;transition:opacity .3s} #tech-home .tech-card:hover .tech-card__tag,#technology .tech-card:hover .tech-card__tag{opacity:.9} .tech-card__body p{font-size:.68rem;color:rgba(0,0,0,.6);line-height:1.55;transition:color .3s} #tech-home .tech-card:hover .tech-card__body p,#technology .tech-card:hover .tech-card__body p{color:rgba(0,0,0,.8)} .tech-card__body h3{font-size:.85rem;font-weight:700;color:#111;margin:0 0 3px;transition:color .3s} #tech-home .tech-card:hover .tech-card__body h3,#technology .tech-card:hover .tech-card__body h3{color:var(--gold)} .tech-card__stat{display:flex;align-items:baseline;gap:4px;position:relative;z-index:2;margin-top:auto;padding-top:10px;border-top:1px solid rgba(0,0,0,.03)} .tech-card__stat-val{font-family:var(--font-display);font-size:.95rem;font-weight:800;color:var(--gold);line-height:1;letter-spacing:-.02em} .tech-card__stat-lbl{font-size:.48rem;font-weight:600;color:rgba(0,0,0,.4);letter-spacing:.04em;text-transform:uppercase} .tech__foot{text-align:center;margin-top:40px;position:relative;z-index:1} .tech__link{display:inline-flex;font-size:.6rem;font-weight:600;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;padding:14px 34px;border:1px solid rgba(34,159,76,.12);border-radius:8px;transition:all .35s ease;text-decoration:none} .tech__link:hover{background:rgba(34,159,76,.06);border-color:rgba(34,159,76,.25);transform:translateY(-3px);box-shadow:0 12px 30px rgba(34,159,76,.04)} /* ===================== SERVICES ===================== */ #services{position:relative;overflow:hidden;padding:100px 0;perspective:1600px;min-height:100vh;display:flex;align-items:center} #services .svc__bg{position:absolute;inset:0;z-index:0;background:linear-gradient(170deg,#0a0a14 0%,#0f0f1c 30%,#121020 50%,#0d0c18 75%,#080810 100%)} #services .svc__overlay{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 65% 40% at 50% 20%,rgba(34,159,76,.04) 0%,transparent 55%),radial-gradient(ellipse 40% 30% at 70% 75%,rgba(34,159,76,.025) 0%,transparent 50%)} #services .svc__pattern{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.015;background-image:linear-gradient(rgba(34,159,76,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(34,159,76,.3) 1px,transparent 1px);background-size:40px 40px} #services .svc__beam{position:absolute;top:-40%;left:-20%;width:140%;height:140%;z-index:0;pointer-events:none;background:radial-gradient(ellipse 35% 25% at 25% 50%,rgba(34,159,76,.035) 0%,transparent 50%);animation:svcBeam 15s ease-in-out infinite alternate} @keyframes svcBeam{0%{transform:translate(-10%,-5%) rotate(-5deg);opacity:.4}100%{transform:translate(10%,5%) rotate(5deg);opacity:.9}} #services .container{position:relative;z-index:1} /* header */ .svc__head{text-align:center;margin-bottom:56px} .svc__tag{display:inline-flex;align-items:center;gap:14px;font-size:.48rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:.7;margin-bottom:18px} .svc__tag::before,.svc__tag::after{content:"";width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .svc__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .svc__title{font-family:var(--font-display);font-size:clamp(2rem,3.8vw,3.4rem);font-weight:800;line-height:1.04;letter-spacing:-.028em;margin:0 0 16px;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.3)} .svc__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#fffbe6 35%,var(--gold) 65%,var(--gold-2) 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:svcGold 5s ease-in-out infinite} @keyframes svcGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .svc__sub{font-size:.85rem;color:rgba(255,255,255,.5);max-width:60ch;margin:0 auto;line-height:1.75;font-weight:500;text-shadow:0 1px 15px rgba(0,0,0,.2)} .svc__line{width:56px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-2),transparent);margin:24px auto 0;border-radius:2px;opacity:.4} /* grid — 3D stage */ #services .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1;transform-style:preserve-3d} /* card — 3D floating panel */ #services .svc-card{padding:32px 28px 26px;border-radius:16px;background:rgba(255,255,255,.02);border:1px solid rgba(34,159,76,.1);transition:all .6s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:220px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:translateZ(0);transform-style:preserve-3d;box-shadow:0 8px 30px rgba(0,0,0,.25)} #services .svc-card::before{content:"";position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .5s ease;z-index:2} #services .svc-card::after{content:"";position:absolute;inset:-1px;border-radius:17px;background:linear-gradient(135deg,rgba(34,159,76,.12),transparent 30%,transparent 60%,rgba(34,159,76,.05));opacity:0;transition:opacity .5s;z-index:0;pointer-events:none} #services .svc-card:hover{transform:translateY(-12px) rotateX(4deg) scale(1.02) translateZ(8px);border-color:rgba(34,159,76,.22);background:rgba(255,255,255,.025);box-shadow:0 35px 80px rgba(0,0,0,.55),0 0 50px rgba(34,159,76,.06),0 0 100px rgba(34,159,76,.025)} #services .svc-card:nth-child(2):hover{transform:translateY(-12px) rotateX(3deg) rotateY(-2deg) scale(1.02) translateZ(8px)} #services .svc-card:nth-child(3):hover{transform:translateY(-12px) rotateX(5deg) rotateY(-3deg) scale(1.02) translateZ(8px)} #services .svc-card:nth-child(4):hover{transform:translateY(-12px) rotateX(-3deg) rotateY(3deg) scale(1.02) translateZ(8px)} #services .svc-card:nth-child(5):hover{transform:translateY(-12px) rotateX(-4deg) rotateY(-2deg) scale(1.02) translateZ(8px)} #services .svc-card:nth-child(6):hover{transform:translateY(-12px) rotateX(-2deg) rotateY(-4deg) scale(1.02) translateZ(8px)} #services .svc-card:hover::before{opacity:1;left:10%;right:10%} #services .svc-card:hover::after{opacity:1} /* glow */ .svc-card__glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(34,159,76,.06) 0%,transparent 60%);pointer-events:none;z-index:0;transition:all .7s ease} #services .svc-card:hover .svc-card__glow{width:280px;height:280px;background:radial-gradient(circle,rgba(34,159,76,.12) 0%,rgba(34,159,76,.035) 35%,transparent 65%)} /* shine sweep */ .svc-card__shine{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.04) 45%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.04) 55%,transparent 65%);transform:translateX(-100%);transition:transform .8s ease} #services .svc-card:hover .svc-card__shine{transform:translateX(100%)} /* head row — number + icon side by side */ .svc-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;position:relative;z-index:1} /* 3D gold number badge */ .svc-card__num{display:flex;align-items:center;justify-content:center;width:48px;height:48px;position:relative;z-index:1;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.34,1.56,.64,1);flex:none} #services .svc-card:hover .svc-card__num{transform:translateZ(24px) scale(1.1) rotateY(-10deg)} .svc-card__num-ring{position:absolute;inset:-2px;border-radius:50%;border:1.5px solid rgba(34,159,76,.3);transition:all .5s ease;box-shadow:0 0 12px rgba(34,159,76,.05),inset 0 0 12px rgba(34,159,76,.03)} #services .svc-card:hover .svc-card__num-ring{border-color:var(--gold);box-shadow:0 0 30px rgba(34,159,76,.2),inset 0 0 20px rgba(34,159,76,.08);transform:scale(1.12)} .svc-card__num-text{font-family:var(--font-display);font-size:.9rem;font-weight:800;color:var(--gold);transition:all .3s;text-shadow:0 0 12px rgba(34,159,76,.2),0 2px 15px rgba(0,0,0,.3)} /* icon */ .svc-card__icon{width:38px;height:38px;object-fit:contain;opacity:.3;transition:all .5s ease;filter:brightness(0) invert(1)} #services .svc-card:hover .svc-card__icon{opacity:.7;transform:scale(1.15) rotate(5deg)} /* body */ .svc-card__body{position:relative;z-index:1;transform-style:preserve-3d;flex:1} #services .svc-card h3{font-size:1rem;font-weight:700;margin-bottom:8px;line-height:1.25;color:#fff;transition:all .3s;text-shadow:0 2px 20px rgba(0,0,0,.4),0 0 6px rgba(0,0,0,.2)} #services .svc-card:hover h3{color:var(--gold);text-shadow:0 0 20px rgba(34,159,76,.12),0 2px 20px rgba(0,0,0,.3)} #services .svc-card p{font-size:.75rem;color:rgba(255,255,255,.5);line-height:1.65;transition:color .4s;text-shadow:0 1px 12px rgba(0,0,0,.3);flex:1} #services .svc-card:hover p{color:rgba(255,255,255,.7)} /* arrow */ .svc-card__arrow{display:inline-flex;align-items:center;align-self:flex-start;font-size:.7rem;color:var(--gold);margin-top:12px;opacity:0;transform:translateX(-8px);transition:all .45s ease;position:relative;z-index:1} #services .svc-card:hover .svc-card__arrow{opacity:1;transform:translateX(0)} /* footer */ .svc__foot{text-align:center;margin-top:48px;position:relative;z-index:1} .svc__link{display:inline-flex;align-items:center;gap:8px;font-size:.6rem;font-weight:600;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;padding:14px 34px;border:1px solid rgba(34,159,76,.15);border-radius:50px;transition:all .4s ease;text-decoration:none;background:rgba(34,159,76,.03)} .svc__link:hover{background:rgba(34,159,76,.1);border-color:rgba(34,159,76,.3);transform:translateY(-3px) scale(1.02);box-shadow:0 12px 30px rgba(0,0,0,.25),0 0 25px rgba(34,159,76,.05)} /* ===================== NUMBERS THAT MATTER — 3D PREMIUM ===================== */ #numbers-that-matter{position:relative;overflow:hidden;padding:100px 0;background:#fff} #numbers-that-matter .nums__bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 70% 40% at 50% 30%,rgba(34,159,76,.025) 0%,transparent 55%),radial-gradient(ellipse 50% 30% at 30% 70%,rgba(34,159,76,.015) 0%,transparent 50%);animation:numsBgPulse 8s ease-in-out infinite alternate} @keyframes numsBgPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:1;transform:scale(1.05)}} #numbers-that-matter .nums__grid{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(34,159,76,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(34,159,76,.015) 1px,transparent 1px);background-size:50px 50px} #numbers-that-matter .nums__flare{position:absolute;top:-15%;left:30%;width:500px;height:500px;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(34,159,76,.03) 0%,rgba(34,159,76,.01) 30%,transparent 60%);filter:blur(40px);animation:numsFlare 6s ease-in-out infinite alternate} @keyframes numsFlare{0%{opacity:.4;transform:translate(0,0) scale(1)}100%{opacity:.8;transform:translate(20px,-20px) scale(1.1)}} /* 3D floating image cards */ .nums__img{position:absolute;z-index:0;pointer-events:none;perspective:800px;transform-style:preserve-3d} .nums__img-inner{width:100%;height:100%;border-radius:12px;overflow:hidden;box-shadow:0 15px 50px rgba(0,0,0,.04),0 0 0 1px rgba(34,159,76,.04);transform:rotateY(-12deg) rotateX(8deg) scale(.95);transition:all 4s cubic-bezier(.23,1,.32,1);position:relative} .nums__img-inner img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 6s ease} .nums__img-shine{position:absolute;inset:0;background:linear-gradient(135deg,rgba(34,159,76,.08) 0%,transparent 30%,transparent 60%,rgba(34,159,76,.04) 100%);pointer-events:none;z-index:1} .nums__img:hover .nums__img-inner{transform:rotateY(0deg) rotateX(0deg) scale(1)} .nums__img:hover .nums__img-inner img{transform:scale(1.08)} .nums__img--1{top:4%;left:2%;width:120px;height:90px;animation:numsImgFloat1 8s ease-in-out infinite alternate} .nums__img--1 .nums__img-inner{transform:rotateY(18deg) rotateX(-6deg) scale(.92)} @keyframes numsImgFloat1{0%{transform:translateY(0) translateX(0)}100%{transform:translateY(-18px) translateX(8px)}} .nums__img--2{top:12%;right:2%;width:100px;height:80px;animation:numsImgFloat2 9s ease-in-out infinite alternate;animation-delay:1s} .nums__img--2 .nums__img-inner{transform:rotateY(-20deg) rotateX(10deg) scale(.9)} @keyframes numsImgFloat2{0%{transform:translateY(0) translateX(0)}100%{transform:translateY(-22px) translateX(-6px)}} .nums__img--3{bottom:8%;left:4%;width:90px;height:70px;animation:numsImgFloat3 7s ease-in-out infinite alternate;animation-delay:2s} .nums__img--3 .nums__img-inner{transform:rotateY(22deg) rotateX(-10deg) scale(.88)} @keyframes numsImgFloat3{0%{transform:translateY(0) translateX(0)}100%{transform:translateY(16px) translateX(-10px)}} .nums__img--4{bottom:12%;right:4%;width:110px;height:85px;animation:numsImgFloat4 10s ease-in-out infinite alternate;animation-delay:3s} .nums__img--4 .nums__img-inner{transform:rotateY(-15deg) rotateX(12deg) scale(.9)} @keyframes numsImgFloat4{0%{transform:translateY(0) translateX(0)}100%{transform:translateY(20px) translateX(10px)}} /* gold particles */ .nums__particles{position:absolute;inset:0;z-index:0;pointer-events:none} .nums__particles span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(34,159,76,.4),0 0 12px rgba(34,159,76,.1);animation:numsParticle 10s ease-in-out infinite} .nums__particles span:nth-child(1){top:12%;left:8%;animation-delay:0s;width:2px;height:2px} .nums__particles span:nth-child(2){top:22%;left:92%;animation-delay:1.5s;width:4px;height:4px} .nums__particles span:nth-child(3){top:55%;left:3%;animation-delay:3s} .nums__particles span:nth-child(4){top:68%;left:85%;animation-delay:.8s;width:2px;height:2px} .nums__particles span:nth-child(5){top:38%;left:45%;animation-delay:2.2s;width:4px;height:4px} .nums__particles span:nth-child(6){top:82%;left:20%;animation-delay:4s} .nums__particles span:nth-child(7){top:48%;left:70%;animation-delay:1s;width:2px;height:2px} .nums__particles span:nth-child(8){top:75%;left:65%;animation-delay:3.5s;width:3px;height:3px} .nums__particles span:nth-child(9){top:8%;left:55%;animation-delay:2.8s;width:2px;height:2px} .nums__particles span:nth-child(10){top:90%;left:40%;animation-delay:.5s;width:3px;height:3px} .nums__particles span:nth-child(11){top:30%;left:25%;animation-delay:4.5s;width:2px;height:2px} .nums__particles span:nth-child(12){top:60%;left:50%;animation-delay:1.8s;width:4px;height:4px} @keyframes numsParticle{0%,100%{opacity:0;transform:translateY(0) scale(0)}10%{opacity:1;transform:translateY(-10px) scale(1)}90%{opacity:.8;transform:translateY(-30px) scale(.8)}100%{opacity:0;transform:translateY(-40px) scale(0)}} /* header */ .nums__head{text-align:center;margin-bottom:56px;position:relative;z-index:2} .nums__tag{display:inline-flex;align-items:center;gap:14px;font-size:.44rem;letter-spacing:.35em;text-transform:uppercase;font-weight:600;color:var(--gold);opacity:.7;margin-bottom:14px} .nums__tag::before,.nums__tag::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .nums__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .nums__title{font-family:var(--font-display);font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0;color:#111} .nums__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#229f4c 50%,var(--gold-2) 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:numsGold 5s ease-in-out infinite} @keyframes numsGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .nums__line{width:50px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:20px auto 0;border-radius:2px;opacity:.5} /* grid — 3D stage */ #numbers-that-matter .nums-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;z-index:1;perspective:1400px;transform-style:preserve-3d} /* card — 3D floating panel */ .nums-card{padding:34px 18px 28px;border-radius:14px;text-align:center;background:rgba(0,0,0,.008);border:1px solid rgba(0,0,0,.04);transition:all .55s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden;transform:translateZ(0) scale(1);box-shadow:0 4px 20px rgba(0,0,0,.015),0 1px 6px rgba(0,0,0,.01);transform-style:preserve-3d} .nums-card::before{content:"";position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .5s ease;z-index:2} .nums-card::after{content:"";position:absolute;inset:-1px;border-radius:15px;background:linear-gradient(135deg,rgba(34,159,76,.1),transparent 30%,transparent 60%,rgba(34,159,76,.04));opacity:0;transition:opacity .5s;z-index:0;pointer-events:none} .nums-card:hover{transform:translateY(-12px) rotateX(3deg) scale(1.018) translateZ(8px);border-color:rgba(34,159,76,.14);background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.05),0 10px 30px rgba(0,0,0,.02),0 0 40px rgba(34,159,76,.03)} .nums-card:nth-child(2):hover{transform:translateY(-12px) rotateX(4deg) rotateY(-4deg) scale(1.018) translateZ(8px)} .nums-card:nth-child(3):hover{transform:translateY(-12px) rotateX(-3deg) rotateY(3deg) scale(1.018) translateZ(8px)} .nums-card:nth-child(4):hover{transform:translateY(-12px) rotateX(-4deg) rotateY(-3deg) scale(1.018) translateZ(8px)} .nums-card:nth-child(5):hover{transform:translateY(-12px) rotateX(5deg) rotateY(2deg) scale(1.018) translateZ(8px)} .nums-card:nth-child(6):hover{transform:translateY(-12px) rotateX(-3deg) rotateY(-5deg) scale(1.018) translateZ(8px)} .nums-card:nth-child(7):hover{transform:translateY(-12px) rotateX(3deg) rotateY(-3deg) scale(1.018) translateZ(8px)} .nums-card:nth-child(8):hover{transform:translateY(-12px) rotateX(-5deg) rotateY(4deg) scale(1.018) translateZ(8px)} .nums-card:hover::before{opacity:1;left:10%;right:10%} .nums-card:hover::after{opacity:1} /* card beam */ .nums-card__beam{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(34,159,76,.015) 45%,rgba(34,159,76,.03) 50%,rgba(34,159,76,.015) 55%,transparent 65%);transform:translateX(-120%);transition:transform 1s cubic-bezier(.23,1,.32,1)} .nums-card:hover .nums-card__beam{transform:translateX(120%)} /* corner accents — 3D fold */ .nums-card__corner{position:absolute;top:0;right:0;width:24px;height:24px;z-index:1;pointer-events:none;border-right:2px solid rgba(34,159,76,.06);border-top:2px solid rgba(34,159,76,.06);border-radius:0 4px 0 0;transition:all .5s ease;transform:translateZ(4px)} .nums-card:hover .nums-card__corner{width:36px;height:36px;border-color:rgba(34,159,76,.2);transform:translateZ(12px)} /* inner glow — 3D depth */ .nums-card__glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translateZ(-4px);width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(34,159,76,.035) 0%,transparent 60%);pointer-events:none;z-index:0;transition:all .7s ease} .nums-card:hover .nums-card__glow{width:260px;height:260px;background:radial-gradient(circle,rgba(34,159,76,.06) 0%,rgba(34,159,76,.015) 35%,transparent 65%);transform:translate(-50%,-50%) translateZ(-2px)} /* icon — 3D lift */ .nums-card__icon{width:42px;height:42px;margin:0 auto 14px;position:relative;z-index:1;transition:all .5s ease;transform:translateZ(0)} .nums-card__icon svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 8px rgba(34,159,76,.1));transition:filter .5s} .nums-card:hover .nums-card__icon{transform:translateY(-4px) scale(1.1) translateZ(12px)} .nums-card:hover .nums-card__icon svg{filter:drop-shadow(0 4px 16px rgba(34,159,76,.2))} /* number — 3D float */ .nums-card__num{display:block;font-family:var(--font-display);font-size:2.6rem;font-weight:800;color:var(--gold);line-height:1;margin-bottom:10px;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(34,159,76,.08),0 4px 30px rgba(34,159,76,.03);transition:all .4s ease;position:relative;z-index:1;transform:translateZ(0)} .nums-card:hover .nums-card__num{text-shadow:0 4px 30px rgba(34,159,76,.18),0 8px 60px rgba(34,159,76,.08);transform:translateY(-2px) scale(1.03) translateZ(16px)} /* bar — 3D */ .nums-card__bar{display:block;width:20px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-2),transparent);margin:0 auto 10px;border-radius:2px;opacity:.25;transition:all .5s ease;position:relative;z-index:1;transform:translateZ(0)} .nums-card:hover .nums-card__bar{opacity:.6;width:40px;transform:translateZ(8px)} /* label */ .nums-card__lbl{font-size:.46rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(0,0,0,.38);font-weight:600;display:block;position:relative;z-index:1;transition:all .4s ease;transform:translateZ(0)} .nums-card:hover .nums-card__lbl{color:rgba(0,0,0,.55);transform:translateZ(4px)} /* ===================== MATERIALS ===================== */ #materials{position:relative;overflow:hidden;padding:100px 0;border-top:1px solid rgba(34,159,76,.08);border-bottom:1px solid rgba(34,159,76,.08)} #materials .mat__bg{position:absolute;inset:0;z-index:0;background:#fcfcfc;opacity:.25} #materials .mat__glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 55% 35% at 50% 10%,rgba(34,159,76,.03) 0%,transparent 60%),radial-gradient(ellipse 50% 30% at 30% 80%,rgba(34,159,76,.02) 0%,transparent 60%),radial-gradient(circle at 80% 20%,rgba(34,159,76,.015) 0%,transparent 40%)} .mat__head{text-align:center;margin-bottom:48px;position:relative;z-index:1} .mat__tag{font-size:.44rem;letter-spacing:.35em;text-transform:uppercase;font-weight:600;color:var(--gold);opacity:.7;display:block;margin-bottom:12px} .mat__title{font-family:var(--font-display);font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0 0 12px;color:#111} .mat__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#229f4c 50%,var(--gold-2) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:matGold 5s ease-in-out infinite} @keyframes matGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .mat__sub{font-size:.82rem;color:rgba(0,0,0,.4);max-width:58ch;margin:0 auto 16px;line-height:1.7;font-weight:450} .mat__line{width:48px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto;border-radius:2px;opacity:.4} /* grid */ #materials .mat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:1} /* card */ #materials .mat-card{padding:32px 24px 28px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.04);transition:all .5s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,.02),0 1px 4px rgba(0,0,0,.02)} #materials .mat-card::before{content:"";position:absolute;top:0;left:15%;right:15%;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transform:scaleX(.5);transition:all .5s ease;z-index:2} #materials .mat-card::after{content:"";position:absolute;inset:-1px;border-radius:15px;background:linear-gradient(135deg,rgba(34,159,76,.1),transparent 30%,transparent 60%,rgba(34,159,76,.04));opacity:0;transition:opacity .5s;z-index:0;pointer-events:none} #materials .mat-card:hover{transform:translateY(-8px);border-color:rgba(34,159,76,.18);box-shadow:0 20px 50px rgba(0,0,0,.06),0 0 0 1px rgba(34,159,76,.06)} #materials .mat-card:hover::before{opacity:1;transform:scaleX(1)} #materials .mat-card:hover::after{opacity:1} /* beam */ .mat-card__beam{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(34,159,76,.015) 45%,rgba(34,159,76,.03) 50%,rgba(34,159,76,.015) 55%,transparent 70%);transform:translateX(-120%);transition:transform 1s cubic-bezier(.23,1,.32,1)} #materials .mat-card:hover .mat-card__beam{transform:translateX(120%)} /* medal */ .mat-medal{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative;border:2px solid rgba(34,159,76,.08);overflow:hidden;transition:all .5s cubic-bezier(.23,1,.32,1);box-shadow:0 8px 24px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.4)} .mat-medal__sheen{position:absolute;top:-25%;left:-15%;width:70%;height:70%;background:linear-gradient(135deg,rgba(255,255,255,.35) 0%,transparent 55%);transform:rotate(30deg);pointer-events:none;transition:all .6s ease} #materials .mat-card:hover .mat-medal{transform:translateY(-3px) scale(1.05);border-color:rgba(34,159,76,.2);box-shadow:0 14px 40px rgba(0,0,0,.08),0 0 20px rgba(34,159,76,.04)} #materials .mat-card:hover .mat-medal__sheen{transform:rotate(30deg) translate(4px,-6px)} /* metal textures */ .mat-medal--steel{background:linear-gradient(145deg,#eef2f8 0%,#c8d0da 25%,#dce2ea 50%,#a0b0be 75%,#c8d2de 100%);box-shadow:inset 0 -3px 8px rgba(0,0,0,.08),inset 0 3px 8px rgba(255,255,255,.25),0 8px 24px rgba(0,0,0,.04)} .mat-medal--iron{background:linear-gradient(145deg,#5a5a5a 0%,#3a3a3a 25%,#4d4d4d 50%,#2a2a2a 75%,#454545 100%);box-shadow:inset 0 -3px 8px rgba(0,0,0,.2),inset 0 3px 8px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.06)} .mat-medal--bronze{background:linear-gradient(145deg,#e0b05e 0%,#c89840 25%,#d8a850 50%,#b08030 75%,#c89848 100%);box-shadow:inset 0 -3px 8px rgba(0,0,0,.1),inset 0 3px 8px rgba(255,255,255,.2),0 8px 24px rgba(0,0,0,.04)} .mat-medal--alloy{background:linear-gradient(145deg,#8a9aaa 0%,#5a6a7e 25%,#7a8a9e 50%,#4a5a6e 75%,#6a7a8e 100%);box-shadow:inset 0 -3px 8px rgba(0,0,0,.12),inset 0 3px 8px rgba(255,255,255,.15),0 8px 24px rgba(0,0,0,.04)} /* card tag */ .mat-card__tag{display:inline-block;font-size:.5rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);background:rgba(34,159,76,.04);border:1px solid rgba(34,159,76,.06);padding:3px 10px;border-radius:20px;margin-bottom:10px;transition:all .4s} #materials .mat-card:hover .mat-card__tag{background:rgba(34,159,76,.08);border-color:rgba(34,159,76,.15);box-shadow:0 0 15px rgba(34,159,76,.03)} #materials .mat-card h3{font-size:1rem;font-weight:700;margin-bottom:2px;line-height:1.25;color:#111;transition:color .3s} #materials .mat-card:hover h3{color:var(--gold)} .mat-card__sub{font-size:.7rem;font-weight:500;color:rgba(0,0,0,.3);display:block;margin-bottom:10px;letter-spacing:.02em} #materials .mat-card p{font-size:.72rem;color:rgba(0,0,0,.45);line-height:1.6;transition:color .3s;max-width:88%;margin:0 auto} #materials .mat-card:hover p{color:rgba(0,0,0,.6)} /* num-glow */ .num-glow{position:absolute;top:-20%;left:30%;width:500px;height:500px;background:radial-gradient(closest-side,rgba(62,192,105,.04),transparent 70%);pointer-events:none;z-index:0} /* ===================== ABOUT HERO ===================== */ .about-hero{position:relative;overflow:hidden;padding:160px 0 100px;background:#0a0a12;display:flex;align-items:center;min-height:70vh} .about-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden} .about-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.40) saturate(1.1) contrast(1.05);transform:scale(1.02);animation:aboutVideoZoom 20s ease-in-out infinite alternate} @keyframes aboutVideoZoom{from{transform:scale(1.02)}to{transform:scale(1.12)}} .about-hero__overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(175deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.10) 50%,rgba(0,0,0,.35) 80%,rgba(0,0,0,.65) 100%)} .about-hero__bg::after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 70% 50% at 50% 20%,rgba(34,159,76,.10) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 30% 80%,rgba(34,159,76,.04) 0%,transparent 50%);pointer-events:none} .about-hero__glow{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:90%;height:600px;background:radial-gradient(closest-side,rgba(34,159,76,.06) 0%,transparent 60%);filter:blur(50px);pointer-events:none;z-index:1;animation:aboutHeroGlow 6s ease-in-out infinite alternate} @keyframes aboutHeroGlow{0%{opacity:.4;transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50%) scale(1.08)}} .about-hero__beam{position:absolute;top:0;left:-30%;width:60%;height:100%;z-index:4;background:linear-gradient(90deg,transparent 0%,rgba(34,159,76,.03) 30%,rgba(34,159,76,.05) 50%,rgba(34,159,76,.03) 70%,transparent 100%);transform:skewX(-15deg);animation:aboutBeam 10s ease-in-out infinite;pointer-events:none} @keyframes aboutBeam{0%,100%{transform:translateX(-30%) skewX(-15deg);opacity:.2}50%{transform:translateX(200%) skewX(-15deg);opacity:.6}} /* floating gold particles */ .about-hero__particles{position:absolute;inset:0;z-index:3;pointer-events:none} .about-hero__particles span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(62,192,105,.6),0 0 12px rgba(62,192,105,.2);animation:aboutParticle 8s ease-in-out infinite} .about-hero__particles span:nth-child(1){top:15%;left:10%;animation-delay:0s;animation-duration:7s} .about-hero__particles span:nth-child(2){top:25%;left:85%;animation-delay:1.2s;animation-duration:9s;width:4px;height:4px} .about-hero__particles span:nth-child(3){top:60%;left:5%;animation-delay:2.5s;animation-duration:8s;width:2px;height:2px} .about-hero__particles span:nth-child(4){top:70%;left:80%;animation-delay:.8s;animation-duration:10s;width:4px;height:4px} .about-hero__particles span:nth-child(5){top:40%;left:50%;animation-delay:3.5s;animation-duration:6s;width:2px;height:2px} .about-hero__particles span:nth-child(6){top:85%;left:25%;animation-delay:2s;animation-duration:8.5s;width:3px;height:3px} @keyframes aboutParticle{0%,100%{opacity:0;transform:translateY(0) scale(0)}20%{opacity:1;transform:translateY(-15px) scale(1)}80%{opacity:1;transform:translateY(-30px) scale(.8)}100%{opacity:0;transform:translateY(-50px) scale(0)}} .about-hero__inner{position:relative;z-index:5;text-align:center;display:flex;flex-direction:column;align-items:center;transform-style:preserve-3d;perspective:1000px;transform:rotateX(var(--rotX,0deg)) rotateY(var(--rotY,0deg));transition:transform .15s ease-out} .about-hero__inner:hover .about-hero__title{text-shadow:0 4px 40px rgba(34,159,76,.12),0 0 60px rgba(34,159,76,.06)} .about-hero__tag{display:inline-flex;align-items:center;gap:12px;font-size:.5rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:.85;margin-bottom:20px;transform:translateZ(20px);filter:drop-shadow(0 2px 15px rgba(0,0,0,.3))} .about-hero__tag::before,.about-hero__tag::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .about-hero__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .about-hero__title{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.6rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin:0;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.3);transform:translateZ(30px);transition:text-shadow .5s} .about-hero__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#3ec069 35%,var(--gold) 65%,var(--gold-2) 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:aboutTitleShimmer 6s ease-in-out infinite} @keyframes aboutTitleShimmer{0%,100%{background-position:0% center}50%{background-position:100% center}} .about-hero__bar{display:flex;align-items:center;gap:12px;margin:18px 0 24px} .about-hero__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 12px rgba(62,192,105,.5),0 0 24px rgba(62,192,105,.15);animation:aboutDotPulse 3s ease-in-out infinite} @keyframes aboutDotPulse{0%,100%{box-shadow:0 0 14px rgba(34,159,76,.5),0 0 30px rgba(34,159,76,.15)}50%{box-shadow:0 0 22px rgba(34,159,76,.7),0 0 50px rgba(34,159,76,.25)}} .about-hero__line{flex:1;max-width:140px;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold-2),transparent);background-size:300% 100%;animation:barShimmer 4s ease-in-out infinite;border-radius:2px} .about-hero__sub{color:rgba(255,255,255,.7);font-size:.88rem;max-width:62ch;line-height:1.75;font-weight:500;letter-spacing:.025em;margin:0;text-shadow:0 2px 20px rgba(0,0,0,.4)} /* ===================== PRODUCTS HERO ===================== */ .prods-hero{position:relative;overflow:hidden;padding:160px 0 100px;background:#0a0a12;display:flex;align-items:center;min-height:60vh} .prods-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden} .prods-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.40) saturate(1.1) contrast(1.05);transform:scale(1.02);animation:prodsVideoZoom 20s ease-in-out infinite alternate} @keyframes prodsVideoZoom{from{transform:scale(1.02)}to{transform:scale(1.12)}} .prods-hero__overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(175deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.10) 50%,rgba(0,0,0,.35) 80%,rgba(0,0,0,.65) 100%)} .prods-hero__bg::after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 70% 50% at 50% 20%,rgba(34,159,76,.10) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 30% 80%,rgba(34,159,76,.04) 0%,transparent 50%);pointer-events:none} .prods-hero__glow{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:90%;height:600px;background:radial-gradient(closest-side,rgba(34,159,76,.06) 0%,transparent 60%);filter:blur(50px);pointer-events:none;z-index:1;animation:prodsGlow 6s ease-in-out infinite alternate} @keyframes prodsGlow{0%{opacity:.4;transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50%) scale(1.08)}} .prods-hero__beam{position:absolute;top:0;left:-30%;width:60%;height:100%;z-index:4;background:linear-gradient(90deg,transparent 0%,rgba(34,159,76,.03) 30%,rgba(34,159,76,.05) 50%,rgba(34,159,76,.03) 70%,transparent 100%);transform:skewX(-15deg);animation:prodsBeam 10s ease-in-out infinite;pointer-events:none} @keyframes prodsBeam{0%,100%{transform:translateX(-30%) skewX(-15deg);opacity:.2}50%{transform:translateX(200%) skewX(-15deg);opacity:.6}} .prods-hero__particles{position:absolute;inset:0;z-index:3;pointer-events:none} .prods-hero__particles span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(34,159,76,.6),0 0 12px rgba(34,159,76,.2);animation:prodsParticle 8s ease-in-out infinite} .prods-hero__particles span:nth-child(1){top:20%;left:15%;animation-delay:0s;animation-duration:7s} .prods-hero__particles span:nth-child(2){top:30%;left:80%;animation-delay:1.5s;animation-duration:9s;width:4px;height:4px} .prods-hero__particles span:nth-child(3){top:65%;left:8%;animation-delay:2s;animation-duration:8s;width:2px;height:2px} .prods-hero__particles span:nth-child(4){top:75%;left:75%;animation-delay:3s;animation-duration:10s;width:4px;height:4px} @keyframes prodsParticle{0%,100%{opacity:0;transform:translateY(0) scale(0)}20%{opacity:1;transform:translateY(-15px) scale(1)}80%{opacity:1;transform:translateY(-30px) scale(.8)}100%{opacity:0;transform:translateY(-50px) scale(0)}} .prods-hero__inner{position:relative;z-index:5;text-align:center;display:flex;flex-direction:column;align-items:center;transform-style:preserve-3d;perspective:1000px;transform:rotateX(var(--rotX,0deg)) rotateY(var(--rotY,0deg));transition:transform .15s ease-out} .prods-hero__tag{display:inline-flex;align-items:center;gap:12px;font-size:.5rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:.85;margin-bottom:20px;transform:translateZ(20px);filter:drop-shadow(0 2px 15px rgba(0,0,0,.3))} .prods-hero__tag::before,.prods-hero__tag::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .prods-hero__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .prods-hero__title{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.6rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin:0;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.3);transform:translateZ(30px);transition:text-shadow .5s} .prods-hero__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#3ec069 35%,var(--gold) 65%,var(--gold-2) 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:prodsTitleShimmer 6s ease-in-out infinite} @keyframes prodsTitleShimmer{0%,100%{background-position:0% center}50%{background-position:100% center}} .prods-hero__bar{display:flex;align-items:center;gap:12px;margin:18px 0 24px} .prods-hero__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 14px rgba(34,159,76,.5),0 0 30px rgba(34,159,76,.15);animation:prodsDotPulse 3s ease-in-out infinite} @keyframes prodsDotPulse{0%,100%{box-shadow:0 0 14px rgba(34,159,76,.5),0 0 30px rgba(34,159,76,.15)}50%{box-shadow:0 0 22px rgba(34,159,76,.7),0 0 50px rgba(34,159,76,.25)}} .prods-hero__line{flex:1;max-width:140px;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold-2),transparent);background-size:300% 100%;animation:barShimmer 4s ease-in-out infinite;border-radius:2px} .prods-hero__sub{color:rgba(255,255,255,.7);font-size:.88rem;max-width:62ch;line-height:1.75;font-weight:500;letter-spacing:.025em;margin:0;text-shadow:0 2px 20px rgba(0,0,0,.4)} /* products grid section */ #prods-grid{position:relative;overflow:hidden;background:#fcfcfc;border-top:1px solid rgba(34,159,76,.04)} #prods-grid::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(34,159,76,.025) 1px,transparent 1px);background-size:45px 45px;pointer-events:none;z-index:0} #prods-grid::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.06) 30%,rgba(34,159,76,.10) 50%,rgba(34,159,76,.06) 70%,transparent 95%)} #prods-grid .container{position:relative;z-index:1} /* ===================== SERVICES HERO ===================== */ .svcs-hero{position:relative;overflow:hidden;padding:160px 0 100px;background:#0a0a12;display:flex;align-items:center;min-height:60vh} .svcs-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden} .svcs-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.40) saturate(1.1) contrast(1.05);transform:scale(1.02);animation:svcsVideoZoom 20s ease-in-out infinite alternate} @keyframes svcsVideoZoom{from{transform:scale(1.02)}to{transform:scale(1.12)}} .svcs-hero__overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(175deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.10) 50%,rgba(0,0,0,.35) 80%,rgba(0,0,0,.65) 100%)} .svcs-hero__bg::after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 70% 50% at 50% 20%,rgba(34,159,76,.10) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 30% 80%,rgba(34,159,76,.04) 0%,transparent 50%);pointer-events:none} .svcs-hero__glow{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:90%;height:600px;background:radial-gradient(closest-side,rgba(34,159,76,.06) 0%,transparent 60%);filter:blur(50px);pointer-events:none;z-index:1;animation:svcsGlow 6s ease-in-out infinite alternate} @keyframes svcsGlow{0%{opacity:.4;transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50%) scale(1.08)}} .svcs-hero__beam{position:absolute;top:0;left:-30%;width:60%;height:100%;z-index:4;background:linear-gradient(90deg,transparent 0%,rgba(34,159,76,.03) 30%,rgba(34,159,76,.05) 50%,rgba(34,159,76,.03) 70%,transparent 100%);transform:skewX(-15deg);animation:svcsBeam 10s ease-in-out infinite;pointer-events:none} @keyframes svcsBeam{0%,100%{transform:translateX(-30%) skewX(-15deg);opacity:.2}50%{transform:translateX(200%) skewX(-15deg);opacity:.6}} .svcs-hero__particles{position:absolute;inset:0;z-index:3;pointer-events:none} .svcs-hero__particles span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(34,159,76,.6),0 0 12px rgba(34,159,76,.2);animation:svcsParticle 8s ease-in-out infinite} .svcs-hero__particles span:nth-child(1){top:20%;left:15%;animation-delay:0s;animation-duration:7s} .svcs-hero__particles span:nth-child(2){top:30%;left:80%;animation-delay:1.5s;animation-duration:9s;width:4px;height:4px} .svcs-hero__particles span:nth-child(3){top:65%;left:8%;animation-delay:2s;animation-duration:8s;width:2px;height:2px} .svcs-hero__particles span:nth-child(4){top:75%;left:75%;animation-delay:3s;animation-duration:10s;width:4px;height:4px} @keyframes svcsParticle{0%,100%{opacity:0;transform:translateY(0) scale(0)}20%{opacity:1;transform:translateY(-15px) scale(1)}80%{opacity:1;transform:translateY(-30px) scale(.8)}100%{opacity:0;transform:translateY(-50px) scale(0)}} .svcs-hero__inner{position:relative;z-index:5;text-align:center;display:flex;flex-direction:column;align-items:center;transform-style:preserve-3d;perspective:1000px;transform:rotateX(var(--rotX,0deg)) rotateY(var(--rotY,0deg));transition:transform .15s ease-out} .svcs-hero__tag{display:inline-flex;align-items:center;gap:12px;font-size:.5rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:.85;margin-bottom:20px;transform:translateZ(20px);filter:drop-shadow(0 2px 15px rgba(0,0,0,.3))} .svcs-hero__tag::before,.svcs-hero__tag::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .svcs-hero__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .svcs-hero__title{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.6rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin:0;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.3);transform:translateZ(30px);transition:text-shadow .5s} .svcs-hero__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#3ec069 35%,var(--gold) 65%,var(--gold-2) 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:svcsTitleShimmer 6s ease-in-out infinite} @keyframes svcsTitleShimmer{0%,100%{background-position:0% center}50%{background-position:100% center}} .svcs-hero__bar{display:flex;align-items:center;gap:12px;margin:18px 0 24px} .svcs-hero__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 14px rgba(34,159,76,.5),0 0 30px rgba(34,159,76,.15);animation:svcsDotPulse 3s ease-in-out infinite} @keyframes svcsDotPulse{0%,100%{box-shadow:0 0 14px rgba(34,159,76,.5),0 0 30px rgba(34,159,76,.15)}50%{box-shadow:0 0 22px rgba(34,159,76,.7),0 0 50px rgba(34,159,76,.25)}} .svcs-hero__line{flex:1;max-width:140px;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold-2),transparent);background-size:300% 100%;animation:barShimmer 4s ease-in-out infinite;border-radius:2px} .svcs-hero__sub{color:rgba(255,255,255,.7);font-size:.88rem;max-width:62ch;line-height:1.75;font-weight:500;letter-spacing:.025em;margin:0;text-shadow:0 2px 20px rgba(0,0,0,.4)} /* ===================== SERVICES GRID ===================== */ #svcs-grid{position:relative;overflow:hidden;background:#fcfcfc;padding:100px 0;border-top:1px solid rgba(34,159,76,.04)} #svcs-grid::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(34,159,76,.025) 1px,transparent 1px);background-size:45px 45px;pointer-events:none;z-index:0} #svcs-grid::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.06) 30%,rgba(34,159,76,.10) 50%,rgba(34,159,76,.06) 70%,transparent 95%)} .svcs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1} .svcs__card{position:relative;overflow:hidden;padding:38px 28px 32px;border-radius:16px;background:#fff;border:1px solid rgba(34,159,76,.04);transition:all .5s cubic-bezier(.23,1,.32,1);display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 4px 20px rgba(0,0,0,.015);transform-style:preserve-3d} .svcs__card::before{content:"";position:absolute;inset:-1px;border-radius:17px;background:linear-gradient(135deg,rgba(34,159,76,.08),transparent 30%,transparent 60%,rgba(34,159,76,.035));opacity:0;transition:opacity .5s;z-index:0;pointer-events:none} .svcs__card::after{content:"";position:absolute;top:0;left:15%;right:15%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .5s ease;z-index:2} .svcs__card:hover{transform:translateY(-8px);border-color:rgba(34,159,76,.08);box-shadow:0 24px 55px rgba(0,0,0,.04),0 0 0 1px rgba(34,159,76,.02)} .svcs__card:hover::before{opacity:1} .svcs__card:hover::after{opacity:1;left:10%;right:10%} .svcs__card>*{position:relative;z-index:1} .svcs__card-top{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 10%,rgba(34,159,76,.08) 30%,rgba(34,159,76,.15) 50%,rgba(34,159,76,.08) 70%,transparent 90%);opacity:0;transition:opacity .5s;z-index:2} .svcs__card:hover .svcs__card-top{opacity:1} .svcs__card-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(34,159,76,.04);border:1px solid rgba(34,159,76,.06);margin-bottom:16px;transition:all .4s ease;flex:none} .svcs__card:hover .svcs__card-ic{background:rgba(34,159,76,.08);border-color:rgba(34,159,76,.12);transform:translateY(-3px);box-shadow:0 6px 20px rgba(34,159,76,.04)} .svcs__card-ic img{width:22px;height:22px;object-fit:contain} .svcs__card-tag{display:inline-block;font-size:.44rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);opacity:.65;padding:3px 12px;border:1px solid rgba(34,159,76,.06);border-radius:100px;margin-bottom:12px;transition:all .35s ease} .svcs__card:hover .svcs__card-tag{opacity:.85;border-color:rgba(34,159,76,.12);background:rgba(34,159,76,.04)} .svcs__card h3{font-size:1.05rem;font-weight:700;margin-bottom:10px;line-height:1.3;color:#111;transition:color .3s} .svcs__card:hover h3{color:var(--gold)} .svcs__card p{font-size:.76rem;color:rgba(0,0,0,.55);line-height:1.6;transition:color .3s;flex:1} .svcs__card:hover p{color:rgba(0,0,0,.75)} .svcs__card-arrow{display:inline-flex;align-items:center;margin-top:18px;color:var(--gold);opacity:0;transform:translateX(-8px);transition:all .45s cubic-bezier(.23,1,.32,1)} .svcs__card-arrow svg{width:16px;height:16px} .svcs__card:hover .svcs__card-arrow{opacity:1;transform:translateX(0)} /* ===================== SERVICES PROCESS ===================== */ #svcs-process{position:relative;overflow:hidden;padding:100px 0;background:#fcfcfc;border-top:1px solid rgba(34,159,76,.04)} #svcs-process::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(34,159,76,.025) 1px,transparent 1px);background-size:45px 45px;pointer-events:none;z-index:0} #svcs-process::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.06) 30%,rgba(34,159,76,.10) 50%,rgba(34,159,76,.06) 70%,transparent 95%)} .svcs-process__glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(34,159,76,.03) 0%,transparent 60%);pointer-events:none;z-index:0;animation:svcsProcGlow 8s ease-in-out infinite alternate} @keyframes svcsProcGlow{0%{opacity:.4;transform:translate(-50%,-50%) scale(1)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}} .svcs-process__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1} .svcs-step{position:relative;padding:36px 24px 32px;border-radius:16px;background:#fff;border:1px solid rgba(34,159,76,.04);transition:all .5s ease;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.015);transform-style:preserve-3d} .svcs-step::before{content:"";position:absolute;inset:-1px;border-radius:17px;background:linear-gradient(135deg,rgba(34,159,76,.08),transparent 30%,transparent 60%,rgba(34,159,76,.035));opacity:0;transition:opacity .5s;z-index:0;pointer-events:none} .svcs-step::after{content:"";position:absolute;top:0;left:15%;right:15%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .5s ease;z-index:2} .svcs-step:hover{transform:translateY(-6px);border-color:rgba(34,159,76,.06);box-shadow:0 16px 40px rgba(0,0,0,.04),0 0 0 1px rgba(34,159,76,.02)} .svcs-step:hover::before{opacity:1} .svcs-step:hover::after{opacity:1;left:10%;right:10%} .svcs-step>*{position:relative;z-index:1} .svcs-step__num{font-family:var(--font-display);font-size:3.2rem;font-weight:900;color:var(--gold);opacity:.08;line-height:1;margin-bottom:12px;transition:all .5s ease;letter-spacing:-.03em} .svcs-step:hover .svcs-step__num{opacity:.15;transform:scale(1.06)} .svcs-step__body{} .svcs-step h3{font-size:.95rem;font-weight:700;margin-bottom:8px;line-height:1.3;color:#111;transition:color .3s} .svcs-step:hover h3{color:var(--gold)} .svcs-step p{font-size:.74rem;color:rgba(0,0,0,.55);line-height:1.55;transition:color .3s} .svcs-step:hover p{color:rgba(0,0,0,.75)} .svcs-step__conn{position:absolute;top:50%;right:-14px;transform:translateY(-50%);width:8px;height:8px;border-right:1.5px solid rgba(34,159,76,.12);border-top:1.5px solid rgba(34,159,76,.12);rotate:45deg;pointer-events:none;z-index:2;opacity:.5} #about-story{position:relative;overflow:hidden;background:#fcfcfc;padding:60px 0 100px;border-top:1px solid rgba(34,159,76,.04)} #about-story::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(34,159,76,.025) 1px,transparent 1px);background-size:45px 45px;pointer-events:none;z-index:0} .story__layout{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center;position:relative;z-index:1} .story__visual{display:flex;justify-content:center} .story__frame{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(34,159,76,.06);box-shadow:0 24px 60px rgba(0,0,0,.04);background:#fff;transform-style:preserve-3d} .story__frame-shine{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.25) 45%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.25) 55%,transparent 65%);transform:translateX(-100%);transition:transform .8s ease} .story__frame:hover .story__frame-shine{transform:translateX(100%)} .story__frame img{display:block;width:100%;max-width:480px;height:auto;object-fit:cover;transition:transform 1s ease,filter .6s ease} .story__frame:hover img{transform:scale(1.05);filter:brightness(1.03) saturate(1.05)} .story__badge{position:absolute;bottom:16px;left:16px;display:flex;align-items:center;gap:12px;padding:12px 22px;border-radius:12px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(34,159,76,.10);box-shadow:0 8px 25px rgba(0,0,0,.04)} .story__badge-num{font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--gold);line-height:1;letter-spacing:-.02em} .story__badge-lbl{font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(0,0,0,.55);font-weight:600;max-width:8ch;line-height:1.3} .story__content{display:flex;flex-direction:column;gap:0} .story__content .eyebrow{color:var(--gold);opacity:.75} .story__content .lead{color:rgba(0,0,0,.6)} .story__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px} .story__stat{padding:22px 18px;border-radius:14px;background:#fff;border:1px solid rgba(34,159,76,.03);text-align:center;transition:all .5s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.015);transform-style:preserve-3d} .story__stat::before{content:"";position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:all .5s ease;z-index:2;pointer-events:none} .story__stat-shine{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.30) 45%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.30) 55%,transparent 65%);transform:translateX(-100%);transition:transform .8s ease} .story__stat:hover .story__stat-shine{transform:translateX(100%)} .story__stat:hover{transform:translateY(-6px) rotateX(2deg);border-color:rgba(34,159,76,.06);box-shadow:0 16px 40px rgba(0,0,0,.03),0 0 0 1px rgba(34,159,76,.02)} .story__stat:hover::before{opacity:1;left:10%;right:10%} .story__stat-num{font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--gold);line-height:1;margin-bottom:6px;position:relative;z-index:2} .story__stat p{font-size:.48rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.5);font-weight:600;margin:0;position:relative;z-index:2} /* ===================== WHAT WE DO ===================== */ #about-what{position:relative;overflow:hidden;padding:100px 0;background:var(--navy-deep)} #about-what::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(62,192,105,.08) 30%,rgba(62,192,105,.15) 50%,rgba(62,192,105,.08) 70%,transparent 95%)} .about-what__bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 35% at 50% 50%,rgba(62,192,105,.03) 0%,transparent 60%),radial-gradient(ellipse 40% 25% at 80% 80%,rgba(255,187,0,.015) 0%,transparent 50%);pointer-events:none;z-index:0} .what__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;z-index:1} .what__card{padding:28px 22px;border-radius:14px;background:linear-gradient(175deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.01) 100%);border:1px solid var(--line-soft);transition:all .45s ease;position:relative;overflow:hidden} .what__card::before{content:"";position:absolute;inset:-1px;border-radius:15px;background:linear-gradient(135deg,rgba(62,192,105,.15),transparent 30%,transparent 60%,rgba(62,192,105,.05));opacity:0;transition:opacity .45s;pointer-events:none;z-index:0} .what__card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .45s;z-index:1} .what__card:hover{transform:translateY(-6px);border-color:rgba(62,192,105,.1);box-shadow:0 20px 50px rgba(0,0,0,.3),0 0 30px rgba(62,192,105,.03)} .what__card:hover::before{opacity:1} .what__card:hover::after{opacity:1} .what__card-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(62,192,105,.08);border:1px solid rgba(62,192,105,.1);margin-bottom:16px;transition:all .4s ease} .what__card:hover .what__card-ic{background:rgba(62,192,105,.14);border-color:rgba(62,192,105,.25);transform:translateY(-3px);box-shadow:0 6px 20px rgba(62,192,105,.08)} .what__card-ic img{width:20px;height:20px;object-fit:contain;filter:brightness(1.15)} .what__card h3{font-size:.95rem;font-weight:700;margin-bottom:8px;line-height:1.3;color:#1a1a1a;position:relative;z-index:1;transition:color .3s} .what__card:hover h3{color:var(--gold)} .what__card p{font-size:.74rem;color:var(--muted-2);line-height:1.55;position:relative;z-index:1;transition:color .3s} .what__card:hover p{color:var(--muted)} /* ===================== ABOUT PROCESS ===================== */ #about-process{position:relative;overflow:hidden;padding:100px 0;background:radial-gradient(ellipse 60% 40% at 30% 50%,rgba(62,192,105,.025) 0%,transparent 60%),radial-gradient(ellipse 50% 30% at 70% 50%,rgba(255,187,0,.015) 0%,transparent 50%),var(--navy)} #about-process::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(62,192,105,.1) 30%,rgba(62,192,105,.2) 50%,rgba(62,192,105,.1) 70%,transparent 95%)} #about-process .proc__glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(62,192,105,.04) 0%,transparent 60%);pointer-events:none;z-index:0;animation:procBgGlow 8s ease-in-out infinite alternate} @keyframes procBgGlow{0%{opacity:.4;transform:translate(-50%,-50%) scale(1)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}} .proc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1} .proc__card{padding:36px 28px;border-radius:16px;background:linear-gradient(175deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.01) 100%);border:1px solid var(--line-soft);transition:all .5s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start} .proc__card::before{content:"";position:absolute;inset:-1px;border-radius:17px;background:linear-gradient(135deg,rgba(62,192,105,.18),transparent 30%,transparent 60%,rgba(62,192,105,.06));opacity:0;transition:opacity .5s;pointer-events:none;z-index:0} .proc__card:hover{transform:translateY(-8px);border-color:rgba(62,192,105,.12);box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 40px rgba(62,192,105,.04)} .proc__card:hover::before{opacity:1} .proc__card-num{font-family:var(--font-display);font-size:2.8rem;font-weight:900;color:var(--gold);opacity:.08;line-height:1;margin-bottom:12px;transition:all .5s ease;position:relative;z-index:1} .proc__card:hover .proc__card-num{opacity:.18;transform:scale(1.05)} .proc__card-body{position:relative;z-index:1} .proc__card h3{font-size:1rem;font-weight:700;margin-bottom:8px;line-height:1.3;color:#1a1a1a;transition:color .3s} .proc__card:hover h3{color:var(--gold)} .proc__card p{font-size:.78rem;color:var(--muted-2);line-height:1.6;transition:color .3s} .proc__card:hover p{color:var(--muted)} /* ===================== TECH PAGE HERO ===================== */ .tech-hero{position:relative;overflow:hidden;padding:160px 0 100px;background:#0d0d0d;display:flex;align-items:center;min-height:70vh} .tech-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden} .tech-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.40) saturate(1.2) contrast(1.08);transform:scale(1.02);animation:techHeroZoom 20s ease-in-out infinite alternate} @keyframes techHeroZoom{from{transform:scale(1.02)}to{transform:scale(1.12)}} .tech-hero__overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.45) 100%),radial-gradient(ellipse 70% 50% at 50% 50%,rgba(0,0,0,.15) 0%,transparent 70%)} .tech-hero__bg::after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 60% 40% at 50% 30%,rgba(34,159,76,.1) 0%,transparent 60%);pointer-events:none} .tech-hero__particles{position:absolute;inset:0;z-index:3;pointer-events:none} .tech-hero__particles span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(34,159,76,.6),0 0 12px rgba(34,159,76,.2);animation:techHeroParticle 8s ease-in-out infinite} .tech-hero__particles span:nth-child(1){top:20%;left:15%;animation-delay:0s;animation-duration:7s} .tech-hero__particles span:nth-child(2){top:35%;left:80%;animation-delay:1.5s;animation-duration:9s;width:4px;height:4px} .tech-hero__particles span:nth-child(3){top:70%;left:10%;animation-delay:2.5s;animation-duration:8s;width:2px;height:2px} .tech-hero__particles span:nth-child(4){top:15%;left:70%;animation-delay:3s;animation-duration:10s;width:2px;height:2px} .tech-hero__particles span:nth-child(5){top:60%;left:50%;animation-delay:1s;animation-duration:7.5s} @keyframes techHeroParticle{0%,100%{opacity:0;transform:translateY(0) scale(0)}20%{opacity:1;transform:translateY(-15px) scale(1)}80%{opacity:1;transform:translateY(-30px) scale(.8)}100%{opacity:0;transform:translateY(-50px) scale(0)}} .tech-hero__inner{position:relative;z-index:5;text-align:center;display:flex;flex-direction:column;align-items:center;perspective:800px;transform-style:preserve-3d} .tech-hero__tag{display:inline-flex;align-items:center;gap:12px;font-size:.55rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:20px} .tech-hero__tag::before,.tech-hero__tag::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .tech-hero__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .tech-hero__title{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.6rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin:0;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.4)} .tech-hero__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 10%,#fffbe6 25%,var(--gold) 45%,var(--gold-2) 60%,#fffbe6 75%,var(--gold) 90%,var(--gold-2) 100%);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(34,159,76,.4)) drop-shadow(0 0 60px rgba(34,159,76,.15));animation:techHeroTitle 6s ease-in-out infinite} @keyframes techHeroTitle{0%,100%{background-position:0% center}50%{background-position:100% center}} .tech-hero__bar{display:flex;align-items:center;gap:12px;margin:18px 0 24px} .tech-hero__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 12px rgba(34,159,76,.5),0 0 24px rgba(34,159,76,.15);animation:techHeroDot 3s ease-in-out infinite} @keyframes techHeroDot{0%,100%{box-shadow:0 0 12px rgba(34,159,76,.5),0 0 24px rgba(34,159,76,.15)}50%{box-shadow:0 0 20px rgba(34,159,76,.7),0 0 40px rgba(34,159,76,.25)}} .tech-hero__line{flex:1;max-width:140px;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold-2),transparent);background-size:300% 100%;animation:barShimmer 4s ease-in-out infinite;border-radius:2px} .tech-hero__sub{color:rgba(255,255,255,.75);font-size:.88rem;max-width:62ch;line-height:1.75;font-weight:500;letter-spacing:.025em;margin:0} /* ===================== TECH PAGE GRID ===================== */ #tech-page{position:relative;overflow:hidden;background:#fcfcfc;padding:100px 0} .tech-page__bg{position:absolute;inset:0;background:radial-gradient(circle 600px at 20% 30%,rgba(34,159,76,.04) 0%,transparent 100%),radial-gradient(circle 400px at 80% 70%,rgba(34,159,76,.03) 0%,transparent 100%);pointer-events:none;z-index:0} .tech-page__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;z-index:1} .tech-page__card{position:relative;overflow:hidden;padding:36px 28px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.06);transition:all .5s cubic-bezier(.23,1,.32,1);display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 2px 12px rgba(0,0,0,.04)} .tech-page__card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .4s;z-index:2} .tech-page__card::after{content:"";position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle at 100% 0%,rgba(34,159,76,.08) 0%,transparent 70%);opacity:0;transition:opacity .4s;z-index:0;pointer-events:none} .tech-page__card:hover{transform:translateY(-8px);border-color:rgba(34,159,76,.15);box-shadow:0 20px 50px rgba(0,0,0,.08),0 0 30px rgba(34,159,76,.04)} .tech-page__card:hover::before{opacity:1} .tech-page__card:hover::after{opacity:1} .tech-page__card>*{position:relative;z-index:1} /* stat badge */ .tech-page__stat{display:inline-flex;align-items:baseline;gap:2px;padding:8px 16px;border-radius:10px;background:linear-gradient(135deg,rgba(34,159,76,.08),rgba(34,159,76,.03));border:1px solid rgba(34,159,76,.1);margin-bottom:14px;transition:all .4s ease} .tech-page__card:hover .tech-page__stat{background:linear-gradient(135deg,rgba(34,159,76,.14),rgba(34,159,76,.06));border-color:rgba(34,159,76,.25);transform:translateY(-2px);box-shadow:0 4px 15px rgba(34,159,76,.08)} .tech-page__val{font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--gold);line-height:1;letter-spacing:-.02em} .tech-page__unit{font-family:var(--font-display);font-size:.5rem;font-weight:700;color:var(--gold);opacity:.55;letter-spacing:.06em} .tech-page__label{display:block;font-size:.44rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.6;margin-bottom:8px;transition:opacity .3s} .tech-page__card:hover .tech-page__label{opacity:1} .tech-page__card h3{font-size:1rem;font-weight:700;margin-bottom:8px;line-height:1.3;color:var(--ink);transition:color .3s} .tech-page__card:hover h3{color:var(--gold)} .tech-page__card p{font-size:.76rem;color:var(--muted);line-height:1.6;transition:color .3s} /* ===================== CERTIFICATIONS ===================== */ #tech-certs{position:relative;overflow:hidden;padding:100px 0;background:#fff} #tech-certs::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(34,159,76,.1) 30%,rgba(34,159,76,.2) 50%,rgba(34,159,76,.1) 70%,transparent 95%)} .certs__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1} .certs__card{position:relative;overflow:hidden;padding:36px 24px 32px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.06);text-align:center;transition:all .5s cubic-bezier(.23,1,.32,1);display:flex;flex-direction:column;align-items:center;box-shadow:0 2px 12px rgba(0,0,0,.04)} .certs__card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .4s;z-index:2} .certs__card::after{content:"";position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle at 100% 0%,rgba(34,159,76,.06) 0%,transparent 70%);opacity:0;transition:opacity .4s;z-index:0;pointer-events:none} .certs__card:hover{transform:translateY(-8px);border-color:rgba(34,159,76,.15);box-shadow:0 20px 50px rgba(0,0,0,.08),0 0 30px rgba(34,159,76,.04)} .certs__card:hover::before{opacity:1} .certs__card:hover::after{opacity:1} .certs__card>*{position:relative;z-index:1} .certs__badge{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,159,76,.1),rgba(34,159,76,.03));border:1.5px solid rgba(34,159,76,.1);margin:0 auto 16px;font-family:var(--font-display);font-size:.65rem;font-weight:800;color:var(--gold);letter-spacing:-.01em;transition:all .4s ease} .certs__card:hover .certs__badge{background:linear-gradient(135deg,rgba(34,159,76,.18),rgba(34,159,76,.06));border-color:rgba(34,159,76,.25);transform:scale(1.08);box-shadow:0 0 20px rgba(34,159,76,.08)} .certs__card h3{font-size:1rem;font-weight:700;margin-bottom:10px;line-height:1.3;color:var(--ink);transition:color .3s} .certs__card:hover h3{color:var(--gold)} .certs__card p{font-size:.76rem;color:var(--muted);line-height:1.55;margin-bottom:14px} .certs__meta{display:inline-block;font-size:.44rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);opacity:.6;padding:4px 14px;border:1px solid rgba(34,159,76,.1);border-radius:100px;transition:all .35s ease} .certs__card:hover .certs__meta{opacity:1;border-color:rgba(34,159,76,.25);background:rgba(34,159,76,.04)} /* ===================== GALLERY HERO ===================== */ .gallery-hero{position:relative;overflow:hidden;padding:160px 0 100px;background:#0d0d0d;display:flex;align-items:center;min-height:70vh} .gallery-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden} .gallery-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.40) saturate(1.2) contrast(1.08);transform:scale(1.02);animation:galleryHeroZoom 20s ease-in-out infinite alternate} @keyframes galleryHeroZoom{from{transform:scale(1.02)}to{transform:scale(1.12)}} .gallery-hero__overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.45) 100%),radial-gradient(ellipse 70% 50% at 50% 50%,rgba(0,0,0,.15) 0%,transparent 70%)} .gallery-hero__bg::after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 60% 40% at 50% 30%,rgba(34,159,76,.1) 0%,transparent 60%);pointer-events:none} .gallery-hero__particles{position:absolute;inset:0;z-index:3;pointer-events:none} .gallery-hero__particles span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(34,159,76,.6),0 0 12px rgba(34,159,76,.2);animation:galleryHeroParticle 8s ease-in-out infinite} .gallery-hero__particles span:nth-child(1){top:20%;left:15%;animation-delay:0s;animation-duration:7s} .gallery-hero__particles span:nth-child(2){top:35%;left:80%;animation-delay:1.5s;animation-duration:9s;width:4px;height:4px} .gallery-hero__particles span:nth-child(3){top:70%;left:10%;animation-delay:2.5s;animation-duration:8s;width:2px;height:2px} .gallery-hero__particles span:nth-child(4){top:15%;left:70%;animation-delay:3s;animation-duration:10s;width:2px;height:2px} .gallery-hero__particles span:nth-child(5){top:60%;left:50%;animation-delay:1s;animation-duration:7.5s} @keyframes galleryHeroParticle{0%,100%{opacity:0;transform:translateY(0) scale(0)}20%{opacity:1;transform:translateY(-15px) scale(1)}80%{opacity:1;transform:translateY(-30px) scale(.8)}100%{opacity:0;transform:translateY(-50px) scale(0)}} .gallery-hero__inner{position:relative;z-index:5;text-align:center;display:flex;flex-direction:column;align-items:center;perspective:800px;transform-style:preserve-3d} .gallery-hero__tag{display:inline-flex;align-items:center;gap:12px;font-size:.55rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:20px} .gallery-hero__tag::before,.gallery-hero__tag::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .gallery-hero__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .gallery-hero__title{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.6rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin:0;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.4)} .gallery-hero__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 10%,#fffbe6 25%,var(--gold) 45%,var(--gold-2) 60%,#fffbe6 75%,var(--gold) 90%,var(--gold-2) 100%);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(34,159,76,.4)) drop-shadow(0 0 60px rgba(34,159,76,.15));animation:galleryHeroTitle 6s ease-in-out infinite} @keyframes galleryHeroTitle{0%,100%{background-position:0% center}50%{background-position:100% center}} .gallery-hero__bar{display:flex;align-items:center;gap:12px;margin:18px 0 24px} .gallery-hero__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 12px rgba(34,159,76,.5),0 0 24px rgba(34,159,76,.15);animation:galleryHeroDot 3s ease-in-out infinite} @keyframes galleryHeroDot{0%,100%{box-shadow:0 0 12px rgba(34,159,76,.5),0 0 24px rgba(34,159,76,.15)}50%{box-shadow:0 0 20px rgba(34,159,76,.7),0 0 40px rgba(34,159,76,.25)}} .gallery-hero__line{flex:1;max-width:140px;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold-2),transparent);background-size:300% 100%;animation:barShimmer 4s ease-in-out infinite;border-radius:2px} .gallery-hero__sub{color:rgba(255,255,255,.75);font-size:.88rem;max-width:62ch;line-height:1.75;font-weight:500;letter-spacing:.025em;margin:0} /* ===================== GALLERY PAGE ===================== */ #gallery-page{position:relative;overflow:hidden;background:#fcfcfc;padding:100px 0} .gallery-page__bg{position:absolute;inset:0;background:radial-gradient(circle 600px at 30% 20%,rgba(34,159,76,.04) 0%,transparent 100%),radial-gradient(circle 400px at 70% 80%,rgba(34,159,76,.03) 0%,transparent 100%);pointer-events:none;z-index:0} .gallery-page__filters{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:40px;position:relative;z-index:1;flex-wrap:wrap} .gallery-page__pill{padding:8px 22px;border-radius:100px;border:1px solid rgba(0,0,0,.08);background:#fff;color:var(--muted);font-size:.76rem;font-weight:600;cursor:pointer;transition:all .35s ease;font-family:var(--font-sans);box-shadow:0 2px 8px rgba(0,0,0,.03)} .gallery-page__pill:hover{border-color:rgba(34,159,76,.2);color:var(--gold);background:rgba(34,159,76,.04)} .gallery-page__pill.is-active{background:var(--gold);color:#1a1a1a;border-color:var(--gold);box-shadow:0 4px 15px rgba(34,159,76,.25)} .gallery-page__masonry{columns:3;column-gap:18px;position:relative;z-index:1} .gallery-page__item{break-inside:avoid;display:block;margin-bottom:18px;border-radius:14px;overflow:hidden;position:relative;border:1px solid rgba(0,0,0,.06);transition:all .5s cubic-bezier(.23,1,.32,1);text-decoration:none;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.04)} .gallery-page__item::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .4s;z-index:3} .gallery-page__item:hover{transform:translateY(-6px);border-color:rgba(34,159,76,.15);box-shadow:0 20px 50px rgba(0,0,0,.1),0 0 30px rgba(34,159,76,.04)} .gallery-page__item:hover::before{opacity:1} .gallery-page__item img{width:100%;display:block;transition:transform .8s cubic-bezier(.23,1,.32,1)} .gallery-page__item:hover img{transform:scale(1.08)} .gallery-page__overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .5s ease} .gallery-page__item:hover .gallery-page__overlay{opacity:1} .gallery-page__icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(34,159,76,.2);border:1px solid rgba(34,159,76,.25);color:var(--gold);transform:translateY(10px) scale(.8);transition:transform .5s cubic-bezier(.23,1,.32,1)} .gallery-page__icon svg{width:16px;height:16px} .gallery-page__item:hover .gallery-page__icon{transform:translateY(0) scale(1)} .gallery-page__label{font-size:.72rem;font-weight:600;color:#fff;text-align:center;padding:0 12px;transform:translateY(8px);transition:transform .5s cubic-bezier(.23,1,.32,1) .05s;text-shadow:0 1px 6px rgba(0,0,0,.3)} .gallery-page__item:hover .gallery-page__label{transform:translateY(0)} /* ===================== CONTACT HERO ===================== */ .contact-hero{position:relative;overflow:hidden;padding:160px 0 100px;background:#0d0d0d;display:flex;align-items:center;min-height:70vh} .contact-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden} .contact-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.40) saturate(1.2) contrast(1.08);transform:scale(1.02);animation:contactHeroZoom 20s ease-in-out infinite alternate} @keyframes contactHeroZoom{from{transform:scale(1.02)}to{transform:scale(1.12)}} .contact-hero__overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.45) 100%),radial-gradient(ellipse 70% 50% at 50% 50%,rgba(0,0,0,.15) 0%,transparent 70%)} .contact-hero__bg::after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 60% 40% at 50% 30%,rgba(34,159,76,.1) 0%,transparent 60%);pointer-events:none} .contact-hero__particles{position:absolute;inset:0;z-index:3;pointer-events:none} .contact-hero__particles span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(34,159,76,.6),0 0 12px rgba(34,159,76,.2);animation:contactHeroParticle 8s ease-in-out infinite} .contact-hero__particles span:nth-child(1){top:20%;left:15%;animation-delay:0s;animation-duration:7s} .contact-hero__particles span:nth-child(2){top:35%;left:80%;animation-delay:1.5s;animation-duration:9s;width:4px;height:4px} .contact-hero__particles span:nth-child(3){top:70%;left:10%;animation-delay:2.5s;animation-duration:8s;width:2px;height:2px} .contact-hero__particles span:nth-child(4){top:15%;left:70%;animation-delay:3s;animation-duration:10s;width:2px;height:2px} .contact-hero__particles span:nth-child(5){top:60%;left:50%;animation-delay:1s;animation-duration:7.5s} @keyframes contactHeroParticle{0%,100%{opacity:0;transform:translateY(0) scale(0)}20%{opacity:1;transform:translateY(-15px) scale(1)}80%{opacity:1;transform:translateY(-30px) scale(.8)}100%{opacity:0;transform:translateY(-50px) scale(0)}} .contact-hero__inner{position:relative;z-index:5;text-align:center;display:flex;flex-direction:column;align-items:center;perspective:800px;transform-style:preserve-3d} .contact-hero__tag{display:inline-flex;align-items:center;gap:12px;font-size:.55rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:20px} .contact-hero__tag::before,.contact-hero__tag::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .contact-hero__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .contact-hero__title{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.6rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin:0;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.4)} .contact-hero__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 10%,#fffbe6 25%,var(--gold) 45%,var(--gold-2) 60%,#fffbe6 75%,var(--gold) 90%,var(--gold-2) 100%);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(34,159,76,.4)) drop-shadow(0 0 60px rgba(34,159,76,.15));animation:contactHeroTitle 6s ease-in-out infinite} @keyframes contactHeroTitle{0%,100%{background-position:0% center}50%{background-position:100% center}} .contact-hero__bar{display:flex;align-items:center;gap:12px;margin:18px 0 24px} .contact-hero__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 12px rgba(34,159,76,.5),0 0 24px rgba(34,159,76,.15);animation:contactHeroDot 3s ease-in-out infinite} @keyframes contactHeroDot{0%,100%{box-shadow:0 0 12px rgba(34,159,76,.5),0 0 24px rgba(34,159,76,.15)}50%{box-shadow:0 0 20px rgba(34,159,76,.7),0 0 40px rgba(34,159,76,.25)}} .contact-hero__line{flex:1;max-width:140px;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold-2),transparent);background-size:300% 100%;animation:barShimmer 4s ease-in-out infinite;border-radius:2px} .contact-hero__sub{color:rgba(255,255,255,.75);font-size:.88rem;max-width:62ch;line-height:1.75;font-weight:500;letter-spacing:.025em;margin:0} /* ===================== CONTACT MAIN ===================== */ #contact-main{position:relative;overflow:hidden;padding:90px 0;background:#fcfcfc} .contact-main__bg{position:absolute;inset:0;background:radial-gradient(circle 600px at 20% 30%,rgba(34,159,76,.04) 0%,transparent 100%),radial-gradient(circle 400px at 80% 70%,rgba(34,159,76,.03) 0%,transparent 100%);pointer-events:none;z-index:0} .contact-main__orb{position:absolute;top:30%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(34,159,76,.06) 0%,transparent 60%);filter:blur(60px);pointer-events:none;z-index:0;animation:contactOrb 10s ease-in-out infinite alternate} @keyframes contactOrb{0%{opacity:.3;transform:translate(0,0)}100%{opacity:.7;transform:translate(-30px,20px)}} .contact-main__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:start;position:relative;z-index:1} .contact-main__info{display:grid;gap:14px} .contact-main__card{display:flex;align-items:flex-start;gap:16px;padding:22px 26px;border:1px solid rgba(0,0,0,.06);border-radius:16px;background:#fff;transition:all .45s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04)} .contact-main__card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .4s;z-index:1} .contact-main__card:hover{transform:translateY(-5px);border-color:rgba(34,159,76,.15);box-shadow:0 20px 50px rgba(0,0,0,.08),0 0 30px rgba(34,159,76,.04)} .contact-main__card:hover::before{opacity:1} .contact-main__card-accent{position:absolute;top:0;left:0;width:3px;height:0;background:linear-gradient(180deg,var(--gold),rgba(34,159,76,.1));border-radius:0 0 3px 3px;transition:height .5s cubic-bezier(.23,1,.32,1);pointer-events:none} .contact-main__card:hover .contact-main__card-accent{height:100%} .contact-main__card-ghost{position:absolute;bottom:-8px;right:-6px;width:80px;height:80px;opacity:0;color:rgba(34,159,76,.06);pointer-events:none;transition:opacity .5s} .contact-main__card:hover .contact-main__card-ghost{opacity:1} .contact-main__card-ghost svg{width:100%;height:100%} .contact-main__card-content{display:flex;flex-direction:column;gap:3px;min-width:0} .contact-main__ic{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,159,76,.08),rgba(34,159,76,.03));border:1px solid rgba(34,159,76,.1);color:var(--gold);transition:all .4s;margin-top:2px} .contact-main__card:hover .contact-main__ic{background:linear-gradient(135deg,rgba(34,159,76,.15),rgba(34,159,76,.06));border-color:rgba(34,159,76,.25);transform:scale(1.08) translateY(-1px);box-shadow:0 0 20px rgba(34,159,76,.1)} .contact-main__ic svg{width:18px;height:18px} .contact-main__card-lbl{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:1px} .contact-main__link{color:var(--ink);font-size:.86rem;line-height:1.5;text-decoration:none;transition:color .3s;width:-moz-fit-content;width:fit-content} .contact-main__link:hover{color:var(--gold)} .contact-main__text{color:var(--ink);font-size:.86rem;line-height:1.5;margin:0} .contact-main__wa{display:flex;align-items:center;gap:14px;padding:16px 20px;border:1px solid rgba(37,211,102,.1);border-radius:14px;background:linear-gradient(135deg,rgba(37,211,102,.04),rgba(37,211,102,.01));text-decoration:none;transition:all .4s;margin-top:4px;position:relative;overflow:hidden} .contact-main__wa::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(37,211,102,.08),transparent 50%);opacity:0;transition:opacity .4s} .contact-main__wa:hover::before{opacity:1} .contact-main__wa:hover{transform:translateY(-3px);border-color:rgba(37,211,102,.25);box-shadow:0 12px 30px rgba(0,0,0,.08),0 0 20px rgba(37,211,102,.06)} .contact-main__wa > svg{width:26px;height:26px;flex:none;color:#25d366;transition:transform .4s;position:relative;z-index:1} .contact-main__wa:hover > svg{transform:scale(1.1) rotate(-4deg)} .contact-main__wa-content{display:flex;flex-direction:column;gap:2px;position:relative;z-index:1} .contact-main__wa-lbl{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)} .contact-main__wa-txt{font-size:.82rem;color:var(--muted)} .contact-main__wa-arrow{margin-left:auto;color:var(--muted);transition:all .4s;position:relative;z-index:1} .contact-main__wa-arrow svg{width:16px;height:16px} .contact-main__wa:hover .contact-main__wa-arrow{color:var(--gold);transform:translateX(3px)} .contact-main__form-wrap{position:relative} .contact-main__form-ornament{position:absolute;top:-8px;right:-8px;width:60px;height:60px;border-radius:50%;border:1.5px solid rgba(34,159,76,.08);pointer-events:none;z-index:0;animation:contactOrnament 8s ease-in-out infinite alternate} @keyframes contactOrnament{0%{transform:scale(1) rotate(0)}100%{transform:scale(1.15) rotate(15deg)}} .contact-main__form-ornament::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(34,159,76,.05);animation:contactOrnament 6s ease-in-out infinite alternate-reverse} .contact-main__form{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:36px 34px;transition:all .4s;position:relative;z-index:1;box-shadow:0 4px 20px rgba(0,0,0,.04)} .contact-main__form:focus-within{border-color:rgba(34,159,76,.2);box-shadow:0 0 40px rgba(34,159,76,.06),0 8px 30px rgba(0,0,0,.06)} .contact-main__form-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid rgba(0,0,0,.06);position:relative} .contact-main__form-head::after{content:"";position:absolute;bottom:-1px;left:0;width:40px;height:1.5px;background:var(--gold);border-radius:2px} .contact-main__form-ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,159,76,.1),rgba(34,159,76,.03));border:1px solid rgba(34,159,76,.1);color:var(--gold)} .contact-main__form-ic svg{width:20px;height:20px} .contact-main__form-head-lbl{display:block;font-size:.92rem;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:3px} .contact-main__form-head-sub{display:block;font-size:.72rem;color:var(--muted);line-height:1.4} .contact-main__ok{display:none;padding:14px 18px;border-radius:12px;background:rgba(34,159,76,.08);border:1px solid rgba(34,159,76,.1);color:var(--gold);font-size:.82rem;margin-bottom:20px;align-items:center;gap:10px;animation:fadeUp .45s var(--ease)} .contact-main__ok.is-show{display:flex} .contact-main__ok::before{content:"";width:18px;height:18px;border-radius:50%;background:rgba(34,159,76,.2) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23c8a000' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;flex:none} .contact-main__field{position:relative;margin-bottom:16px} .contact-main__field label{display:block;font-size:.68rem;font-weight:600;letter-spacing:.04em;color:var(--muted);margin-bottom:5px;text-transform:uppercase} .contact-main__field label span{color:var(--gold);opacity:.7} .contact-main__field input,.contact-main__field textarea,.contact-main__field select{width:100%;padding:14px 16px;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:10px;color:var(--ink);font-size:.85rem;font-family:var(--font-body);outline:none;transition:all .35s;resize:vertical;min-height:48px;box-sizing:border-box} .contact-main__field textarea{min-height:110px} .contact-main__field select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23c8a000' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:40px;-webkit-appearance:none;appearance:none} .contact-main__field input::placeholder,.contact-main__field textarea::placeholder{color:var(--muted)} .contact-main__field input:focus,.contact-main__field textarea:focus,.contact-main__field select:focus{border-color:rgba(34,159,76,.25);background:#fff;box-shadow:0 0 0 3px rgba(34,159,76,.06),0 4px 16px rgba(0,0,0,.06)} .contact-main__field select option{background:#fff;color:var(--ink)} .contact-main__focus{position:absolute;bottom:0;left:10%;width:0;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .5s cubic-bezier(.23,1,.32,1);border-radius:2px;pointer-events:none} .contact-main__field input:focus ~ .contact-main__focus, .contact-main__field textarea:focus ~ .contact-main__focus, .contact-main__field select:focus ~ .contact-main__focus{width:80%} .contact-main__row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .contact-main__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 36px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1a1a;font-weight:700;font-size:.82rem;letter-spacing:.04em;cursor:pointer;transition:all .4s cubic-bezier(.23,1,.32,1);text-transform:uppercase;font-family:var(--font-display)} .contact-main__btn svg{width:18px;height:18px;transition:transform .4s} .contact-main__btn:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(34,159,76,.3),0 0 20px rgba(34,159,76,.1)} .contact-main__btn:hover svg{transform:scale(1.1)} .contact-main__btn:active{transform:translateY(-1px)} .contact-main__note{font-size:.72rem;color:var(--muted);margin-top:14px;text-align:center} .contact-main__map{border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,.06);margin-top:44px;min-height:320px;background:#f5f5f5;position:relative;transition:all .4s;box-shadow:0 2px 12px rgba(0,0,0,.04)} .contact-main__map::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(34,159,76,.15),rgba(34,159,76,.25),rgba(34,159,76,.15),transparent);opacity:0;transition:opacity .4s;z-index:2;pointer-events:none} .contact-main__map:hover{border-color:rgba(34,159,76,.12)} .contact-main__map:hover::before{opacity:1} .contact-main__map iframe{width:100%;height:340px;border:0;filter:grayscale(1) invert(.92) contrast(.85) hue-rotate(180deg);display:block} .contact-main__map-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;text-align:center;color:var(--muted);min-height:320px} .contact-main__map-fallback svg{color:var(--gold);opacity:.5} .contact-main__map-fallback p{font-size:.88rem;color:var(--muted);max-width:40ch;line-height:1.6} .contact-main__map-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border:1px solid rgba(34,159,76,.12);border-radius:8px;color:var(--gold);font-size:.75rem;font-weight:600;text-decoration:none;transition:all .35s;text-transform:uppercase;letter-spacing:.08em} .contact-main__map-btn:hover{background:rgba(34,159,76,.06);border-color:rgba(34,159,76,.25);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.06)} .contact-main__connect{display:flex;align-items:center;gap:20px;margin-top:44px;padding:28px 32px;border:1px solid rgba(0,0,0,.06);border-radius:16px;background:#fff} .contact-main__connect-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(34,159,76,.1),transparent)} .contact-main__connect-inner{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center} .contact-main__connect-lbl{font-size:.75rem;color:var(--muted);letter-spacing:.02em;white-space:nowrap} .contact-main__connect-actions{display:flex;gap:12px} .contact-main__connect-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid rgba(0,0,0,.08);border-radius:10px;color:var(--muted);font-size:.78rem;font-weight:600;text-decoration:none;transition:all .35s;background:#fff} .contact-main__connect-btn svg{width:16px;height:16px;color:var(--gold);transition:transform .35s} .contact-main__connect-btn:hover{color:var(--ink);border-color:rgba(34,159,76,.2);background:rgba(34,159,76,.04);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.06)} .contact-main__connect-btn:hover svg{transform:scale(1.1)} /* ===================== QUOTE HERO ===================== */ .quote-hero{position:relative;overflow:hidden;padding:160px 0 100px;background:var(--navy-deep);display:flex;align-items:center;min-height:60vh} .quote-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden} .quote-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7) saturate(1.15) contrast(1.08);transform:scale(1.02)} .quote-hero__overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(175deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.45) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.92) 100%),radial-gradient(ellipse 100% 45% at 50% 100%,rgba(255,255,255,.7),transparent 60%);box-shadow:inset 0 0 200px rgba(0,0,0,.04)} .quote-hero__bg::after{content:"";position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 70% 50% at 50% 20%,rgba(62,192,105,.15) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 30% 80%,rgba(255,215,0,.06) 0%,transparent 50%);pointer-events:none} .quote-hero__glow{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:90%;height:600px;background:radial-gradient(closest-side,rgba(62,192,105,.08) 0%,transparent 60%);filter:blur(50px);pointer-events:none;z-index:1;animation:quoteGlow 6s ease-in-out infinite alternate} @keyframes quoteGlow{0%{opacity:.4;transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50%) scale(1.08)}} .quote-hero__beam{position:absolute;top:0;left:-30%;width:60%;height:100%;z-index:4;background:linear-gradient(90deg,transparent 0%,rgba(62,192,105,.04) 30%,rgba(62,192,105,.08) 50%,rgba(62,192,105,.04) 70%,transparent 100%);transform:skewX(-15deg);animation:quoteBeam 10s ease-in-out infinite;pointer-events:none} @keyframes quoteBeam{0%,100%{transform:translateX(-30%) skewX(-15deg);opacity:.2}50%{transform:translateX(200%) skewX(-15deg);opacity:.6}} .quote-hero__particles{position:absolute;inset:0;z-index:3;pointer-events:none} .quote-hero__particles span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(62,192,105,.6),0 0 12px rgba(62,192,105,.2);animation:quoteParticle 8s ease-in-out infinite} .quote-hero__particles span:nth-child(1){top:20%;left:15%;animation-delay:0s;animation-duration:7s} .quote-hero__particles span:nth-child(2){top:35%;left:80%;animation-delay:1.5s;animation-duration:9s;width:4px;height:4px} .quote-hero__particles span:nth-child(3){top:70%;left:10%;animation-delay:2.5s;animation-duration:8s;width:2px;height:2px} @keyframes quoteParticle{0%,100%{opacity:0;transform:translateY(0) scale(0)}20%{opacity:1;transform:translateY(-15px) scale(1)}80%{opacity:1;transform:translateY(-30px) scale(.8)}100%{opacity:0;transform:translateY(-50px) scale(0)}} .quote-hero__inner{position:relative;z-index:5;text-align:center;display:flex;flex-direction:column;align-items:center} .quote-hero__tag{display:inline-flex;align-items:center;gap:12px;font-size:.5rem;letter-spacing:.4em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:.6;margin-bottom:20px;text-shadow:0 0 20px rgba(62,192,105,.1)} .quote-hero__tag::before,.quote-hero__tag::after{content:"";width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .quote-hero__tag::before{background:linear-gradient(270deg,transparent,var(--gold))} .quote-hero__title{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.6rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin:0;color:#1a1a1a;text-shadow:0 2px 30px rgba(0,0,0,.08)} .quote-hero__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 10%,#fffbe6 25%,var(--gold) 45%,var(--gold-2) 60%,#fffbe6 75%,var(--gold) 90%,var(--gold-2) 100%);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 40px rgba(62,192,105,.35)) drop-shadow(0 0 80px rgba(255,215,0,.15));animation:quoteTitle 6s ease-in-out infinite} @keyframes quoteTitle{0%,100%{background-position:0% center}50%{background-position:100% center}} .quote-hero__bar{display:flex;align-items:center;gap:12px;margin:18px 0 24px} .quote-hero__dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 12px rgba(62,192,105,.5),0 0 24px rgba(62,192,105,.15);animation:quoteDot 3s ease-in-out infinite} @keyframes quoteDot{0%,100%{box-shadow:0 0 12px rgba(62,192,105,.5),0 0 24px rgba(62,192,105,.15)}50%{box-shadow:0 0 20px rgba(62,192,105,.7),0 0 40px rgba(62,192,105,.25)}} .quote-hero__line{flex:1;max-width:140px;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold-2),transparent);background-size:300% 100%;animation:barShimmer 4s ease-in-out infinite;border-radius:2px} .quote-hero__sub{color:var(--muted);font-size:.88rem;max-width:62ch;line-height:1.75;font-weight:500;letter-spacing:.025em;margin:0;text-shadow:0 2px 15px rgba(0,0,0,.06)} /* ===================== QUOTE MAIN ===================== */ #quote-main{position:relative;overflow:hidden;padding:90px 0;background:var(--navy)} .quote-main__bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 35% at 50% 0%,rgba(62,192,105,.04) 0%,transparent 60%),radial-gradient(ellipse 40% 25% at 50% 100%,rgba(255,187,0,.02) 0%,transparent 50%);pointer-events:none;z-index:0} .quote-main__orb{position:absolute;top:20%;left:-10%;width:450px;height:450px;border-radius:50%;background:radial-gradient(circle,rgba(62,192,105,.04) 0%,transparent 60%);filter:blur(60px);pointer-events:none;z-index:0;animation:quoteOrb 12s ease-in-out infinite alternate} @keyframes quoteOrb{0%{opacity:.3;transform:translate(0,0) scale(1)}100%{opacity:1;transform:translate(30px,20px) scale(1.1)}} #quote-main::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(62,192,105,.1) 30%,rgba(62,192,105,.2) 50%,rgba(62,192,105,.1) 70%,transparent 95%)} .quote-main__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start;position:relative;z-index:1} .quote-main__form-wrap{position:relative} .quote-main__form-ornament{position:absolute;top:-8px;right:-8px;width:64px;height:64px;border-radius:50%;border:1.5px solid rgba(62,192,105,.06);pointer-events:none;z-index:0;animation:quoteOrnament 8s ease-in-out infinite alternate} @keyframes quoteOrnament{0%{transform:rotate(0) scale(1)}100%{transform:rotate(90deg) scale(1.1)}} .quote-main__form-ornament::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(62,192,105,.03);animation:quoteOrnament 6s ease-in-out infinite alternate-reverse} .quote-main__form{background:rgba(0,0,0,.02);border:1px solid var(--line-soft);border-radius:16px;padding:36px 34px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .4s;position:relative;z-index:1} .quote-main__form:focus-within{border-color:rgba(62,192,105,.14);box-shadow:0 0 40px rgba(62,192,105,.03)} .quote-main__form-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--line-soft);position:relative} .quote-main__form-head::after{content:"";position:absolute;bottom:-1px;left:0;width:40px;height:1.5px;background:var(--gold);border-radius:2px} .quote-main__form-ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(62,192,105,.08);border:1px solid rgba(62,192,105,.1);color:var(--gold)} .quote-main__form-ic svg{width:20px;height:20px} .quote-main__form-head-lbl{display:block;font-size:.92rem;font-weight:700;color:#1a1a1a;line-height:1.3;margin-bottom:3px} .quote-main__form-head-sub{display:block;font-size:.72rem;color:var(--muted-2);line-height:1.4} .quote-main__ok{display:none;padding:14px 18px;border-radius:12px;background:rgba(62,192,105,.08);border:1px solid rgba(62,192,105,.1);color:var(--gold-soft);font-size:.82rem;margin-bottom:20px;align-items:center;gap:10px;animation:fadeUp .45s var(--ease)} .quote-main__ok.is-show{display:flex} .quote-main__ok::before{content:"";width:18px;height:18px;border-radius:50%;background:rgba(62,192,105,.2) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23ffe300' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;flex:none} .quote-main__field{position:relative;margin-bottom:16px} .quote-main__field label{display:block;font-size:.68rem;font-weight:600;letter-spacing:.04em;color:var(--muted-2);margin-bottom:5px;text-transform:uppercase} .quote-main__field label span{color:var(--gold);opacity:.6} .quote-main__field input,.quote-main__field textarea,.quote-main__field select{width:100%;padding:14px 16px;background:rgba(0,0,0,.02);border:1px solid var(--line-soft);border-radius:10px;color:#1a1a1a;font-size:.85rem;font-family:var(--font-body);outline:none;transition:all .35s;resize:vertical;min-height:48px;-webkit-appearance:none;appearance:none;box-sizing:border-box} .quote-main__field select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23ffe300' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:40px} .quote-main__field textarea{min-height:110px} .quote-main__field input::placeholder,.quote-main__field textarea::placeholder{color:var(--muted-2)} .quote-main__field input:focus,.quote-main__field textarea:focus,.quote-main__field select:focus{border-color:rgba(62,192,105,.18);background:rgba(62,192,105,.03);box-shadow:0 0 0 1px rgba(62,192,105,.06),0 4px 16px rgba(0,0,0,.12)} .quote-main__field select option{background:var(--navy);color:#1a1a1a} .quote-main__focus{position:absolute;bottom:0;left:10%;width:0;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .5s cubic-bezier(.23,1,.32,1);border-radius:2px;pointer-events:none} .quote-main__field input:focus ~ .quote-main__focus, .quote-main__field textarea:focus ~ .quote-main__focus, .quote-main__field select:focus ~ .quote-main__focus{width:80%} .quote-main__row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .quote-main__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 36px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--navy-deep);font-weight:700;font-size:.82rem;letter-spacing:.04em;cursor:pointer;transition:all .4s cubic-bezier(.23,1,.32,1);text-transform:uppercase;font-family:var(--font-display)} .quote-main__btn svg{width:16px;height:16px;transition:transform .4s} .quote-main__btn:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(62,192,105,.25),0 0 20px rgba(62,192,105,.1)} .quote-main__btn:hover svg{transform:translateX(4px)} .quote-main__btn:active{transform:translateY(-1px)} .quote-main__note{font-size:.72rem;color:var(--muted-2);margin-top:14px;text-align:center} .quote-main__sidebar{display:grid;gap:20px} .quote-main__side-card{padding:28px;border:1px solid var(--line-soft);border-radius:16px;background:rgba(0,0,0,.02);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:all .4s;position:relative} .quote-main__side-card:hover{border-color:rgba(62,192,105,.1);box-shadow:0 14px 35px rgba(0,0,0,.25),0 0 20px rgba(62,192,105,.02)} .quote-main__side-title{display:block;font-size:1.05rem;font-weight:700;color:#1a1a1a;margin-bottom:8px;letter-spacing:-.01em} .quote-main__side-sub{font-size:.78rem;color:var(--muted-2);line-height:1.65;margin-bottom:20px} .quote-main__side-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line-soft);border-radius:12px;transition:all .35s;margin-bottom:10px;background:rgba(0,0,0,.008)} .quote-main__side-item:last-child{margin-bottom:0} .quote-main__side-item:hover{background:rgba(0,0,0,.015);border-color:rgba(62,192,105,.08);transform:translateX(3px);box-shadow:0 4px 12px rgba(0,0,0,.1)} .quote-main__side-ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(62,192,105,.07);border:1px solid rgba(62,192,105,.1);color:var(--gold);transition:all .35s} .quote-main__side-item:hover .quote-main__side-ic{background:rgba(62,192,105,.12);transform:scale(1.05)} .quote-main__side-ic svg{width:16px;height:16px} .quote-main__side-lbl{display:block;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted-2);margin-bottom:1px} .quote-main__side-link{font-size:.82rem;color:var(--muted);text-decoration:none;transition:color .3s;background:transparent} .quote-main__side-link:hover{color:var(--gold)} .quote-main__benefits{display:grid;gap:8px;list-style:none;padding:0;margin:0} .quote-main__benefits li{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8rem;padding:11px 14px;border:1px solid rgba(0,0,0,.015);border-radius:10px;transition:all .35s;background:rgba(0,0,0,.005)} .quote-main__benefits li:hover{color:var(--muted);background:rgba(0,0,0,.02);border-color:rgba(62,192,105,.05);transform:translateX(3px)} .quote-main__benefits-ic{width:20px;height:20px;flex:none;display:grid;place-items:center;color:var(--gold);opacity:.5;transition:all .35s} .quote-main__benefits li:hover .quote-main__benefits-ic{opacity:1;transform:scale(1.1)} .quote-main__benefits-ic svg{width:14px;height:14px} /* ===================== RESPONSIVE ===================== */ @media (max-width:1080px){ .hero__content{max-width:620px} .svc-grid,.tech-grid{grid-template-columns:repeat(2,1fr)} .mat-grid{grid-template-columns:repeat(2,1fr)} .footer__grid{grid-template-columns:1fr 1fr} #numbers-that-matter .nums-grid{grid-template-columns:repeat(2,1fr);gap:16px} .nums-card{padding:28px 16px 24px} .nums-card__num{font-size:2rem} #materials .mat-grid{grid-template-columns:repeat(2,1fr);gap:16px} #services .svc-grid{grid-template-columns:repeat(2,1fr);gap:16px} #services .svc-card{padding:26px 20px 22px} .col__grid{gap:18px} .col__head-sub{max-width:40ch} } @media (max-width:1080px){ .what__grid{grid-template-columns:repeat(2,1fr)} .what__card{padding:24px 18px} .story__layout{grid-template-columns:1fr;gap:40px} .story__frame img{max-width:100%} .story__stats{gap:10px} } @media (max-width:1080px){ .contact-main__grid{grid-template-columns:1fr;gap:40px} } @media (max-width:1080px){ .quote-main__grid{grid-template-columns:1fr;gap:40px} } @media (max-width:860px){ .hero__inner{min-height:0;padding:60px 0 40px} .hero__line--top{font-size:clamp(1.5rem,7vw,2.2rem)} .hero__line--bot{font-size:clamp(.8rem,3vw,.95rem)} .hero__sub{font-size:.75rem} .hero__scroll{display:none} .nav,.header__cta .btn{display:none} .nav-toggle{display:flex} #about-legacy{min-height:auto} .legacy__layout{grid-template-columns:1fr;gap:48px;padding-top:60px;padding-bottom:60px} .legacy__left{flex-direction:row;justify-content:center;gap:32px} .legacy__stamp{width:110px;height:110px} .legacy__stamp svg{width:86px;height:86px} .legacy__years-num{font-size:3.2rem} .legacy__years-plus{font-size:2rem} .legacy__right{align-items:center;text-align:center} .legacy__label{margin-bottom:10px} .legacy__label-line{display:none} .legacy__title{font-size:clamp(2.4rem,5vw,3.5rem)} .legacy__rule{margin:14px auto 18px} .legacy__text{max-width:56ch} .legacy__link{align-self:center} .legacy__stats{grid-template-columns:repeat(2,1fr);gap:12px} .legacy__orbital{width:260px;height:260px} .legacy__aurora{filter:blur(60px);opacity:.5} .legacy__stat-icon{width:28px;height:28px} .legacy__stat-bar{display:none} #infrastructure .infra-card{padding:24px 20px;gap:20px} .infra-card__stat{width:90px;padding-right:18px} .infra-card__stat-num{font-size:1.6rem} #infrastructure .infra-card--featured .infra-card__stat-num{font-size:2.2rem} #tech-home .tech-grid{grid-template-columns:repeat(2,1fr);gap:16px} .tech-card{padding:20px 18px;gap:14px} .tech-card__icon{width:42px;height:42px;font-size:.46rem} .tech-card__body p{font-size:.66rem} .tech-card__stat-val{font-size:.52rem;padding:4px 10px} .journey__track::before{left:20px;right:20px} .journey__item{padding:0 6px;min-height:340px} .journey__card{max-width:150px;padding:16px 14px} .journey__connector{min-height:20px} .journey__year{font-size:1rem} .journey__card h3{font-size:.65rem} .journey__card p{font-size:.55rem} .journey__dot{width:10px;height:10px} .col__grid{grid-template-columns:repeat(2,1fr);gap:16px} .col__card-body{padding:20px} .col__head{margin-bottom:44px} #services .svc-grid{grid-template-columns:1fr;gap:16px} #services .svc-card{padding:20px 16px 18px} #numbers-that-matter .nums-grid{grid-template-columns:repeat(2,1fr);gap:14px} .nums-card{padding:24px 14px 20px} .nums-card__num{font-size:1.6rem} #materials .mat-grid{grid-template-columns:1fr;gap:14px} #materials .mat-card{padding:24px 18px 20px} #infrastructure .infra-grid{grid-template-columns:1fr;gap:16px} #infrastructure .infra-card--featured{grid-column:span 1} #infrastructure .infra-card{padding:24px 18px;gap:18px;flex-direction:column} .infra-card__stat{width:100%;padding-right:0;padding-bottom:16px;border-right:none;border-bottom:1px solid rgba(62,192,105,.06);flex-direction:row;gap:12px;justify-content:flex-start} .infra-card__stat::after{display:none} .infra-card__stat-lbl{margin-top:0} #infrastructure .infra-card--featured .infra-card__stat-num{font-size:1.8rem} .infra__hero{min-height:40vh;padding:60px 0;background-attachment:scroll} #tech-home .tech-grid{grid-template-columns:1fr;gap:14px} .tech-card{padding:18px 16px;gap:12px} .tech-card__icon{width:38px;height:38px;font-size:.42rem} .tech-card__body p{font-size:.64rem} .tech-card__stat-val{font-size:.48rem;padding:3px 8px} .infra__hero-content{max-width:100%} .infra__title{font-size:clamp(1.8rem,4vw,2.6rem)} .infra__sub{font-size:.82rem} .products{grid-template-columns:repeat(2,1fr)} .stats-grid{grid-template-columns:repeat(2,1fr)} .testi__track{height:440px} .testi-card{padding:24px 22px} .testi-card__stars{font-size:.75rem} .gallery-grid{columns:2} .section{padding:70px 0} .topbar__meta{display:none} .sec-head{flex-direction:column;align-items:flex-start} .timeline::before{left:16px} .timeline-item{width:100%;left:0!important;text-align:left!important;padding:12px 0 12px 44px} .timeline-item:nth-child(odd) .timeline-node,.timeline-item:nth-child(even) .timeline-node{left:9px;right:auto} .svc-grid,.tech-grid{grid-template-columns:repeat(2,1fr)} .mat-grid{grid-template-columns:repeat(2,1fr)} .infra-grid{grid-template-columns:1fr} .infra-card{grid-template-columns:1fr} .pres__layout{grid-template-columns:1fr;gap:32px} .pres__map{order:-1} .pres__map-glass{padding:20px} .pres__map-wrap{width:clamp(200px,40vw,300px);height:clamp(200px,40vw,300px)} .pres__cities{gap:18px} .pres__region h4{margin-bottom:8px} .trust__deck{grid-template-columns:repeat(2,1fr);gap:16px} .trust__card{padding:24px 20px} #quality .qual-grid{grid-template-columns:1fr;gap:18px} #quality .qual-card{padding:24px 20px;gap:16px} .qual-card__num{font-size:1.6rem} .qual-grid{grid-template-columns:1fr} .know-grid{grid-template-columns:1fr} .know-card{padding:24px} .quote-grid{grid-template-columns:1fr} .legacy{grid-template-columns:1fr;gap:32px} .legacy__content{grid-template-columns:1fr;gap:28px} .legacy__body{grid-column:1} .legacy__stamp{position:relative;top:auto;left:auto;width:72px;height:72px;margin-bottom:6px;justify-self:start} .legacy__stamp svg{width:56px;height:56px} .legacy__badge{position:relative;top:auto;right:auto;align-self:flex-start;margin-bottom:10px} .legacy__label{margin-bottom:8px} .legacy__title{font-size:clamp(2.1rem,4.5vw,3rem)} .legacy__rule{margin:14px 0 18px} .legacy__text{margin-bottom:26px} .legacy__metrics{gap:0} .legacy__metric{padding:0 18px} .legacy__metric-div{height:26px} .split{grid-template-columns:1fr} .split__media{order:-1;max-height:360px} .split__content{text-align:center} .about-hero{padding:120px 0 60px;min-height:40vh} .about-hero__title{font-size:clamp(1.5rem,5vw,2.6rem)} .about-hero__sub{font-size:.82rem} .about-hero__particles span{display:none} .prods-hero{padding:120px 0 60px;min-height:35vh} .prods-hero__title{font-size:clamp(1.5rem,5vw,2.6rem)} .prods-hero__sub{font-size:.82rem} .prods-hero__particles span{display:none} .svcs-hero{padding:120px 0 60px;min-height:35vh} .svcs-hero__title{font-size:clamp(1.5rem,5vw,2.6rem)} .svcs-hero__sub{font-size:.82rem} .svcs-hero__particles span{display:none} .svcs__grid{grid-template-columns:repeat(2,1fr);gap:16px} .svcs__card{padding:30px 22px 26px} .svcs-process__grid{grid-template-columns:repeat(2,1fr);gap:16px} .svcs-step{padding:28px 20px 24px} .svcs-step__conn{display:none} .tech-hero{padding:120px 0 60px;min-height:35vh} .tech-hero__title{font-size:clamp(1.5rem,5vw,2.6rem)} .tech-hero__sub{font-size:.82rem} .tech-hero__particles span{display:none} .tech-page__grid{grid-template-columns:repeat(2,1fr);gap:16px} .tech-page__card{padding:26px 20px} .certs__grid{grid-template-columns:repeat(2,1fr);gap:16px} .certs__card{padding:28px 20px 26px} .gallery-hero{padding:130px 0 80px;min-height:40vh} .gallery-hero__title{font-size:clamp(1.5rem,5vw,2.6rem)} .gallery-hero__sub{font-size:.82rem} .gallery-hero__particles span{display:none} .gallery-page__masonry{columns:2} .gallery-page__filters{gap:8px;margin-bottom:28px} #gallery-page{padding:70px 0} .contact-hero{padding:120px 0 80px;min-height:35vh} .contact-hero__title{font-size:clamp(1.5rem,5vw,2.6rem)} .contact-hero__sub{font-size:.82rem} .contact-hero__particles span{display:none} .contact-main__grid{grid-template-columns:1fr;gap:32px} #contact-main{padding:70px 0} .contact-main__form{padding:30px 26px} .quote-hero{padding:120px 0 80px;min-height:35vh} .quote-hero__title{font-size:clamp(1.5rem,5vw,2.6rem)} .quote-hero__sub{font-size:.82rem} .quote-hero__particles span{display:none} .quote-main__grid{grid-template-columns:1fr;gap:32px} #quote-main{padding:70px 0} .quote-main__form{padding:30px 26px} .quote-main__side-card{padding:24px} .story__layout{gap:32px} .story__badge{padding:10px 16px;bottom:12px;left:12px} .story__badge-num{font-size:1.4rem} .story__badge-lbl{font-size:.44rem} .story__stats{grid-template-columns:repeat(2,1fr)} .story__stat{padding:18px 14px} .story__stat-num{font-size:1.4rem} .what__grid{grid-template-columns:repeat(2,1fr);gap:14px} .what__card{padding:22px 16px} .what__card h3{font-size:.85rem} .what__card p{font-size:.7rem} .proc__flow{grid-template-columns:repeat(3,1fr);gap:14px} .proc__grid{grid-template-columns:repeat(2,1fr);gap:16px} } @media (max-width:560px){ .hero__stats{gap:14px} .hero__stat-num{font-size:1.1rem} .products{grid-template-columns:1fr} .gallery-grid{columns:1} .form .row{grid-template-columns:1fr} .footer__grid{grid-template-columns:1fr} .cta-band{padding:40px 20px} .col__grid{grid-template-columns:1fr;gap:14px} .col__head{margin-bottom:32px} #services .svc-grid{grid-template-columns:1fr;gap:14px} #services .svc-card{padding:24px 18px 20px} #tech-home .tech-grid{gap:12px} .tech-card{padding:16px 14px;gap:10px} .tech-card__icon{width:34px;height:34px;font-size:.38rem} .tech-card__body p{font-size:.6rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tech-card__stat-val{font-size:.44rem;padding:2px 7px} #quality .qual-grid{gap:14px} #quality .qual-card{padding:20px 16px;gap:14px;flex-direction:column} .qual-card__num{font-size:1.4rem;margin-bottom:8px} .qual-card__tag{font-size:.45rem;padding:2px 10px} .qual-card__body h3{font-size:.9rem} .qual-card__body p{font-size:.7rem} .qual-card__line{align-self:flex-start} .pres__map-glass{padding:14px} .pres__map-wrap{width:clamp(160px,60vw,240px);height:clamp(160px,60vw,240px)} .pres__dot{width:10px;height:10px} .pres__dot--hq{width:16px;height:16px} .pres__dot-lbl{font-size:.36rem;top:calc(100% + 4px)} .testi__track{height:380px} .testi-card{padding:22px 18px} .testi-card__stars{font-size:.7rem;letter-spacing:3px;margin-bottom:10px} .testi-card p{font-size:.78rem;margin-bottom:14px} .testi-card__author img{width:36px;height:36px} .testi-card__author strong{font-size:.76rem} .testi-card__quote{font-size:3rem;top:4px;right:14px} .testi-card__author{gap:10px} .journey__track{padding:40px 0;flex-wrap:nowrap} .journey__item{padding:0 4px;min-height:280px} .journey__card{max-width:130px;padding:14px 12px} .journey__connector{min-height:15px} .journey__year{font-size:.85rem} .journey__card h3{font-size:.6rem} .journey__card p{font-size:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .journey__dot{width:9px;height:9px} #infrastructure .infra-grid{gap:14px} #infrastructure .infra-card{padding:20px 14px;gap:14px} .infra-card__stat{padding-bottom:12px;gap:8px} .infra-card__stat-num{font-size:1.4rem} .infra-card__stat-unit{font-size:.65rem} .infra-card__body h3{font-size:.9rem} .infra-card__body p{font-size:.7rem} .infra__hero{min-height:32vh;padding:40px 0} .infra__title{font-size:clamp(1.6rem,3.5vw,2.2rem)} .infra__sub{font-size:.78rem} .legacy__layout{gap:36px;padding-top:50px;padding-bottom:50px} .legacy__left{flex-direction:column;gap:24px} .legacy__stamp{width:90px;height:90px} .legacy__stamp svg{width:72px;height:72px} .legacy__years-num{font-size:2.8rem} .legacy__years-plus{font-size:1.8rem} .legacy__years-lbl{font-size:.5rem} .legacy__label{font-size:.5rem;letter-spacing:.3em;margin-bottom:8px} .legacy__label-line{display:none} .legacy__title{font-size:clamp(2rem,8vw,2.8rem)} .legacy__rule{width:40px;height:2px;margin:12px auto 16px} .legacy__text{font-size:.85rem;line-height:1.7} .legacy__stats{grid-template-columns:repeat(2,1fr);gap:10px} .legacy__stat{padding:18px 12px} .legacy__stat-num{font-size:1.4rem} .legacy__stat-lbl{font-size:.4rem;letter-spacing:.1em} .legacy__stat-icon{width:24px;height:24px;margin-bottom:8px} .legacy__orbital{display:none} .legacy__aurora{display:none} .legacy__link{padding:14px 28px;font-size:.58rem;width:100%;justify-content:center} .stats-grid{grid-template-columns:1fr 1fr} #numbers-that-matter .nums-grid{grid-template-columns:1fr;gap:12px} .nums-card{padding:24px 16px 20px} .nums-card__num{font-size:1.8rem} .nums-card__icon{width:36px;height:36px} #materials .mat-grid{grid-template-columns:1fr;gap:12px} #materials .mat-card{padding:22px 16px 18px} .mat-medal{width:76px;height:76px} .svc-grid,.tech-grid{grid-template-columns:1fr} .mat-grid{grid-template-columns:1fr} .know-body h3{font-size:1rem} .legacy{gap:24px} .legacy__content{gap:20px} .legacy__stamp{width:48px;height:48px} .legacy__stamp svg{width:40px;height:40px} .legacy__badge-num{font-size:1.55rem} .legacy__badge-lbl{font-size:.38rem} .legacy__label{font-size:.5rem;letter-spacing:.35em} .legacy__title{font-size:clamp(1.7rem,7vw,2.3rem)} .legacy__rule{width:36px;height:2px;margin:10px 0 14px} .legacy__text{font-size:.8rem;line-height:1.7;margin-bottom:20px} .legacy__metrics{flex-wrap:wrap;gap:10px 0} .legacy__metric{padding:0 10px} .legacy__metric-div{display:none} .legacy__metric-num{font-size:1rem} .legacy__metric-lbl{letter-spacing:.1em} .legacy__link{width:100%;justify-content:center;padding:11px 20px;font-size:.58rem;letter-spacing:.12em} .split__media{max-height:260px} .about-hero{padding:100px 0 50px;min-height:40vh} .about-hero__title{font-size:clamp(1.3rem,6vw,2rem)} .about-hero__tag{font-size:.44rem} .about-hero__bar{margin:14px 0 18px} .about-hero__sub{font-size:.78rem} .prods-hero{padding:100px 0 50px;min-height:35vh} .prods-hero__title{font-size:clamp(1.3rem,6vw,2rem)} .prods-hero__tag{font-size:.44rem} .prods-hero__sub{font-size:.78rem} .svcs-hero{padding:100px 0 50px;min-height:35vh} .svcs-hero__title{font-size:clamp(1.3rem,6vw,2rem)} .svcs-hero__tag{font-size:.44rem} .svcs-hero__sub{font-size:.78rem} .svcs__grid{grid-template-columns:1fr;gap:14px} .svcs__card{padding:26px 18px 22px} .svcs__card h3{font-size:.92rem} .svcs__card p{font-size:.72rem} .svcs-process__grid{grid-template-columns:1fr;gap:14px} .svcs-step{padding:24px 18px 20px} .svcs-step__num{font-size:2.4rem} .tech-hero{padding:100px 0 50px;min-height:35vh} .tech-hero__title{font-size:clamp(1.3rem,6vw,2rem)} .tech-hero__tag{font-size:.44rem} .tech-hero__sub{font-size:.78rem} .tech-page__grid{grid-template-columns:1fr;gap:14px} .tech-page__card{padding:24px 18px} .tech-page__card h3{font-size:.92rem} .tech-page__card p{font-size:.72rem} .certs__grid{grid-template-columns:1fr;gap:14px} .certs__card{padding:24px 18px 22px} .certs__badge{width:50px;height:50px;font-size:.55rem} .story__layout{gap:24px} .story__badge{padding:8px 14px;bottom:10px;left:10px} .story__badge-num{font-size:1.2rem} .story__badge-lbl{font-size:.4rem} .story__stats{gap:8px} .story__stat{padding:14px 10px} .story__stat-num{font-size:1.2rem} .story__stat p{font-size:.42rem} .what__grid{grid-template-columns:1fr;gap:12px} .what__card{padding:20px 16px} .what__card-ic{width:38px;height:38px;margin-bottom:12px} .what__card-ic img{width:18px} .what__card h3{font-size:.82rem} .what__card p{font-size:.68rem} .proc__grid{grid-template-columns:1fr;gap:14px} .proc__card{padding:24px 18px} .proc__card-num{font-size:1.8rem;margin-bottom:4px} .proc__card-text{font-size:.72rem} .proc__card-icon{width:34px;height:34px;margin-bottom:6px} .proc__card-tag{font-size:.5rem} .proc__card-cube{display:none} .gallery-hero{padding:100px 0 60px;min-height:35vh} .gallery-hero__tag{font-size:.44rem} .gallery-hero__title{font-size:clamp(1.3rem,6vw,2rem)} .gallery-hero__bar{margin:14px 0 18px} .gallery-hero__sub{font-size:.78rem} .gallery-page__masonry{columns:1} .gallery-page__pill{padding:6px 16px;font-size:.7rem} #gallery-page{padding:50px 0} .gallery-page__item{margin-bottom:14px;border-radius:10px} .gallery-page__icon{width:34px;height:34px} .gallery-page__icon svg{width:14px;height:14px} .gallery-page__label{font-size:.66rem} .contact-hero{padding:100px 0 60px;min-height:35vh} .contact-hero__tag{font-size:.44rem} .contact-hero__title{font-size:clamp(1.3rem,6vw,2rem)} .contact-hero__bar{margin:14px 0 18px} .contact-hero__sub{font-size:.78rem} .contact-main__grid{grid-template-columns:1fr;gap:24px} #contact-main{padding:50px 0} .contact-main__row{grid-template-columns:1fr} .contact-main__form{padding:24px 18px} .contact-main__card{padding:20px 22px} .contact-main__map{margin-top:30px;min-height:240px} .contact-main__map iframe{height:260px} .quote-hero{padding:100px 0 60px;min-height:35vh} .quote-hero__tag{font-size:.44rem} .quote-hero__title{font-size:clamp(1.3rem,6vw,2rem)} .quote-hero__bar{margin:14px 0 18px} .quote-hero__sub{font-size:.78rem} .quote-main__grid{grid-template-columns:1fr;gap:24px} #quote-main{padding:50px 0} .quote-main__row{grid-template-columns:1fr} .quote-main__form{padding:24px 18px} .quote-main__side-card{padding:22px} } /* ===================== GS ADVANTAGE ===================== */ /* ===================== GS ADVANTAGE — LIGHT PREMIUM ===================== */ #gs-advantage{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;padding:80px 0;perspective:1200px;background:#fff} #gs-advantage .adv__bg{position:absolute;inset:0;z-index:0;background:#f7f7f9;background-image:radial-gradient(rgba(34,159,76,.06) 1px,transparent 1px);background-size:26px 26px;animation:advZoom 30s ease-in-out infinite alternate} @keyframes advZoom{from{transform:scale(1)}to{transform:scale(1.1)}} /* minimal overlay — bg stays fully visible */ #gs-advantage .adv__overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 30%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.25) 70%,rgba(255,255,255,.35) 100%)} #gs-advantage .adv__pattern{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.02;background-image:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px);background-size:28px 28px} #gs-advantage .adv__beam{position:absolute;top:-20%;left:-20%;width:140%;height:140%;z-index:0;pointer-events:none;background:radial-gradient(ellipse 50% 40% at 30% 50%,rgba(62,192,105,.05) 0%,transparent 60%),radial-gradient(ellipse 40% 30% at 70% 40%,rgba(255,215,0,.03) 0%,transparent 50%);animation:advBeam 12s ease-in-out infinite alternate} @keyframes advBeam{0%{transform:translate(-5%,-5%) rotate(-3deg);opacity:.6}100%{transform:translate(5%,5%) rotate(3deg);opacity:1}} #gs-advantage .container{position:relative;z-index:1} /* ===================== HEADER ===================== */ .adv__head{text-align:center;margin-bottom:48px} .adv__tag{display:inline-flex;align-items:center;gap:14px;margin-bottom:14px} .adv__tag-line{width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));opacity:.6} .adv__tag-text{font-size:.44rem;letter-spacing:.38em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:1} .adv__title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.6rem);font-weight:800;line-height:1.04;letter-spacing:-.025em;margin:0 0 14px;color:#1a1a1a} .adv__title em{font-style:normal;background:linear-gradient(135deg,var(--gold) 0%,#229f4c 50%,var(--gold-2) 100%);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:advGold 5s ease-in-out infinite} @keyframes advGold{0%,100%{background-position:0% center}50%{background-position:100% center}} .adv__sub{font-size:.82rem;color:rgba(0,0,0,.5);max-width:56ch;margin:0 auto;line-height:1.7;font-weight:450} .adv__rule{width:50px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-2),transparent);margin:18px auto 0;border-radius:2px;opacity:.5} /* ===================== CARD GRID ===================== */ .adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:0;transform-style:preserve-3d} /* ===================== SMALL WHITE GLASS CARDS ===================== */ .adv-card{position:relative;padding:22px 20px 20px;border-radius:14px;background:rgba(255,255,255,.82);border:1px solid rgba(0,0,0,.05);transition:all .4s cubic-bezier(.23,1,.32,1);overflow:hidden;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transform:translateZ(0);transform-style:preserve-3d;box-shadow:0 4px 16px rgba(0,0,0,.04),0 1px 4px rgba(0,0,0,.02)} /* gold top-edge on hover only */ .adv-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .4s;z-index:2} .adv-card:hover::before{opacity:.7} .adv-card::after{content:"";position:absolute;inset:-1px;border-radius:15px;background:linear-gradient(135deg,rgba(62,192,105,.12),transparent 30%,transparent 60%,rgba(62,192,105,.06));opacity:0;transition:opacity .4s;z-index:0;pointer-events:none} .adv-card:hover::after{opacity:1} .adv-card:hover{transform:translateY(-6px) scale(1.01);border-color:rgba(62,192,105,.2);box-shadow:0 16px 40px rgba(0,0,0,.08),0 0 20px rgba(62,192,105,.04)} .adv-card__glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(62,192,105,.06) 0%,transparent 65%);pointer-events:none;z-index:0;transition:all .5s ease} .adv-card:hover .adv-card__glow{width:240px;height:240px;background:radial-gradient(circle,rgba(62,192,105,.1) 0%,rgba(62,192,105,.02) 40%,transparent 65%)} .adv-card__shine{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 45%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.4) 55%,transparent 70%);transform:translateX(-100%);transition:transform .6s ease} .adv-card:hover .adv-card__shine{transform:translateX(100%)} /* ===================== CARD NUMBER ===================== */ .adv-card__num{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:12px;position:relative;z-index:1;transform-style:preserve-3d;transition:transform .4s ease} .adv-card:hover .adv-card__num{transform:translateZ(12px) scale(1.08)} .adv-card__num-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(62,192,105,.35);transition:all .4s ease;box-shadow:0 0 10px rgba(62,192,105,.06),inset 0 0 10px rgba(62,192,105,.04)} .adv-card:hover .adv-card__num-ring{border-color:var(--gold);box-shadow:0 0 20px rgba(62,192,105,.2),inset 0 0 15px rgba(62,192,105,.1);transform:scale(1.12)} .adv-card__num-text{font-family:var(--font-display);font-size:.8rem;font-weight:800;color:var(--gold);transition:all .3s} .adv-card:hover .adv-card__num-text{color:#229f4c} /* ===================== CARD BODY ===================== */ .adv-card__body{position:relative;z-index:1;transform-style:preserve-3d} .adv-card__body h3{font-size:.92rem;font-weight:700;margin-bottom:6px;line-height:1.3;color:#1a1a1a;transition:all .3s} .adv-card:hover .adv-card__body h3{color:var(--gold)} .adv-card__body p{font-size:.72rem;color:rgba(0,0,0,.5);line-height:1.6;transition:color .3s} .adv-card:hover .adv-card__body p{color:rgba(0,0,0,.65)} .adv-card__line{display:none} @media (max-width:1024px){ .adv-grid{grid-template-columns:repeat(2,1fr);gap:14px} #gs-advantage{padding:60px 0} .adv-card{padding:18px 16px} } @media (max-width:640px){ .adv-grid{grid-template-columns:1fr;gap:12px} #gs-advantage{padding:40px 0} .adv-card{padding:16px 14px} .adv-card__num{width:32px;height:32px;margin-bottom:8px} .adv-card__num-text{font-size:.7rem} .adv-card__body h3{font-size:.82rem} .adv-card__body p{font-size:.68rem} } /* ===================== TECH CTA BANNER ===================== */ .tech-cta{position:relative;overflow:hidden;padding:50px 0;background:#fcfcfc} .tech-cta__inner{display:flex;align-items:center;gap:32px;padding:36px 44px;border-radius:18px;background:linear-gradient(135deg,#1a1a1a 0%,#222 100%);border:1px solid rgba(34,159,76,.15);box-shadow:0 20px 60px rgba(0,0,0,.15);position:relative;overflow:hidden} .tech-cta__inner::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6} .tech-cta__inner::after{content:"";position:absolute;top:0;right:0;width:200px;height:100%;background:radial-gradient(circle at 100% 50%,rgba(34,159,76,.08) 0%,transparent 70%);pointer-events:none} .tech-cta__icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,159,76,.15),rgba(34,159,76,.05));border:1px solid rgba(34,159,76,.2);color:var(--gold);flex:none;transition:all .4s ease} .tech-cta__inner:hover .tech-cta__icon{background:linear-gradient(135deg,rgba(34,159,76,.25),rgba(34,159,76,.1));transform:scale(1.05);box-shadow:0 0 25px rgba(34,159,76,.12)} .tech-cta__text{flex:1;position:relative;z-index:1} .tech-cta__text h3{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:#fff;margin:0 0 6px} .tech-cta__text p{font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.6;margin:0} .tech-cta__btn{flex:none;padding:12px 28px;font-size:.8rem;font-weight:700;border-radius:10px;display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#1a1a1a;text-decoration:none;transition:all .35s ease;position:relative;z-index:1} .tech-cta__btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(34,159,76,.3)} @media (max-width:900px){ .tech-cta__inner{flex-direction:column;text-align:center;padding:32px 28px} .tech-cta__btn{width:100%;justify-content:center} } @media (max-width:1024px){ .product-showcase{grid-template-columns:repeat(3,1fr);gap:16px} } @media (max-width:768px){ .product-showcase{grid-template-columns:repeat(2,1fr);gap:14px} .showcase-card__body{padding:14px 12px} .showcase-card__desc{display:none} .showcase-card__btn{padding:14px 12px;font-size:.7rem} } @media (max-width:480px){ .product-showcase{grid-template-columns:1fr;gap:12px} .showcase-card__btn{padding:16px 14px;font-size:.8rem} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto} .js .reveal{opacity:1!important;transform:none!important} } /* ===================== COMPREHENSIVE MOBILE FIXES ===================== */ @media (max-width:480px){ /* hero — smaller on mobile */ .hero{min-height:auto;padding:0} .hero__inner{min-height:0;padding:40px 0} .hero__pre-logo img{width:140px;height:140px} .hero__logo-ring{width:100px;height:100px} .hero__line--top{font-size:1.3rem} .hero__line--bot{font-size:.7rem;letter-spacing:.12em} .hero__sub{font-size:.72rem;padding:0 10px} .hero__bar-wrap{margin:8px 0 14px} .hero__actions{gap:8px} .hero__actions .btn{padding:12px 20px;font-size:.78rem} /* sections — reduce padding */ .section{padding:50px 0} .section--tight{padding:40px 0} /* gs-advantage — remove 100vh, use normal flow */ #gs-advantage{min-height:auto;padding:50px 0} #gs-advantage .adv__bg{position:absolute;inset:0} .adv__head{margin-bottom:36px} .adv__title{font-size:clamp(1.6rem,6vw,2.2rem);color:#1a1a1a} .adv__sub{font-size:.75rem;color:rgba(0,0,0,.5)} .adv-grid{grid-template-columns:1fr;gap:14px;margin-bottom:36px} .adv-card{padding:24px 18px 22px;background:rgba(255,255,255,.9)} .adv-card__num{width:42px;height:42px;margin-bottom:14px} .adv-card__body h3{font-size:.9rem;color:#1a1a1a} .adv-card__body p{font-size:.7rem;color:rgba(0,0,0,.5)} /* infrastructure — fix overlap and card layout */ #infrastructure{position:relative;z-index:1} #infrastructure .infra-grid{grid-template-columns:1fr!important;gap:14px!important;padding:30px 0 50px!important} #infrastructure .infra-card--featured,#infrastructure .infra-card--bottom{grid-column:span 1!important} .infra-card{display:flex!important;flex-direction:column!important;padding:18px 14px!important;gap:12px!important} .infra-card__stat{width:100%!important;padding:0!important;border:none!important;flex-direction:row!important;gap:8px!important;justify-content:center!important;align-items:baseline!important;flex-wrap:wrap!important} .infra-card__stat::after{display:none!important} .infra-card__stat-num{font-size:1.6rem!important} .infra-card__stat-unit{font-size:.7rem!important} .infra-card__stat-lbl{font-size:.65rem!important;margin:0!important;color:rgba(0,0,0,.6)!important;width:100%!important;text-align:center!important;padding-top:4px!important} .infra-card__body{text-align:center!important} .infra-card__num{font-size:.7rem!important;margin-bottom:4px!important} .infra-card__body h3{font-size:.88rem!important} .infra-card__body p{font-size:.7rem!important} /* infra__hero — fix for mobile */ .infra__hero{min-height:auto!important;padding:50px 0 30px!important;background-attachment:scroll!important} .infra__hero-content{padding:24px 18px!important;max-width:100%!important} .infra__title{font-size:clamp(1.4rem,6vw,2rem)!important} .infra__sub{font-size:.78rem!important} /* legacy section — fix overlap */ #about-legacy{min-height:auto;position:relative;z-index:1} .legacy__layout{padding:40px 0} .legacy__left{flex-direction:column;gap:20px} .legacy__stamp{width:80px;height:80px} .legacy__stamp svg{width:64px;height:64px} .legacy__years-num{font-size:2.2rem} .legacy__years-plus{font-size:1.4rem} .legacy__right{text-align:center} .legacy__title{font-size:clamp(1.5rem,7vw,2rem)} .legacy__text{font-size:.8rem;max-width:100%} .legacy__stats{grid-template-columns:1fr 1fr;gap:8px} .legacy__stat{padding:14px 10px} .legacy__stat-num{font-size:1.2rem} .legacy__stat-lbl{font-size:.42rem;letter-spacing:.08em} .legacy__stat-icon{width:20px;height:20px;margin-bottom:6px} /* products showcase — single column */ .product-showcase{grid-template-columns:1fr;gap:12px} .showcase-card__body{padding:14px 12px} .showcase-card__name{font-size:.8rem} .showcase-card__desc{display:none} .showcase-card__btn{padding:14px 12px;font-size:.78rem} /* col__grid — single column */ .col__grid{grid-template-columns:1fr;gap:12px} .col__head{margin-bottom:28px} /* services */ #services .svc-grid{grid-template-columns:1fr;gap:12px} /* numbers */ #numbers-that-matter .nums-grid{grid-template-columns:1fr 1fr;gap:10px} .nums-card{padding:20px 14px 16px} .nums-card__num{font-size:1.5rem} /* materials */ #materials .mat-grid{grid-template-columns:1fr;gap:12px} .mat-medal{width:60px;height:60px} /* quality */ #quality .qual-grid{grid-template-columns:1fr;gap:12px} /* tech */ #tech-home .tech-grid{grid-template-columns:1fr;gap:12px} /* process */ .proc__flow{grid-template-columns:repeat(3,1fr);gap:12px} .proc__line{display:none} /* testimonials */ .testi__track{height:340px} .testi-card{padding:20px 16px} .testi-card p{font-size:.76rem} /* gallery */ .gallery-grid{columns:1} /* footer */ .footer__grid{grid-template-columns:1fr;gap:24px} .footer__about p{font-size:.78rem} .footer__col ul{gap:7px} .footer__col ul a{font-size:.78rem} /* stats grid */ .stats-grid{grid-template-columns:1fr 1fr;gap:10px} /* timeline */ .timeline::before{left:16px} .timeline-item{width:100%;left:0!important;text-align:left!important;padding:10px 0 10px 40px} /* journey */ .journey__track{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:30px 0} /* float actions */ .float-actions{right:12px;bottom:12px} .float-btn{width:42px;height:42px} /* contact */ .contact-grid{grid-template-columns:1fr;gap:24px} .form .row{grid-template-columns:1fr} /* ===== FIX ALL POST-INFRASTRUCTURE SECTIONS ===== */ /* TECH section */ #tech-home{padding:50px 0!important} #tech-home .tech-grid{grid-template-columns:1fr!important;gap:12px!important} .tech-card{padding:16px 14px!important;gap:10px!important;flex-direction:row!important;display:flex!important} .tech-card__icon{width:36px!important;height:36px!important} .tech-card__body h3{font-size:.8rem!important} .tech-card__body p{font-size:.62rem!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important} .tech-card__stat-val{font-size:.44rem!important;padding:3px 8px!important} .tech__float{display:none!important} /* HISTORY / JOURNEY section */ #history{padding:50px 0!important} .journey__track{padding:30px 0!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important} .journey__item{min-height:240px!important} .journey__card{max-width:140px!important;padding:14px 12px!important} .journey__year{font-size:.85rem!important} .journey__card h3{font-size:.6rem!important} .journey__card p{font-size:.5rem!important} .journey__dot{width:9px!important;height:9px!important} /* QUALITY section */ #quality{padding:50px 0!important} #quality .qual-grid{grid-template-columns:1fr!important;gap:14px!important} .qual-card{padding:20px 16px!important;gap:14px!important;flex-direction:column!important} .qual-card__num{font-size:1.4rem!important;margin-bottom:8px!important} .qual-card__body h3{font-size:.88rem!important} .qual-card__body p{font-size:.68rem!important} /* TESTIMONIALS section */ #testimonials{padding:50px 0!important} .testi__track{height:320px!important} .testi-card{padding:18px 14px!important} .testi-card p{font-size:.72rem!important} .testi-card__author img{width:32px!important;height:32px!important} .testi-card__stars{font-size:.65rem!important;letter-spacing:2px!important} /* PRESENCE / GLOBAL REACH section */ #presence{padding:50px 0!important} .pres__layout{grid-template-columns:1fr!important;gap:24px!important} .pres__map{order:-1!important} .pres__map-glass{padding:14px!important} .pres__map-wrap{width:100%!important;height:240px!important} .pres__cities{gap:12px!important} .pres__region h4{font-size:.78rem!important;margin-bottom:6px!important} .pres__cities{grid-template-columns:repeat(2,1fr)!important;gap:6px!important} .pres__city{font-size:.7rem!important;padding:4px 8px!important} /* FOOTER */ .footer{padding-top:0!important} .footer__grid{grid-template-columns:1fr!important;gap:24px!important;padding-top:40px!important} .footer__about p{font-size:.78rem!important;max-width:100%!important} .footer__about{text-align:center!important} .footer__about .brand{justify-content:center!important} .footer__social{justify-content:center!important} .footer__col{text-align:center!important} .footer__col h4::after{left:50%!important;transform:translateX(-50%)!important} .footer__col ul a{padding-left:0!important;justify-content:center!important} .footer__col ul a::before{display:none!important} .footer__contact-list li{justify-content:center!important;text-align:center!important} .footer__bottom{margin-top:24px!important;padding:16px 0!important;font-size:.68rem!important} /* NAV / MENU overlay on mobile */ .nav-overlay{align-items:flex-start!important;padding-top:80px!important;overflow-y:auto!important} .nav-overlay .nav a{font-size:1.4rem!important;padding:10px 16px!important} .nav-toggle{background:rgba(255,255,255,.1)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;border-color:rgba(255,255,255,.15)!important} .header.is-scrolled .nav-toggle{background:var(--surface)!important;border-color:var(--line-soft)!important} .header.is-scrolled .nav-toggle span{background:var(--ink)!important} } /* ===== Page-hero background video ===== */ .page-hero__bg video.page-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .page-hero__bg video.page-hero__video + .page-hero__img{display:none} /* ===== Media-background sections (products/process/global) ===== */ .section--media{position:relative;overflow:hidden;background:#0d0d0c} .section-media{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center} .section-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} .section-media__veil{position:absolute;inset:0;z-index:1;background:rgba(10,10,9,.86);pointer-events:none} .section--media>.container{position:relative;z-index:2} .section--media .sec-head__left,.section--media .product-card,.section--media .reach-copy,.section--media .eyebrow,.section--media .h2,.section--media .lead,.section--media .readout, .section--media .process-grid,.section--media .reach-wrap,.section--media .reach-map{color:#fff;border-color:rgba(255,255,255,.12)} .section--media .gold-text{color:#7fd89b} .section--media .btn--ghost{border-color:rgba(255,255,255,.35);color:#fff} .section--media .eyebrow-dot{background:#7fd89b} #products.section--media{background:#0d0d0c}