/* ============================================================ bg.asaha.om – Black Gold / Tyroil Energy ============================================================ */ /* Fonts are loaded via in each HTML with preconnect (faster than @import) */ /* ---------- CSS Variables — one unified warm palette ---------- */ :root{ --o: #E87A2E; --od: #C65E1A; --ol: #F4923E; --op: #FDF2E9; --r: #D4412B; --rd: #A63320; --ember:#F05A1E; --bk: #1A1A1A; --bkd: #0D0804; --bkl: #2D231B; --gold: #D4A017; --goldl:#E4B429; --goldd:#A67C0D; --silver:#B8BFC4; --w: #FFFFFF; --cream:#FAF3E4; --ow: #FDF8EE; --lw: #F4EAD5; --bd: #E7D9BB; --td: #1A1208; --tg: #6B5A46; --tl: #A6937A; --grad-hero: linear-gradient(140deg,#0D0804 0%,#1E160D 45%,#2D231B 100%); --grad-brand: linear-gradient(135deg,#0D0804 0%,#1E160D 50%,#E87A2E 100%); --grad-dark: linear-gradient(135deg,#0D0804 0%,#1E160D 100%); --grad-fire: linear-gradient(135deg,#F4923E 0%,#E87A2E 35%,#C65E1A 70%,#8B3A00 100%); --grad-gold: linear-gradient(135deg,#E4B429 0%,#D4A017 50%,#A67C0D 100%); --grad-cream: linear-gradient(180deg,#FAF3E4 0%,#F4EAD5 100%); --shadow: 0 4px 24px rgba(26,18,8,.10) ; --shadow-hov: 0 12px 48px rgba(26,18,8,.18); --tr: all .3s ease; --max: 1200px; --vp: clamp(60px,9vw,110px); --radius: 10px; color-scheme:light dark; } /* ---------- Reset ---------- */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:'Open Sans',sans-serif;color:var(--td);background:var(--cream);line-height:1.7;overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{text-decoration:none;color:inherit} ul{list-style:none} h1,h2,h3,h4,h5,h6{font-family:'Montserrat',sans-serif;line-height:1.25;font-weight:800} h1{font-size:clamp(2rem,5vw,3.2rem)} h2{font-size:clamp(1.6rem,3.5vw,2.4rem)} h3{font-size:clamp(1.1rem,2vw,1.35rem)} p{margin-bottom:1rem} /* ---------- Utilities ---------- */ .container{max-width:var(--max);margin:0 auto;padding:0 28px} .section{padding:var(--vp) 0} .eyebrow{display:inline-block;font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--o);margin-bottom:12px;position:relative;padding-left:36px} .eyebrow::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:24px;height:2px;background:var(--o)} .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 32px;border-radius:var(--radius);font-family:'Montserrat',sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.5px;transition:var(--tr);cursor:pointer;border:none} .btn-orange{background:var(--o);color:var(--w)} .btn-orange:hover{background:var(--od);transform:translateY(-2px);box-shadow:0 8px 24px rgba(232,122,46,.35)} .btn-outline{background:transparent;color:var(--w);border:2px solid rgba(255,255,255,.3)} .btn-outline:hover{border-color:var(--o);color:var(--o);transform:translateY(-2px)} .btn-dark{background:var(--bk);color:var(--w)} .btn-dark:hover{background:var(--bkl);transform:translateY(-2px)} /* ---------- Scroll Reveal ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease} .reveal.is-visible{opacity:1;transform:translateY(0)} .reveal-d1{transition-delay:.1s} .reveal-d2{transition-delay:.2s} .reveal-d3{transition-delay:.3s} .reveal-d4{transition-delay:.4s} .reveal-d5{transition-delay:.5s} /* ============================================================ 1. NAVIGATION ============================================================ */ /* Navbar: logo-dominant industrial style */ .bg-nav{position:fixed;top:0;left:0;width:100%;z-index:1000;background:rgba(250,243,228,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(232,122,46,.22);box-shadow:0 2px 18px rgba(26,14,4,.08);transition:all .4s ease} .bg-nav::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,var(--o),transparent);opacity:.7;transition:opacity .4s ease} .bg-nav.scrolled{background:rgba(253,248,238,.98);border-bottom:1px solid rgba(232,122,46,.28);box-shadow:0 6px 32px rgba(26,14,4,.14)} .bg-nav.scrolled::after{opacity:.9} .bg-nav__inner{display:flex;align-items:center;height:140px;transition:height .4s ease} .bg-nav.scrolled .bg-nav__inner{height:76px} .bg-nav__brand{display:flex;align-items:center;flex-shrink:0} .bg-nav__logo{height:128px;width:auto;transition:all .4s ease;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))} .bg-nav.scrolled .bg-nav__logo{height:62px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.1))} .bg-nav__brand-text{display:none} .bg-nav__links{display:flex;gap:32px;margin-left:auto;margin-right:36px} .bg-nav__link{font-family:'Montserrat',sans-serif;font-size:.8rem;font-weight:700;color:var(--tg);letter-spacing:1px;text-transform:uppercase;transition:var(--tr);position:relative;padding:4px 0} .bg-nav__link::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--o);border-radius:1px;transition:width .3s ease} .bg-nav__link:hover,.bg-nav__link.active{color:var(--o)} .bg-nav__link:hover::after,.bg-nav__link.active::after{width:100%} .bg-nav__actions{display:flex;align-items:center;gap:16px} .bg-nav__lang{font-family:'Montserrat',sans-serif;font-size:.78rem;font-weight:700;color:var(--tg);padding:7px 16px;border:1px solid rgba(26,14,4,.18);border-radius:6px;transition:var(--tr)} .bg-nav__lang:hover{border-color:var(--o);color:var(--o);background:rgba(232,122,46,.08)} .bg-nav__cta{padding:10px 24px;font-size:.78rem;letter-spacing:.5px} .bg-nav__burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:14px;z-index:1001;margin:-6px} .bg-nav__burger span{display:block;width:24px;height:2px;background:var(--bk);border-radius:2px;transition:var(--tr)} /* Mobile nav overlay */ .bg-nav__mobile{position:fixed;inset:0;background:rgba(13,13,13,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;z-index:999;opacity:0;pointer-events:none;transition:opacity .35s ease} .bg-nav__mobile.open{opacity:1;pointer-events:all} .bg-nav__mobile a{font-family:'Montserrat',sans-serif;font-size:1.3rem;font-weight:700;color:var(--w);transition:var(--tr);padding:12px 24px;min-height:48px;display:flex;align-items:center;justify-content:center} .bg-nav__mobile a:hover{color:var(--o)} .bg-nav__close{position:absolute;top:20px;right:24px;font-size:2rem;color:var(--w);cursor:pointer;background:none;border:none} /* ============================================================ 2. HERO ============================================================ */ .bg-hero{position:relative;min-height:100vh;display:flex;align-items:center;background:var(--grad-hero);overflow:hidden;padding-top:140px} .bg-hero__bg{position:absolute;inset:0;overflow:hidden} .bg-hero__ring{position:absolute;border-radius:50%;border:1px solid rgba(232,122,46,.08)} .bg-hero__ring--1{width:600px;height:600px;top:-100px;right:-150px} .bg-hero__ring--2{width:400px;height:400px;bottom:-50px;left:-100px} .bg-hero__glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(232,122,46,.12) 0%,transparent 70%);top:20%;right:10%;filter:blur(40px)} .bg-hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2} .bg-hero__eyebrow{font-family:'Montserrat',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--ol);margin-bottom:16px;display:flex;align-items:center;gap:10px} .bg-hero__eyebrow::before{content:'';width:32px;height:2px;background:var(--o)} .bg-hero__title{color:var(--w);margin-bottom:20px} .bg-hero__title span{color:var(--o)} .bg-hero__desc{color:rgba(255,255,255,.65);font-size:1.05rem;line-height:1.8;margin-bottom:32px;max-width:520px} .bg-hero__btns{display:flex;gap:16px;flex-wrap:wrap} .bg-hero__visual{position:relative;display:flex;justify-content:center;align-items:center} .bg-hero__img-wrap{position:relative;width:100%;max-width:420px;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)} .bg-hero__img-wrap::before{content:'';position:absolute;inset:-3px;border-radius:22px;background:linear-gradient(135deg,var(--o),transparent 60%);z-index:-1} .bg-hero__img-wrap img{width:100%;height:480px;object-fit:cover} .bg-hero__badge{position:absolute;bottom:24px;left:-30px;background:var(--o);color:var(--w);padding:14px 24px;border-radius:var(--radius);font-family:'Montserrat',sans-serif;box-shadow:var(--shadow-hov)} .bg-hero__badge-num{font-size:1.8rem;font-weight:900;line-height:1} .bg-hero__badge-lbl{font-size:.7rem;font-weight:600;opacity:.85} .bg-hero__stripe{position:absolute;bottom:0;left:0;width:100%;height:80px;background:var(--w);clip-path:polygon(0 100%,100% 0,100% 100%)} /* ============================================================ 3. STATISTICS ============================================================ */ .bg-stats{background:var(--lw);padding:48px 0} .bg-stats__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;text-align:center} .bg-stats__item{padding:20px 12px} .bg-stats__num{font-family:'Montserrat',sans-serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;color:var(--o);line-height:1} .bg-stats__unit{font-family:'Montserrat',sans-serif;font-size:.85rem;font-weight:700;color:var(--od)} .bg-stats__lbl{font-size:.78rem;color:var(--tg);margin-top:6px;line-height:1.4} /* ============================================================ 4. ABOUT ============================================================ */ .bg-about__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .bg-about__title{margin-bottom:20px} .bg-about__title span{color:var(--o)} .bg-about__text p{color:var(--tg);line-height:1.8} .bg-about__checks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px} .bg-about__check{display:flex;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;font-size:.82rem;font-weight:600;color:var(--td)} .bg-about__check i{color:var(--o);font-size:.9rem} .bg-about__visual{position:relative} .bg-about__img-box{position:relative;background:var(--grad-dark);border-radius:16px;padding:40px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end} .bg-about__img-box img{width:100%;border-radius:12px;object-fit:cover;height:340px;position:relative;z-index:2} .bg-about__watermark{position:absolute;top:30px;right:30px;font-family:'Montserrat',sans-serif;font-size:3.5rem;font-weight:900;color:rgba(255,255,255,.04);z-index:1} .bg-about__float{position:absolute;top:20px;left:-20px;background:var(--o);color:var(--w);padding:16px 24px;border-radius:var(--radius);font-family:'Montserrat',sans-serif;z-index:3;box-shadow:var(--shadow-hov)} .bg-about__float-num{font-size:2rem;font-weight:900;line-height:1} .bg-about__float-lbl{font-size:.68rem;font-weight:600;opacity:.85} /* ============================================================ 5. PROCESS STEPS ============================================================ */ .bg-process{background:var(--lw)} .bg-process__header{text-align:center;margin-bottom:48px} .bg-process__header h2 span{color:var(--o)} .bg-process__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .bg-process__card{background:var(--w);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--tr)} .bg-process__card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hov)} .bg-process__card-head{padding:18px 20px;display:flex;align-items:flex-start;gap:14px;position:relative;overflow:hidden;background-size:cover;background-position:center;min-height:180px} .bg-process__card-head::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,transparent 60%)} .bg-process__card-num{font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:900;color:var(--o);line-height:1;position:relative;z-index:2} .bg-process__card-icon{width:48px;height:48px;border-radius:12px;background:rgba(232,122,46,.15);display:flex;align-items:center;justify-content:center;color:var(--ol);font-size:1.1rem;position:relative;z-index:2} .bg-process__card-body{padding:24px} .bg-process__card-title{font-size:1.05rem;margin-bottom:8px} .bg-process__card-desc{font-size:.88rem;color:var(--tg);line-height:1.7;margin-bottom:0} /* ============================================================ 6. FLOW CHART – Professional SVG Diagram ============================================================ */ .bg-flowchart{background:var(--grad-hero);padding:var(--vp) 0;overflow:hidden} .bg-flowchart__header{text-align:center;margin-bottom:40px} .bg-flowchart__header h2{color:var(--w)} .bg-flowchart__header h2 span{color:var(--ol)} .bg-flowchart__header p{color:rgba(255,255,255,.5);max-width:600px;margin:12px auto 0} /* The box container */ .fc-box{background:#0a0a0a;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:0;overflow:hidden;box-shadow:0 8px 60px rgba(0,0,0,.5),0 0 80px rgba(232,122,46,.04);max-width:1200px;margin:0 auto;opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease} .fc-box.is-visible{opacity:1;transform:translateY(0)} /* Box title bar */ .fc-box__title{padding:20px 32px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between} .fc-box__title h3{font-family:'Montserrat',sans-serif;font-size:.9rem;font-weight:700;color:var(--w);letter-spacing:.5px} .fc-box__title span{font-family:'Montserrat',sans-serif;font-size:.65rem;font-weight:600;color:rgba(255,255,255,.3);letter-spacing:1px;text-transform:uppercase} /* SVG diagram */ .fc-box__diagram{padding:24px;overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;scroll-behavior:smooth} .fc-box__diagram svg{display:block;width:100%;height:auto;min-width:900px} /* Slim warm-colored scrollbar (visible on all platforms, reminds users it scrolls) */ .fc-box__diagram::-webkit-scrollbar{height:8px;background:rgba(0,0,0,.25)} .fc-box__diagram::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--o),var(--gold));border-radius:4px} .fc-box__diagram::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,var(--gold),var(--o))} .fc-box__diagram{scrollbar-width:thin;scrollbar-color:var(--gold) rgba(0,0,0,.25)} /* Right-edge fade cue — signals "more content to the right" */ .fc-box__scroll-cue{display:none;position:absolute;top:50%;right:12px;transform:translateY(-50%);pointer-events:none;z-index:3;color:var(--gold);font-family:'Montserrat',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:rgba(13,8,4,.82);padding:8px 12px;border-radius:20px;border:1px solid rgba(212,160,23,.4);backdrop-filter:blur(8px);animation:fcScrollPulse 2.2s ease-in-out infinite;box-shadow:0 4px 16px rgba(0,0,0,.3)} .fc-box__scroll-cue i{margin-left:6px;font-size:.9rem} @keyframes fcScrollPulse{0%,100%{transform:translateY(-50%) translateX(0);opacity:.85}50%{transform:translateY(-50%) translateX(6px);opacity:1}} /* SVG node styles */ .fc-box__diagram .n-bg{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.12);stroke-width:1.2;transition:all .3s ease} .fc-box__diagram .n-bg--input{stroke:rgba(232,122,46,.35);fill:rgba(232,122,46,.03)} .fc-box__diagram .n-bg--reactor{fill:rgba(232,122,46,.07);stroke:rgba(232,122,46,.5);stroke-width:2} .fc-box__diagram .n-bg--output{fill:rgba(212,160,23,.06);stroke:rgba(212,160,23,.45);stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(212,160,23,.18))} .fc-box__diagram .n-bg--endpoint{fill:rgba(212,160,23,.06);stroke:rgba(212,160,23,.45);stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(212,160,23,.18))} .fc-box__diagram .n-name{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;fill:#fff;letter-spacing:.3px} .fc-box__diagram .n-detail{font-family:'Montserrat',sans-serif;font-size:8.5px;font-weight:600;fill:rgba(255,255,255,.45)} .fc-box__diagram .n-yield{font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:800;fill:#D4A017} /* Connection paths — Classic PFD animated dashes */ .fc-box__diagram .conn{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0} .fc-box__diagram .conn.drawn{opacity:.85;transition:stroke-dashoffset 1.2s ease} @keyframes dashFlow{to{stroke-dashoffset:-40}} .fc-box__diagram .conn.flowing{stroke-dasharray:6 4 !important;animation:dashFlow 2.5s linear infinite} .fc-box__diagram .conn--tire{stroke:#E53935} .fc-box__diagram .conn--tire.flowing{animation-duration:1.5s} .fc-box__diagram .conn--steel{stroke:#B0BEC5} .fc-box__diagram .conn--heavyoil{stroke:#A0522D} .fc-box__diagram .conn--biogas{stroke:#FF9800} .fc-box__diagram .conn--biogas.flowing{animation-duration:2s} .fc-box__diagram .conn--rubber{stroke:#7A4A2E} .fc-box__diagram .conn--rubber.flowing{animation-duration:2.2s} .fc-box__diagram .conn--exhaust{stroke:#BDBDBD} .fc-box__diagram .conn--exhaust.flowing{animation-duration:3s} .fc-box__diagram .conn--waterin{stroke:#4FC3F7;stroke-width:2} .fc-box__diagram .conn--waterout{stroke:#26A69A;stroke-width:2} .fc-box__diagram .conn--recycle{stroke:rgba(255,152,0,.45);stroke-width:2;stroke-dasharray:6 3} /* Path labels on diagram */ .fc-box__diagram .path-label{font-family:'Montserrat',sans-serif;font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;fill:rgba(255,255,255,.15)} /* Spine line */ .fc-box__diagram .spine{fill:none;stroke:rgba(255,255,255,.15);stroke-width:2;stroke-linecap:round} /* Sequential glow animation on nodes */ @keyframes node-pulse{ 0%{filter:drop-shadow(0 0 0 transparent)} 50%{filter:drop-shadow(0 0 14px var(--glow-color,rgba(232,122,46,.5)))} 100%{filter:drop-shadow(0 0 0 transparent)} } .fc-box__diagram g.node.glow{animation:node-pulse .8s ease} .fc-box__diagram g.node.glow .n-bg{stroke-width:2.5;stroke:var(--glow-color,rgba(232,122,46,.6))} .fc-box__diagram g.node[data-path="oil"].glow{--glow-color:rgba(232,122,46,.5)} .fc-box__diagram g.node[data-path="carbon"].glow{--glow-color:rgba(107,142,35,.5)} .fc-box__diagram g.node[data-path="steel"].glow{--glow-color:rgba(144,164,174,.5)} .fc-box__diagram g.node[data-path="gas"].glow{--glow-color:rgba(153,153,153,.5)} .fc-box__diagram g.node[data-path="input"].glow{--glow-color:rgba(198,40,40,.5)} /* Node group hover */ .fc-box__diagram g.node:hover .n-bg{stroke-width:2;filter:drop-shadow(0 0 12px rgba(232,122,46,.2))} .fc-box__diagram g.node:hover .n-bg--output{filter:drop-shadow(0 0 12px rgba(212,160,23,.25))} /* Reactor glow pulse */ @keyframes reactor-glow{0%,100%{filter:drop-shadow(0 0 8px rgba(232,122,46,.15))}50%{filter:drop-shadow(0 0 20px rgba(232,122,46,.3))}} .fc-box__diagram .reactor-group{animation:reactor-glow 3s ease-in-out infinite} /* Legend bar */ .fc-box__legend{padding:16px 32px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:28px;flex-wrap:wrap} .fc-box__legend-item{display:flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;font-size:.68rem;font-weight:600;color:rgba(255,255,255,.4)} .fc-box__legend-line{width:24px;height:2px;border-radius:1px} .fc-box__legend-line--tire{background:#E53935} .fc-box__legend-line--steel{background:#B0BEC5} .fc-box__legend-line--heavyoil{background:#A0522D} .fc-box__legend-line--biogas{background:#FF9800} .fc-box__legend-line--rubber{background:#7A4A2E} .fc-box__legend-line--exhaust{background:#BDBDBD} .fc-box__legend-line--waterin{background:#4FC3F7} .fc-box__legend-line--waterout{background:#26A69A} .fc-box__legend-line--dashed{border-top:2px dashed;background:none;height:0} /* Node appear animation */ .fc-box__diagram g.node{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease} .fc-box__diagram g.node.show{opacity:1;transform:translateY(0)} /* ============================================================ 7. PRODUCTS ============================================================ */ .bg-products__header{text-align:center;margin-bottom:48px} .bg-products__header h2 span{color:var(--o)} .bg-products__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .bg-product-card{background:var(--w);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--tr)} .bg-product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hov)} .bg-product-card__head{padding:28px 24px;position:relative;overflow:hidden;height:180px;background-size:cover;background-position:center} .bg-product-card__head::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 50%)} .bg-product-card__svg{position:absolute;top:14px;right:14px;width:56px;height:56px;opacity:.3;z-index:2} .bg-product-card:hover .bg-product-card__svg{opacity:.45} .bg-product-card__icon{display:none} .bg-product-card__yield{font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:900;color:var(--w);position:relative;z-index:2} .bg-product-card__yield-lbl{font-size:.7rem;font-weight:600;color:rgba(255,255,255,.7);position:relative;z-index:2} .bg-product-card__body{padding:24px 20px} .bg-product-card__title{font-size:1rem;margin-bottom:8px} .bg-product-card__desc{font-size:.85rem;color:var(--tg);line-height:1.7;margin-bottom:16px} .bg-product-card__uses{display:flex;flex-direction:column;gap:6px} .bg-product-card__uses li{font-size:.8rem;color:var(--tg);padding-left:18px;position:relative;line-height:1.5} .bg-product-card__uses li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--o)} .bg-product-card__head--gas .bg-product-card__uses li::before{background:var(--gold)} /* ============================================================ 8. ENVIRONMENTAL IMPACT ============================================================ */ .bg-impact{background:var(--grad-hero);position:relative;overflow:hidden} .bg-impact::before{display:none} /* --- Eco Animated Background --- */ .bg-impact__bg{position:absolute;inset:0;z-index:0;pointer-events:none} /* Aurora gradient — fire + gold instead of green */ .bg-impact__aurora{position:absolute;inset:0;background: radial-gradient(ellipse 80% 60% at 20% 80%,rgba(212,160,23,.14) 0%,transparent 60%), radial-gradient(ellipse 60% 80% at 80% 20%,rgba(232,122,46,.10) 0%,transparent 50%), radial-gradient(ellipse 50% 50% at 50% 50%,rgba(240,90,30,.06) 0%,transparent 70%); animation:auroraShift 12s ease-in-out infinite alternate} @keyframes auroraShift{ 0%{opacity:.6;transform:scale(1) translate(0,0)} 50%{opacity:1;transform:scale(1.15) translate(-3%,2%)} 100%{opacity:.7;transform:scale(1.05) translate(3%,-2%)} } /* Floating ember/gold particles */ .bg-impact__particles{position:absolute;inset:0} .bg-impact__particles span{position:absolute;display:block;border-radius:50%;opacity:0;bottom:-20px;background:radial-gradient(circle,rgba(228,180,41,.7) 0%,rgba(232,122,46,.15) 70%);box-shadow:0 0 14px rgba(212,160,23,.45);animation:ecoFloat linear infinite} .bg-impact__particles span:nth-child(1){width:6px;height:6px;left:5%;animation-duration:14s;animation-delay:0s} .bg-impact__particles span:nth-child(2){width:10px;height:10px;left:15%;animation-duration:10s;animation-delay:2s} .bg-impact__particles span:nth-child(3){width:4px;height:4px;left:25%;animation-duration:16s;animation-delay:4s} .bg-impact__particles span:nth-child(4){width:8px;height:8px;left:35%;animation-duration:12s;animation-delay:1s} .bg-impact__particles span:nth-child(5){width:5px;height:5px;left:45%;animation-duration:18s;animation-delay:3s} .bg-impact__particles span:nth-child(6){width:12px;height:12px;left:55%;animation-duration:9s;animation-delay:5s} .bg-impact__particles span:nth-child(7){width:7px;height:7px;left:65%;animation-duration:15s;animation-delay:0.5s} .bg-impact__particles span:nth-child(8){width:4px;height:4px;left:72%;animation-duration:11s;animation-delay:6s} .bg-impact__particles span:nth-child(9){width:9px;height:9px;left:80%;animation-duration:13s;animation-delay:2.5s} .bg-impact__particles span:nth-child(10){width:6px;height:6px;left:90%;animation-duration:17s;animation-delay:1.5s} .bg-impact__particles span:nth-child(11){width:5px;height:5px;left:10%;animation-duration:20s;animation-delay:7s} .bg-impact__particles span:nth-child(12){width:8px;height:8px;left:30%;animation-duration:11s;animation-delay:4.5s} .bg-impact__particles span:nth-child(13){width:3px;height:3px;left:50%;animation-duration:19s;animation-delay:8s} .bg-impact__particles span:nth-child(14){width:10px;height:10px;left:70%;animation-duration:10s;animation-delay:3.5s} .bg-impact__particles span:nth-child(15){width:6px;height:6px;left:85%;animation-duration:14s;animation-delay:6.5s} @keyframes ecoFloat{ 0%{transform:translateY(0) translateX(0) scale(0);opacity:0} 10%{opacity:.8} 50%{transform:translateY(-50vh) translateX(30px) scale(1);opacity:.5} 80%{opacity:.3} 100%{transform:translateY(-110vh) translateX(-20px) scale(.6);opacity:0} } /* Animated wave at bottom */ .bg-impact__wave{position:absolute;bottom:0;left:0;width:100%;height:100px;z-index:1} /* --- End Eco Background --- */ .bg-impact__header{text-align:center;margin-bottom:48px;position:relative;z-index:2} .bg-impact__header h2{color:var(--w)} .bg-impact__header h2 span{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold)} .bg-impact__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:2} .bg-impact__item{text-align:center;padding:36px 24px;background:rgba(255,255,255,.04);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);transition:var(--tr)} .bg-impact__item:hover{background:rgba(255,255,255,.08);border-color:rgba(212,160,23,.35);transform:translateY(-4px)} .bg-impact__icon{width:56px;height:56px;border-radius:14px;background:rgba(212,160,23,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--goldl);font-size:1.3rem} .bg-impact__num{font-family:'Montserrat',sans-serif;font-size:2.4rem;font-weight:900;color:var(--goldl);line-height:1} .bg-impact__unit{font-family:'Montserrat',sans-serif;font-size:.9rem;font-weight:700;color:var(--goldl);display:inline} .bg-impact__lbl{font-size:.82rem;color:rgba(255,255,255,.5);margin-top:8px;line-height:1.5} .bg-impact__quote{text-align:center;margin-top:48px;padding:32px;position:relative;z-index:2} .bg-impact__quote blockquote{font-family:'Montserrat',sans-serif;font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.7);font-style:italic;line-height:1.8;max-width:800px;margin:0 auto} .bg-impact__quote blockquote::before{content:'\201C';font-size:3rem;color:var(--o);position:absolute;top:10px;left:50%;margin-left:-410px;line-height:1} /* ============================================================ 9. GALLERY ============================================================ */ .bg-gallery__header{text-align:center;margin-bottom:48px} .bg-gallery__header h2 span{color:var(--o)} .bg-gallery__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px} .bg-gallery__item{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--tr)} .bg-gallery__item:hover{transform:translateY(-6px);box-shadow:var(--shadow-hov)} .bg-gallery__item img{width:100%;height:360px;object-fit:cover;transition:transform .5s ease} .bg-gallery__item:hover img{transform:scale(1.05)} .bg-gallery__caption{padding:18px 24px;background:var(--w)} .bg-gallery__caption h3{font-size:.95rem;margin-bottom:4px} .bg-gallery__caption p{font-size:.82rem;color:var(--tg);margin-bottom:0} /* ============================================================ 10. CONTACT ============================================================ */ .bg-contact{background:var(--lw)} .bg-contact__inner{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .bg-cform{background:var(--w);padding:48px 40px} .bg-cform h2{margin-bottom:8px} .bg-cform h2 span{color:var(--o)} .bg-cform p{color:var(--tg);font-size:.9rem;margin-bottom:28px} .bg-cform__group{margin-bottom:20px} .bg-cform__group label{display:block;font-family:'Montserrat',sans-serif;font-size:.88rem;font-weight:600;color:var(--td);margin-bottom:6px} .bg-cform__group input,.bg-cform__group textarea{width:100%;padding:12px 16px;border:1px solid var(--bd);border-radius:8px;font-family:'Open Sans',sans-serif;font-size:.9rem;color:var(--td);transition:var(--tr);background:var(--w)} .bg-cform__group input:focus,.bg-cform__group textarea:focus{outline:none;border-color:var(--o);box-shadow:0 0 0 3px rgba(232,122,46,.1)} .bg-cform__group textarea{resize:vertical;min-height:120px} .bg-cform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .bg-cform__submit{width:100%;margin-top:8px} .bg-cform__success{display:none;padding:16px;background:rgba(212,160,23,.12);border:1px solid var(--gold);border-radius:8px;color:var(--goldd);font-weight:600;text-align:center;margin-top:16px} .bg-cform__success.show{display:block} .bg-cinfo{background:var(--grad-dark);padding:48px 40px;color:var(--w);display:flex;flex-direction:column;justify-content:center} .bg-cinfo h2{color:var(--w);margin-bottom:8px} .bg-cinfo>p{color:rgba(255,255,255,.6);font-size:.9rem;margin-bottom:32px} .bg-cinfo__item{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px} .bg-cinfo__icon{width:42px;height:42px;border-radius:10px;background:rgba(232,122,46,.12);display:flex;align-items:center;justify-content:center;color:var(--o);font-size:1rem;flex-shrink:0} .bg-cinfo__text h4{font-family:'Montserrat',sans-serif;font-size:.82rem;font-weight:700;margin-bottom:2px} .bg-cinfo__text p{font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:0;line-height:1.6} .bg-cinfo__text a{color:var(--ol);transition:var(--tr)} .bg-cinfo__text a:hover{color:var(--o)} .bg-cinfo__divider{width:100%;height:1px;background:rgba(255,255,255,.08);margin:8px 0 24px} .bg-cinfo__parent{font-size:.8rem;color:rgba(255,255,255,.4);font-style:italic} .bg-cinfo__parent a{color:var(--ol)} /* ============================================================ 11. FOOTER ============================================================ */ .bg-footer{background:var(--bkd);padding:56px 0 0;color:var(--w)} .bg-footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.06)} .bg-footer__brand-desc{font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.7;margin-top:16px} .bg-footer h4{font-family:'Montserrat',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ol);margin-bottom:18px} .bg-footer ul li{margin-bottom:10px} .bg-footer ul li a{font-size:.85rem;color:rgba(255,255,255,.5);transition:var(--tr)} .bg-footer ul li a:hover{color:var(--o);padding-left:4px} .bg-footer__contact-item{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:.85rem;color:rgba(255,255,255,.5)} .bg-footer__contact-item i{color:var(--o);width:16px;text-align:center} .bg-footer__bottom{padding:20px 0;text-align:center} .bg-footer__bottom p{font-size:.78rem;color:rgba(255,255,255,.3);margin-bottom:0} /* ---------- Back To Top ---------- */ .back-top{position:fixed;bottom:28px;right:28px;width:44px;height:44px;border-radius:50%;background:var(--o);color:var(--w);display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:var(--shadow);cursor:pointer;opacity:0;pointer-events:none;transition:var(--tr);z-index:900;border:none} .back-top.show{opacity:1;pointer-events:all} .back-top:hover{background:var(--od);transform:translateY(-3px)} /* ============================================================ DARK MODE ============================================================ */ @media(prefers-color-scheme:dark){ body{background:#121212;color:#E0E0E0} .bg-stats{background:#1A1A1A} .bg-process{background:#1A1A1A} .bg-contact{background:#1A1A1A} .bg-about__title,.bg-process__card-title,.bg-products__header h2,.bg-gallery__header h2,.bg-cform h2{color:#E0E0E0} .bg-about__check{color:#E0E0E0} .bg-process__card,.bg-product-card,.bg-gallery__caption,.bg-cform{background:#222} .bg-contact__inner{box-shadow:0 4px 24px rgba(0,0,0,.3)} .bg-cform__group input,.bg-cform__group textarea{background:#2A2A2A;border-color:#333;color:#E0E0E0} /* navbar stays cream in dark mode too — black wordmark on the logo needs a light backdrop */ } /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1060px){ .bg-hero__inner{gap:40px} .bg-hero__img-wrap img{height:400px} .bg-products__grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:860px){ .bg-nav__inner{height:100px} .bg-nav__logo{height:90px} .bg-nav.scrolled .bg-nav__inner{height:64px} .bg-nav.scrolled .bg-nav__logo{height:52px} .bg-nav__links,.bg-nav__cta{display:none} .bg-nav__burger{display:flex;margin-inline-start:auto} /* Language toggle stays next to the logo; burger goes to the opposite end */ .bg-nav__actions{margin-inline-start:12px} .bg-hero__inner{grid-template-columns:1fr;text-align:center} .bg-hero__desc{margin-left:auto;margin-right:auto} .bg-hero__btns{justify-content:center} .bg-hero__visual{margin-top:32px} .bg-hero__badge{left:auto;right:-10px;bottom:20px} .bg-hero__eyebrow{justify-content:center} .bg-stats__grid{grid-template-columns:repeat(3,1fr)} .bg-about__grid{grid-template-columns:1fr} .bg-about__visual{margin-top:32px} .bg-process__grid{grid-template-columns:repeat(2,1fr)} .bg-impact__grid{grid-template-columns:repeat(2,1fr)} .bg-contact__inner{grid-template-columns:1fr} .bg-footer__grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:768px){ .fc-box__diagram{padding:16px} .fc-box__diagram svg{min-width:840px} /* Slightly larger SVG text so labels stay readable when scroll-panning on phones */ .fc-box__diagram .n-name{font-size:14px} .fc-box__diagram .n-detail{font-size:10px} .fc-box__diagram .n-yield{font-size:11px} .fc-box__diagram .path-label{font-size:9px} /* Stack legend vertically on mobile — avoids awkward 2-line wraps */ .fc-box__legend{flex-direction:column;gap:10px;padding:14px 20px;align-items:flex-start} .fc-box__title{padding:16px 20px;flex-wrap:wrap;gap:6px} .fc-box__title h3{font-size:.85rem} .fc-box__title span{font-size:.6rem} } @media(max-width:580px){ .container{padding:0 16px} /* Stats: stack to 1 column so last item isn't orphaned (was 2+2+1 layout) */ .bg-stats__grid{grid-template-columns:1fr;gap:16px} .bg-stats__item{padding:14px 12px;border-bottom:1px solid var(--bd)} .bg-stats__item:last-child{border-bottom:none} .bg-process__grid{grid-template-columns:1fr} .bg-products__grid{grid-template-columns:1fr} .bg-impact__grid{grid-template-columns:1fr} .bg-gallery__grid{grid-template-columns:1fr} .bg-gallery__item img{height:260px} .bg-cform{padding:32px 24px} .bg-cinfo{padding:32px 24px} .bg-cform__row{grid-template-columns:1fr} .bg-about__checks{grid-template-columns:1fr} .bg-footer__grid{grid-template-columns:1fr} .bg-impact__quote blockquote::before{display:none} /* Hide decorative rings/glow on small phones to prevent any sub-pixel overflow */ .bg-hero__ring--1,.bg-hero__ring--2{display:none} .bg-hero__glow{width:340px;height:340px;right:-80px;top:30%} /* Hero badge: center below image on very small screens */ .bg-hero__badge{left:50%!important;right:auto!important;bottom:-10px;transform:translateX(-50%)} .bg-hero__img-wrap{margin-bottom:32px} /* Inputs easier to tap */ .bg-cform__group input,.bg-cform__group textarea{font-size:1rem;padding:14px 16px} /* Button min touch target */ .btn{padding:14px 28px;min-height:48px} .back-top{width:48px;height:48px} } @media(prefers-reduced-motion:reduce){ .bg-impact__aurora,.bg-impact__particles span,.bg-impact__wave animate{animation:none!important} .bg-impact__aurora{opacity:.7} }