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

PATH: home / thebhoeo / public_html / readtravel

<!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 — Read Travel</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Clash+Display:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<style>

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESIGN SYSTEM — TECH AGENCY EDITORIAL
   Palette: Near-Black + Electric Cyan + Warm Orange
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

:root {
  /* Core palette */
  --ink:        #0E1117;
  --ink2:       #161B26;
  --ink3:       #1E2637;
  --ink4:       #252F42;
  --cyan:       #06D6C7;
  --cyan2:      #04B5A8;
  --cyan3:      #037F77;
  --orange:     #FF6B35;
  --orange2:    #E85A26;
  --cream:      #F8F5F0;
  --white:      #FFFFFF;
  --off:        #F2EFE9;

/* Text on dark */
  --td-hi:  #FFFFFF;
  --td-md:  rgba(255,255,255,0.65);
  --td-lo:  rgba(255,255,255,0.35);

/* Text on light */
  --tl-hi:  #0E1117;
  --tl-md:  #3D4A5C;
  --tl-lo:  #8892A4;

/* Borders */
  --bd-dark:  rgba(255,255,255,0.08);
  --bd-light: rgba(14,17,23,0.1);

/* Typography */
  --f-head: 'Outfit', sans-serif;
  --f-body: 'Outfit', sans-serif;
  --f-mono: 'Fira Code', monospace;

/* Radius */
  --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(--cream); font-family: var(--f-body); -webkit-font-smoothing: antialiased; }

/* ━━━━━━━━━━━━━━ SCROLLBAR ━━━━━━━━━━━━━━ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: #CBD0DA; border-radius: 3px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COVER — FULL-SCREEN DARK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cover {
  min-height: 100vh;
  background: var(--ink);
  display: grid;
  grid-template-rows: 80px 1fr auto;
  position: relative;
  overflow: hidden;
}

/* Geometric accent — top right */
.cover-geo {
  position: absolute;
  top: -60px; right: -60px;
  width: 520px; height: 520px;
  border: 1px solid rgba(6,214,199,0.12);
  border-radius: 50%;
  pointer-events: none;
}
.cover-geo::before {
  content: '';
  position: absolute;
  inset: 40px;
  border: 1px solid rgba(6,214,199,0.08);
  border-radius: 50%;
}
.cover-geo::after {
  content: '';
  position: absolute;
  inset: 100px;
  background: radial-gradient(circle, rgba(6,214,199,0.12) 0%, transparent 65%);
  border-radius: 50%;
}

/* Diagonal stripe bottom left */
.cover-stripe {
  position: absolute;
  bottom: 0; left: 0;
  width: 400px; height: 400px;
  overflow: hidden;
  pointer-events: none;
}
.cover-stripe::before {
  content: '';
  position: absolute;
  bottom: -100px; left: -100px;
  width: 600px; height: 600px;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 18px,
    rgba(6,214,199,0.04) 18px,
    rgba(6,214,199,0.04) 19px
  );
}

/* Topbar */
.cover-nav {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 72px;
  border-bottom: 1px solid var(--bd-dark);
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(6,214,199,0.6);
  animation: breathe 2.5s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
.nav-brand-text {
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: 0.15em;
  color: var(--td-lo); text-transform: uppercase;
}
.nav-type {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--td-lo); text-transform: uppercase;
}

/* Hero content */
.cover-hero {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: 1fr 420px;
  gap: 48px; align-items: center;
  padding: 72px 72px 64px;
}
.cover-label {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.25em;
  color: var(--cyan); text-transform: uppercase;
  margin-bottom: 28px;
  display: flex; align-items: center; gap: 14px;
}
.cover-label::after { content: ''; flex: 1; max-width: 60px; height: 1px; background: var(--cyan); opacity: 0.5; }

