ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / thebhoeo / public_html / emanplastic

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Development Proposal — EMAN Plastic Industry L.L.C.</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<style>

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EMAN PLASTIC — LIGHT THEME
   Matching catalog: White + Royal Blue + Green
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --blue:      #1B3D8A;
  --blue2:     #2555B5;
  --blue3:     #4A7BD4;
  --blue-lo:   #EEF2FB;
  --blue-mid:  #D5E0F5;
  --green:     #2DB84B;
  --green2:    #24A040;
  --green-lo:  #E8F7EC;
  --green-mid: #C2EACC;
  --white:     #FFFFFF;
  --gray:      #F4F7FB;
  --gray2:     #EBF0F8;
  --border:    #D5DFF0;
  --border2:   #C2CFEA;
  --text-hi:   #0C1E3D;
  --text-md:   #3A5070;
  --text-lo:   #7A94B8;
  --f:         'Outfit', sans-serif;
  --fm:        'Fira Code', monospace;
  --r-sm:      8px;
  --r-md:      16px;
  --r-lg:      24px;
  --r-xl:      32px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--gray2); font-family: var(--f); -webkit-font-smoothing: antialiased; color: var(--text-md); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--gray); }
::-webkit-scrollbar-thumb { background: var(--blue3); border-radius: 3px; opacity: .4; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COVER PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cover {
  background: var(--white);
  display: grid;
  grid-template-rows: 60px 1fr auto;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Topbar */
.cover-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 72px;
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 5;
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(45,184,75,.5);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.nav-label { font-family: var(--fm); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-lo); }
.nav-ref   { font-family: var(--fm); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-lo); }

/* Hero split */
.cover-hero {
  display: grid;
  grid-template-columns: 1fr 400px;
  position: relative; z-index: 2;
}

/* LEFT */
.ch-left {
  padding: 64px 72px 52px;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--border);
}
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.eyebrow-line { width: 28px; height: 2px; background: var(--green); }
.eyebrow-text { font-family: var(--fm); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--green); }

.cover-title {
  font-size: clamp(52px, 6vw, 80px);
  font-weight: 800;
  color: var(--text-hi);
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.cover-title .blue  { color: var(--blue); }
.cover-title .light { font-weight: 300; color: var(--text-md); }

.prepared-for {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 24px;
  background: var(--blue-lo);
  border: 1px solid rgba(27,61,138,.12);
  border-radius: var(--r-md);
  margin: 32px 0 40px;
  max-width: 500px;
}
.pf-label  { font-family: var(--fm); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-lo); margin-bottom: 4px; }
.pf-client { font-size: 15px; font-weight: 700; color: var(--text-hi); }
.pf-div    { width: 1px; height: 38px; background: var(--border); flex-shrink: 0; }
.pf-loc    { font-size: 12px; color: var(--text-lo); line-height: 1.6; }
.pf-loc strong { color: var(--text-md); font-weight: 600; }

.cover-scores {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
}
.cs { background: var(--white); padding: 18px 12px; text-align: center; transition: background .18s; }
.cs:hover { background: var(--gray); }
.cs-n { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; margin-bottom: 4px; }
.cs-n.gr { color: var(--green); }
.cs-n.bl { color: var(--blue); }
.cs-l { font-family: var(--fm); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-lo); }

/* RIGHT — blue panel */
.ch-right {
  background: var(--blue);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.ch-right-tri1 { position: absolute; bottom: -40px; right: -40px; width: 0; height: 0; border-left: 220px solid transparent; border-bottom: 400px solid rgba(255,255,255,.07); pointer-events: none; }
.ch-right-tri2 { position: absolute; bottom: 60px; right: 40px; width: 0; height: 0; border-left: 90px solid transparent; border-bottom: 160px solid rgba(45,184,75,.18); pointer-events: none; }
.ch-right-dots { position: absolute; top: 32px; left: 28px; width: 120px; height: 120px; background-image: radial-gradient(rgba(255,255,255,.15) 1.5px, transparent 1.5px); background-size: 16px 16px; pointer-events: none; border-radius: 8px; }

.ch-right-inner { padding: 48px 36px 36px; flex: 1; display: flex; flex-direction: column; position: relative; z-index: 2; justify-content: center; }
.rc-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 6px 14px; margin-bottom: 28px; align-self: flex-start; }
.rc-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.rc-badge-txt { font-family: var(--fm); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); }

.rc-company-label { font-family: var(--fm); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px; }
.rc-company-name  { font-size: 21px; font-weight: 800; color: var(--white); line-height: 1.2; letter-spacing: -.01em; margin-bottom: 32px; }

.rc-rows { display: flex; flex-direction: column; gap: 6px;}
.rc-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: rgba(255,255,255,.06); border-radius: 8px; transition: background .15s; }
.rc-row:hover { background: rgba(255,255,255,.1); }
.rc-row-label { font-size: 11px; color: rgba(255,255,255,.48); font-weight: 500; }
.rc-row-val   { font-size: 12px; font-weight: 700; color: var(--white); }
.rc-row-val.gn { color: var(--green); }

