:root{--bg:#f5f7fb;--ink:#101828;--muted:#667085;--line:#e4e7ec;--navy:#0b1324;--blue:#1769e0;--cyan:#20b8c9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Vazirmatn,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.8}button,input{font:inherit}button{cursor:pointer;border:0}.container{width:min(1180px,calc(100% - 40px));margin:auto}.topbar{background:#08101e;color:#c8d0dc;font-size:12px}.topbar-inner{height:34px;display:flex;justify-content:space-between;align-items:center}.header{background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.nav{height:76px;display:flex;align-items:center;gap:34px}.brand{display:flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none;min-width:190px}.brand-mark{width:205px;height:58px;display:flex;align-items:center;overflow:hidden;background:transparent;box-shadow:none;border-radius:0}.brand-image-wrap{position:relative;display:block;width:190px;height:56px;overflow:hidden;border-radius:10px;background:transparent;box-shadow:none}.brand-image{position:static;width:100%;height:100%;max-width:none;display:block;object-fit:contain;object-position:center}.brand b{display:block;font-size:20px;line-height:1.05}.brand small{display:block;font-size:8px;letter-spacing:2px;color:#98a2b3;margin-top:3px}.nav-links{display:flex;gap:26px;flex:1}.nav-links a{color:#475467;text-decoration:none;font-size:14px;font-weight:600}.nav-actions{display:flex;gap:10px}.ghost,.primary{border-radius:11px;padding:10px 18px;font-weight:700}.ghost{background:#fff;border:1px solid var(--line);color:#344054}.primary{color:#fff;background:linear-gradient(135deg,var(--blue),#3b82f6);box-shadow:0 9px 22px rgba(23,105,224,.2)}.hero{position:relative;background:linear-gradient(90deg,rgba(248,252,255,.97) 0%,rgba(240,248,255,.91) 58%,rgba(231,244,252,.78) 100%),var(--refinery-bg);background-size:cover;background-position:center right;color:#0b2440;overflow:hidden;border-bottom:1px solid rgba(13,86,143,.08)}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 38%,rgba(0,174,225,.10),transparent 34%),linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.08));pointer-events:none}.hero:after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(180deg,transparent,rgba(7,70,112,.10));pointer-events:none}.hero-grid{position:relative;z-index:2;min-height:590px;display:grid;grid-template-columns:1fr .9fr;gap:50px;align-items:center}.hero-copy{padding:72px 0;max-width:760px}.eyebrow,.kicker{font-size:11px;letter-spacing:2px;font-weight:800;color:#53d0db}.hero h1{font-size:58px;line-height:1.13;margin:12px 0 18px;letter-spacing:-2.5px;color:#082544}.hero h1 span{background:linear-gradient(90deg,#075ebd,#00a9d8);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{font-size:17px;line-height:2;color:#38536d;margin:0 0 28px;max-width:650px}.search-box{display:flex;align-items:center;background:#fff;border-radius:15px;padding:5px 6px 5px 14px;max-width:650px}.search-box span{color:#98a2b3;font-size:25px}.search-box input{border:0;outline:0;flex:1;min-width:0;padding:12px;font-size:14px}.search-box button{background:var(--navy);color:#fff;border-radius:11px;padding:11px 22px;font-weight:700}.quick{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;font-size:11px;color:#53718e}.quick button{background:rgba(10,92,184,.07);color:#245276;border:1px solid rgba(10,92,184,.12);border-radius:999px;padding:5px 10px}.hero-card{height:430px;border:1px solid rgba(255,255,255,.85);border-radius:32px;background:rgba(255,255,255,.48);backdrop-filter:blur(10px);position:relative;display:grid;place-items:center;overflow:hidden;box-shadow:0 28px 80px rgba(10,72,115,.16),inset 0 1px 0 rgba(255,255,255,.9)}.hero-orbit{position:absolute;border:1px solid rgba(91,211,220,.2);border-radius:50%}.orbit-1{width:300px;height:300px}.orbit-2{width:190px;height:190px}.hero-brand-stage{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:20px}.hero-stat{position:absolute;right:22px;bottom:20px;padding:12px 16px;border-radius:14px;background:rgba(7,34,61,.88);color:#fff;box-shadow:0 10px 30px rgba(4,25,45,.18)}.hero-stat strong{display:block;font-size:13px}.hero-stat span{display:block;font-size:10px;color:#c9d9e8;margin-top:3px}.hero-stat strong,.hero-stat span{display:block}.hero-stat span{color:#98a2b3;font-size:10px}.stats{background:linear-gradient(180deg,#f8fdff,#fff);border-bottom:1px solid var(--line)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:23px 0}.stats-grid div{display:flex;flex-direction:column;align-items:center;border-left:1px solid var(--line)}.stats-grid div:last-child{border:0}.stats-grid strong{font-size:23px}.stats-grid span{font-size:11px;color:var(--muted)}.section{padding:78px 0;background:linear-gradient(180deg,#f7fbff,#fff)}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.section-head h2{font-size:28px;margin:5px 0}.section-head a{color:var(--blue);text-decoration:none;font-size:13px;font-weight:700}.category-grid,.listing-grid,.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.category,.listing,.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;text-align:right}.category:hover{transform:translateY(-3px)}.category span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eef6ff;color:var(--blue);font-size:22px;margin-bottom:15px}.category b{display:block}.category small,.listing .meta,.step p{color:var(--muted);font-size:11px}.listings{background:linear-gradient(180deg,#fff,#f5fbff)}.filters{display:flex;gap:7px}.filter{background:#f2f4f7;border-radius:9px;padding:7px 13px;font-size:12px;color:#667085}.filter.active{background:#e9f2ff;color:var(--blue);font-weight:700}.listing-top,.price{display:flex;justify-content:space-between;gap:10px}.badge{font-size:10px;background:#ecfdf3;color:#027a48;border-radius:999px;padding:4px 9px}.listing h3{margin:13px 0 5px;font-size:16px}.listing-photo{width:100%;height:170px;object-fit:cover;border-radius:13px;margin-top:13px;background:#f2f4f7}.listing-desc{margin-top:5px}.price{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);align-items:end}.price b{font-size:16px}.details{background:transparent;color:var(--blue);font-size:10px;font-weight:700;padding:0}.how{background:linear-gradient(180deg,#edf8ff,#f5f7fb)}.step em{font-style:normal;color:var(--blue);font-size:12px;font-weight:800}.step h3{font-size:17px;margin:9px 0 5px}.step p{margin:0}.cta{padding:60px 0;background:radial-gradient(circle at 75% 15%,rgba(68,207,255,.32),transparent 28%),linear-gradient(180deg,#0c4f82,#081a31 72%);color:#fff}.cta-inner{display:flex;justify-content:space-between;align-items:center}.cta h2{margin:5px 0;font-size:30px}.cta p{color:#b9c3d0;font-size:13px}.large{padding:14px 28px}footer{background:#08101e;color:#aeb8c7;padding:48px 0 20px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:40px}.footer-grid p,.footer-grid span,.footer-grid a{display:block;color:#8995a7;font-size:11px;text-decoration:none;margin:7px 0}.footer-grid h4{color:#fff;font-size:13px}.copyright{border-top:1px solid rgba(255,255,255,.07);margin-top:35px;padding-top:16px;font-size:10px;color:#667085}.modal{display:none;position:fixed;inset:0;background:rgba(3,9,18,.62);z-index:50;align-items:center;justify-content:center;padding:20px}.modal.show,.modal.open{display:flex}.modal-card{width:min(430px,100%);background:#fff;border-radius:22px;padding:30px;position:relative}.modal-close{position:absolute;left:18px;top:13px;background:#f2f4f7;border-radius:50%;width:32px;height:32px;font-size:20px}.modal-card h2{margin:8px 0 4px}.modal-card p{color:var(--muted);font-size:12px}.modal-card label{display:block;font-size:12px;font-weight:700;margin:20px 0 10px}.modal-card input{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px;margin-top:7px;outline:0}.full{width:100%;margin-top:8px}.modal-card small{display:block;color:#98a2b3;font-size:9px;margin-top:14px}.offer-detail{font-size:12px;color:#475467}.offer-detail>div{padding:7px 0;border-bottom:1px solid var(--line)}.offer-detail p{margin:12px 0 0}.modal-card:has(.offer-detail) small{display:none}@media(max-width:900px){.nav-links{display:none}.hero-grid{grid-template-columns:1fr}.hero-card{display:none}.hero h1{font-size:45px}.category-grid,.listing-grid,.steps{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.stats-grid{grid-template-columns:repeat(2,1fr);gap:18px}.stats-grid div:nth-child(2){border:0}}@media(max-width:560px){.container{width:calc(100% - 26px)}.topbar-inner span:last-child{display:none}.nav{height:66px}.nav-actions .ghost{display:none}.hero-copy{padding:50px 0}.hero h1{font-size:38px}.search-box button{padding:10px 13px}.section{padding:55px 0}.category-grid,.listing-grid,.steps,.footer-grid{grid-template-columns:1fr}.section-head{align-items:start;gap:15px;flex-direction:column}.cta-inner{align-items:start;gap:25px;flex-direction:column}.stats-grid{grid-template-columns:repeat(2,1fr)}}
.hero-brand-image{width:92%;height:92%;object-fit:contain;object-position:center;display:block;border-radius:22px;box-shadow:0 18px 45px rgba(0,64,112,.12)}
body{position:relative;background:#f5f9fc}
body:before{content:"";position:fixed;inset:0;z-index:-1;background-image:var(--refinery-bg);background-size:cover;background-position:right center;background-attachment:fixed;opacity:.075;filter:saturate(.9) blur(.15px);pointer-events:none}
.section,.stats,.listings,.how,.app-download{position:relative;background:rgba(248,252,255,.94)}
.listings{background:rgba(255,255,255,.94)}
.cta{position:relative}
.footer-brand .brand-image-wrap{width:190px;height:52px}.footer-brand .brand-image{width:190px;height:71px}
@media(max-width:900px){.brand-image-wrap,.brand-mark{width:160px;height:48px}.brand-image{width:160px;height:60px}.hero-grid{grid-template-columns:1fr}.hero-card{height:330px}.hero-brand-image{width:min(100%,430px)}}
@media(max-width:560px){.brand-image-wrap,.brand-mark{width:145px;height:45px}.brand-image{width:145px;height:54px}.hero-copy{padding:50px 0}.hero-card{height:270px}.hero h1{font-size:38px}.hero-brand-image{width:100%}}

/* Professional polish */
.header{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(8,58,96,.08);position:sticky;top:0;z-index:50}.nav{min-height:74px}.nav-links a{font-weight:600;color:#29465f}.nav-actions .ghost{border-color:#dbe6ef;color:#173753}.primary{box-shadow:0 10px 24px rgba(21,111,220,.18)}
.stats{background:rgba(255,255,255,.88);border-top:1px solid rgba(13,86,143,.06);border-bottom:1px solid rgba(13,86,143,.06)}
.section{background:rgba(250,253,255,.94)}.listings{background:rgba(244,249,253,.96)}.how{background:rgba(248,252,255,.94)}
.category,.listing-card,.step{border:1px solid rgba(13,86,143,.09);box-shadow:0 10px 30px rgba(15,68,103,.05)}
.hero-qr{background:rgba(255,255,255,.64);border-color:rgba(9,86,142,.12);box-shadow:0 10px 30px rgba(13,76,112,.08)}.hero-qr strong{color:#0b2b47}.hero-qr span{color:#55718a}.hero-qr small{color:#0788b7}
.app-top{background:linear-gradient(110deg,#071b31,#0b3155 58%,#0c5574)}
.footer-brand .brand-image-wrap{width:180px;height:54px}.footer-brand .brand-image{width:100%;height:100%;object-fit:contain;object-position:center}
@media(max-width:900px){.brand-image-wrap{width:165px;height:50px}.brand-image{left:auto;width:100%;height:100%;object-fit:contain}.hero-grid{grid-template-columns:1fr;gap:24px}.hero-copy{padding:56px 0 20px}.hero-card{height:330px}.hero-brand-image{width:92%;height:90%}}
@media(max-width:560px){.brand-image-wrap{width:150px;height:46px}.brand-image{left:auto;width:100%;height:100%;object-fit:contain}.hero h1{font-size:40px}.hero-card{height:280px;border-radius:24px}.hero-brand-image{width:96%;height:88%}.hero-stat{right:12px;bottom:12px}}


/* Final logo sizing fix: prevent intrinsic image width from overflowing its wrapper */
.brand-image,.hero-brand-image{min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;object-position:center;}
.brand-image-wrap{min-width:0;min-height:0;}
.hero-brand-stage{min-width:0;min-height:0;}

/* Hero logo placement: keep the full wordmark lower in the visual card instead of vertically centering the wide strip */
.hero-brand-stage{display:flex;align-items:flex-end;justify-content:center;padding:20px 28px 86px;}
.hero-brand-image{width:min(92%,520px);height:auto;max-width:100%;max-height:none;object-fit:contain;object-position:center;box-shadow:0 18px 45px rgba(0,64,112,.12);}
@media(max-width:900px){.hero-brand-stage{padding:18px 24px 76px}.hero-brand-image{width:min(92%,430px);height:auto;}}
@media(max-width:560px){.hero-brand-stage{padding:16px 16px 66px}.hero-brand-image{width:100%;height:auto;}}


/* Hero visual balance: use the upper half of the card as an industrial visual field instead of leaving dead space */
.hero-brand-stage{position:relative;isolation:isolate;overflow:hidden;}
.hero-brand-stage:before{content:"";position:absolute;inset:0 0 46% 0;background:radial-gradient(circle at 78% 34%,rgba(25,165,215,.20),transparent 22%),radial-gradient(circle at 30% 78%,rgba(8,91,150,.10),transparent 28%),linear-gradient(135deg,#eaf8ff 0%,#f9fcff 52%,#cfeef8 100%);opacity:1;border-radius:26px;box-shadow:inset 0 -30px 45px rgba(255,255,255,.35);z-index:-1;}
.hero-brand-stage:after{content:"CHEMICAL MARKETPLACE";position:absolute;top:24px;left:28px;font-size:10px;letter-spacing:3px;font-weight:800;color:rgba(8,65,105,.58);z-index:0;}
.hero-brand-image{position:relative;z-index:2;margin-top:auto;}
.hero-stat{z-index:3;}
@media(max-width:900px){.hero-brand-stage:before{inset:0 0 43% 0}.hero-brand-stage:after{top:20px;left:24px}}
@media(max-width:560px){.hero-brand-stage:before{inset:0 0 40% 0;border-radius:20px}.hero-brand-stage:after{top:16px;left:18px;font-size:8px;letter-spacing:2px}}


/* Complete hero visual redesign */
.hero-card{height:500px;border:1px solid rgba(255,255,255,.72);border-radius:34px;background:linear-gradient(145deg,#06192f 0%,#0b3150 46%,#087a9d 100%);overflow:hidden;position:relative;display:block;box-shadow:0 30px 80px rgba(5,45,75,.25),inset 0 1px 0 rgba(255,255,255,.16)}
.hero-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 28%,rgba(66,220,240,.32),transparent 24%),radial-gradient(circle at 20% 78%,rgba(31,120,220,.25),transparent 30%),linear-gradient(120deg,transparent 42%,rgba(255,255,255,.05) 43%,transparent 44%);pointer-events:none}
.hero-card:after{content:"";position:absolute;width:360px;height:360px;right:-150px;top:-120px;border:1px solid rgba(133,237,248,.22);border-radius:50%;box-shadow:0 0 0 32px rgba(133,237,248,.035),0 0 0 64px rgba(133,237,248,.025);pointer-events:none}
.hero-visual-top{position:absolute;top:25px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;color:#bceef5;z-index:4}
.hero-visual-top span{font-size:10px;font-weight:800;letter-spacing:3px}
.hero-visual-top b{font-size:9px;letter-spacing:1.5px;font-weight:600;color:rgba(220,246,250,.65)}
.hero-visual-orbit{position:absolute;border:1px solid rgba(115,228,240,.16);border-radius:50%;pointer-events:none}
.orbit-a{width:310px;height:310px;left:50%;top:46%;transform:translate(-50%,-50%)}
.orbit-b{width:220px;height:220px;left:50%;top:46%;transform:translate(-50%,-50%);border-color:rgba(115,228,240,.11)}
.hero-logo-plate{position:absolute;left:9%;right:9%;bottom:76px;height:205px;border-radius:25px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.9);box-shadow:0 25px 60px rgba(0,20,38,.30);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 28px 18px;z-index:3}
.hero-logo-caption{font-size:9px;letter-spacing:3px;color:#6b91a6;font-weight:800;margin-bottom:8px}
.hero-brand-image{width:min(100%,470px);height:auto;max-width:100%;max-height:155px;object-fit:contain;object-position:center;display:block;border-radius:10px;box-shadow:none}
.hero-visual-footer{position:absolute;left:28px;right:28px;bottom:22px;display:flex;justify-content:space-between;align-items:center;color:#c9eaf0;z-index:4;font-size:10px}
.hero-visual-footer span:last-child{font-weight:800;letter-spacing:.4px}
.hero-visual-footer i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#54d9dc;box-shadow:0 0 0 4px rgba(84,217,220,.13);margin-left:6px}
.hero-visual-particle{position:absolute;width:5px;height:5px;border-radius:50%;background:#7de8ee;opacity:.75;z-index:2}
.p1{top:28%;left:17%}.p2{top:63%;right:13%}
@media(max-width:900px){.hero-card{height:420px}.hero-logo-plate{left:7%;right:7%;bottom:65px;height:175px;padding:20px}.hero-brand-image{max-height:125px}.hero-visual-top{top:20px;left:22px;right:22px}.hero-visual-footer{left:22px;right:22px;bottom:18px}}
@media(max-width:560px){.hero-card{height:330px;border-radius:26px}.hero-visual-top{top:17px;left:18px;right:18px}.hero-visual-top b{display:none}.hero-logo-plate{left:6%;right:6%;bottom:54px;height:145px;border-radius:20px;padding:14px}.hero-logo-caption{font-size:7px;letter-spacing:2px;margin-bottom:4px}.hero-brand-image{max-height:105px}.hero-visual-footer{left:18px;right:18px;bottom:14px;font-size:8px}.orbit-a{width:220px;height:220px}.orbit-b{width:155px;height:155px}}

/* ChemLink unified brand system — approved logo / app icon treatment */
.hero-logo-plate{left:7%;right:7%;bottom:68px;height:238px;padding:18px 24px 14px;border-radius:28px;background:rgba(255,255,255,.98);box-shadow:0 25px 65px rgba(0,20,38,.28)}
.hero-logo-caption{font-size:8px;letter-spacing:2.6px;margin-bottom:6px}
.hero-brand-image{width:min(100%,500px);height:auto;max-width:100%;max-height:198px;object-fit:contain;object-position:center;display:block;border-radius:0;box-shadow:none}
.app-brand-icon{width:46px;height:46px;flex:0 0 46px;border-radius:12px;object-fit:cover;display:block;box-shadow:0 5px 14px rgba(0,0,0,.16)}
.app-top-btn .app-brand-icon{width:40px;height:40px;flex-basis:40px;border-radius:11px}
.app-option .app-brand-icon{width:44px;height:44px;flex-basis:44px;border-radius:12px}
.app-brand-pair{display:flex;align-items:center;gap:8px}
.app-brand-pair .platform-label{display:flex;flex-direction:column;gap:1px}
.app-brand-pair .platform-label strong{font-size:12px}
.app-brand-pair .platform-label small{font-size:9px;color:#98a2b3}
@media(max-width:900px){
  .hero-logo-plate{left:7%;right:7%;bottom:58px;height:205px;padding:15px 20px 12px}
  .hero-brand-image{max-height:168px}
}
@media(max-width:560px){
  .hero-logo-plate{left:6%;right:6%;bottom:48px;height:160px;border-radius:20px;padding:10px 12px 8px}
  .hero-logo-caption{font-size:6px;letter-spacing:1.7px;margin-bottom:3px}
  .hero-brand-image{max-height:132px}
  .app-brand-icon{width:42px;height:42px;flex-basis:42px}
}


/* Cloud marketplace ad posting form */
.new-offer-panel{margin-top:36px;padding:28px;border:1px solid #dce8f2;border-radius:22px;background:linear-gradient(145deg,#fff,#f4faff);box-shadow:0 16px 38px rgba(16,68,103,.07);scroll-margin-top:100px}
.new-offer-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.new-offer-heading h3{font-size:23px;margin:4px 0;color:#0b2440}.new-offer-heading p{margin:0;color:#667085;font-size:12px}
.cloud-mark{width:54px;height:54px;display:grid;place-items:center;flex:0 0 54px;border-radius:16px;background:#e8f5ff;color:#1769e0;font-size:28px}
.offer-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.offer-form label{display:block;font-size:12px;font-weight:700;color:#344054}
.offer-form input,.offer-form select,.offer-form textarea{display:block;width:100%;min-width:0;margin-top:6px;padding:11px 12px;border:1px solid #d8e2ec;border-radius:11px;background:#fff;color:#10233e;font:inherit;font-size:13px;outline:none}
.offer-form input:focus,.offer-form select:focus,.offer-form textarea:focus{border-color:#2b83d9;box-shadow:0 0 0 3px rgba(43,131,217,.1)}
.offer-wide{grid-column:1/-1}.offer-form button{min-width:190px}.offer-message{font-size:12px;margin:9px 0 0}.offer-message.success{color:#087443}.offer-message.error{color:#b42318}
.listing-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff}.listing-card .listing-photo{width:100%;height:170px;object-fit:cover}.listing-body{padding:18px}.listing-body h3{margin:9px 0}.listing-body p{margin:5px 0;font-size:12px;color:#475467}.listing-body small{display:block;margin-top:12px;color:#667085}
@media(max-width:560px){.new-offer-panel{padding:18px 14px}.offer-form{grid-template-columns:1fr}.offer-wide{grid-column:auto}.new-offer-heading h3{font-size:20px}}


/* ChemLink homepage redesign: refinery hero + clean app download panel */
.hero{background-image:linear-gradient(90deg,rgba(244,250,255,.97) 0%,rgba(240,248,255,.88) 43%,rgba(226,242,251,.20) 100%),var(--refinery-bg);background-position:center right;background-size:cover;min-height:610px}
.hero:before{background:linear-gradient(90deg,rgba(247,251,255,.86) 0%,rgba(247,251,255,.62) 42%,rgba(6,36,62,.04) 100%),radial-gradient(circle at 76% 44%,rgba(27,177,220,.16),transparent 38%)}
.hero-grid{grid-template-columns:1.05fr .95fr;gap:42px;min-height:610px}
.hero-copy{padding:66px 0;max-width:650px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:9px;color:#0879b9;background:rgba(255,255,255,.76);border:1px solid rgba(10,117,179,.15);padding:5px 12px;border-radius:999px;letter-spacing:2px}
.hero h1{font-size:clamp(42px,4.4vw,62px);line-height:1.25;letter-spacing:-1.8px;margin:18px 0 16px;text-shadow:0 2px 18px rgba(255,255,255,.45)}
.hero p{font-size:15px;max-width:540px;color:#36536c}
.hero-card{height:440px;border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(8,51,81,.17));border:1px solid rgba(255,255,255,.55);box-shadow:0 28px 70px rgba(4,42,73,.20),inset 0 1px 0 rgba(255,255,255,.55);backdrop-filter:blur(3px)}
.hero-visual-top,.hero-visual-footer{position:absolute;z-index:3;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;color:#fff;text-shadow:0 2px 8px rgba(0,20,38,.45)}
.hero-visual-top{top:20px;font-size:11px;letter-spacing:1.4px}.hero-visual-top b{font-size:9px;letter-spacing:1px;opacity:.9}
.hero-visual-footer{bottom:18px;font-size:10px}.hero-visual-footer i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6ff2d0;margin-left:6px;box-shadow:0 0 12px #6ff2d0}
.hero-visual-orbit{position:absolute;border:1px solid rgba(255,255,255,.34);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.orbit-a{width:330px;height:330px}.orbit-b{width:240px;height:240px;border-color:rgba(100,225,244,.42)}
.hero-visual-particle{position:absolute;width:12px;height:12px;border-radius:50%;background:#a8efff;box-shadow:0 0 25px rgba(85,218,255,.95)}.hero-visual-particle.p1{top:24%;left:23%}.hero-visual-particle.p2{bottom:25%;right:20%;width:7px;height:7px}
.hero-logo-plate{position:relative;z-index:2;width:78%;min-height:205px;padding:24px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.52);border-radius:24px;background:rgba(255,255,255,.88);box-shadow:0 18px 60px rgba(0,25,50,.24);transform:translateY(4px)}
.hero-logo-caption{font-size:9px;font-weight:800;letter-spacing:2px;color:#0b8dbb;margin-bottom:8px}
.hero-brand-image{width:100%;height:145px;object-fit:contain;box-shadow:none;border-radius:0}
.hero-qr{background:rgba(255,255,255,.78);border-color:rgba(9,86,142,.18);backdrop-filter:blur(8px)}
.app-top{padding:26px 0;background:linear-gradient(112deg,#071a30,#0c365b 56%,#08738b);border-top:1px solid rgba(255,255,255,.16)}
.app-top-inner{align-items:center}.app-top h3{font-size:22px;letter-spacing:-.3px}.app-top p{font-size:12px}
.app-top-actions{gap:10px}.app-top-btn{border-radius:14px;padding:10px 14px;min-height:64px;transition:transform .18s ease,box-shadow .18s ease}.app-top-btn.android{box-shadow:0 9px 25px rgba(0,0,0,.15)}.app-brand-icon{width:34px;height:34px;object-fit:contain;border-radius:9px}
.app-download{padding:54px 0;background:linear-gradient(180deg,#f7fbff,#fff)}
.app-download-inner{gap:36px}.app-download h2{font-size:30px;color:#0c2b48}.app-download p{font-size:13px}
.app-option{min-width:255px;border-radius:16px;box-shadow:0 10px 28px rgba(15,68,103,.07);transition:transform .18s ease,box-shadow .18s ease}
.app-option:hover,.app-top-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,68,103,.13)}
@media(max-width:900px){.hero{background-position:62% center}.hero-grid{grid-template-columns:1fr;gap:4px;min-height:0}.hero-copy{padding:45px 0 20px}.hero-card{display:grid;height:310px;margin:0 0 34px}.hero h1{font-size:clamp(38px,7vw,52px)}.hero-logo-plate{min-height:160px}.hero-brand-image{height:105px}.app-top-inner{align-items:flex-start}.app-top-actions{justify-content:flex-start}}
@media(max-width:700px){.hero{background-image:linear-gradient(180deg,rgba(244,250,255,.91),rgba(235,247,255,.83) 45%,rgba(8,49,78,.20)),var(--refinery-bg);background-position:60% center}.hero-copy{padding:38px 0 18px}.hero p{font-size:14px}.hero-qr{gap:12px}.hero-qr img{width:82px;height:82px}.hero-card{height:255px;border-radius:22px}.hero-visual-top,.hero-visual-footer{left:14px;right:14px}.hero-logo-plate{width:82%;min-height:140px;padding:14px}.hero-brand-image{height:95px}.orbit-a{width:230px;height:230px}.orbit-b{width:165px;height:165px}.app-top-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.app-top-btn{min-width:0;padding:9px;font-size:11px}.app-qr{grid-column:1/-1}.app-download-inner{gap:22px}.app-options{display:grid;grid-template-columns:1fr;width:100%}.app-option{min-width:0;width:100%}}
@media(max-width:420px){.hero h1{font-size:35px}.hero-card{height:230px}.hero-qr{padding:8px}.hero-qr img{width:72px;height:72px}.app-top-actions{grid-template-columns:1fr}.app-qr{grid-column:auto}}


/* iPhone Safari: keep the OTP form usable when the on-screen keyboard is open. */
@supports (-webkit-touch-callout: none) {
  .modal { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  /* iPhone Safari only: keep the login entry visible on small screens. */
  .nav-actions #loginBtn { display: inline-flex; align-items: center; justify-content: center; }
  .modal-card { max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-card input { font-size: 16px !important; min-height: 46px; }
}
.login-required { text-align: center; padding: 26px 18px; }
.login-required strong { display: block; font-size: 17px; color: #102a4c; }
.login-required p { margin: 8px 0 16px; color: #667085; }


/* 2026 premium ChemLink design pass — presentation only; auth/data logic unchanged */
:root{--bg:#f4faff;--ink:#102c4a;--muted:#58718a;--line:#d9e8f4;--navy:#08264a;--blue:#087fe0;--cyan:#20b9e8}
body{background:#f5faff;color:#102b49}
.topbar{background:#075da5;color:#e8f6ff}
.topbar-inner{height:30px;font-size:11px}
.header{margin:12px auto 0;width:min(1495px,calc(100% - 40px));border:1px solid rgba(255,255,255,.9);border-radius:22px;background:rgba(255,255,255,.88);box-shadow:0 12px 36px rgba(16,91,151,.09);overflow:visible}
.nav{height:78px;gap:28px}
.brand{min-width:250px}
.brand-image-wrap{width:250px;height:66px}
.nav-links{justify-content:center;gap:clamp(14px,2.5vw,38px)}
.nav-links a{color:#092b54;font-size:14px;font-weight:700;white-space:nowrap}
.nav-links a:hover{color:#0782e4}
.nav-actions{align-items:center}
.ghost{border-color:#d6e7f5;color:#075ba5}
.primary{background:linear-gradient(135deg,#0587e9,#0871cf);box-shadow:0 8px 22px rgba(0,126,224,.2)}
.hero{margin-top:0;min-height:510px;background-image:linear-gradient(90deg,rgba(245,251,255,.97) 0%,rgba(245,251,255,.90) 38%,rgba(245,251,255,.32) 61%,rgba(245,251,255,.02) 100%),var(--refinery-bg);background-position:center;background-size:cover}
.hero:before{background:linear-gradient(90deg,rgba(248,252,255,.48),transparent 74%),radial-gradient(circle at 72% 42%,rgba(0,145,232,.08),transparent 38%)}
.hero:after{height:45px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.36))}
.hero-grid{grid-template-columns:minmax(0,1fr);min-height:510px;display:flex;align-items:center}
.hero-copy{padding:48px 0 54px;max-width:700px;width:57%;position:relative}
.hero-inline-brand{width:min(100%,510px);height:auto;max-height:145px;object-fit:contain;object-position:left center;display:block;margin:0 0 10px}
.hero h1{font-size:clamp(34px,3.6vw,54px);line-height:1.35;letter-spacing:-1.1px;margin:8px 0 7px;color:#082c59;font-weight:800}
.hero p{font-size:clamp(16px,1.6vw,23px);font-weight:500;color:#42658a;max-width:580px;margin:0 0 23px}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-cta{border-radius:999px;padding:13px 26px;font-size:15px;min-height:52px}
.hero-cta span{margin-right:9px;font-size:19px}
.hero-login-link{background:rgba(255,255,255,.72);border:1px solid rgba(8,111,196,.18);color:#075ba5;border-radius:999px;padding:12px 22px;font-weight:700}
.hero-search-wrap{margin-top:22px;max-width:610px}
.hero-search-wrap .search-box{box-shadow:0 10px 35px rgba(20,83,132,.09);border:1px solid rgba(25,118,190,.1)}
.hero-qr{display:none}
.hero-card{display:none}
.app-top{padding:32px 0;background:linear-gradient(135deg,#f8fcff,#e8f5ff 55%,#fff);color:#0a2d52;border-top:1px solid #dcecf8;border-bottom:1px solid #e2eff8}
.app-top h3{font-size:27px;color:#092f59}
.app-top p{color:#4d7192;font-size:13px}
.app-top-btn{background:#fff;color:#103a63;border:1px solid #d9e9f5;box-shadow:0 9px 28px rgba(21,90,144,.09);min-height:66px}
.app-top-btn.android{background:#06254a;color:#fff;border-color:#06254a}
.app-top-btn.ios{background:#fff;color:#103a63}
.app-qr{background:#fff;border-color:#d7e8f5}
.stats{background:#fff}
.stats-grid{padding:24px 0}
.stats-grid strong{color:#087bd4}
.section{padding:68px 0;background:linear-gradient(180deg,#f7fbff,#fff)}
.section-head h2{color:#0b2e53;font-size:30px}
.kicker{color:#0781d9}
.category-grid{gap:16px}
.category{border-color:#deebf5;border-radius:20px;box-shadow:0 7px 24px rgba(13,70,117,.035);transition:transform .2s ease,box-shadow .2s ease}
.category:hover{box-shadow:0 15px 30px rgba(13,70,117,.09)}
.category span{background:#e5f4ff;color:#0879d3}
.listings{background:linear-gradient(180deg,#f8fcff,#edf7ff)}
.new-offer-panel{border-color:#d7e9f7;box-shadow:0 16px 40px rgba(13,70,117,.07)}
.how{background:linear-gradient(180deg,#eff8ff,#f8fbff)}
.step{border-color:#dcebf6;box-shadow:0 8px 25px rgba(13,70,117,.04)}
.cta{background:radial-gradient(circle at 78% 20%,rgba(60,194,255,.25),transparent 30%),linear-gradient(115deg,#0877c8,#063568 72%,#061f40)}
.app-download{background:#fff;border-top:1px solid #e0edf7}
footer{background:#071f3c}
@media(max-width:1000px){.nav{gap:14px}.brand{min-width:180px}.brand-image-wrap{width:190px}.nav-links{gap:12px}.nav-links a{font-size:12px}.nav-actions{gap:6px}.ghost,.primary{padding:9px 12px}.hero-copy{width:65%}}
@media(max-width:760px){
 .topbar-inner span:last-child{display:none}
 .header{width:calc(100% - 20px);margin-top:8px;border-radius:17px}
 .nav{height:auto;min-height:66px;flex-wrap:wrap;justify-content:space-between;padding:8px 0;gap:8px}
 .brand{min-width:0}.brand-image-wrap{width:175px;height:48px}
 .nav-links{order:3;flex-basis:100%;justify-content:space-between;gap:8px;padding:4px 0 7px;overflow-x:auto}
 .nav-links a{font-size:11px}
 .nav-actions{gap:6px}.nav-actions .ghost,.nav-actions .primary{font-size:11px;padding:7px 10px}
 .hero{background-image:linear-gradient(180deg,rgba(245,251,255,.93),rgba(245,251,255,.82) 47%,rgba(245,251,255,.2)),var(--refinery-bg);background-position:60% center}
 .hero-grid{min-height:0}.hero-copy{width:100%;padding:32px 0 36px}
 .hero-inline-brand{width:min(90%,420px);max-height:112px;margin-bottom:12px}
 .hero h1{font-size:clamp(29px,8vw,40px);line-height:1.45}
 .hero p{font-size:16px;line-height:1.9}
 .hero-search-wrap{margin-top:18px}
 .app-top{padding:24px 0}.app-top-inner{gap:18px}
 .app-top h3{font-size:22px}
 .app-top-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
 .app-top-btn{justify-content:center;text-align:right;min-height:60px}
 .app-qr{display:none}
 .stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}
 .stats-grid div{border:0;border-bottom:1px solid var(--line);padding:10px}
 .section{padding:48px 0}.section-head h2{font-size:24px}
 .category-grid,.listing-grid,.steps{grid-template-columns:1fr}
 .cta-inner{align-items:flex-start;gap:20px;flex-direction:column}
}


/* Reference-matched ChemLink hero refinement — crisp industrial background, framed complete brand */
.hero{
  min-height:570px;
  background-image:
    linear-gradient(270deg,rgba(248,252,255,.96) 0%,rgba(245,251,255,.91) 30%,rgba(240,249,255,.67) 48%,rgba(231,246,255,.12) 76%,rgba(231,246,255,.02) 100%),
    var(--refinery-bg);
  background-position:center center;
  background-size:cover;
}
.hero:before{
  background:
    radial-gradient(ellipse at 24% 62%,rgba(0,151,234,.10),transparent 34%),
    linear-gradient(0deg,rgba(255,255,255,.08),rgba(255,255,255,0) 38%);
}
.hero:after{height:56px;background:linear-gradient(180deg,transparent,rgba(232,247,255,.32))}
.hero-grid{min-height:570px;grid-template-columns:minmax(0,1fr);display:flex;align-items:center;justify-content:flex-start}
.hero-copy{
  width:min(58%,700px);
  max-width:700px;
  margin-right:0;
  margin-left:auto;
  padding:48px 0 54px;
  text-align:right;
}
.hero-inline-brand{
  display:block;
  width:min(100%,510px);
  height:132px;
  max-height:none;
  object-fit:contain;
  object-position:center;
  padding:7px 18px;
  margin:0 0 14px auto;
  border:1px solid rgba(255,255,255,.96);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(242,249,255,.90));
  box-shadow:0 14px 36px rgba(11,75,126,.14),inset 0 1px 0 #fff;
}
.hero h1{font-size:clamp(36px,3.5vw,54px);line-height:1.4;margin:8px 0 7px;letter-spacing:-1px;color:#082c59}
.hero p{font-size:clamp(16px,1.55vw,22px);line-height:1.9;max-width:650px;margin:0 0 20px;color:#365f86}
.hero-actions{justify-content:flex-start;gap:12px}
.hero-cta{box-shadow:0 10px 25px rgba(0,119,211,.26)}
.hero-login-link{background:rgba(255,255,255,.88);box-shadow:0 6px 18px rgba(18,87,141,.08)}
.hero-search-wrap{max-width:650px;margin-top:18px}
.hero-search-wrap .search-box{max-width:650px;border:1px solid rgba(17,110,179,.15);border-radius:16px;background:rgba(255,255,255,.95);box-shadow:0 12px 32px rgba(20,83,132,.13)}
.brand-image-wrap{
  width:270px;height:70px;overflow:visible;padding:4px 10px;
  border:1px solid rgba(221,239,251,.95);border-radius:14px;
  background:linear-gradient(145deg,#fff,#f5faff);
  box-shadow:0 5px 18px rgba(14,74,121,.08);
}
.brand-image{object-fit:contain;object-position:center;width:100%;height:100%;border-radius:8px}
footer .brand-image-wrap{background:#fff;border-color:rgba(255,255,255,.22)}
@media(max-width:1000px){
 .hero{background-image:linear-gradient(270deg,rgba(248,252,255,.95),rgba(245,251,255,.78) 47%,rgba(231,246,255,.18) 100%),var(--refinery-bg);background-position:center}
 .hero-copy{width:72%}
 .hero-inline-brand{height:112px;width:min(100%,470px)}
 .brand-image-wrap{width:210px;height:62px}
}
@media(max-width:760px){
 .hero{background-image:linear-gradient(180deg,rgba(248,252,255,.94) 0%,rgba(245,251,255,.88) 43%,rgba(231,246,255,.32) 100%),var(--refinery-bg);background-position:58% center}
 .hero-grid{min-height:0;display:flex}
 .hero-copy{width:100%;padding:32px 0 34px;margin:0}
 .hero-inline-brand{height:98px;width:min(100%,400px);padding:7px 12px;margin:0 auto 12px}
 .hero h1{font-size:clamp(29px,7.5vw,39px);line-height:1.5}
 .hero p{font-size:16px;line-height:1.9}
 .hero-actions{gap:9px}
 .hero-cta,.hero-login-link{padding:11px 16px;font-size:13px}
 .brand-image-wrap{width:170px;height:52px;padding:3px 6px;border-radius:11px}
}
@media(max-width:420px){
 .hero-inline-brand{height:82px;width:100%}
 .hero h1{font-size:28px}
 .brand-image-wrap{width:142px;height:46px}
}

/* Restore the approved refinery hero background and prevent the complete logo/tagline from being clipped */
.hero{
  background-image:
    linear-gradient(270deg,rgba(248,252,255,.96) 0%,rgba(245,251,255,.91) 30%,rgba(240,249,255,.67) 48%,rgba(231,246,255,.12) 76%,rgba(231,246,255,.02) 100%),
    var(--refinery-bg)!important;
  background-position:center center!important;
  background-size:cover!important;
}
body:before{content:initial!important}
.hero-inline-brand{
  display:block!important;
  width:min(100%,560px)!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  margin:0 0 14px auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.brand-image-wrap{
  overflow:visible!important;
}
.brand-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
@media(max-width:760px){
  .hero{background-image:linear-gradient(180deg,rgba(248,252,255,.94) 0%,rgba(245,251,255,.88) 43%,rgba(231,246,255,.32) 100%),var(--refinery-bg)!important;background-position:58% center!important}
  .hero-inline-brand{width:min(100%,440px)!important;height:auto!important;padding:0!important;margin:0 auto 14px!important}
}


/* Final targeted correction: keep the approved refinery image visible and render the logo at its natural ratio */
.hero{
  background-color:#eaf6ff!important;
  background-image:
    linear-gradient(90deg,rgba(241,249,255,.12) 0%,rgba(241,249,255,.36) 40%,rgba(248,252,255,.84) 72%,rgba(248,252,255,.92) 100%),
    var(--refinery-bg)!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
}
.hero-inline-brand{
  display:block!important;
  width:min(100%,790px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:unset!important;
  object-fit:unset!important;
  object-position:center!important;
  padding:0!important;
  margin:0 0 14px auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.hero-copy{overflow:visible!important}
.hero-card{display:none!important}
@media(max-width:760px){
 .hero{background-image:linear-gradient(180deg,rgba(248,252,255,.78),rgba(245,251,255,.48) 55%,rgba(231,246,255,.10)),var(--refinery-bg)!important;background-position:58% center!important;background-size:cover!important}
 .hero-inline-brand{width:min(100%,790px)!important;height:auto!important}
}




/* Correct hero background to fill the full banner; keep logo independently sized */
.hero{
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
@media(max-width:760px){
  .hero{
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
}

/* Hero image and brand are independent layers: no composite-image crop. */
.hero{
 background-color:#edf7fc!important;
 background-image:linear-gradient(90deg,rgba(240,249,255,.03) 0%,rgba(240,249,255,.12) 42%,rgba(247,252,255,.82) 68%,rgba(247,252,255,.97) 100%),var(--refinery-bg)!important;
 background-repeat:no-repeat!important;
 background-size:cover!important;
 background-position:center center!important;
}
.hero-inline-brand{
 display:block!important;
 width:min(100%,660px)!important;
 height:auto!important;
 max-height:none!important;
 aspect-ratio:auto!important;
 object-fit:contain!important;
 object-position:center!important;
 margin:0 0 20px auto!important;
 padding:0!important;
 overflow:visible!important;
}
.hero-copy{overflow:visible!important;min-height:0!important}
@media(max-width:760px){
 .hero{background-image:linear-gradient(180deg,rgba(247,252,255,.91),rgba(247,252,255,.54) 54%,rgba(231,246,255,.15) 100%),var(--refinery-bg)!important;background-size:auto 100%!important;background-position:left center!important}
 .hero-inline-brand{width:min(100%,520px)!important;margin:0 auto 18px!important}
}

/* Approved homepage reference recreation: white pill navigation, refinery hero, right-aligned brand/copy, dark app strip */
:root{--navy:#0a2342;--blue:#0876d7;--cyan:#10b6e5}
body{background:#f5f9fc}
.topbar{background:#0758a8!important;color:#fff!important}
.topbar-inner{height:31px!important;font-size:11px!important;color:#fff!important}
.header{position:relative!important;top:auto!important;background:transparent!important;border:0!important;backdrop-filter:none!important;padding:4px 0 0!important}
.nav-shell{width:min(1285px,calc(100% - 42px));margin:0 auto;background:rgba(255,255,255,.97);border-radius:25px;box-shadow:0 8px 30px rgba(8,49,91,.08);position:relative;z-index:10}
.nav{height:77px!important;gap:26px!important}
.brand{order:3;min-width:190px!important;justify-content:flex-start}
.nav-links{order:2;justify-content:center;gap:24px!important}
.nav-actions{order:1;gap:8px!important}
.nav-links a{font-size:13px!important;color:#203e61!important}
.brand-image-wrap{width:200px!important;height:62px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.brand-image{width:100%!important;height:100%!important;object-fit:contain!important}
.nav-actions .primary{background:#0877d7!important;border-radius:13px!important}
.nav-actions .ghost{border:0!important;background:transparent!important}
.hero{background-color:#e5f4ff!important;background-image:linear-gradient(270deg,rgba(248,252,255,.97) 0%,rgba(248,252,255,.91) 32%,rgba(248,252,255,.55) 50%,rgba(248,252,255,.04) 72%),var(--refinery-bg)!important;background-size:cover!important;background-position:center center!important;overflow:hidden!important;border:0!important}
.hero:before,.hero:after{display:none!important}
.hero-grid{min-height:530px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:0!important}
.hero-copy{width:58%!important;max-width:760px!important;margin-right:0!important;margin-left:auto!important;padding:35px 0 38px!important;text-align:right!important}
.hero-inline-brand{width:min(100%,500px)!important;height:auto!important;display:block!important;object-fit:contain!important;object-position:center!important;margin:0 0 10px auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.hero h1{font-size:clamp(34px,3.2vw,49px)!important;line-height:1.42!important;letter-spacing:-1px!important;color:#092c59!important;margin:8px 0 5px!important}
.hero p.hero-welcome{font-size:clamp(15px,1.35vw,19px)!important;line-height:1.9!important;color:#075bb3!important;margin:0 0 20px!important;max-width:690px!important;font-weight:500!important}
.hero-actions{display:flex!important;justify-content:flex-start!important;gap:12px!important;margin-bottom:20px!important}
.hero-cta,.hero-login-link{border-radius:999px!important;padding:12px 25px!important;font-size:14px!important;font-weight:800!important}
.hero-cta{background:linear-gradient(135deg,#0077d9,#0865c4)!important;box-shadow:0 8px 20px rgba(0,99,191,.24)!important}
.hero-login-link{border:1px solid #0876d7!important;color:#0868bd!important;background:rgba(255,255,255,.92)!important;box-shadow:none!important}
.hero-search-wrap{max-width:610px!important;margin-top:12px!important}
.hero-search-wrap .search-box{max-width:610px!important;border-radius:999px!important;padding:5px 9px!important;min-height:54px!important;box-shadow:0 8px 22px rgba(15,65,108,.11)!important;border:1px solid #e4eff8!important}
.hero-search-wrap .search-box button{border-radius:999px!important;background:#092e59!important;padding:10px 22px!important}
.hero-search-wrap .search-box input{font-size:12px!important}
.hero-search-wrap .quick{display:none!important}
.hero-card{display:none!important}
.app-top{background:linear-gradient(110deg,#071b31,#0b3155 58%,#0c5574)!important;color:#fff!important;padding:16px 0!important;border:0!important}
.app-top-inner{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:20px!important}
.app-top h3{font-size:17px!important;color:#13a7ff!important}
.app-top p{font-size:11px!important;color:#f0f5fa!important}
.app-top-actions{display:flex!important;gap:10px!important;align-items:center!important}
.app-top-btn{border-radius:12px!important;padding:7px 10px!important;min-height:60px!important}
.app-top-btn.android{background:#fff!important;color:#10233e!important}
.app-top-btn.ios{background:#fff!important;color:#10233e!important}
.app-brand-icon{width:34px!important;height:34px!important}
.app-qr{padding:4px!important;gap:6px!important;border-radius:9px!important}
.app-qr img{width:92px!important;height:92px!important}
.app-qr div{max-width:90px!important;font-size:9px!important}
.app-qr small{display:none!important}
.stats{background:#fff!important}
@media(max-width:1000px){
 .nav-shell{width:calc(100% - 26px)}
 .nav{gap:10px!important}
 .nav-links{gap:12px!important}
 .brand-image-wrap{width:160px!important}
 .hero-copy{width:68%!important}
}
@media(max-width:760px){
 .header{padding:5px 0!important}
 .nav-shell{width:calc(100% - 20px);border-radius:18px}
 .nav{height:64px!important}
 .nav-links{display:none!important}
 .brand-image-wrap{width:150px!important;height:48px!important}
 .nav-actions{gap:4px!important}
 .nav-actions .primary{padding:8px 12px!important;font-size:12px!important}
 .hero{background-image:linear-gradient(180deg,rgba(248,252,255,.94) 0%,rgba(248,252,255,.86) 43%,rgba(231,246,255,.22) 100%),var(--refinery-bg)!important;background-position:left center!important;background-size:auto 100%!important}
 .hero-grid{min-height:0!important}
 .hero-copy{width:100%!important;padding:28px 0 30px!important;margin:0!important}
 .hero-inline-brand{width:min(100%,380px)!important;margin:0 auto 10px!important}
 .hero h1{font-size:clamp(28px,7vw,38px)!important}
 .hero p.hero-welcome{font-size:14px!important}
 .desktop-break{display:none}
 .hero-actions{justify-content:center!important;flex-wrap:wrap}
 .hero-cta,.hero-login-link{padding:10px 17px!important;font-size:12px!important}
 .hero-search-wrap{margin-top:14px!important}
 .app-top-inner{flex-direction:column!important;align-items:stretch!important}
 .app-top-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
 .app-qr{grid-column:1/-1;justify-content:center!important}
 .app-qr img{width:70px!important;height:70px!important}
 .app-qr div{max-width:none!important}
}

/* Approved homepage reference: photographic refinery on the left, clear space for content on the right */
.hero{background-color:#eaf5ff!important;background-image:linear-gradient(90deg,rgba(245,250,255,.02) 0%,rgba(245,250,255,.06) 30%,rgba(245,250,255,.68) 53%,rgba(248,252,255,.97) 77%,#f8fcff 100%),var(--refinery-bg)!important;background-repeat:no-repeat!important;background-size:100% 100%,auto 100%!important;background-position:center,left center!important;overflow:hidden!important}
.hero:before{display:none!important}
.hero:after{background:linear-gradient(180deg,transparent 78%,rgba(7,47,78,.12))!important}
.hero-grid{min-height:535px!important}
.hero-copy{width:58%!important;max-width:760px!important;margin-left:0!important;margin-right:auto!important;padding-top:24px!important;padding-bottom:28px!important}
.hero-inline-brand{width:min(100%,470px)!important;max-height:150px!important;object-fit:contain!important;object-position:right center!important;margin:0 0 8px auto!important}
@media(max-width:760px){.hero{background-image:linear-gradient(180deg,rgba(248,252,255,.97) 0%,rgba(248,252,255,.89) 45%,rgba(232,245,255,.38) 100%),var(--refinery-bg)!important;background-size:100% 100%,auto 70%!important;background-position:center,left bottom!important}.hero-copy{width:100%!important}.hero-inline-brand{margin:0 auto 10px!important}}


/* Reference-layout correction: use the actual refinery photo and place the brand/content on the right */
.hero{
 background-color:#eaf5ff!important;
 background-image:linear-gradient(90deg,rgba(245,250,255,.00) 0%,rgba(245,250,255,.04) 30%,rgba(248,252,255,.58) 51%,rgba(248,252,255,.94) 72%,#f8fcff 100%),url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Heydar_Aliyev_Baku_Oil_Refinery_3.jpg")!important;
 background-repeat:no-repeat!important;background-size:100% 100%,auto 100%!important;background-position:center,left center!important;
 min-height:535px!important;overflow:hidden!important;
}
.hero-grid{direction:rtl!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;min-height:535px!important}
.hero-copy{width:58%!important;max-width:760px!important;margin:0!important;margin-right:0!important;margin-left:auto!important;padding:24px 0 28px!important;text-align:right!important}
.hero-inline-brand{display:block!important;width:min(100%,470px)!important;max-height:none!important;height:auto!important;object-fit:contain!important;object-position:right center!important;margin:0 0 10px auto!important}
.hero-card{display:none!important}
@media(max-width:760px){
 .hero{background-image:linear-gradient(180deg,rgba(248,252,255,.96) 0%,rgba(248,252,255,.88) 42%,rgba(232,245,255,.32) 100%),url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Heydar_Aliyev_Baku_Oil_Refinery_3.jpg")!important;background-size:100% 100%,auto 68%!important;background-position:center,left bottom!important}
 .hero-grid{min-height:0!important;justify-content:center!important}
 .hero-copy{width:100%!important;margin:0!important;padding:30px 0!important;text-align:center!important}
 .hero-inline-brand{width:min(100%,380px)!important;margin:0 auto 12px!important}
}

/* Background-only correction: stable high-resolution refinery photograph; preserve all layout, routes, and app behavior */
.hero{
  background-color:#edf6ff!important;
  background-image:
    linear-gradient(90deg,rgba(238,247,255,.02) 0%,rgba(238,247,255,.08) 24%,rgba(244,250,255,.40) 43%,rgba(248,252,255,.88) 63%,#f8fcff 77%),
    url("https://images.unsplash.com/photo-1596980786765-775174984ec9?auto=format&fit=crop&fm=jpg&q=85&w=2400")!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%,auto 100%!important;
  background-position:center,left center!important;
}
@media(max-width:760px){
  .hero{
    background-image:
      linear-gradient(180deg,rgba(248,252,255,.97) 0%,rgba(248,252,255,.91) 40%,rgba(238,247,255,.38) 100%),
      url("https://images.unsplash.com/photo-1596980786765-775174984ec9?auto=format&fit=crop&fm=jpg&q=85&w=2400")!important;
    background-repeat:no-repeat!important;
    background-size:100% 100%,auto 68%!important;
    background-position:center,left bottom!important;
  }
}


/* Final targeted fixes: complete ChemLink wordmark and match approved refinery hero */
.header .nav{min-height:88px!important;height:auto!important;overflow:visible!important}
.header .brand{min-width:0!important;flex:0 0 auto!important;overflow:visible!important}
.header .brand-image-wrap{width:290px!important;height:78px!important;min-width:0!important;min-height:0!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;flex:0 0 auto!important}
.header .brand-image{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important;overflow:visible!important}
.hero{background-color:#eaf5ff!important;background-image:linear-gradient(270deg,rgba(248,252,255,.97) 0%,rgba(245,251,255,.91) 28%,rgba(240,249,255,.62) 48%,rgba(231,246,255,.12) 76%,rgba(231,246,255,.02) 100%),var(--refinery-bg)!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:center center!important;overflow:hidden!important}
.hero-copy{overflow:visible!important}
.hero-inline-brand{display:block!important;width:min(100%,560px)!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;padding:0!important;margin:0 0 14px auto!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
@media(max-width:1000px){.header .nav{min-height:80px!important}.header .brand-image-wrap{width:230px!important;height:64px!important}}
@media(max-width:760px){
 .header .nav{min-height:0!important;height:auto!important}
 .header .brand-image-wrap{width:180px!important;height:54px!important}
 .hero{background-image:linear-gradient(180deg,rgba(248,252,255,.92) 0%,rgba(245,251,255,.78) 42%,rgba(231,246,255,.16) 100%),var(--refinery-bg)!important;background-position:center center!important;background-size:cover!important}
 .hero-inline-brand{width:min(100%,440px)!important;height:auto!important;margin:0 auto 14px!important}
}
@media(max-width:420px){.header .brand-image-wrap{width:150px!important;height:46px!important}}


/* Verified root cause fix: define the refinery image directly in the final hero rule (the old --refinery-bg variable was undefined). */
.hero{
 background-color:#eaf5ff!important;
 background-image:
  linear-gradient(270deg,rgba(248,252,255,.96) 0%,rgba(245,251,255,.88) 27%,rgba(240,249,255,.52) 48%,rgba(231,246,255,.08) 76%,rgba(231,246,255,0) 100%),
  url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Heydar_Aliyev_Baku_Oil_Refinery_3.jpg")!important;
 background-repeat:no-repeat!important;
 background-size:100% 100%,auto 100%!important;
 background-position:center,left center!important;
}
.header .brand-image-wrap{width:290px!important;height:42px!important;overflow:visible!important;flex:0 0 290px!important}
.header .brand-image{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
@media(max-width:1000px){.header .brand-image-wrap{width:230px!important;height:34px!important;flex-basis:230px!important}}
@media(max-width:760px){
 .hero{background-image:linear-gradient(180deg,rgba(248,252,255,.94) 0%,rgba(245,251,255,.82) 42%,rgba(231,246,255,.22) 100%),url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Heydar_Aliyev_Baku_Oil_Refinery_3.jpg")!important;background-size:100% 100%,auto 68%!important;background-position:center,left bottom!important}
 .header .brand-image-wrap{width:180px!important;height:27px!important;flex-basis:180px!important}
}
@media(max-width:420px){.header .brand-image-wrap{width:150px!important;height:23px!important;flex-basis:150px!important}}


/* Final visual repair: full logo, and a properly framed refinery photograph across the hero. */
.header .nav{height:auto!important;min-height:100px!important;overflow:visible!important}
.header .brand{width:auto!important;min-width:0!important;flex:0 0 auto!important;overflow:visible!important}
.header .brand-image-wrap{display:block!important;width:360px!important;height:82px!important;flex:0 0 360px!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.header .brand-image{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important;overflow:visible!important}
.hero{background-color:#eef6fb!important;background-image:linear-gradient(270deg,rgba(248,252,255,.98) 0%,rgba(248,252,255,.93) 30%,rgba(242,249,253,.72) 49%,rgba(231,242,249,.18) 72%,rgba(231,242,249,.02) 100%),url("https://www.gevernova.com/power-conversion/sites/default/files/styles/resource_banner/public/2022-01/1920x1080_Shell-Supplier.jpg?itok=pNe-ALDR")!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:center center!important;overflow:hidden!important}
.hero-grid{direction:rtl!important}
.hero-copy{width:58%!important;max-width:760px!important;overflow:visible!important}
.hero-inline-brand{display:block!important;width:min(100%,560px)!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;overflow:visible!important;margin:0 0 14px auto!important}
.hero-card{display:none!important}
@media(max-width:1000px){.header .nav{min-height:88px!important}.header .brand-image-wrap{width:290px!important;height:66px!important;flex-basis:290px!important}}
@media(max-width:760px){
 .header .nav{min-height:0!important}
 .header .brand-image-wrap{width:210px!important;height:48px!important;flex-basis:210px!important}
 .hero{background-image:linear-gradient(180deg,rgba(248,252,255,.97) 0%,rgba(248,252,255,.91) 42%,rgba(238,247,252,.68) 70%,rgba(231,242,249,.24) 100%),url("https://www.gevernova.com/power-conversion/sites/default/files/styles/resource_banner/public/2022-01/1920x1080_Shell-Supplier.jpg?itok=pNe-ALDR")!important;background-size:cover!important;background-position:center center!important}
 .hero-copy{width:100%!important}
 .hero-inline-brand{width:min(100%,440px)!important;margin:0 auto 14px!important}
}
@media(max-width:420px){.header .brand-image-wrap{width:170px!important;height:40px!important;flex-basis:170px!important}}


/* ChemLink: show the complete logo artwork, including its lower tagline */
.header .brand-image-wrap,
.footer-brand .brand-image-wrap{
  width:300px!important;
  height:auto!important;
  min-height:0!important;
  flex:0 0 auto!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
}
.header .brand-image,
.footer-brand .brand-image{
  position:static!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  min-height:0!important;
  object-fit:contain!important;
  object-position:center!important;
  overflow:visible!important;
}
.header .nav{min-height:104px!important}
@media(max-width:1000px){
 .header .brand-image-wrap{width:250px!important;height:auto!important;flex-basis:auto!important}
 .header .nav{min-height:92px!important}
}
@media(max-width:760px){
 .header .brand-image-wrap{width:205px!important;height:auto!important;flex-basis:auto!important}
 .header .nav{min-height:0!important}
}
@media(max-width:420px){
 .header .brand-image-wrap{width:170px!important;height:auto!important;flex-basis:auto!important}
}


/* Reference-layout pass: restore right-aligned hero composition, full logo proportions, and dark app-download strip. */
.header .nav{max-width:1300px!important;width:calc(100% - 48px)!important;border-radius:24px!important;background:#fff!important;margin:0 auto!important;padding:8px 22px!important;box-sizing:border-box!important;min-height:78px!important;display:flex!important;align-items:center!important;gap:24px!important}
.header .brand-image-wrap,.footer-brand .brand-image-wrap{width:230px!important;height:auto!important;min-height:0!important;flex:0 0 230px!important;overflow:visible!important}
.header .brand-image,.footer-brand .brand-image{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;display:block!important}
.header .nav-links{flex:1 1 auto!important;justify-content:space-around!important;gap:18px!important}
.hero{min-height:530px!important;background-color:#e9f5ff!important;background-image:linear-gradient(270deg,rgba(248,252,255,.98) 0%,rgba(248,252,255,.90) 34%,rgba(244,250,255,.45) 55%,rgba(238,247,255,.02) 100%),url("https://www.gevernova.com/power-conversion/sites/default/files/styles/resource_banner/public/2022-01/1920x1080_Shell-Supplier.jpg?itok=pNe-ALDR")!important;background-size:cover!important;background-position:center!important}
.hero-grid{min-height:530px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;direction:rtl!important;grid-template-columns:none!important}
.hero-copy{width:min(54%,700px)!important;max-width:700px!important;margin-right:0!important;margin-left:auto!important;text-align:right!important}
.hero-inline-brand{width:min(100%,470px)!important;height:auto!important;max-height:none!important;object-fit:contain!important;margin:0 0 14px auto!important;display:block!important}
.hero-card{display:none!important}
.app-top{background:linear-gradient(110deg,#0b2341,#07172c)!important;color:#fff!important;border-top:1px solid rgba(255,255,255,.08)!important}
.app-top-inner{max-width:1300px!important}
.app-top-actions{gap:14px!important}
.app-qr{order:3!important}
@media(max-width:1000px){.header .nav{width:calc(100% - 24px)!important;gap:12px!important;padding:8px 14px!important}.header .brand-image-wrap{width:190px!important;flex-basis:190px!important}.header .nav-links{gap:10px!important}.hero-copy{width:60%!important}}
@media(max-width:760px){.header .nav{width:100%!important;border-radius:0!important;flex-wrap:wrap!important}.header .brand-image-wrap{width:180px!important;flex-basis:180px!important}.hero{min-height:620px!important;background-image:linear-gradient(180deg,rgba(248,252,255,.95) 0%,rgba(248,252,255,.82) 45%,rgba(238,247,252,.25) 100%),url("https://www.gevernova.com/power-conversion/sites/default/files/styles/resource_banner/public/2022-01/1920x1080_Shell-Supplier.jpg?itok=pNe-ALDR")!important;background-position:center!important}.hero-grid{min-height:620px!important}.hero-copy{width:100%!important;margin:0 auto!important}.hero-inline-brand{width:min(100%,400px)!important;margin:0 auto 14px!important}.app-top-actions{justify-content:center!important}}


/* Corrective override: target the real DOM classes, keep the full brand art, and restore a full-width refinery hero. */
.header .nav{height:auto!important;min-height:88px!important;max-width:1300px!important;width:calc(100% - 48px)!important;margin:0 auto!important;padding:8px 22px!important;display:flex!important;align-items:center!important;gap:22px!important;overflow:visible!important}
.header .brand{min-width:0!important;flex:0 0 auto!important;overflow:visible!important}
.header .brand-mark{width:auto!important;height:auto!important;overflow:visible!important}
.header .brand-image-wrap{position:relative!important;display:block!important;width:270px!important;height:auto!important;min-height:0!important;flex:0 0 270px!important;overflow:visible!important}
.header .brand-image{position:static!important;width:100%!important;height:auto!important;max-width:100%!important;max-height:none!important;object-fit:contain!important;object-position:center!important}
.header .nav-links{flex:1 1 auto!important;justify-content:space-around!important;gap:16px!important}
.header .nav-actions{flex:0 0 auto!important;gap:8px!important}
.hero{min-height:530px!important;background-color:#eaf5fd!important;background-image:linear-gradient(270deg,rgba(248,252,255,.98) 0%,rgba(248,252,255,.91) 32%,rgba(242,249,253,.55) 53%,rgba(231,242,249,.04) 100%),url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Heydar_Aliyev_Baku_Oil_Refinery_3.jpg")!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:center center!important}
.hero:before{background:linear-gradient(270deg,rgba(255,255,255,.12),rgba(255,255,255,0) 68%)!important}
.hero-grid{min-height:530px!important;display:flex!important;flex-direction:row!important;direction:rtl!important;align-items:center!important;justify-content:space-between!important;gap:24px!important}
.hero-copy{width:min(54%,700px)!important;max-width:700px!important;padding:40px 0!important;margin:0!important;text-align:right!important}
.hero-inline-brand{display:block!important;width:min(100%,500px)!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:right center!important;margin:0 0 14px auto!important}
.hero-card{display:none!important}
.app-top{background:linear-gradient(110deg,#0b2341,#07172c)!important;color:#fff!important;border-top:1px solid rgba(255,255,255,.08)!important}
.app-top-inner{max-width:1300px!important}
.app-top-actions{gap:14px!important}
.app-brand-icon{width:34px!important;height:34px!important;object-fit:contain!important}
@media(max-width:1000px){.header .nav{width:calc(100% - 24px)!important;gap:10px!important;padding:8px 12px!important}.header .brand-image-wrap{width:215px!important;flex-basis:215px!important}.header .nav-links{gap:8px!important}.header .nav-links a{font-size:12px!important}.header .nav-actions button{padding:8px 10px!important}.hero-copy{width:60%!important}}
@media(max-width:760px){.header .nav{width:100%!important;min-height:0!important;border-radius:0!important;flex-wrap:wrap!important}.header .brand-image-wrap{width:190px!important;flex-basis:190px!important}.hero{min-height:620px!important;background-image:linear-gradient(180deg,rgba(248,252,255,.95) 0%,rgba(248,252,255,.84) 45%,rgba(238,247,252,.25) 100%),url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Heydar_Aliyev_Baku_Oil_Refinery_3.jpg")!important;background-position:center!important}.hero-grid{min-height:620px!important;align-items:flex-start!important}.hero-copy{width:100%!important;padding:35px 0!important}.hero-inline-brand{width:min(100%,400px)!important;margin:0 auto 14px!important}.app-top-inner{flex-direction:column!important;align-items:stretch!important}.app-top-actions{justify-content:center!important}}
@media(max-width:420px){.header .brand-image-wrap{width:165px!important;flex-basis:165px!important}}


/* Final correction: use the actual refinery photo URL (not Special:FilePath, which was resolving to an unrelated image) and prevent logo artwork from being cropped. */
.hero{
 background-image:linear-gradient(270deg,rgba(248,252,255,.98) 0%,rgba(248,252,255,.88) 31%,rgba(242,249,253,.42) 54%,rgba(231,242,249,.02) 100%),url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Heydar_Aliyev_Baku_Oil_Refinery_3.jpg")!important;
 background-size:cover!important;
 background-position:center center!important;
 background-repeat:no-repeat!important;
}
.header .brand-image-wrap,.footer-brand .brand-image-wrap{
 height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;align-self:center!important
}
.header .brand-image,.footer-brand .brand-image,.hero-inline-brand,.hero-brand-image{
 height:auto!important;max-height:none!important;min-height:0!important;object-fit:contain!important;object-position:center!important;overflow:visible!important
}
.hero-inline-brand{width:min(100%,500px)!important;display:block!important;margin:0 0 14px auto!important}
@media(max-width:760px){
 .hero{background-image:linear-gradient(180deg,rgba(248,252,255,.96) 0%,rgba(248,252,255,.82) 48%,rgba(238,247,252,.25) 100%),url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Heydar_Aliyev_Baku_Oil_Refinery_3.jpg")!important;background-position:center center!important}
}

/* Repair: restore the known working Commons redirect and make the complete wordmark/tagline legible. */
.header .brand-image-wrap{width:330px!important;flex:0 0 330px!important}
.header .brand-image{width:100%!important;height:auto!important;max-width:100%!important;object-fit:contain!important}
.hero-inline-brand{width:min(100%,560px)!important;height:auto!important;max-height:none!important;object-fit:contain!important}
.footer-brand .brand-image-wrap{width:280px!important}
.footer-brand .brand-image{width:100%!important;height:auto!important;object-fit:contain!important}
@media(max-width:1000px){.header .brand-image-wrap{width:240px!important;flex-basis:240px!important}.hero-inline-brand{width:min(100%,460px)!important}}
@media(max-width:760px){.header .brand-image-wrap{width:210px!important;flex-basis:210px!important}.hero-inline-brand{width:min(100%,420px)!important}}

/* Hard final override: actual refinery image URL + full-size wordmark, cache-busted by index.html. */
.hero{background-color:#eaf5fd!important;background-image:linear-gradient(270deg,rgba(248,252,255,.97) 0%,rgba(248,252,255,.86) 31%,rgba(242,249,253,.34) 55%,rgba(231,242,249,.02) 100%),url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Heydar_Aliyev_Baku_Oil_Refinery_3.jpg")!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:center center!important}
.header .brand-image-wrap{width:330px!important;height:auto!important;min-height:0!important;flex:0 0 330px!important;overflow:visible!important;background:transparent!important}
.header .brand-image{display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
.hero-inline-brand{display:block!important;width:min(100%,560px)!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:right center!important;margin:0 0 14px auto!important}
@media(max-width:760px){.hero{background-image:linear-gradient(180deg,rgba(248,252,255,.96) 0%,rgba(248,252,255,.82) 48%,rgba(238,247,252,.25) 100%),url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Heydar_Aliyev_Baku_Oil_Refinery_3.jpg")!important;background-position:center center!important}.header .brand-image-wrap{width:220px!important;flex-basis:220px!important}.hero-inline-brand{width:min(100%,420px)!important}}


/* ChemLink homepage layout repair: keep the refinery visible on the LEFT and the complete copy/logo on the RIGHT. */
.hero{
 min-height:560px!important;
 background-color:#edf6fc!important;
 background-image:linear-gradient(270deg,rgba(250,253,255,.99) 0%,rgba(250,253,255,.94) 34%,rgba(246,251,255,.68) 50%,rgba(237,246,252,.08) 73%,rgba(237,246,252,0) 100%),url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Heydar_Aliyev_Baku_Oil_Refinery_3.jpg")!important;
 background-repeat:no-repeat!important;background-size:cover!important;background-position:left center!important;
}
.hero-grid{min-height:560px!important;display:flex!important;flex-direction:row!important;direction:rtl!important;align-items:center!important;justify-content:flex-end!important;gap:24px!important}
.hero-copy{width:min(52%,680px)!important;max-width:680px!important;flex:0 1 680px!important;margin-right:0!important;margin-left:0!important;padding:38px 0!important;text-align:right!important}
.hero-inline-brand{display:block!important;width:min(100%,540px)!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:right center!important;margin:0 0 18px auto!important}
.hero-card{display:none!important}
.header .nav-shell{background:rgba(255,255,255,.94)!important}
.header .nav{border-radius:0 0 22px 22px!important;background:#fff!important;box-shadow:0 8px 30px rgba(13,38,67,.09)!important}
.app-top{background:linear-gradient(110deg,#0b2341,#07172c)!important;color:#fff!important}
.app-top-inner{max-width:1300px!important}
.app-top-actions{align-items:center!important;gap:12px!important}
.app-brand-icon{width:36px!important;height:36px!important;object-fit:contain!important}
@media(max-width:1000px){
 .hero-copy{width:58%!important}
 .header .brand-image-wrap{width:205px!important;flex-basis:205px!important}
}
@media(max-width:760px){
 .hero{min-height:640px!important;background-image:linear-gradient(180deg,rgba(250,253,255,.96) 0%,rgba(250,253,255,.91) 48%,rgba(237,246,252,.3) 100%),url("https://upload.wikimedia.org/wikipedia/commons/4/4e/Heydar_Aliyev_Baku_Oil_Refinery_3.jpg")!important;background-position:35% center!important}
 .hero-grid{min-height:640px!important;align-items:flex-start!important;justify-content:center!important}
 .hero-copy{width:100%!important;max-width:100%!important;padding:30px 0!important}
 .hero-inline-brand{width:min(100%,420px)!important;margin:0 auto 16px!important}
 .header .nav{border-radius:0!important}
 .app-top-inner{flex-direction:column!important;align-items:stretch!important}
 .app-top-actions{justify-content:center!important}
}


/* Final supplied ChemLink artwork: use the uploaded refinery photo and complete wordmark. */
.hero{
 background-color:#edf6fc!important;
 background-image:linear-gradient(270deg,rgba(250,253,255,.98) 0%,rgba(250,253,255,.90) 30%,rgba(246,251,255,.60) 48%,rgba(237,246,252,.08) 72%,rgba(237,246,252,0) 100%),url("./assets/chemlink-refinery-final.jpg.jfif?v=1")!important;
 background-repeat:no-repeat!important;background-size:cover!important;background-position:left center!important;
}
.hero-grid{display:flex!important;flex-direction:row!important;direction:rtl!important;align-items:center!important;justify-content:flex-end!important;gap:24px!important}
.hero-copy{width:min(52%,680px)!important;max-width:680px!important;flex:0 1 680px!important;margin-right:0!important;margin-left:0!important;text-align:right!important}
.hero-inline-brand{display:block!important;width:min(100%,540px)!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:right center!important;margin:0 0 18px auto!important}
.header .brand-image-wrap,.footer-brand .brand-image-wrap{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;background:transparent!important}
.header .brand-image,.footer-brand .brand-image,.hero-inline-brand,.hero-brand-image{display:block!important;height:auto!important;max-height:none!important;min-height:0!important;object-fit:contain!important;object-position:center!important;overflow:visible!important}
.header .brand-image-wrap{width:300px!important;flex:0 0 300px!important}
.header .brand-image{width:100%!important;max-width:100%!important}
.footer-brand .brand-image-wrap{width:280px!important}
.footer-brand .brand-image{width:100%!important}
.hero-card{display:none!important}
@media(max-width:1000px){.header .brand-image-wrap{width:220px!important;flex-basis:220px!important}.hero-copy{width:58%!important}}
@media(max-width:760px){
 .hero{min-height:640px!important;background-image:linear-gradient(180deg,rgba(250,253,255,.95) 0%,rgba(250,253,255,.87) 48%,rgba(237,246,252,.25) 100%),url("./assets/chemlink-refinery-final.jpg.jfif?v=1")!important;background-position:35% center!important}
 .hero-grid{min-height:640px!important;align-items:flex-start!important;justify-content:center!important}
 .hero-copy{width:100%!important;max-width:100%!important;padding:30px 0!important}
 .hero-inline-brand{width:min(100%,420px)!important;margin:0 auto 16px!important}
 .header .brand-image-wrap{width:210px!important;flex-basis:210px!important}
 .app-top-inner{flex-direction:column!important;align-items:stretch!important}
 .app-top-actions{justify-content:center!important}
}


/* Desktop refinement: move the hero copy further right, away from the refinery photo. */
@media(min-width:761px){
 .hero-grid{justify-content:flex-start!important;padding-right:clamp(48px,7vw,120px)!important;padding-left:clamp(12px,2vw,32px)!important;box-sizing:border-box!important}
 .hero-copy{width:min(49%,660px)!important;max-width:660px!important;flex:0 1 660px!important;margin-right:0!important;margin-left:0!important;transform:translateX(34px)!important;position:relative!important;z-index:2!important}
}


/* Corrective hero layout: restore readable copy size and anchor it to the right side on desktop. */
@media(min-width:761px){
 .hero-grid{direction:rtl!important;justify-content:flex-start!important;align-items:center!important;padding-right:clamp(28px,5vw,80px)!important;padding-left:clamp(16px,2vw,32px)!important;gap:24px!important;}
 .hero-copy{width:min(52%,700px)!important;max-width:700px!important;flex:0 1 700px!important;min-width:0!important;margin-left:0!important;margin-right:0!important;padding:38px 0!important;transform:translateX(0)!important;text-align:right!important;}
 .hero-copy h1{font-size:clamp(34px,3.2vw,48px)!important;line-height:1.35!important;}
 .hero-copy p{font-size:clamp(16px,1.25vw,19px)!important;line-height:1.9!important;}
 .hero-inline-brand{width:min(100%,560px)!important;margin:0 0 18px auto!important;}
}


/* Layout lock: use an explicit RTL grid so hero copy cannot drift into the photo/empty column. */
@media(min-width:761px){
 .hero .hero-grid{display:grid!important;direction:rtl!important;grid-template-columns:minmax(0,1fr) minmax(0,.82fr)!important;grid-template-rows:auto!important;justify-content:stretch!important;align-items:center!important;column-gap:clamp(24px,4vw,64px)!important;padding-inline:clamp(28px,5vw,80px)!important;min-height:590px!important;}
 .hero .hero-copy{grid-column:1!important;grid-row:1!important;justify-self:stretch!important;align-self:center!important;width:100%!important;max-width:700px!important;min-width:0!important;flex:none!important;margin:0!important;padding:38px 0!important;transform:none!important;text-align:right!important;}
 .hero .hero-copy h1{font-size:clamp(36px,3.3vw,50px)!important;line-height:1.35!important;letter-spacing:-1px!important;}
 .hero .hero-copy p{font-size:clamp(16px,1.25vw,19px)!important;line-height:1.9!important;}
 .hero .hero-inline-brand{width:min(100%,560px)!important;margin:0 0 18px auto!important;}
}


/* Final desktop placement: anchor the unchanged-width copy to the RIGHT side. */
@media(min-width:761px){
 .hero .hero-grid{display:flex!important;flex-direction:row!important;direction:rtl!important;align-items:center!important;justify-content:flex-start!important;gap:24px!important;padding-right:clamp(36px,5vw,80px)!important;padding-left:0!important;min-height:590px!important;}
 .hero .hero-copy{width:min(58%,760px)!important;max-width:760px!important;min-width:0!important;flex:0 1 760px!important;margin:0!important;padding:38px 0!important;position:relative!important;right:-350px!important;transform:none!important;text-align:right!important;}
 .hero .hero-copy h1{font-size:clamp(36px,3.3vw,50px)!important;line-height:1.25!important;letter-spacing:-1px!important;}
 .hero .hero-copy p{font-size:clamp(16px,1.25vw,19px)!important;line-height:1.9!important;}
 .hero .hero-inline-brand{width:min(100%,560px)!important;margin:0 0 18px auto!important;}
}