.cover-title {
  font-family: var(--f-head);
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 700;
  line-height: 1.0;
  color: var(--td-hi);
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.cover-title em {
  font-style: normal;
  color: var(--cyan);
}
.cover-client {
  font-size: 20px; font-weight: 400;
  color: var(--td-md); margin: 28px 0 0;
  display: flex; align-items: center; gap: 12px;
}
.cover-client::before { content: ''; width: 24px; height: 2px; background: var(--orange); }

/* Right panel — brief info card */
.cover-card {
  background: var(--ink2);
  border: 1px solid var(--bd-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cc-header {
  background: var(--cyan);
  padding: 20px 28px;
}
.cc-header-label {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(0,0,0,0.5); margin-bottom: 4px;
}
.cc-header-title {
  font-size: 18px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.cc-rows { padding: 4px 0; }
.cc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--bd-dark);
}
.cc-row:last-child { border-bottom: none; }
.cc-row-label { font-size: 12px; color: var(--td-lo); font-weight: 500; }
.cc-row-val { font-size: 14px; font-weight: 700; color: var(--td-hi); text-align: right; }
.cc-row-val.cyan { color: var(--cyan); }
.cc-row-val.orange { color: var(--orange); }
.cc-row-val.big {
  font-size: 22px; font-weight: 700;
  color: var(--cyan);
}

/* Bottom scoreboard */
.cover-scores {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--bd-dark);
}
.cs-item {
  padding: 28px 24px;
  border-right: 1px solid var(--bd-dark);
  text-align: center;
  transition: background 0.2s;
}
.cs-item:last-child { border-right: none; }
.cs-item:hover { background: var(--ink2); }
.cs-n {
  font-family: var(--f-head);
  font-size: 38px; font-weight: 700;
  line-height: 1; margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.cs-n.cyan   { color: var(--cyan); }
.cs-n.orange { color: var(--orange); }
.cs-n.white  { color: var(--td-hi); }
.cs-l { font-size: 11px; color: var(--td-lo); font-weight: 500; letter-spacing: 0.05em; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHT SECTIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.light-section { background: var(--white); }
.cream-section { background: var(--cream); }
.ink-section   { background: var(--ink); }

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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION HEADERS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sec-intro {
  margin-bottom: 56px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px;
}
.sec-tag {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.sec-tag.dark { color: var(--td-lo); }
.sec-tag::before { content: ''; width: 20px; height: 1px; background: currentColor; }
.sec-h {
  font-family: var(--f-head);
  font-size: 40px; font-weight: 700;
  color: var(--tl-hi); letter-spacing: -0.02em;
  line-height: 1.1;
}
.sec-h.light { color: var(--td-hi); }
.sec-desc { font-size: 15px; color: var(--tl-lo); line-height: 1.7; max-width: 520px; }
.sec-desc.light { color: var(--td-md); }

.sec-num-bg {
  font-family: var(--f-head);
  font-size: 120px; font-weight: 700;
  color: rgba(14,17,23,0.05);
  letter-spacing: -0.04em;
  line-height: 1;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: -8px;
}
.sec-num-bg.light { color: rgba(255,255,255,0.06); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EXEC SUMMARY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.exec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 40px; }
.exec-half {
  background: var(--off);
  border: 1px solid var(--bd-light);
  padding: 40px 44px;
}
.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-half-label {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tl-lo); margin-bottom: 16px;
}
.exec-half-text {
  font-size: 16px; line-height: 1.8;
  color: var(--tl-md); font-weight: 400;
}
.exec-half-text strong { color: var(--tl-hi); font-weight: 600; }

.exec-pull {
  background: var(--ink);
  border-radius: var(--r-md); padding: 40px 52px;
  position: relative; overflow: hidden;
}
.exec-pull::before {
  content: '"';
  position: absolute; top: -20px; left: 32px;
  font-family: var(--f-head);
  font-size: 160px; font-weight: 700;
  color: var(--cyan); opacity: 0.08;
  line-height: 1;
}
.exec-pull-text {
  font-size: 22px; font-weight: 500;
  color: var(--td-hi); line-height: 1.6;
  position: relative; z-index: 2;
  max-width: 700px;
}
.exec-pull-text span { color: var(--cyan); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FEATURES — GENERAL OPTIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat-card {
  background: var(--white);
  border: 1px solid var(--bd-light);
  border-radius: var(--r-md); padding: 32px;
  position: relative; overflow: hidden;
  transition: all 0.25s;
}
.feat-card:hover {
  border-color: rgba(6,214,199,0.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(6,214,199,0.08);
}
.feat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--cyan), transparent);
  opacity: 0; transition: opacity 0.25s;
}
.feat-card:hover::before { opacity: 1; }
.feat-icon {
  width: 52px; height: 52px;
  background: var(--off); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 20px;
}
.feat-title {
  font-size: 15px; font-weight: 700;
  color: var(--tl-hi); margin-bottom: 10px;
  line-height: 1.3;
}
.feat-text { font-size: 13px; color: var(--tl-lo); line-height: 1.65; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MARKETING FEATURES — HORIZONTAL CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mkt-grid { display: flex; flex-direction: column; gap: 3px; }
.mkt-row {
  display: grid; grid-template-columns: 72px 1fr 1fr;
  background: var(--cream);
  border: 1px solid var(--bd-light);
  border-radius: 0; overflow: hidden;
  transition: all 0.2s;
}
.mkt-row:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.mkt-row:last-child  { border-radius: 0 0 var(--r-md) var(--r-md); }
.mkt-row:hover { background: var(--white); }
.mkt-icon-col {
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  border-right: 1px solid var(--bd-dark);
}
.mkt-name-col {
  padding: 22px 28px;
  border-right: 1px solid var(--bd-light);
  display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
.mkt-title { font-size: 15px; font-weight: 700; color: var(--tl-hi); margin-bottom: 4px; }
.mkt-tag-line { font-size: 12px; color: var(--tl-lo); }
.mkt-desc-col { padding: 22px 28px; }
.mkt-desc { font-size: 13px; color: var(--tl-md); line-height: 1.65; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TECH STACK
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tech-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 12px; margin-bottom: 48px;
}
.tech-chip {
  background: var(--ink2);
  border: 1px solid var(--bd-dark);
  border-radius: var(--r-sm);
  padding: 20px 12px;
  text-align: center;
  transition: all 0.22s;
  cursor: default;
}
.tech-chip:hover {
  border-color: rgba(6,214,199,0.35);
  background: var(--ink3);
  transform: translateY(-2px);
}
.tech-chip-icon { font-size: 28px; margin-bottom: 10px; }
.tech-chip-name {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--cyan); font-weight: 500;
  letter-spacing: 0.05em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BACKEND / ADMIN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.backend-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.be-card {
  background: var(--ink2);
  border: 1px solid var(--bd-dark);
  border-radius: var(--r-md); padding: 32px;
  position: relative; overflow: hidden;
}
.be-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--cyan3), transparent);
}
.be-num {
  font-family: var(--f-head);
  font-size: 56px; font-weight: 700;
  color: rgb(6 214 199 / 91%);
  line-height: 1;
  margin-bottom: 12px; letter-spacing: -0.03em;
}
.be-title { font-size: 16px; font-weight: 700; color: var(--td-hi); margin-bottom: 10px; }
.be-text { font-size: 13px; color: var(--td-md); line-height: 1.65; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TIMELINE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.timeline { position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 28px; top: 28px; bottom: 28px;
  width: 2px;
  background: linear-gradient(to bottom, var(--cyan), var(--cyan3) 70%, transparent);
}
.tl-item {
  display: grid; grid-template-columns: 72px 1fr;
  gap: 28px; margin-bottom: 32px;
  position: relative;
}
.tl-item:last-child { margin-bottom: 0; }
.tl-dot {
  width: 56px; height: 56px;
  background: var(--ink2);
  border: 2px solid var(--cyan);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-head); font-size: 18px; font-weight: 700;
  color: var(--cyan); flex-shrink: 0; position: relative; z-index: 2;
}
.tl-content {
  background: var(--off);
  border: 1px solid var(--bd-light);
  border-radius: var(--r-md); padding: 24px 32px;
  position: relative;
  overflow: hidden;
}
.tl-content::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--cyan), transparent);
}
.tl-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tl-title { font-size: 16px; font-weight: 700; color: var(--tl-hi); }
.tl-duration {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--cyan); font-weight: 500;
  background: rgba(6,214,199,0.1);
  border: 1px solid rgba(6,214,199,0.2);
  padding: 4px 12px; border-radius: 20px;
}
.tl-items { list-style: none; }
.tl-items li {
  font-size: 13px; color: var(--tl-md);
  padding: 4px 0; display: flex; align-items: flex-start; gap: 10px;
}
.tl-items li::before {
  content: '›';
  color: var(--cyan); font-weight: 700; flex-shrink: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INVESTMENT — PRICING
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.price-hero {
  background: var(--ink);
  border-radius: var(--r-xl); padding: 72px;
  position: relative; overflow: hidden;
  margin-bottom: 40px;
}
.price-hero::before {
  content: '';
  position: absolute; top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(6,214,199,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.price-hero::after {
  content: '';
  position: absolute; bottom: -80px; left: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,107,53,0.08) 0%, transparent 65%);
  pointer-events: none;
}
.price-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.price-label {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--td-lo); margin-bottom: 16px;
}
.price-amount {
  font-family: var(--f-head); font-size: 72px; font-weight: 700;
  color: var(--cyan); letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 6px;
}
.price-currency { font-size: 24px; color: var(--td-md); font-weight: 400; }
.price-desc { font-size: 15px; color: var(--td-md); max-width: 480px; line-height: 1.7; margin-top: 16px; }
.price-desc strong { color: var(--td-hi); }
.price-cta {
  background: var(--cyan); color: var(--ink);
  border: none; border-radius: var(--r-md);
  padding: 20px 40px; font-size: 16px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: all 0.2s;
  letter-spacing: -0.01em;
  box-shadow: 0 0 32px rgba(6,214,199,0.3);
}
.price-cta:hover { background: var(--cyan2); transform: translateY(-2px); box-shadow: 0 8px 40px rgba(6,214,199,0.4); }