.rc-price {
  margin-top: 16px;
  background: var(--green);
  border-radius: var(--r-md); padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.rc-price-lbl { font-family: var(--fm); font-size: 12px; text-transform: uppercase; color: rgb(255, 255, 255); margin-bottom: 3px; }
.rc-price-val { font-size: 22px; font-weight: 800; color: var(--text-hi); letter-spacing: -.02em; }

/* Cover foot */
.cover-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 72px;
  background: var(--gray);
  border-top: 1px solid var(--border);
}
.cf-l { font-family: var(--fm); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-lo); }
.cf-l span { margin: 0 8px; color: var(--border2); }
.cf-r { font-size: 12px; color: var(--text-lo); }
.cf-r strong { color: var(--blue); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE CHROME — section wrapper
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-white  { background: var(--white); }
.page-gray   { background: var(--gray); }
.page-blue   { background: var(--blue); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 80px 72px; }

/* Section Header */
.sec-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 48px;
  padding-bottom: 32px; border-bottom: 1px solid var(--border);
}
.sec-hd.inv { border-bottom-color: rgba(255,255,255,.1); }
.sec-tag { font-family: var(--fm); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.sec-tag::before { content:''; width: 16px; height: 1px; background: currentColor; }
.sec-tag.inv { color: rgba(45,184,75,.85); }
.sec-tag.blu { color: var(--blue3); }
.sec-h { font-size: 36px; font-weight: 800; color: var(--text-hi); letter-spacing: -.025em; line-height: 1.1; }
.sec-h.inv { color: var(--white); }
.sec-sub { font-size: 14px; color: var(--text-lo); line-height: 1.7; margin-top: 6px; max-width: 440px; }
.sec-sub.inv { color: rgba(255,255,255,.55); }
.sec-num-bg { font-size: 104px; font-weight: 800; letter-spacing: -.04em; line-height: 1; flex-shrink: 0; }
.sec-num-bg.li { color: rgba(11,24,41,.05); }
.sec-num-bg.iv { color: rgba(255,255,255,.06); }

/* Dividers */
.div-blue  { height: 1px; background: linear-gradient(to right, rgba(27,61,138,.2), transparent 70%); }
.div-green { height: 1px; background: linear-gradient(to right, rgba(45,184,75,.3), transparent 70%); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   01 — EXEC SUMMARY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.exec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 32px; }
.exec-half { background: var(--gray); border: 1px solid var(--border); padding: 36px 40px; }
.exec-half:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.exec-half:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }
.exec-lbl  { font-family: var(--fm); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-lo); margin-bottom: 12px; }
.exec-body { font-size: 15px; line-height: 1.8; color: var(--text-md); }
.exec-body strong { color: var(--text-hi); font-weight: 700; }

.exec-pull {
  background: var(--blue);
  border-radius: var(--r-md); padding: 40px 52px;
  position: relative; overflow: hidden;
}
.exec-pull::before { content:'"'; position: absolute; top: -24px; left: 28px; font-size: 160px; font-weight: 800; color: rgba(45,184,75,.12); line-height: 1; }
.exec-pull::after { content:''; position: absolute; bottom: -32px; right: -32px; width: 180px; height: 180px; background: rgba(255,255,255,.04); border-radius: 50%; }
.exec-pull-text { font-size: 20px; font-weight: 500; color: var(--white); line-height: 1.65; position: relative; z-index: 2; max-width: 680px; }
.exec-pull-text span { color: var(--green); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   02 — TECH
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tech-row { display: grid; grid-template-columns: repeat(7,1fr); gap: 12px; margin-bottom: 40px; }
.tech-chip {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 20px 10px; text-align: center; transition: all .22s;
}
.tech-chip:hover { border-color: rgba(27,61,138,.35); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,61,138,.1); }
.tech-chip-icon { font-size: 26px; margin-bottom: 10px; }
.tech-chip-name { font-family: var(--fm); font-size: 11px; color: var(--blue); font-weight: 500; letter-spacing: .04em; }

