{"id":26,"date":"2026-05-19T19:50:14","date_gmt":"2026-05-19T19:50:14","guid":{"rendered":"https:\/\/subscription.verycoolprojects.com\/?page_id=26"},"modified":"2026-05-19T22:09:57","modified_gmt":"2026-05-19T22:09:57","slug":"hm","status":"publish","type":"page","link":"https:\/\/subscription.verycoolprojects.com\/","title":{"rendered":"HM"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"26\" class=\"elementor elementor-26\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1bc4b6a e-flex e-con-boxed e-con e-parent\" data-id=\"1bc4b6a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a143827 elementor-widget elementor-widget-html\" data-id=\"a143827\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* ============================================================\r\n   FORCE FULL-PAGE BACKGROUND \u2014 defeats theme content wrappers\r\n   ============================================================ *\/\r\nhtml, body {\r\n  background: #050d24 !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n  overflow-x: hidden !important;\r\n  max-width: 100% !important;\r\n}\r\nbody > .site,\r\nbody > #page,\r\nbody > .hfeed,\r\n.site-content,\r\n.site-main,\r\n.entry-content,\r\n.elementor,\r\n.elementor-section-wrap,\r\n.page-content,\r\nmain,\r\nmain > article,\r\narticle.page,\r\n.ast-container,\r\n#primary,\r\n#content {\r\n  background: #050d24 !important;\r\n  background-color: #050d24 !important;\r\n  max-width: none !important;\r\n  width: 100% !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n.elementor-widget-html,\r\n.elementor-widget-container {\r\n  padding: 0 !important;\r\n  margin: 0 !important;\r\n  background: transparent !important;\r\n}\r\n.vcp {\r\n  width: 100vw !important;\r\n  margin-left: calc(50% - 50vw) !important;\r\n  margin-right: calc(50% - 50vw) !important;\r\n  background: #050d24 !important;\r\n  overflow-x: hidden !important;\r\n  max-width: 100vw !important;\r\n}\r\n<\/style>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\">\r\n<style>\r\n\/* ==========================================================================\r\n   VCP \u2014 Two-block farewell. Scoped under .vcp.\r\n   ========================================================================== *\/\r\n.vcp, .vcp *, .vcp *::before, .vcp *::after { box-sizing: border-box; }\r\n.vcp {\r\n  --ink:       #050d24;\r\n  --ink-2:     #0a1736;\r\n  --line:      rgba(255,255,255,0.08);\r\n  --line-2:    rgba(255,255,255,0.16);\r\n  --paper:     #f4ede0;\r\n  --azure:     #4f7cff;\r\n  --cyan:      #5ef0ff;\r\n  --gold:      #f0b54a;\r\n  --text:      #e6ecff;\r\n  --text-mute: #8da0c9;\r\n  --text-dim:  #5a6e9a;\r\n  --serif:  'Fraunces', 'Times New Roman', serif;\r\n  --sans:   'Inter Tight', system-ui, sans-serif;\r\n  --mono:   'JetBrains Mono', 'Courier New', monospace;\r\n  --pad-x: clamp(20px, 5vw, 80px);\r\n  --max:   1280px;\r\n  font-family: var(--sans);\r\n  font-size: 16px;\r\n  line-height: 1.55;\r\n  color: var(--text);\r\n  background: var(--ink);\r\n  width: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-x: hidden;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n  text-rendering: optimizeLegibility;\r\n}\r\n.vcp h1, .vcp h2, .vcp h3 {\r\n  font-family: var(--serif);\r\n  font-weight: 400;\r\n  font-variation-settings: \"opsz\" 144, \"SOFT\" 0, \"WONK\" 0;\r\n  letter-spacing: -0.02em;\r\n  line-height: 1.05;\r\n  margin: 0;\r\n  color: var(--text);\r\n}\r\n.vcp p { margin: 0; }\r\n.vcp a { color: inherit; text-decoration: none; }\r\n.vcp img { display: block; max-width: 100%; height: auto; }\r\n.vcp ::selection { background: var(--cyan); color: var(--ink); }\r\n\/* grain *\/\r\n.vcp::before {\r\n  content: '';\r\n  position: fixed; inset: 0;\r\n  pointer-events: none;\r\n  z-index: 100;\r\n  opacity: 0.05;\r\n  mix-blend-mode: overlay;\r\n  background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\/><\/filter><rect width='100%' height='100%' filter='url(%23n)'\/><\/svg>\");\r\n}\r\n\/* ==========================================================================\r\n   BUTTONS\r\n   ========================================================================== *\/\r\n.vcp-btn {\r\n  display: inline-flex; align-items: center; justify-content: center; gap: 10px;\r\n  padding: 17px 28px;\r\n  border-radius: 999px;\r\n  font-family: var(--sans);\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  letter-spacing: -0.005em;\r\n  border: 1px solid transparent;\r\n  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;\r\n  white-space: nowrap;\r\n  cursor: pointer;\r\n}\r\n.vcp-btn-primary {\r\n  background: var(--cyan);\r\n  color: #000 !important;\r\n  box-shadow: 0 10px 40px -10px rgba(94, 240, 255, 0.4);\r\n}\r\n.vcp-btn-primary:hover {\r\n  transform: translateY(-2px);\r\n  background: var(--cyan);\r\n  color: #000 !important;\r\n}\r\n.vcp-btn-primary svg { stroke: #000; }\r\n.vcp-btn-ghost {\r\n  background: transparent;\r\n  color: var(--text);\r\n  border-color: var(--line-2);\r\n}\r\n.vcp-btn-ghost:hover {\r\n  transform: translateY(-2px);\r\n  border-color: var(--cyan);\r\n  color: var(--cyan);\r\n}\r\n\/* ==========================================================================\r\n   STATUS BAR\r\n   ========================================================================== *\/\r\n.vcp-status {\r\n  position: fixed;\r\n  top: 0; left: 0; right: 0;\r\n  z-index: 60;\r\n  padding: 12px var(--pad-x);\r\n  background: rgba(5, 13, 36, 0.85);\r\n  backdrop-filter: blur(20px);\r\n  -webkit-backdrop-filter: blur(20px);\r\n  border-bottom: 1px solid var(--line);\r\n  display: flex; align-items: center; justify-content: space-between;\r\n  gap: 20px;\r\n  font-family: var(--mono);\r\n  font-size: 11px;\r\n  letter-spacing: 0.14em;\r\n  text-transform: uppercase;\r\n  color: var(--text-mute);\r\n}\r\n.vcp-status .vcp-status-left {\r\n  display: flex; align-items: center; gap: 12px;\r\n}\r\n.vcp-status .vcp-status-dot {\r\n  width: 6px; height: 6px; border-radius: 50%;\r\n  background: var(--gold);\r\n  box-shadow: 0 0 12px var(--gold);\r\n  animation: vcp-pulse 2.4s ease-in-out infinite;\r\n  flex-shrink: 0;\r\n}\r\n@keyframes vcp-pulse {\r\n  0%, 100% { opacity: 1; transform: scale(1); }\r\n  50%      { opacity: 0.45; transform: scale(0.85); }\r\n}\r\n.vcp-status .vcp-status-right { color: var(--text-dim); }\r\n@media (max-width: 760px) {\r\n  .vcp-status { padding: 10px var(--pad-x); font-size: 10px; justify-content: center; }\r\n  .vcp-status .vcp-status-right { display: none; }\r\n}\r\n\/* ==========================================================================\r\n   HERO\r\n   ========================================================================== *\/\r\n.vcp-hero {\r\n  position: relative;\r\n  min-height: 100vh;\r\n  padding: 110px var(--pad-x) 140px;\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n}\r\n.vcp-hero::before {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background:\r\n    radial-gradient(700px 500px at 80% 20%, rgba(94, 240, 255, 0.10), transparent 60%),\r\n    radial-gradient(900px 700px at 10% 90%, rgba(79, 124, 255, 0.16), transparent 60%),\r\n    linear-gradient(180deg, #050d24 0%, #081640 60%, #050d24 100%);\r\n  z-index: -2;\r\n}\r\n.vcp-hero::after {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background-image:\r\n    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);\r\n  background-size: 90px 90px;\r\n  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 70%);\r\n  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 70%);\r\n  z-index: -1;\r\n}\r\n.vcp-hero-inner {\r\n  position: relative;\r\n  max-width: var(--max);\r\n  margin: 0 auto;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1.1fr;\r\n  gap: clamp(40px, 6vw, 100px);\r\n  align-items: center;\r\n}\r\n.vcp-portrait {\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 460px;\r\n  aspect-ratio: 1 \/ 1;\r\n  margin: 0 auto;\r\n}\r\n.vcp-portrait-disc {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n  border: 1px solid var(--line-2);\r\n  background: linear-gradient(160deg, var(--ink-2), var(--ink));\r\n  box-shadow:\r\n    0 40px 80px -30px rgba(0,0,0,0.6),\r\n    0 0 100px -10px rgba(94, 240, 255, 0.2) inset;\r\n  z-index: 2;\r\n}\r\n.vcp-portrait-disc img {\r\n  width: 100%; height: 100%;\r\n  object-fit: cover;\r\n  opacity: 0.95;\r\n}\r\n.vcp-portrait::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: -14px;\r\n  border-radius: 50%;\r\n  border: 1px dashed rgba(94, 240, 255, 0.35);\r\n  animation: vcp-spin 60s linear infinite;\r\n  z-index: 1;\r\n}\r\n.vcp-portrait::after {\r\n  content: '';\r\n  position: absolute;\r\n  inset: -30px;\r\n  border-radius: 50%;\r\n  border: 1px solid rgba(255,255,255,0.05);\r\n  z-index: 0;\r\n}\r\n@keyframes vcp-spin { to { transform: rotate(360deg); } }\r\n.vcp-portrait-ring {\r\n  position: absolute;\r\n  inset: -50px;\r\n  width: calc(100% + 100px);\r\n  height: calc(100% + 100px);\r\n  z-index: 0;\r\n  animation: vcp-spin 40s linear infinite;\r\n}\r\n.vcp-portrait-ring text {\r\n  font-family: var(--mono);\r\n  font-size: 11px;\r\n  letter-spacing: 0.3em;\r\n  text-transform: uppercase;\r\n  fill: var(--text-mute);\r\n}\r\n.vcp-stamp {\r\n  position: absolute;\r\n  bottom: 4%;\r\n  right: 0;\r\n  width: 130px;\r\n  height: 130px;\r\n  border-radius: 50%;\r\n  background: var(--gold);\r\n  color: var(--ink);\r\n  display: flex; align-items: center; justify-content: center;\r\n  text-align: center;\r\n  font-family: var(--serif);\r\n  font-style: italic;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  line-height: 1.1;\r\n  padding: 16px;\r\n  z-index: 3;\r\n  rotate: -8deg;\r\n  box-shadow: 0 20px 50px -10px rgba(240, 181, 74, 0.4);\r\n}\r\n.vcp-stamp em { display: block; font-size: 22px; font-style: italic; margin-top: 4px; }\r\n.vcp-hero-meta {\r\n  display: inline-flex; align-items: center; gap: 10px;\r\n  font-family: var(--mono);\r\n  font-size: 11px;\r\n  letter-spacing: 0.18em;\r\n  text-transform: uppercase;\r\n  color: var(--text-mute);\r\n  padding: 7px 14px;\r\n  border: 1px solid var(--line);\r\n  border-radius: 999px;\r\n  background: rgba(255,255,255,0.02);\r\n}\r\n.vcp-hero-meta .vcp-meta-mark { color: var(--gold); }\r\n.vcp-hero h1 {\r\n  font-size: clamp(42px, 5.5vw, 84px);\r\n  font-weight: 300;\r\n  margin: 28px 0 28px;\r\n  font-variation-settings: \"opsz\" 144, \"SOFT\" 50;\r\n  letter-spacing: -0.025em;\r\n}\r\n.vcp-hero h1 .vcp-italic {\r\n  font-style: italic;\r\n  font-weight: 400;\r\n  color: var(--cyan);\r\n}\r\n\/* hero teaser line \u2014 short, leads into block 2 *\/\r\n.vcp-hero .vcp-lede {\r\n  font-family: var(--serif);\r\n  font-size: clamp(17px, 1.3vw, 20px);\r\n  font-weight: 300;\r\n  line-height: 1.5;\r\n  color: var(--text);\r\n  max-width: 46ch;\r\n}\r\n.vcp-hero .vcp-lede em { font-style: italic; color: var(--cyan); }\r\n.vcp-hero-cta {\r\n  display: flex; flex-wrap: wrap;\r\n  gap: 14px;\r\n  margin-top: 40px;\r\n}\r\n.vcp-hero-scroll {\r\n  position: absolute;\r\n  bottom: 24px; left: 50%;\r\n  transform: translateX(-50%);\r\n  display: flex; flex-direction: column; align-items: center; gap: 12px;\r\n  font-family: var(--mono);\r\n  font-size: 10px;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n  color: var(--text-dim);\r\n  z-index: 1;\r\n}\r\n.vcp-hero-scroll-line {\r\n  width: 1px; height: 36px;\r\n  background: linear-gradient(180deg, var(--cyan), transparent);\r\n  animation: vcp-scroll-pulse 2s ease-in-out infinite;\r\n}\r\n@keyframes vcp-scroll-pulse {\r\n  0%, 100% { opacity: 0.4; transform: scaleY(0.6); transform-origin: top; }\r\n  50%      { opacity: 1; transform: scaleY(1); }\r\n}\r\n\r\n\/* TABLET \u2014 760\u20131080 \u2014 keep grid but tighten gap, shrink portrait *\/\r\n@media (max-width: 1080px) and (min-width: 901px) {\r\n  .vcp-hero { padding: 100px var(--pad-x) 130px; }\r\n  .vcp-portrait { max-width: 380px; }\r\n  .vcp-stamp { width: 110px; height: 110px; font-size: 14px; }\r\n  .vcp-stamp em { font-size: 19px; }\r\n}\r\n\r\n\/* MOBILE \/ SMALL TABLET \u2014 single column, centered *\/\r\n@media (max-width: 900px) {\r\n  .vcp-hero { padding: 100px var(--pad-x) 70px; min-height: 0; }\r\n  .vcp-hero-inner {\r\n    grid-template-columns: 1fr;\r\n    gap: 70px;\r\n    text-align: center;\r\n    align-items: start;\r\n  }\r\n  .vcp-hero-inner > div:last-child {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n  }\r\n  .vcp-portrait { max-width: 320px; }\r\n  .vcp-stamp {\r\n    width: 100px; height: 100px;\r\n    font-size: 13px;\r\n    right: 0;\r\n  }\r\n  .vcp-stamp em { font-size: 18px; }\r\n  .vcp-hero h1 { margin: 24px 0 24px; }\r\n  .vcp-hero .vcp-lede { margin-left: auto; margin-right: auto; }\r\n  .vcp-hero-cta { justify-content: center; }\r\n  .vcp-hero-scroll { display: none; }\r\n}\r\n\r\n\/* SMALL MOBILE \u2014 full-width buttons, tighter type *\/\r\n@media (max-width: 480px) {\r\n  .vcp-hero { padding: 90px var(--pad-x) 60px; }\r\n  .vcp-hero h1 { font-size: clamp(38px, 11vw, 52px); }\r\n  .vcp-portrait { max-width: 260px; }\r\n  .vcp-stamp {\r\n    width: 84px; height: 84px;\r\n    font-size: 11px;\r\n    padding: 12px;\r\n  }\r\n  .vcp-stamp em { font-size: 15px; margin-top: 2px; }\r\n  .vcp-hero-cta { width: 100%; gap: 10px; }\r\n  .vcp-hero-cta .vcp-btn { width: 100%; }\r\n}\r\n\/* ==========================================================================\r\n   LETTER block \u2014 narrow, multi-column-ish editorial\r\n   ========================================================================== *\/\r\n.vcp-letter {\r\n  position: relative;\r\n  padding: clamp(80px, 10vw, 140px) var(--pad-x);\r\n  background: var(--ink);\r\n  border-top: 1px solid var(--line);\r\n  overflow: hidden;\r\n}\r\n.vcp-letter::before {\r\n  content: 'from the heart';\r\n  position: absolute;\r\n  top: 0.15em;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  font-family: var(--serif);\r\n  font-style: italic;\r\n  font-size: clamp(50px, 9vw, 130px);\r\n  font-weight: 300;\r\n  color: rgba(94, 240, 255, 0.04);\r\n  letter-spacing: -0.04em;\r\n  pointer-events: none;\r\n  line-height: 1;\r\n  white-space: nowrap;\r\n  z-index: 0;\r\n}\r\n.vcp-letter-inner {\r\n  position: relative;\r\n  z-index: 1;\r\n  max-width: 720px;\r\n  margin: 0 auto;\r\n}\r\n.vcp-letter-head {\r\n  display: flex; align-items: center; gap: 24px;\r\n  padding-bottom: 28px;\r\n  border-bottom: 1px solid var(--line);\r\n  margin-bottom: 50px;\r\n}\r\n.vcp-letter-num {\r\n  font-family: var(--serif);\r\n  font-style: italic;\r\n  font-weight: 300;\r\n  font-size: 48px;\r\n  color: var(--cyan);\r\n  line-height: 1;\r\n  flex-shrink: 0;\r\n}\r\n.vcp-letter-head h2 {\r\n  font-size: clamp(28px, 3.6vw, 44px);\r\n  font-weight: 300;\r\n  flex-grow: 1;\r\n  letter-spacing: -0.02em;\r\n}\r\n.vcp-letter-head h2 em { font-style: italic; color: var(--cyan); font-weight: 400; }\r\n.vcp-letter-head .vcp-letter-tag {\r\n  font-family: var(--mono);\r\n  font-size: 11px;\r\n  letter-spacing: 0.16em;\r\n  text-transform: uppercase;\r\n  color: var(--text-dim);\r\n  flex-shrink: 0;\r\n}\r\n@media (max-width: 760px) {\r\n  .vcp-letter-head { flex-wrap: wrap; gap: 14px; }\r\n  .vcp-letter-num { font-size: 32px; }\r\n  .vcp-letter-head h2 { flex: 1 1 70%; font-size: clamp(24px, 6vw, 32px); }\r\n  .vcp-letter-head .vcp-letter-tag { width: 100%; }\r\n}\r\n\/* The actual letter body \u2014 readable size, serif, with a drop-cap *\/\r\n.vcp-letter-body {\r\n  font-family: var(--serif);\r\n  font-size: clamp(15px, 1.05vw, 17px);\r\n  font-weight: 300;\r\n  line-height: 1.75;\r\n  color: var(--text);\r\n  letter-spacing: -0.003em;\r\n}\r\n.vcp-letter-body p { margin-bottom: 1.4em; }\r\n.vcp-letter-body p:last-child { margin-bottom: 0; }\r\n.vcp-letter-body em {\r\n  font-style: italic;\r\n  color: var(--cyan);\r\n}\r\n.vcp-letter-body strong {\r\n  font-weight: 500;\r\n  color: var(--text);\r\n}\r\n.vcp-letter-body .vcp-dropcap {\r\n  float: left;\r\n  font-size: 4.8em;\r\n  line-height: 0.85;\r\n  margin: 0.08em 0.12em -0.05em 0;\r\n  font-style: italic;\r\n  font-weight: 400;\r\n  color: var(--cyan);\r\n  font-variation-settings: \"opsz\" 144;\r\n}\r\n@media (max-width: 480px) {\r\n  .vcp-letter-body { line-height: 1.7; }\r\n  .vcp-letter-body .vcp-dropcap { font-size: 3.8em; }\r\n}\r\n\/* signature *\/\r\n.vcp-letter-sign {\r\n  margin-top: 50px;\r\n  padding-top: 30px;\r\n  border-top: 1px solid var(--line);\r\n  display: flex; justify-content: space-between; align-items: flex-end;\r\n  gap: 20px;\r\n  flex-wrap: wrap;\r\n}\r\n.vcp-letter-sign .vcp-signature {\r\n  font-family: var(--serif);\r\n  font-style: italic;\r\n  font-size: clamp(28px, 4vw, 36px);\r\n  font-weight: 400;\r\n  color: var(--cyan);\r\n  letter-spacing: -0.02em;\r\n  line-height: 1;\r\n}\r\n.vcp-letter-sign .vcp-signature-meta {\r\n  font-family: var(--mono);\r\n  font-size: 11px;\r\n  letter-spacing: 0.16em;\r\n  text-transform: uppercase;\r\n  color: var(--text-dim);\r\n  text-align: right;\r\n  line-height: 1.8;\r\n}\r\n@media (max-width: 480px) {\r\n  .vcp-letter-sign { flex-direction: column; align-items: flex-start; gap: 16px; }\r\n  .vcp-letter-sign .vcp-signature-meta { text-align: left; }\r\n}\r\n\/* the closing CTA card *\/\r\n.vcp-letter-cta {\r\n  margin-top: 50px;\r\n  padding: clamp(28px, 4vw, 36px);\r\n  border: 1px solid var(--line);\r\n  border-radius: 20px;\r\n  background:\r\n    radial-gradient(400px 200px at 50% 0%, rgba(94, 240, 255, 0.08), transparent),\r\n    rgba(255,255,255,0.02);\r\n  text-align: center;\r\n  display: flex; flex-direction: column; align-items: center; gap: 18px;\r\n}\r\n.vcp-letter-cta h3 {\r\n  font-size: clamp(22px, 2.5vw, 30px);\r\n  font-weight: 300;\r\n}\r\n.vcp-letter-cta h3 em { font-style: italic; color: var(--cyan); }\r\n.vcp-letter-cta p {\r\n  font-family: var(--sans);\r\n  color: var(--text-mute);\r\n  font-size: 14px;\r\n  max-width: 48ch;\r\n}\r\n@media (max-width: 480px) {\r\n  .vcp-letter-cta .vcp-btn { width: 100%; }\r\n}\r\n\/* reveal *\/\r\n.vcp-reveal {\r\n  opacity: 0;\r\n  transform: translateY(24px);\r\n  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.vcp-reveal.is-in { opacity: 1; transform: none; }\r\n@media (prefers-reduced-motion: reduce) {\r\n  .vcp-reveal { opacity: 1; transform: none; transition: none; }\r\n  .vcp-portrait::before, .vcp-portrait-ring, .vcp-status-dot, .vcp-hero-scroll-line { animation: none !important; }\r\n}\r\n<\/style>\r\n<div class=\"vcp\">\r\n  <!-- STATUS BAR -->\r\n  <div class=\"vcp-status\">\r\n    <div class=\"vcp-status-left\">\r\n      <span class=\"vcp-status-dot\"><\/span>\r\n      <span>Service archived<\/span>\r\n    <\/div>\r\n    <div class=\"vcp-status-right\">\r\n      Continued via the course &rarr;\r\n    <\/div>\r\n  <\/div>\r\n  <!-- ============================================================\r\n       BLOCK 1 \u2014 HERO\r\n       ============================================================ -->\r\n  <header class=\"vcp-hero\">\r\n    <div class=\"vcp-hero-inner\">\r\n      <div class=\"vcp-reveal\">\r\n        <div class=\"vcp-portrait\">\r\n          <svg class=\"vcp-portrait-ring\" viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n            <defs>\r\n              <path id=\"vcp-circle-path\" d=\"M 100, 100 m -90, 0 a 90,90 0 1,1 180,0 a 90,90 0 1,1 -180,0\"\/>\r\n            <\/defs>\r\n            <text xml:space=\"preserve\">\r\n              <textPath href=\"#vcp-circle-path\" startOffset=\"0\">&#160;&middot;&#160;Thank you&#160;&middot;&#160;Thank you&#160;&middot;&#160;Thank you&#160;&middot;&#160;Thank you&#160;&middot;&#160;Thank you<\/textPath>\r\n            <\/text>\r\n          <\/svg>\r\n          <div class=\"vcp-portrait-disc\">\r\n            <img decoding=\"async\" src=\"https:\/\/subscription.verycoolprojects.com\/wp-content\/uploads\/2026\/05\/NOGZ-resized.jpg\" alt=\"Goodbye from the studio\">\r\n          <\/div>\r\n          <div class=\"vcp-stamp\">\r\n            with<em>love<\/em>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div>\r\n        <div class=\"vcp-hero-meta vcp-reveal\">\r\n          <span class=\"vcp-meta-mark\">&#10022;<\/span>\r\n          It\u2019s time to say goodbye!\r\n        <\/div>\r\n        <h1 class=\"vcp-reveal\">\r\n          It became so simple,<br>\r\n          <span class=\"vcp-italic\">I had to build it into a course.<\/span>\r\n        <\/h1>\r\n        <p class=\"vcp-lede vcp-reveal\">\r\n          After years of expertise and research from running a design agency, serving my clients with all my heart, the only conclusion I could come to, is to build a course teaching them how to build websites themselves, because <em>with my knowledge, tools and tricks, they can do it themselves in just 30 minutes<\/em>.\r\n        <\/p>\r\n        <div class=\"vcp-hero-cta vcp-reveal\">\r\n          <a href=\"https:\/\/designcourse.verycoolprojects.com\/\" class=\"vcp-btn vcp-btn-primary\">\r\n            Discover what's next\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#000\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n          <\/a>\r\n          <a href=\"#letter\" class=\"vcp-btn vcp-btn-ghost\">Read the letter<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"vcp-hero-scroll\">\r\n      <span>The full story<\/span>\r\n      <span class=\"vcp-hero-scroll-line\"><\/span>\r\n    <\/div>\r\n  <\/header>\r\n  <!-- ============================================================\r\n       BLOCK 2 \u2014 THE LETTER\r\n       ============================================================ -->\r\n  <section class=\"vcp-letter\" id=\"letter\">\r\n    <div class=\"vcp-letter-inner\">\r\n      <div class=\"vcp-letter-head vcp-reveal\">\r\n        <div class=\"vcp-letter-num\">01<\/div>\r\n        <h2>A <em>letter<\/em> from the heart.<\/h2>\r\n        <div class=\"vcp-letter-tag\">The story behind<\/div>\r\n      <\/div>\r\n      <div class=\"vcp-letter-body vcp-reveal\">\r\n        <p>\r\n          <span class=\"vcp-dropcap\">A<\/span>t Very Cool Projects, I always strived to deliver the service described, <em>and so much more<\/em>. Out of respect, but also knowing that if clients experienced my overdelivery, they would bring other clients by word of mouth. I kid you not, there were sales calls where the client would hop in, and <em>the website was already built<\/em>! Let\u2019s just say this significantly raised my sales percentage. <\/p><p>After they started to work with me, I would build more pages than agreed at no extra cost, extra photoshop & compress the images they sent me (in many cases, without them even knowing), do extra SEO work, just for them to feel that extra quality and value. <\/p>\r\n        <p>\r\n          There came a point, however, even with all the overdelivery, call it being obsessed with optimisation or whatever you like, I would finish a complete website in just <strong>30 minutes to a few hours<\/strong>, mainly because of all the shortcuts I knew. Then it dawned on me. I know there is a skill in here, there has to be a better way to share it and monetize it. \r\n        <\/p>\r\n        <p>\r\n          That\u2019s where the <em>course + program<\/em> kaboom idea came from. The only way VCP could go further is by teaching new clients how to build their website themselves, in just 30 minutes. All my tools, knowledge, AI, lifehacks, tricks, and homemade plugins, all in one place, helping you develop your own nice and functional website.\r\n        <\/p>\r\n        <p>\r\n          The course isn\u2019t cheap because besides the videos, clients also get <em>12 months of Q&A support <\/em>directly via me or someone from the team, <em>and 2 premium, homemade, top-tier WordPress plugins<\/em>. You won\u2019t find this on YouTube, it\u2019s an investment for a skill you take with you for the rest of your life. \r\n        <\/p>\r\n        <p>\r\n          To all interested, check out the course. If you have questions, use the livechat on the website, email or send a message via Twitter. <em>Let\u2019s work together the better way! \u2665<\/em>\r\n        <\/p>\r\n      <\/div>\r\n      <div class=\"vcp-letter-cta vcp-reveal\">\r\n        <h3>Curious about <em>this better way<\/em> of web design?<\/h3>\r\n        <p>Only one way to find out.<\/p>\r\n        <a href=\"https:\/\/designcourse.verycoolprojects.com\/\" class=\"vcp-btn vcp-btn-primary\">\r\n          Visit the course\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#000\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n<\/div>\r\n<script>\r\n(function(){\r\n  \/\/ Disable pinch-zoom and double-tap zoom\r\n  var existingViewport = document.querySelector('meta[name=\"viewport\"]');\r\n  if (existingViewport) {\r\n    existingViewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');\r\n  } else {\r\n    var viewport = document.createElement('meta');\r\n    viewport.name = 'viewport';\r\n    viewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';\r\n    document.head.appendChild(viewport);\r\n  }\r\n  \/\/ Prevent gesture-based zoom on iOS Safari\r\n  document.addEventListener('gesturestart', function(e) { e.preventDefault(); }, { passive: false });\r\n  document.addEventListener('gesturechange', function(e) { e.preventDefault(); }, { passive: false });\r\n  document.addEventListener('gestureend', function(e) { e.preventDefault(); }, { passive: false });\r\n\r\n  var io = ('IntersectionObserver' in window) ? new IntersectionObserver(function(entries){\r\n    entries.forEach(function(e){\r\n      if (e.isIntersecting) {\r\n        e.target.classList.add('is-in');\r\n        io.unobserve(e.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }) : null;\r\n  document.querySelectorAll('.vcp .vcp-reveal').forEach(function(el, i){\r\n    el.style.transitionDelay = (Math.min(i, 6) * 70) + 'ms';\r\n    if (io) io.observe(el); else el.classList.add('is-in');\r\n  });\r\n  document.querySelectorAll('.vcp a[href^=\"#\"]').forEach(function(a){\r\n    a.addEventListener('click', function(ev){\r\n      var id = a.getAttribute('href').slice(1);\r\n      if (!id) return;\r\n      var t = document.getElementById(id);\r\n      if (!t) return;\r\n      ev.preventDefault();\r\n      t.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n    });\r\n  });\r\n})();\r\n<\/script>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Service archived Continued via the course &rarr; &#160;&middot;&#160;Thank you&#160;&middot;&#160;Thank you&#160;&middot;&#160;Thank you&#160;&middot;&#160;Thank you&#160;&middot;&#160;Thank you withlove &#10022; It\u2019s time to say goodbye! It became so simple, I had to build it into a course. After years of expertise and research from running a design agency, serving my clients with all my heart, the only conclusion I could [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/subscription.verycoolprojects.com\/wp-json\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/subscription.verycoolprojects.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/subscription.verycoolprojects.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/subscription.verycoolprojects.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/subscription.verycoolprojects.com\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":22,"href":"https:\/\/subscription.verycoolprojects.com\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/subscription.verycoolprojects.com\/wp-json\/wp\/v2\/pages\/26\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/subscription.verycoolprojects.com\/wp-json\/wp\/v2\/media?parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}