/* Payment breakdown */
.payment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pay-card {
  background: var(--white);
  border: 1px solid var(--bd-light);
  border-radius: var(--r-md); padding: 32px;
  text-align: center; position: relative; overflow: hidden;
}
.pay-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.pay-card:nth-child(1)::before { background: var(--cyan); }
.pay-card:nth-child(2)::before { background: var(--orange); }
.pay-card:nth-child(3)::before { background: #7C6DFA; }
.pay-phase {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tl-lo); margin-bottom: 16px;
}
.pay-percent {
  font-family: var(--f-head); font-size: 52px; font-weight: 700;
  color: var(--tl-hi); letter-spacing: -0.03em;
  line-height: 1; margin-bottom: 10px;
}
.pay-card:nth-child(1) .pay-percent { color: var(--tl-hi); }
.pay-card:nth-child(2) .pay-percent { color: var(--tl-hi); }
.pay-card:nth-child(3) .pay-percent { color: var(--tl-hi); }
.pay-amount {
  font-family: var(--f-mono); font-size: 16px;
  font-weight: 600; color: var(--cyan); margin-bottom: 12px;
}
.pay-card:nth-child(2) .pay-amount { color: var(--orange); }
.pay-card:nth-child(3) .pay-amount { color: #7C6DFA; }
.pay-condition { font-size: 13px; color: var(--tl-lo); line-height: 1.6; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WHAT'S INCLUDED — CHECKLIST
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.checklist {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.chk-item {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 24px;
  background: var(--white);
  border: 1px solid var(--bd-light);
  border-radius: 0;
  transition: all 0.18s;
}
.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(--off); }
.chk-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(6,214,199,0.12);
  border: 1px solid rgba(6,214,199,0.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px;
}
.chk-text { font-size: 14px; color: var(--tl-md); font-weight: 500; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CTA SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cta-section {
  background: var(--ink);
  position: relative; overflow: hidden;
}
.cta-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(6,214,199,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,214,199,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.cta-wrap {
  max-width: 1160px; margin: 0 auto;
  padding: 96px 72px;
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto;
  gap: 64px; align-items: center;
}
.cta-tag {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--td-lo); margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.cta-tag::before { content: ''; width: 20px; height: 1px; background: var(--orange); }
.cta-tag-text { color: var(--orange); }
.cta-title {
  font-family: var(--f-head); font-size: 52px; font-weight: 700;
  color: var(--td-hi); letter-spacing: -0.03em; line-height: 1.1;
  margin-bottom: 20px;
}
.cta-title span { color: var(--cyan); }
.cta-sub { font-size: 16px; color: var(--td-md); line-height: 1.7; max-width: 500px; }

.cta-wrap .first {
    min-width: 500px;
}

.cta-box {
  background: var(--ink2);
  border: 1px solid var(--bd-dark);
  border-radius: var(--r-lg);
  padding: 40px 36px; min-width: 300px;
  text-align: center;
}
.cta-box-label {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--td-lo); margin-bottom: 8px;
}
.cta-box-primary {
  background: var(--cyan); border: none; border-radius: var(--r-sm);
  padding: 18px 36px; font-size: 16px; font-weight: 700;
  color: var(--ink); cursor: pointer; width: 100%;
  margin-bottom: 10px;
  transition: all 0.2s;
  letter-spacing: -0.01em;
}
.cta-box-primary:hover { background: var(--cyan2); box-shadow: 0 8px 32px rgba(6,214,199,0.35); }
.cta-box-secondary {
  background: transparent; border: 1px solid var(--bd-dark);
  border-radius: var(--r-sm);
  padding: 16px 36px; font-size: 14px; font-weight: 500;
  color: var(--td-md); cursor: pointer; width: 100%;
  transition: all 0.2s;
}
.cta-box-secondary:hover { border-color: rgba(255,255,255,0.2); color: var(--td-hi); }
.cta-box-note { font-size: 12px; color: #fff; margin-top: 16px; line-height: 1.5; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.doc-footer {
  background: var(--ink2);
  border-top: 1px solid var(--bd-dark);
  padding: 28px 72px;
  display: flex; align-items: center; justify-content: space-between;
}
.df-l { font-family: var(--f-mono); font-size: 10px; color: var(--td-lo); letter-spacing: 0.1em; }
.df-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); display: inline-block; margin: 0 8px; }
.df-r { font-size: 12px; color: var(--td-lo); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DIVIDERS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.div-light { height: 1px; background: linear-gradient(to right, rgba(6,214,199,0.3), transparent 70%); }
.div-dark  { height: 1px; background: linear-gradient(to right, rgba(6,214,199,0.2), transparent 70%); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE PRINT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print {
  .cover { page-break-after: always; min-height: auto; }
  .light-section, .cream-section { page-break-inside: avoid; }
}

</style>
</head>
<body>

<div class="cover">
  <div class="cover-geo"></div>
  <div class="cover-stripe"></div>

<nav class="cover-nav">
    <div class="nav-brand">
      <span class="nav-brand-dot"></span>
      <span class="nav-brand-text">Web Development Proposal</span>
    </div>
    <span class="nav-type">Ref: READ TRAVEL- 150K PKR - 2026 &nbsp;·&nbsp; Confidential</span>
  </nav>

<div class="cover-hero">
    <div class="cover-left">
      <div class="cover-label">Project Proposal</div>
      <div class="cover-title">
        Full Website<br>
        <em>Design &</em><br>
        Development
      </div>
      <div class="cover-client">
        Prepared for: Read Travel
      </div>
    </div>

<div class="cover-right">
      <div class="cover-card">
        <div class="cc-header">
          <div class="cc-header-label">Proposal Summary</div>
          <div class="cc-header-title">READ TRAVEL</div>
        </div>
        <div class="cc-rows">
          <div class="cc-row">
            <span class="cc-row-label">Project Type</span>
            <span class="cc-row-val">Full Website Re-Build</span>
          </div>
          <div class="cc-row">
            <span class="cc-row-label">Technology</span>
            <span class="cc-row-val">PHP + MySQL + jQuery & Ajax</span>
          </div>
          <div class="cc-row">
            <span class="cc-row-label">Timeline</span>
            <span class="cc-row-val cyan">18–20 Working Days</span>
          </div>
          <div class="cc-row">
            <span class="cc-row-label">Date</span>
            <span class="cc-row-val">27<small>th</small> February 2026</span>
          </div>
          <div class="cc-row" style="background: rgba(6,214,199,0.04);">
            <span class="cc-row-label" style="font-weight:700; font-size:14px; color:rgba(255,255,255,0.5);">Total Investment</span>
            <span class="cc-row-val big">PKR 150,000</span>
          </div>
        </div>
      </div>
    </div>
  </div>

<div class="cover-scores">
    <div class="cs-item">
      <div class="cs-n cyan">100%</div>
      <div class="cs-l">Responsive Design</div>
    </div>
    <div class="cs-item">
      <div class="cs-n orange">7</div>
      <div class="cs-l">Technologies Used</div>
    </div>
    <div class="cs-item">
      <div class="cs-n white">18</div>
      <div class="cs-l">Days to Deliver</div>
    </div>
    <div class="cs-item">
      <div class="cs-n cyan">3</div>
      <div class="cs-l">Payment Milestones</div>
    </div>
    <div class="cs-item">
      <div class="cs-n orange">∞</div>
      <div class="cs-l">Post-Launch Support</div>
    </div>
  </div>
</div>

<div class="light-section">
  <div class="wrap">
    <div class="sec-intro">
      <div>
        <div class="sec-tag">01 — Overview</div>
        <h2 class="sec-h">Project Brief &amp;<br>Our Commitment</h2>
      </div>
      <div class="sec-num-bg">01</div>
    </div>

<div class="exec-grid">
      <div class="exec-half">
        <div class="exec-half-label">The Opportunity</div>
        <div class="exec-half-text">
          Read Travel requires a <strong>complete, dynamic web presence</strong> one that reflects a professional image, communicates clearly with its audience, and functions reliably without the need for ongoing technical expertise.<br><br>
          This proposal outlines a full-stack solution built on <strong>proven technologies</strong> (PHP, MySQL, jQuery, Ajax etc) that is fast, secure, SEO-ready, and completely manageable through a powerful admin panel — no code required.
        </div>
      </div>
      <div class="exec-half">
        <div class="exec-half-label">What We Deliver</div>
        <div class="exec-half-text">
          A <strong>fully responsive, speed-optimised website</strong> complete with dynamic content management, automated email notifications, live chat integration, WhatsApp connectivity, and professional-grade security — all delivered within <strong>18–20 working days</strong>.<br><br>
          Every feature is built with <strong>long-term flexibility in mind</strong>: future additions, new pages, or functionality upgrades can be implemented without rebuilding from scratch.
        </div>
      </div>
    </div>

<div class="exec-pull">
      <div class="exec-pull-text">
        "A website is not a brochure — it is a <span>24/7 working asset</span>. We build sites that load fast, earn trust instantly, and make it easy for visitors to do exactly what you need them to do."
      </div>
    </div>
  </div>
</div>

<div class="ink-section">
  <div class="wrap">
    <div class="sec-intro">
      <div>
        <div class="sec-tag dark">02 — Technology</div>
        <h2 class="sec-h light">Technologies<br>We'll Build With</h2>
      </div>
      <div class="sec-num-bg light">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="backend-grid">
      <div class="be-card">
        <div class="be-num">01</div>
        <div class="be-title">Dynamic PHP Backend</div>
        <div class="be-text">A completely dynamic site means every page, post, member, event, or resource is managed through the admin panel — no manual HTML editing ever required. Update content in seconds from any browser.</div>
      </div>
      <div class="be-card">
        <div class="be-num">02</div>
        <div class="be-title">MySQL Database</div>
        <div class="be-text">All site data — members, events, publications, contact submissions, newsletter subscribers — stored in a structured, fast, and reliable MySQL database. Backed up regularly and fully exportable.</div>
      </div>
      <div class="be-card">
        <div class="be-num">03</div>
        <div class="be-title">jQuery, Ajax & JS</div>
        <div class="be-text">Smooth, interactive UI interactions without full page reloads. Form submissions, live search, sliders, filtering — all handled with jQuery and Ajax for a fast, app-like experience on every device.</div>
      </div>
    </div>
  </div>
</div>

<div class="cream-section">
  <div class="wrap">
    <div class="sec-intro">
      <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">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">Your website automatically adjusts its layout to any screen size — desktop, tablet, or mobile. No pinching or zooming required. Every visitor gets a native experience on their device.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">⚡</div>
        <div class="feat-title">Optimised for Speed</div>
        <div class="feat-text">Full code minification, lazy loading, pre-loaders, and on-the-fly image compression. Faster load times mean lower bounce rates and higher visitor satisfaction. The speed difference will be immediately noticeable.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">🎠</div>
        <div class="feat-title">Beautiful Sliders & Effects</div>
        <div class="feat-text">Create unlimited, attractive sliders showcasing events, announcements, or featured content — with multiple transition effects. Managed entirely from the admin panel with no design skills needed.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">🌍</div>
        <div class="feat-title">Cross-Browser Compatible</div>
        <div class="feat-text">Works perfectly across Chrome, Firefox, Safari, Opera, and Edge — on all versions. Not a single visitor will see a broken layout. Tested across all major browsers before delivery.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">🧭</div>
        <div class="feat-title">Breadcrumbs Navigation</div>
        <div class="feat-text">Secondary navigation aids that show users exactly where they are within the site hierarchy. Reduces confusion on deep pages and improves both UX and Google's understanding of your site structure.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">📌</div>
        <div class="feat-title">Sticky Header</div>
        <div class="feat-text">The navigation bar stays visible at all times as users scroll — so they never lose access to your key navigation links, phone number, or CTA button. A standard expectation for any modern site.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">🔗</div>
        <div class="feat-title">SEO-Friendly URLs</div>
        <div class="feat-text">Clean, structured URLs that search engines prefer. New pages get indexed faster, and URL consistency means better crawlability across the whole site. Every URL tells both Google and users exactly what the page is about.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">📣</div>
        <div class="feat-title">Social Sharing</div>
        <div class="feat-text">Visitors can share any page, event, or article directly to their social profiles — expanding your reach beyond organic traffic. Built-in sharing buttons for all major platforms, styled to match your brand.</div>
      </div>
      <div class="feat-card">
        <div class="feat-icon">🔒</div>
        <div class="feat-title">Sticky Sections</div>
        <div class="feat-text">Key information (sidebar content, contact info, or key CTAs) can be set to remain visible as the user scrolls through long pages — keeping important actions or information always within reach.</div>
      </div>
    </div>
  </div>
</div>

<div class="light-section">
  <div class="wrap">
    <div class="sec-intro">
      <div>
        <div class="sec-tag">04 — Marketing</div>
        <h2 class="sec-h">Marketing &amp;<br>Communication Tools</h2>
      </div>
      <div class="sec-num-bg">04</div>
    </div>

<div class="mkt-grid">
      <div class="mkt-row">
        <div class="mkt-icon-col">📧</div>
        <div class="mkt-name-col">
          <div class="mkt-title">Email Notifications</div>
          <div class="mkt-tag-line">Automated · Instant · Personal</div>
        </div>
        <div class="mkt-desc-col">
          <div class="mkt-desc">After any form submission or query, users automatically receive a personalised email confirmation with their details. This single feature dramatically reduces follow-up calls, increases trust, and signals professionalism the moment someone submits a form.</div>
        </div>
      </div>

<div class="mkt-row">
        <div class="mkt-icon-col">📰</div>
        <div class="mkt-name-col">
          <div class="mkt-title">Newsletter Integration</div>
          <div class="mkt-tag-line">Subscriber Sync · Campaigns · ROI</div>
        </div>
        <div class="mkt-desc-col">
          <div class="mkt-desc">Member and subscriber data automatically syncs with your email marketing platform. Run targeted campaigns, follow up post-events, share publications, and measure engagement — all powered by the subscriber data your website collects automatically.</div>
        </div>
      </div>

<div class="mkt-row">
        <div class="mkt-icon-col">💬</div>
        <div class="mkt-name-col">
          <div class="mkt-title">Live Chat</div>
          <div class="mkt-tag-line">+20% Conversion · Instant Response</div>
        </div>
        <div class="mkt-desc-col">
          <div class="mkt-desc">Studies consistently show that live chat increases conversions by at least 20%. It gives website visitors instant access to your team for any questions or information requests — reducing friction between a curious visitor and an engaged member.</div>
        </div>
      </div>

<div class="mkt-row">
        <div class="mkt-icon-col">📊</div>
        <div class="mkt-name-col">
          <div class="mkt-title">Built-in SEO Compatibility</div>
          <div class="mkt-tag-line">Rankings · Indexing · Analytics Ready</div>
        </div>
        <div class="mkt-desc-col">
          <div class="mkt-desc">The site is built from the ground up with SEO best practices baked in — semantic HTML, meta tag management from admin, structured URLs, schema markup where applicable, and full Google Analytics integration. Track every visitor, page view, and event from day one.</div>
        </div>
      </div>

<div class="mkt-row">
        <div class="mkt-icon-col">💚</div>
        <div class="mkt-name-col">
          <div class="mkt-title">WhatsApp Direct Connect</div>
          <div class="mkt-tag-line">Mobile First · Instant Access</div>
        </div>
        <div class="mkt-desc-col">
          <div class="mkt-desc">A WhatsApp button on every page lets visitors reach you with a single tap — no form needed. For mobile visitors (majority in Pakistan), this is the lowest-friction contact channel. Pre-filled opening messages reduce effort further and increase response rates.</div>
        </div>
      </div>

<div class="mkt-row">
        <div class="mkt-icon-col">📈</div>
        <div class="mkt-name-col">
          <div class="mkt-title">Analytics & Statistics</div>
          <div class="mkt-tag-line">Visitors · Sources · Behaviour</div>
        </div>
        <div class="mkt-desc-col">
          <div class="mkt-desc">Full visibility into how many people visit your site, where they come from (search, social, direct, referral), which pages they view, and how long they stay. This data drives every future improvement — from content decisions to event promotion timing.</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="ink-section">
  <div class="wrap">
    <div class="sec-intro">
      <div>
        <div class="sec-tag dark">05 — Backend</div>
        <h2 class="sec-h light">Admin Panel &amp;<br>Security Features</h2>
        <p class="sec-desc light" style="margin-top:12px">Full control. Zero coding. Professional-grade protection.</p>
      </div>
      <div class="sec-num-bg light">05</div>
    </div>

<div class="backend-grid">
      <div class="be-card">
        <div class="be-num">A</div>
        <div class="be-title">Powerful Admin Panel</div>
        <div class="be-text">An intuitive, well-organised administration interface with clearly named sections and inline documentation. Manage all content — pages, events, members, publications, news, contact submissions, newsletter subscribers — without writing a single line of code.<br><br>
        Full tutorial documentation and how-to guides provided at handover, so your team can manage every aspect of the site independently from day one.</div>
      </div>
      <div class="be-card">
        <div class="be-num">B</div>
        <div class="be-title">Pro Web Security</div>
        <div class="be-text">A professional security layer is implemented across the entire site. This includes:<br><br>
        · Hidden login URL (attackers can't find your admin page)<br>
        · XSS (Cross-Site Scripting) attack detection and blocking<br>
        · SQL Injection protection<br>
        · Spam and bot filtering<br><br>
        </div>
      </div>
      <div class="be-card">
        <div class="be-num">C</div>
        <div class="be-title">Total Flexibility</div>
        <div class="be-text">The site is built for the long term. When you need new features, pages, or sections in the future — whether in 6 months or 3 years — they can be added directly to the existing codebase.<br><br>
        No rebuilding from scratch. No platform lock-in. The modular PHP architecture is designed so every future addition integrates seamlessly with what's already built.</div>
      </div>
    </div>
  </div>
</div>

<div class="cream-section">
  <div class="wrap">
    <div class="sec-intro">
      <div>
        <div class="sec-tag">06 — Delivery</div>
        <h2 class="sec-h">Project Timeline</h2>
        <p class="sec-desc" style="margin-top:12px">18–20 working days from kickoff to handover. Every phase below has a clear deliverable and client checkpoint.</p>
      </div>
      <div class="sec-num-bg">06</div>
    </div>

<div class="timeline">
      <div class="tl-item">
        <div class="tl-dot">1</div>
        <div class="tl-content">
          <div class="tl-header">
            <span class="tl-title">Discovery & Planning</span>
            <span class="tl-duration">Days 1–2</span>
          </div>
          <ul class="tl-items">
            <li>Detailed project brief review and finalisation with client</li>
            <li>Sitemap and page structure confirmation</li>
            <li>Content collection — text, logos, photos, member data</li>
            <li>Admin panel requirements documented</li>
            <li>Domain, hosting, and email account access confirmed</li>
          </ul>
        </div>
      </div>

<div class="tl-item">
        <div class="tl-dot">2</div>
        <div class="tl-content">
          <div class="tl-header">
            <span class="tl-title">Design — Mockups & UI</span>
            <span class="tl-duration">Days 3–7</span>
          </div>
          <ul class="tl-items">
            <li>Homepage visual templates designed for client approval</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">3</div>
        <div class="tl-content">
          <div class="tl-header">
            <span class="tl-title">Frontend Development</span>
            <span class="tl-duration">Days 7–15</span>
          </div>
          <ul class="tl-items">
            <li>Conversion of approved designs into a fully functional, production-ready site</li>
            <li>Responsive breakpoints implemented and tested</li>
            <li>jQuery sliders, animations, and interactive elements built</li>
            <li>Ajax-powered forms and live search implemented</li>
            <li>WhatsApp button, social sharing, and sticky header integrated</li>
          </ul>
        </div>
      </div>

<div class="tl-item">
        <div class="tl-dot">4</div>
        <div class="tl-content">
          <div class="tl-header">
            <span class="tl-title">Backend & Admin Panel</span>
            <span class="tl-duration">Days 16–17</span>
          </div>
          <ul class="tl-items">
            <li>Admin panel setup — all content sections manageable without code</li>
            <li>Automated email notification system connected</li>
            <li>Newsletter integration and subscriber management built</li>
            <li>Live chat and WhatsApp routing configured</li>
            <li>Pro security layer installed and configured</li>
          </ul>
        </div>
      </div>

<div class="tl-item">
        <div class="tl-dot">6</div>
        <div class="tl-content">
          <div class="tl-header">
            <span class="tl-title">Testing, QA & Launch</span>
            <span class="tl-duration">Days 18–20</span>
          </div>
          <ul class="tl-items">
            <li>Mobile device testing across iOS and Android</li>
            <li>All forms, email notifications, and admin functions tested end-to-end</li>
            <li>Speed optimisation final pass — image compression, code minification</li>
            <li>Client review of staging site · Final revisions</li>
            <li>Website to go-live · Handover all credentials</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="light-section">
  <div class="wrap">
    <div class="sec-intro">
      <div>
        <div class="sec-tag">07 — Scope</div>
        <h2 class="sec-h">Everything That's<br>Included</h2>
      </div>
      <div class="sec-num-bg">07</div>
    </div>

<div class="checklist">
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Fully responsive design — desktop, tablet &amp; mobile</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Complete PHP + MySQL dynamic website</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Powerful admin panel — no code required to update</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Speed optimisation — minification, lazy load, image compression</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Sticky header with persistent navigation</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Beautiful animated sliders with unlimited slides</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Breadcrumbs navigation on all interior pages</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">SEO-friendly URLs and sitemap generation</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Social media sharing on all pages and posts</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">WhatsApp button on all pages (mobile-first)</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Automated email notifications for all form submissions</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Newsletter integration with subscriber management</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Live chat integration for real-time visitor support</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Google Analytics setup and goal configuration</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Pro security layer — XSS + SQL injection protection</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Hidden admin URL + login protection</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Full content population from client-supplied materials</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Cross-browser testing across all major browsers</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Complete admin tutorial & documentation if required</span></div>
      <div class="chk-item"><div class="chk-icon">✓</div><span class="chk-text">Post-launch support — all queries answered promptly</span></div>
    </div>
  </div>
</div>

<div class="cream-section">
  <div class="wrap">
    <div class="sec-intro">
      <div>
        <div class="sec-tag">08 — Investment</div>
        <h2 class="sec-h">Pricing &amp; Payment<br>Structure</h2>
      </div>
      <div class="sec-num-bg">08</div>
    </div>

<div class="price-hero">
      <div class="price-hero-inner">
        <div>
          <div class="price-label">Total Project Investment</div>
          <div class="price-amount">PKR 150,000 <span class="price-currency">only</span></div>
          <div class="price-desc">
            A complete, production-ready website with <strong>all features listed in this proposal</strong> — fully dynamic, fully responsive, fully secured, and fully handed over to you with credentials.
            <br><br>
            This is a <strong>fixed price</strong>. No hidden costs, no surprise additions. Everything described in this proposal is included.
          </div>
        </div>
        <button class="price-cta">Accept Proposal & Get Started →</button>
      </div>
    </div>

<div class="payment-grid">
      <div class="pay-card">
        <div class="pay-phase">Payment 1 — Kickoff</div>
        <div class="pay-percent">50%</div>
        <div class="pay-amount">PKR 75,000</div>
        <div class="pay-condition">Due at project start. Secures your slot in the development schedule and initiates the discovery and design phase.</div>
      </div>
      <div class="pay-card">
        <div class="pay-phase">Payment 2 — Midpoint</div>
        <div class="pay-percent">30%</div>
        <div class="pay-amount">PKR 45,000</div>
        <div class="pay-condition">Due when 60% of pages are complete and presented for review on the staging environment.</div>
      </div>
      <div class="pay-card">
        <div class="pay-phase">Payment 3 — Delivery</div>
        <div class="pay-percent">20%</div>
        <div class="pay-amount">PKR 30,000</div>
        <div class="pay-condition">Final payment due on project completion, full handover, and live deployment to your domain.</div>
      </div>
    </div>
  </div>
</div>

<div class="cta-section">
  <div class="cta-bg"></div>
  <div class="cta-wrap">
    <div class="first">
      <div class="cta-tag">
        <span class="cta-tag-text">09 — Next Steps</span>
      </div>
      <div class="cta-title">Ready to Build<br>Something <span>Great?</span></div>
      <div class="cta-sub">Once you confirm this proposal, we begin immediately. Discovery starts within 2 business days. You'll have a fully functional, professional website live for Read Travel within 18–20 working days.</div>
    </div>

<div class="cta-box">
      <button class="cta-box-primary">Confirm Proposal ✓</button>
      <button class="cta-box-secondary">Ask a Question</button>
      <div class="cta-box-note">
        Reply to the email this proposal was sent with, or WhatsApp us directly.<br><br>
        We promise outstanding support, every query answered promptly throughout the entire project and beyond.
      </div>
    </div>
  </div>
</div>

<div class="doc-footer">
  <div class="df-l">
    Read Travel
    <span class="df-dot"></span>
    WEB DEVELOPMENT PROPOSAL
    <span class="df-dot"></span>
    27<small>th</small> FEB 2026
  </div>
  <div class="df-r">PKR 150,000 · 18–20 Working Days · Confidential</div>
</div>

</body>
</html>

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