/* Pillar cards on blue bg */
.pillars-blue { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.pb-card {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md); padding: 32px;
  position: relative; overflow: hidden; transition: background .2s;
}
.pb-card:hover { background: rgba(255,255,255,.11); }
.pb-card::after { content:''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--green), transparent); }
.pb-n { font-size: 48px; font-weight: 800; color: rgb(46, 224, 52); line-height: 1; margin-bottom: 14px; letter-spacing: -.03em; }
.pb-title { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.pb-text  { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.65; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   03 — FEATURES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.feat-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 30px;
  position: relative; overflow: hidden; transition: all .25s;
}
.feat-card:hover { border-color: rgba(27,61,138,.3); transform: translateY(-3px); box-shadow: 0 12px 36px rgba(27,61,138,.1); }
.feat-card::before { content:''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--blue), var(--green)); opacity: 0; transition: opacity .25s; }
.feat-card:hover::before { opacity: 1; }
.feat-icon { width: 48px; height: 48px; background: var(--blue-lo); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; }
.feat-title { font-size: 14px; font-weight: 700; color: var(--text-hi); margin-bottom: 8px; line-height: 1.3; }
.feat-text  { font-size: 13px; color: var(--text-lo); line-height: 1.65; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   04 — MARKETING ROWS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mkt-stack { display: flex; flex-direction: column; gap: 3px; }
.mkt-row {
  display: grid; grid-template-columns: 68px 1fr 1.3fr;
  background: var(--gray); border: 1px solid var(--border);
  overflow: hidden; transition: background .18s;
}
.mkt-row:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.mkt-row:last-child  { border-radius: 0 0 var(--r-sm) var(--r-sm); }
.mkt-row:hover { background: var(--white); }
.mkt-icon { background: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 22px; border-right: 1px solid rgba(255,255,255,.1); }
.mkt-name { padding: 18px 24px; border-right: 1px solid var(--border); display: flex; align-items: flex-start; flex-direction: column; justify-content: center; }
.mkt-ttl  { font-size: 14px; font-weight: 700; color: var(--text-hi); margin-bottom: 3px; }
.mkt-tgl  { font-family: var(--fm); font-size: 10px; color: var(--text-lo); letter-spacing: .05em; }
.mkt-desc-col { padding: 18px 24px; }
.mkt-desc { font-size: 13px; color: var(--text-md); line-height: 1.65; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   05 — ADMIN CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.admin-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.admin-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 32px;
  position: relative; overflow: hidden; transition: all .2s;
}
.admin-card:hover { border-color: rgba(27,61,138,.3); box-shadow: 0 8px 32px rgba(27,61,138,.1); }
.admin-card::before { content:''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.admin-card:nth-child(1)::before { background: var(--blue); }
.admin-card:nth-child(2)::before { background: var(--green); }
.admin-card:nth-child(3)::before { background: linear-gradient(to right, var(--blue), var(--green)); }
.admin-letter { font-size: 48px; font-weight: 800; color: var(--blue-lo); line-height: 1; margin-bottom: 14px; }
.admin-title  { font-size: 15px; font-weight: 700; color: var(--text-hi); margin-bottom: 10px; }
.admin-text   { font-size: 13px; color: var(--text-md); line-height: 1.7; }
.admin-text ul { padding-left: 4px; list-style: none; margin-top: 8px; }
.admin-text li { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.admin-text li::before { content: '·'; color: var(--green); font-weight: 700; flex-shrink: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   06 — TIMELINE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.timeline { position: relative; }
.timeline::before { content:''; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(to bottom, var(--blue), var(--green) 80%, transparent); }
.tl-item { display: grid; grid-template-columns: 68px 1fr; gap: 24px; margin-bottom: 24px; position: relative; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot { width: 54px; height: 54px; background: var(--blue); border: 2px solid var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: var(--white); flex-shrink: 0; position: relative; z-index: 2; }
.tl-content { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 28px; position: relative; overflow: hidden; }
.tl-content::before { content:''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--blue), var(--green)); }
.tl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tl-title { font-size: 15px; font-weight: 700; color: var(--text-hi); }
.tl-dur { font-family: var(--fm); font-size: 10px; color: var(--green2); background: var(--green-lo); border: 1px solid var(--green-mid); padding: 4px 12px; border-radius: 20px; }
.tl-list { list-style: none; }
.tl-list li { font-size: 13px; color: var(--text-md); padding: 3px 0; display: flex; align-items: flex-start; gap: 10px; }
.tl-list li::before { content:'›'; color: var(--blue); font-weight: 700; flex-shrink: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   07 — CHECKLIST
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.chk-item { display: flex; align-items: center; gap: 14px; padding: 15px 22px; background: var(--white); border: 1px solid var(--border); transition: background .15s; }
.chk-item:first-child { border-radius: var(--r-sm) 0 0 0; }
.chk-item:nth-child(2){ border-radius: 0 var(--r-sm) 0 0; }
.chk-item:nth-last-child(2){ border-radius: 0 0 0 var(--r-sm); }
.chk-item:last-child  { border-radius: 0 0 var(--r-sm) 0; }
.chk-item:hover { background: var(--blue-lo); }
.chk-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--green-lo); border: 1px solid var(--green-mid); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; color: var(--green2); font-weight: 700; }
.chk-txt  { font-size: 13.5px; color: var(--text-md); font-weight: 500; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   08 — INVESTMENT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.price-hero {
  background: var(--blue);
  border-radius: var(--r-xl); padding: 60px 64px;
  position: relative; overflow: hidden; margin-bottom: 32px;
}
.ph-tri1 { position: absolute; top: -60px; right: -60px; width: 0; height: 0; border-left: 280px solid transparent; border-bottom: 480px solid rgba(255,255,255,.05); pointer-events: none; }
.ph-tri2 { position: absolute; bottom: -40px; right: 80px; width: 0; height: 0; border-left: 120px solid transparent; border-bottom: 200px solid rgba(45,184,75,.12); pointer-events: none; }
.ph-glow { position: absolute; top: -60px; right: 100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(45,184,75,.12) 0%, transparent 65%); pointer-events: none; }

.ph-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.ph-label  { font-family: var(--fm); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgb(255, 255, 255); margin-bottom: 12px; }
.ph-amount { font-size: 64px; font-weight: 800; color: var(--green); letter-spacing: -.03em; line-height: 1; margin-bottom: 4px; }
.ph-cur    { font-size: 20px; color: rgba(255,255,255,.5); font-weight: 300; }
.ph-note   { font-size: 14px; color: rgba(255,255,255,.6); max-width: 460px; line-height: 1.7; margin-top: 14px; }
.ph-note strong { color: var(--white); }
.ph-cta {
  background: var(--green); color: var(--text-hi); border: none;
  border-radius: var(--r-md); padding: 18px 36px;
  font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: all .2s; box-shadow: 0 0 28px rgba(45,184,75,.3);
  font-family: var(--f);
}
.ph-cta:hover { background: var(--green2); transform: translateY(-2px); box-shadow: 0 8px 36px rgba(45,184,75,.4); }

.pay-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.pay-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 32px; text-align: center; position: relative; overflow: hidden; transition: all .2s; }
.pay-card:hover { border-color: rgba(27,61,138,.3); box-shadow: 0 8px 28px rgba(27,61,138,.1); }
.pay-card::before { content:''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.pay-card:nth-child(1)::before { background: #03A9F4; }
.pay-card:nth-child(2)::before { background: #8bc34a; }
.pay-card:nth-child(3)::before { background: #ffc107; }
.pay-phase { font-family: var(--fm); font-size: 12px; font-weight:bold; letter-spacing: .12em; text-transform: uppercase; color: #767676; margin-bottom: 12px; }
.pay-pct   { font-size: 52px; font-weight: 800; color: var(--text-hi); letter-spacing: -.03em; line-height: 1; margin-bottom: 6px; }
.pay-amt   { font-family: var(--fm); font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.pay-card:nth-child(1) .pay-amt { color: #03A9F4; }
.pay-card:nth-child(2) .pay-amt { color: #8bc34a; }
.pay-card:nth-child(3) .pay-amt { color: #ffc107; }
.pay-cond  { font-size: 13px; color: var(--text-lo); line-height: 1.6; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   09 — CTA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cta-section { background: var(--blue); position: relative; overflow: hidden; }
.cta-grid-bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px; pointer-events: none;
}
.cta-tri { position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-left: 280px solid transparent; border-bottom: 460px solid rgba(255,255,255,.04); pointer-events: none; }
.cta-tri2 { position: absolute; bottom: 60px; right: 60px; width: 0; height: 0; border-left: 120px solid transparent; border-bottom: 200px solid rgba(45,184,75,.1); pointer-events: none; }

.cta-wrap {
  max-width: 1160px; margin: 0 auto;
  padding: 88px 72px;
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto;
  gap: 60px; align-items: center;
}
.cta-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cta-eyebrow-line { width: 20px; height: 1px; background: var(--green); }
.cta-eyebrow-text { font-family: var(--fm); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--green); }
.cta-h   { font-size: 50px; font-weight: 800; color: var(--white); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 16px; }
.cta-h span { color: var(--green); }
.cta-sub { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.75; max-width: 500px; }

.cta-box { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 36px 32px; min-width: 280px; text-align: center; }
.cta-box-lbl { font-family: var(--fm); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 16px; }
.cta-btn-p { background: var(--green); border: none; border-radius: var(--r-sm); padding: 16px 32px; font-size: 15px; font-weight: 700; color: var(--text-hi); cursor: pointer; width: 100%; margin-bottom: 8px; transition: all .2s; font-family: var(--f); }
.cta-btn-p:hover { background: var(--green2); box-shadow: 0 8px 28px rgba(45,184,75,.35); }
.cta-btn-s { background: transparent; border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-sm); padding: 14px 32px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.65); cursor: pointer; width: 100%; transition: all .2s; font-family: var(--f); }
.cta-btn-s:hover { border-color: rgba(255,255,255,.3); color: var(--white); }
.cta-note { font-size: 12px; color: rgba(255,255,255,.38); margin-top: 16px; line-height: 1.6; }
.cta-note strong { color: var(--green); }

/* Footer */
.doc-footer { display: flex; align-items: center; justify-content: space-between; padding: 18px 72px; background: #3F51B5; border-top: 1px solid rgba(255,255,255,.08); }
.df-l { font-family: var(--fm); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255); }
.df-l span { margin: 0 8px; color: rgba(255,255,255,.12); }
.df-r { font-size: 12px; color: rgba(255,255,255); }
.df-dot-g { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin: 0 6px; vertical-align: middle; }

@media print {
  .cover { page-break-after: always; min-height: auto; }
  .page-white, .page-gray { page-break-inside: avoid; }
}

</style>
</head>
<body>

<div class="cover">

<nav class="cover-nav">
    <div class="nav-brand">
      <span class="nav-dot"></span>
      <span class="nav-label">Web Development Proposal</span>
    </div>
    <span class="nav-ref">Ref: EMAN-PKR-205K-2026 &nbsp;·&nbsp; Confidential</span>
  </nav>

<div class="cover-hero">
    <div class="ch-left">
      <div>
        <div class="eyebrow">
          <span class="eyebrow-line"></span>
          <span class="eyebrow-text">Project Proposal</span>
        </div>

<div class="cover-title">Full Website</div>
        <div class="cover-title"><span class="blue">Design</span> &amp;</div>
        <div class="cover-title light" style="font-weight:300;color:var(--text-md);">Development</div>

<div class="prepared-for">
          <div>
            <div class="pf-label">Prepared for</div>
            <div class="pf-client">EMAN Plastic Industry L.L.C.</div>
          </div>
          <div class="pf-div"></div>
          <div class="pf-loc"><strong>Ajman, UAE</strong><br>emanplastics.com</div>
        </div>
      </div>

<div class="cover-scores">
        <div class="cs"><div class="cs-n gr">100%</div><div class="cs-l">Responsive</div></div>
        <div class="cs"><div class="cs-n bl">7</div><div class="cs-l">Technologies</div></div>
        <div class="cs"><div class="cs-n gr">25</div><div class="cs-l">Days Delivery</div></div>
        <div class="cs"><div class="cs-n bl">3</div><div class="cs-l">Payment Steps</div></div>
      </div>
    </div>

<div class="ch-right-inner">
        <div class="rc-badge"><span class="rc-badge-dot"></span><span class="rc-badge-txt">Proposal Summary</span></div>

<div class="rc-company-label">Prepared For</div>
        <div class="rc-company-name">EMAN Plastic<br>Industry L.L.C.</div>

<div class="rc-rows">
          <div class="rc-row"><span class="rc-row-label">Project Type</span><span class="rc-row-val">Corporate Product Website</span></div>
          <div class="rc-row"><span class="rc-row-label">Technology</span><span class="rc-row-val">PHP + MySQL + jQuery</span></div>
          <div class="rc-row"><span class="rc-row-label">Timeline</span><span class="rc-row-val gn">20–25 Working Days</span></div>
          <div class="rc-row"><span class="rc-row-label">Client</span><span class="rc-row-val">EMAN Plastic</span></div>
          <div class="rc-row"><span class="rc-row-label">Person of contact</span><span class="rc-row-val">Mr Faizan</span></div>
          <div class="rc-row"><span class="rc-row-label">Date</span><span class="rc-row-val">28<small>th</small> February 2026</span></div>
        </div>

<div class="rc-price">
          <div>
            <div class="rc-price-lbl">Total Investment</div>
            <div class="rc-price-val">PKR 205,000</div>
          </div>
          <div style="font-size:24px;">📋</div>
        </div>
      </div>
    </div>
  </div>

<div class="cover-foot">
    <div class="cf-l">EMAN Plastic Industry L.L.C.<span>·</span>Web Development Proposal<span>·</span>28<small>th</small> February 2026</div>
    <div class="cf-r">Prepared by <strong>The Binary Souls</strong></div>
  </div>
</div>

<div class="page-white">
  <div class="wrap">
    <div class="sec-hd">
      <div>
        <div class="sec-tag">01 — Overview</div>
        <h2 class="sec-h">Project Brief &amp;<br>Our Commitment</h2>
        <p class="sec-sub">A complete B2B corporate website tailored for a global plastic manufacturing business.</p>
      </div>
      <div class="sec-num-bg li">01</div>
    </div>

<div class="exec-grid">
      <div class="exec-half">
        <div class="exec-lbl">The Opportunity</div>
        <div class="exec-body">
          EMAN Plastic Industry L.L.C. requires a <strong>world-class corporate website</strong> that reflects the strength and global scale of an established UAE-based plastic manufacturer — with a dynamic product catalog, professional B2B inquiry system, and a presence that matches their international reach across UAE, Pakistan, Saudi Arabia, Qatar, Oman, Egypt, Libya, and beyond.<br><br>
          The website must serve both <strong>trade buyers and multinational procurement teams</strong> — building instant credibility while making it effortless to browse product specifications and submit inquiries.
        </div>
      </div>
      <div class="exec-half">
        <div class="exec-lbl">What We Deliver</div>
        <div class="exec-body">
          A fully dynamic, speed-optimised corporate website built on <strong>PHP + MySQL + jQuery</strong> — complete with a searchable product catalog covering Yogurt, Ice-Cream, Grease, and Paint Packaging plus Bucket Lids, product specification pages, an RFQ (Request for Quote) system, global distribution page, company profile, and a powerful admin panel to manage everything without technical knowledge.<br><br>
          Delivered live in <strong>20–25 working days</strong>, with full handover documentation and ongoing support.
        </div>
      </div>
    </div>

<div class="exec-pull">
      <div class="exec-pull-text">
        "EMAN Plastic is not just a manufacturer — it is a global supplier trusted across 3 continents. The website must <span>communicate that scale and quality</span> within the first 10 seconds of landing on it."
      </div>
    </div>
  </div>
</div>

<div class="page-blue">
  <div class="wrap">
    <div class="sec-hd inv">
      <div>
        <div class="sec-tag inv">02 — Technology</div>
        <h2 class="sec-h inv">Technologies<br>We'll Build With</h2>
        <p class="sec-sub inv">Industry-proven stack — reliable, fast, fully maintainable without technical expertise.</p>
      </div>
      <div class="sec-num-bg iv">02</div>
    </div>

<div class="tech-row">
      <div class="tech-chip"><div class="tech-chip-icon">🐘</div><div class="tech-chip-name">PHP</div></div>
      <div class="tech-chip"><div class="tech-chip-icon">🗄️</div><div class="tech-chip-name">MySQL</div></div>
      <div class="tech-chip"><div class="tech-chip-icon">⚡</div><div class="tech-chip-name">jQuery</div></div>
      <div class="tech-chip"><div class="tech-chip-icon">🌐</div><div class="tech-chip-name">HTML5</div></div>
      <div class="tech-chip"><div class="tech-chip-icon">🎨</div><div class="tech-chip-name">CSS3</div></div>
      <div class="tech-chip"><div class="tech-chip-icon">📜</div><div class="tech-chip-name">JavaScript</div></div>
      <div class="tech-chip"><div class="tech-chip-icon">🔄</div><div class="tech-chip-name">Ajax</div></div>
    </div>

<div class="pillars-blue">
      <div class="pb-card">
        <div class="pb-n">01</div>
        <div class="pb-title">Dynamic PHP + MySQL Backend</div>
        <div class="pb-text">Every product, specification, case study, and page is managed from an admin panel — no code needed. New product SKUs, categories, or pages can be added in seconds. Built to scale as EMAN's catalog grows across new product lines and markets.</div>
      </div>
      <div class="pb-card">
        <div class="pb-n">02</div>
        <div class="pb-title">Product Catalog & RFQ Engine</div>
        <div class="pb-text">A fully searchable and filterable product catalog with individual specification pages (ISO volume, brimful volume, height, diameter, weight). Integrated RFQ form on every product — submissions route instantly to your sales team by email, replacing fragmented WhatsApp inquiries.</div>
      </div>
      <div class="pb-card">
        <div class="pb-n">03</div>
        <div class="pb-title">jQuery, Ajax & Interactive UI</div>
        <div class="pb-text">Smooth catalog filtering without page reloads. Ajax-powered inquiry forms. Product image zoom. All interactions work identically on desktop and mobile — critical for international B2B procurement teams reviewing specifications on any device, from UAE to Europe.</div>
      </div>
    </div>
  </div>
</div>

<div class="page-gray">
  <div class="wrap">
    <div class="sec-hd">
      <div>
        <div class="sec-tag">03 — Core Features</div>
        <h2 class="sec-h">General Website<br>Features Included</h2>
      </div>
      <div class="sec-num-bg li">03</div>
    </div>

<div class="feat-grid">
      <div class="feat-card">
        <div class="feat-icon">📱</div>
        <div class="feat-title">Fully Responsive Design</div>
        <div class="feat-text">Perfectly optimised for desktop, tablet, and mobile. International buyers reviewing product specs in Riyadh or London on their phone will see the same professional experience as desktop users in Ajman.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">📦</div>
        <div class="feat-title">Product Catalog System</div>
        <div class="feat-text">A structured, filterable catalog across all 5 product categories — Yogurt, Ice-Cream, Grease, Paint Packaging, and Paint Bucket Lids. Each SKU gets its own specification page with all technical data and a direct "Request Quote" button.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">📋</div>
        <div class="feat-title">RFQ (Request for Quote) System</div>
        <div class="feat-text">A professional inquiry form on every product page — auto-filled with the product name and details. Submissions route instantly to your sales team by email. No more missed WhatsApp messages or informal quote requests.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">⚡</div>
        <div class="feat-title">Optimised for Speed</div>
        <div class="feat-text">Code minification, lazy loading, WebP image conversion, and pre-loaders throughout. Fast load times matter especially for international visitors on varying connection speeds — from UAE fibre to African mobile networks.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">📌</div>
        <div class="feat-title">Sticky Header + Navigation</div>
        <div class="feat-text">Persistent navigation with your logo, product categories dropdown, and contact/WhatsApp CTA always visible. Critical for product-heavy catalog sites where users scroll deeply through specifications on individual product pages.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">🌍</div>
        <div class="feat-title">Global Distribution Page</div>
        <div class="feat-text">A dedicated "Worldwide" section mirroring your catalog map — showcasing EMAN's presence across China, Pakistan, UAE, KSA, Oman, Qatar, Europe, USA, UK, Germany, Turkey, Canada, and Mexico. Builds massive credibility for new international buyers.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">🎠</div>
        <div class="feat-title">Beautiful Sliders & Gallery</div>
        <div class="feat-text">Homepage hero slider with product photography. Product image galleries with zoom. Factory and facility photo showcase. All manageable from the admin panel — upload, reorder, or replace images without any code.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">🌐</div>
        <div class="feat-title">Cross-Browser Compatible</div>
        <div class="feat-text">Tested and functional across Chrome, Firefox, Safari, Opera, and Edge on all versions. EMAN's international buyers use a wide range of browsers and devices. Not a single potential client will encounter a broken layout.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">🔗</div>
        <div class="feat-title">SEO-Friendly Structure</div>
        <div class="feat-text">Clean URLs, structured product taxonomy, admin-managed meta tags, product schema markup. Each product page is individually indexable — helping buyers find specific products searching Google for plastic packaging suppliers.</div>
      </div>
    </div>
  </div>
</div>

<div class="page-white">
  <div class="wrap">
    <div class="sec-hd">
      <div>
        <div class="sec-tag">04 — Marketing</div>
        <h2 class="sec-h">Marketing &amp;<br>Communication Tools</h2>
      </div>
      <div class="sec-num-bg li">04</div>
    </div>

<div class="mkt-stack">
      <div class="mkt-row">
        <div class="mkt-icon">📧</div>
        <div class="mkt-name"><div class="mkt-ttl">Email Notifications</div><div class="mkt-tgl">Auto · Instant · Professional</div></div>
        <div class="mkt-desc-col"><div class="mkt-desc">Every RFQ or inquiry submitted triggers an instant automated email to EMAN's sales team — with the buyer's full details and product request pre-formatted. The buyer also receives a professional confirmation email, increasing trust and reducing abandoned inquiries significantly.</div></div>
      </div>
      <div class="mkt-row">
        <div class="mkt-icon">📰</div>
        <div class="mkt-name"><div class="mkt-ttl">Newsletter / Trade Mailer</div><div class="mkt-tgl">Subscriber Sync · B2B Campaigns</div></div>
        <div class="mkt-desc-col"><div class="mkt-desc">A newsletter subscription system for trade buyers and distributors — allowing EMAN to announce new product lines, catalog updates, pricing changes, or trade event participation directly to their existing client base and prospective buyers worldwide.</div></div>
      </div>
      <div class="mkt-row">
        <div class="mkt-icon">💬</div>
        <div class="mkt-name"><div class="mkt-ttl">Live Chat Integration</div><div class="mkt-tgl">Real-Time · Sales Support</div></div>
        <div class="mkt-desc-col"><div class="mkt-desc">Live chat enables instant direct communication with potential trade buyers as they browse the catalog. Studies consistently show a 20%+ conversion lift on B2B sites — particularly for buyers who have specification questions before submitting a formal RFQ.</div></div>
      </div>
      <div class="mkt-row">
        <div class="mkt-icon">📊</div>
        <div class="mkt-name"><div class="mkt-ttl">Built-in SEO Compatibility</div><div class="mkt-tgl">Rankings · Analytics · Schema</div></div>
        <div class="mkt-desc-col"><div class="mkt-desc">Full SEO best practices built in — semantic HTML, admin-managed meta tags, product schema markup, structured URLs, and Google Analytics integration from day one. Track which product pages attract the most buyers, which countries traffic comes from, and which searches drive qualified leads.</div></div>
      </div>
      <div class="mkt-row">
        <div class="mkt-icon">💚</div>
        <div class="mkt-name"><div class="mkt-ttl">WhatsApp Direct Connect</div><div class="mkt-tgl">UAE Mobile First · Instant Access</div></div>
        <div class="mkt-desc-col"><div class="mkt-desc">WhatsApp is the primary business communication channel across GCC, Pakistan, and Africa — all of EMAN's key markets. A floating button on every page lets buyers start a conversation in one tap, with a pre-filled message automatically including the product they were viewing.</div></div>
      </div>
      <div class="mkt-row">
        <div class="mkt-icon">📈</div>
        <div class="mkt-name"><div class="mkt-ttl">Analytics & Visitor Tracking</div><div class="mkt-tgl">Traffic Sources · Behaviour · ROI</div></div>
        <div class="mkt-desc-col"><div class="mkt-desc">Google Analytics with custom event tracking — see which product pages attract the most B2B interest, which countries drive traffic, how long buyers spend reviewing specifications, and which catalog categories generate the most RFQ submissions. Data that drives every future decision.</div></div>
      </div>
    </div>
  </div>
</div>

<div class="page-gray">
  <div class="wrap">
    <div class="sec-hd">
      <div>
        <div class="sec-tag">05 — Backend</div>
        <h2 class="sec-h">Admin Panel &amp;<br>Security Features</h2>
        <p class="sec-sub">Total control. Zero coding required. Enterprise-grade protection from day one.</p>
      </div>
      <div class="sec-num-bg li">05</div>
    </div>

<div class="admin-grid">
      <div class="admin-card">
        <div class="admin-letter">A</div>
        <div class="admin-title">Powerful Admin Panel</div>
        <div class="admin-text">A fully organised, intuitive admin interface — manage every aspect of the site without writing a single line of code. Add a new product SKU, update a specification table, or publish a news item in under 2 minutes.<br><br>Manage from the admin panel: products, specifications, categories, inquiries inbox, newsletter subscribers, team pages, and all content blocks.<br><br>Full tutorial documentation and how-to guide provided if required.</div>
      </div>
      <div class="admin-card">
        <div class="admin-letter">B</div>
        <div class="admin-title">Pro Web Security</div>
        <div class="admin-text">A professional security layer applied across the entire site and admin panel. Critical for a business with international buyers submitting trade inquiries daily.
          <ul>
            <li>Hidden and renamed admin login URL</li>
            <li>XSS (Cross-Site Scripting) detection & blocking</li>
            <li>SQL Injection protection on all forms</li>
            <li>Spam and bot filtering on RFQ + contact forms</li>
            <li>Rate limiting on all form submissions</li>
            <li>Attacker and hacker proofing on all pages</li>
          </ul>
        </div>
      </div>
      <div class="admin-card">
        <div class="admin-letter">C</div>
        <div class="admin-title">Total Long-Term Flexibility</div>
        <div class="admin-text">The site is built for EMAN's growth. When you need to add new product categories, launch in new markets, or build a distributor portal, dealer locator, or private pricing section for trade clients — all of these can be added directly to the existing codebase.<br><br>No platform lock-in. No rebuilding from scratch. Every future feature integrates seamlessly with what's already built. The architecture is designed to grow with your business over years.</div>
      </div>
    </div>
  </div>
</div>

<div class="page-white">
  <div class="wrap">
    <div class="sec-hd">
      <div>
        <div class="sec-tag">06 — Delivery</div>
        <h2 class="sec-h">Project Timeline</h2>
        <p class="sec-sub">20–25 working days from kickoff to live launch. Each phase has a clear deliverable and client approval gate.</p>
      </div>
      <div class="sec-num-bg li">06</div>
    </div>

<div class="tl-item">
        <div class="tl-dot">1</div>
        <div class="tl-content">
          <div class="tl-head"><span class="tl-title">Design — Mockups & UI</span><span class="tl-dur">Days 1–5</span></div>
          <ul class="tl-list">
            <li>Homepage visual design — aligned to EMAN brand: deep blue + green + white</li>
            <li>Colour palette, typography, and component library established</li>
            <li>Slider designs & Transitions plus Loading animations & effects.</li>
            <li>Client review round — revisions incorporated before development begins</li>
          </ul>
        </div>
      </div>

<div class="tl-item">
        <div class="tl-dot">2</div>
        <div class="tl-content">
          <div class="tl-head"><span class="tl-title">Frontend Development</span><span class="tl-dur">Days 5–15</span></div>
          <ul class="tl-list">
            <li>Full HTML/CSS conversion of all approved designs — pixel-perfect implementation</li>
            <li>Responsive breakpoints built and tested across all device sizes</li>
            <li>jQuery catalog filtering (by category, volume, application) — Ajax-powered, no page reload</li>
            <li>Product image zoom, gallery lightbox, and specification table interactions</li>
            <li>WhatsApp floating button, sticky header, social sharing, and animated sliders built</li>
          </ul>
        </div>
      </div>

<div class="tl-item">
        <div class="tl-dot">3</div>
        <div class="tl-content">
          <div class="tl-head"><span class="tl-title">Backend, Admin Panel & RFQ System</span><span class="tl-dur">Days 16–22</span></div>
          <ul class="tl-list">
            <li>PHP + MySQL backend and full database architecture built</li>
            <li>Admin panel developed — products, specs, categories, inquiries, subscribers, pages all manageable</li>
            <li>RFQ inquiry system: form submission → email notification → admin panel record</li>
            <li>Newsletter subscription management system built and connected</li>
            <li>Live chat integration and WhatsApp configured for UAE numbers</li>
            <li>Pro security layer (XSS, SQLi, hidden admin URL, spam filtering) installed</li>
          </ul>
        </div>
      </div>

<div class="tl-item">
        <div class="tl-dot">4</div>
        <div class="tl-content">
          <div class="tl-head"><span class="tl-title">Testing, QA & Launch</span><span class="tl-dur">Days 22–25</span></div>
          <ul class="tl-list">
            <li>Full cross-browser testing: Chrome, Firefox, Safari, Edge, Opera</li>
            <li>Device testing across iOS (iPhone, iPad) and Android phones and tablets</li>
            <li>RFQ form end-to-end tested — submission, email receipt, admin panel record verified</li>
            <li>Speed optimisation final pass — all images compressed, code minified, lazy loading confirmed</li>
            <li>Client review of staging site · Final revisions incorporated</li>
            <li>DNS go-live · Full credentials handover · Admin tutorial documentation delivered</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="page-gray">
  <div class="wrap">
    <div class="sec-hd">
      <div>
        <div class="sec-tag">07 — Scope</div>
        <h2 class="sec-h">Everything That's<br>Included</h2>
      </div>
      <div class="sec-num-bg li">07</div>
    </div>

<div class="checklist">
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Fully responsive design — desktop, tablet &amp; mobile</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Complete PHP + MySQL dynamic website</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Product catalog — 5 categories, unlimited SKUs</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Individual product pages with full specification tables</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Ajax-powered product filtering (no page reload)</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">RFQ (Request for Quote) system on every product page</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Automated email notifications for all inquiries</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Powerful admin panel — no code required to update</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Global distribution / worldwide reach page</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Newsletter integration with subscriber management</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Live chat integration for real-time buyer support</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">WhatsApp button on all pages — UAE number linked</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Speed optimisation — lazy load, compression, minification</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Sticky header with product categories dropdown</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Beautiful animated sliders with unlimited slides</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Product image gallery with zoom functionality</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Social sharing on all product and content pages</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">SEO-friendly URLs + sitemap + product schema markup</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Google Analytics setup and event configuration</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Pro security — XSS + SQL injection + hidden admin URL</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Cross-browser testing across all major browsers</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Full content population from client-supplied materials</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Admin Panel credentials provided at handover</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-txt">Post-launch support — all queries answered promptly</span></div>
    </div>
  </div>
</div>

<div class="page-white">
  <div class="wrap">
    <div class="sec-hd">
      <div>
        <div class="sec-tag">08 — Investment</div>
        <h2 class="sec-h">Pricing &amp; Payment<br>Structure</h2>
      </div>
      <div class="sec-num-bg li">08</div>
    </div>

<div class="price-hero">
      <div class="ph-tri1"></div>
      <div class="ph-tri2"></div>
      <div class="ph-glow"></div>
      <div class="ph-inner">
        <div>
          <div class="ph-label">Total Project Investment</div>
          <div class="ph-amount">PKR 205,000 <span class="ph-cur">only</span></div>
          <div class="ph-note">
            A complete, production-ready corporate product website with <strong>all features listed in this proposal</strong> — fully dynamic, fully responsive, fully secured, and fully handed over with credentials and documentation.<br><br>
            This is a <strong>fixed price</strong>. No hidden costs. The product catalog, RFQ system, admin panel, global reach page, and every feature described included.
          </div>
        </div>
        <button class="ph-cta">Accept Proposal &amp; Get Started →</button>
      </div>
    </div>

<div class="pay-grid">
      <div class="pay-card">
        <div class="pay-phase">Payment 1 — Kickoff</div>
        <div class="pay-pct">50%</div>
        <div class="pay-amt">PKR 102,500</div>
        <div class="pay-cond">Due at project start. Confirms your slot in the development schedule and initiates discovery, design, and planning immediately.</div>
      </div>
      <div class="pay-card">
        <div class="pay-phase">Payment 2 — Midpoint</div>
        <div class="pay-pct">30%</div>
        <div class="pay-amt">PKR 61,500</div>
        <div class="pay-cond">Due when 60% of the site is complete and presented for your review on the staging environment.</div>
      </div>
      <div class="pay-card">
        <div class="pay-phase">Payment 3 — Delivery</div>
        <div class="pay-pct">20%</div>
        <div class="pay-amt">PKR 41,000</div>
        <div class="pay-cond">Final payment due on project completion, full handover of all credentials, and live deployment to your domain.</div>
      </div>
    </div>
  </div>
</div>

<div class="cta-section">
  <div class="cta-grid-bg"></div>
  <div class="cta-tri"></div>
  <div class="cta-tri2"></div>

<div class="cta-wrap">
    <div style="min-width:500px;">
      <div class="cta-eyebrow">
        <span class="cta-eyebrow-line"></span>
        <span class="cta-eyebrow-text">09 — Next Steps</span>
      </div>
      <div class="cta-h">Ready to Build<br>Something <span>Great?</span></div>
      <div class="cta-sub">Once you confirm this proposal, we begin within 2 business days. In 20–25 working days, EMAN Plastic Industry L.L.C. will have a world-class corporate website that reflects your global operations, showcases your full product range, and converts international buyers into qualified trade inquiries — 24 hours a day, 7 days a week.</div>
    </div>

<div class="cta-box">
      <button class="cta-btn-p">Confirm Proposal ✓</button>
      <button class="cta-btn-s">Ask a Question</button>
      <div class="cta-note">
        <strong>We promise outstanding support</strong> — every query answered promptly throughout the entire project and beyond.
      </div>
    </div>
  </div>
</div>

<div class="doc-footer">
  <div class="df-l">
    EMAN Plastic Industry L.L.C.
    <span>·</span>
    Web Development Proposal
    <span>·</span>
    February 2026
  </div>
  <div class="df-r">PKR 205,000 <span class="df-dot-g"></span> 20–25 Working Days <span class="df-dot-g"></span> Confidential</div>
</div>

</body>
</html>

[-] index.html [edit]
[-] .htaccess [edit]
[+] ..