{"id":199,"date":"2026-06-26T19:24:35","date_gmt":"2026-06-26T19:24:35","guid":{"rendered":"https:\/\/demowebdesign.live\/oluwaseun\/?page_id=199"},"modified":"2026-06-26T23:18:05","modified_gmt":"2026-06-26T23:18:05","slug":"books","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/books\/","title":{"rendered":"Books"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"199\" class=\"elementor elementor-199\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26ade95 e-con-full e-flex e-con e-parent\" data-id=\"26ade95\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ce2610f elementor-widget elementor-widget-html\" data-id=\"ce2610f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Cinzel:wght@400;600;700&display=swap\");\r\n  *,\r\n  *::before,\r\n  *::after {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n  body {\r\n    background: #000;\r\n    color: #e8d5a3;\r\n    font-family: \"Cormorant Garamond\", Georgia, serif;\r\n    overflow-x: hidden;\r\n    cursor: none;\r\n  }\r\n  #gc {\r\n    position: fixed;\r\n    width: 280px;\r\n    height: 280px;\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n    z-index: 9999;\r\n    transform: translate(-50%, -50%);\r\n    background: radial-gradient(\r\n      circle,\r\n      rgba(212, 175, 55, 0.1) 0%,\r\n      rgba(212, 175, 55, 0.03) 40%,\r\n      transparent 70%\r\n    );\r\n  }\r\n  #gd {\r\n    position: fixed;\r\n    width: 7px;\r\n    height: 7px;\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n    z-index: 10000;\r\n    transform: translate(-50%, -50%);\r\n    background: rgba(212, 175, 55, 0.9);\r\n    box-shadow: 0 0 10px 3px rgba(212, 175, 55, 0.55);\r\n  }\r\n \r\n  #hero {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 100vh;\r\n    background: #050505;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-align: center;\r\n    padding: 80px 24px;\r\n  }\r\n  \r\n  \r\n  #bg-layers {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 0;\r\n    opacity: 0.15;\r\n  }\r\n\r\n  #pc {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n  }\r\n  #wsv {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n    opacity: 0.5;\r\n  }\r\n  .sym {\r\n    position: absolute;\r\n    pointer-events: none;\r\n    z-index: 2;\r\n    opacity: 0;\r\n    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.35));\r\n    animation:\r\n      fIn 2.2s ease forwards,\r\n      drift 11s ease-in-out infinite;\r\n  }\r\n  @keyframes fIn {\r\n    from {\r\n      opacity: 0;\r\n      transform: translateY(18px) scale(0.85);\r\n    }\r\n    to {\r\n      opacity: 0.55;\r\n      transform: translateY(0) scale(1);\r\n    }\r\n  }\r\n  @keyframes drift {\r\n    0%,\r\n    100% {\r\n      transform: translateY(0) rotate(0deg);\r\n    }\r\n    33% {\r\n      transform: translateY(-12px) rotate(3deg);\r\n    }\r\n    66% {\r\n      transform: translateY(7px) rotate(-2deg);\r\n    }\r\n  }\r\n  .hc {\r\n    position: relative;\r\n    z-index: 10;\r\n    max-width: 780px;\r\n    animation: rev 1.8s ease forwards;\r\n  }\r\n  @keyframes rev {\r\n    from {\r\n      opacity: 0;\r\n      transform: translateY(32px);\r\n    }\r\n    to {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n  .ey {\r\n    font-family: \"Cinzel\", serif;\r\n    font-size: 11px;\r\n    letter-spacing: 0.45em;\r\n    color: #7a6530;\r\n    text-transform: uppercase;\r\n    margin-bottom: 26px;\r\n    animation: rev 2s 0.3s ease both;\r\n  }\r\n  .tt {\r\n    font-family: \"Cinzel\", serif;\r\n    font-size: clamp(54px, 8.5vw, 92px);\r\n    font-weight: 700;\r\n    line-height: 0.95;\r\n    letter-spacing: 0.06em;\r\n    color: #e8d5a3;\r\n    text-shadow:\r\n      0 0 40px rgba(212, 175, 55, 0.3),\r\n      0 0 80px rgba(212, 175, 55, 0.12),\r\n      0 2px 4px rgba(0, 0, 0, 0.8);\r\n    margin-bottom: 8px;\r\n    animation: rev 2s 0.5s ease both;\r\n  }\r\n  .ta {\r\n    color: #d4af37;\r\n    text-shadow:\r\n      0 0 28px rgba(212, 175, 55, 0.55),\r\n      0 0 56px rgba(212, 175, 55, 0.25);\r\n  }\r\n  .dv {\r\n    width: 110px;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, #d4af37, transparent);\r\n    margin: 30px auto;\r\n    position: relative;\r\n    animation: rev 2s 0.7s ease both;\r\n  }\r\n  .dv::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: -2px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 5px;\r\n    height: 5px;\r\n    background: #d4af37;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 7px 3px rgba(212, 175, 55, 0.55);\r\n  }\r\n  .sb {\r\n    font-family: \"Cormorant Garamond\", serif;\r\n    font-size: 34px !important;\r\n    font-weight: 300;\r\n    font-style: italic;\r\n    color: #c8b97a;\r\n    letter-spacing: 0.04em;\r\n    line-height: 1.5;\r\n    margin-bottom: 14px;\r\n    animation: rev 2s 0.9s ease both;\r\n  }\r\n  .mc {\r\n    font-family: \"Cinzel\", serif;\r\n    font-size: 15px;\r\n    letter-spacing: 0.38em;\r\n    color: #fff;\r\n    text-transform: uppercase;\r\n    margin-bottom: 50px;\r\n    animation: rev 2s 1.1s ease both;\r\n  }\r\n  .cg {\r\n    display: flex;\r\n    gap: 18px;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n    animation: rev 2s 1.4s ease both;\r\n  }\r\n  .btn {\r\n    font-family: \"Cinzel\", serif;\r\n    font-size: 11px;\r\n    letter-spacing: 0.28em;\r\n    text-transform: uppercase;\r\n    padding: 15px 38px;\r\n    border: none;\r\n    cursor: pointer;\r\n    transition:\r\n      transform 0.35s ease,\r\n      box-shadow 0.35s ease,\r\n      background 0.35s ease;\r\n  }\r\n  .bp {\r\n    background: linear-gradient(\r\n      135deg,\r\n      #c9a227 0%,\r\n      #e8d48b 42%,\r\n      #c9a227 70%,\r\n      #a07820 100%\r\n    );\r\n    color: #1a1200;\r\n    font-weight: 600;\r\n    box-shadow:\r\n      0 0 28px rgba(212, 175, 55, 0.22),\r\n      0 4px 18px rgba(0, 0, 0, 0.5);\r\n  }\r\n  .bp:hover {\r\n    transform: translateY(-3px) scale(1.02);\r\n    box-shadow:\r\n      0 0 50px rgba(212, 175, 55, 0.52),\r\n      0 8px 28px rgba(0, 0, 0, 0.6);\r\n  }\r\n  .bs {\r\n    background: transparent;\r\n    color: #d4af37;\r\n    border: 1px solid rgba(212, 175, 55, 0.38);\r\n  }\r\n  .bs:hover {\r\n    background: rgba(212, 175, 55, 0.07);\r\n    border-color: rgba(212, 175, 55, 0.82);\r\n    color: #f0d060;\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 0 32px rgba(212, 175, 55, 0.28);\r\n  }\r\n  .sh {\r\n    position: absolute;\r\n    bottom: 34px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    z-index: 10;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 7px;\r\n    opacity: 0.4;\r\n    animation:\r\n      rev 2s 2.2s ease both,\r\n      bob 2.2s 3.5s ease-in-out infinite;\r\n  }\r\n  @keyframes bob {\r\n    0%,\r\n    100% {\r\n      transform: translateX(-50%) translateY(0);\r\n    }\r\n    50% {\r\n      transform: translateX(-50%) translateY(6px);\r\n    }\r\n  }\r\n  .sh span {\r\n    font-family: \"Cinzel\", serif;\r\n    font-size: 9px;\r\n    letter-spacing: 0.38em;\r\n    color: #7a6530;\r\n    text-transform: uppercase;\r\n  }\r\n  .sa {\r\n    width: 16px;\r\n    height: 16px;\r\n    border-right: 1px solid #7a6530;\r\n    border-bottom: 1px solid #7a6530;\r\n    transform: rotate(45deg);\r\n  }\r\n  \r\n  #inv {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 100vh;\r\n    background: radial-gradient(\r\n      ellipse 80% 55% at 50% 50%,\r\n      #0d0900 0%,\r\n      #030303 55%,\r\n      #000 100%\r\n    );\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 100px 24px;\r\n  }\r\n  #pc2 {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 0;\r\n  }\r\n  .pr {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 380px;\r\n    height: 380px;\r\n    border-radius: 50%;\r\n    border: 1px solid rgba(212, 175, 55, 0.05);\r\n    pointer-events: none;\r\n    animation: pulse 5.5s ease-in-out infinite;\r\n  }\r\n  @keyframes pulse {\r\n    0% {\r\n      transform: translate(-50%, -50%) scale(0.55);\r\n      opacity: 0.85;\r\n    }\r\n    100% {\r\n      transform: translate(-50%, -50%) scale(2.6);\r\n      opacity: 0;\r\n    }\r\n  }\r\n  .ii {\r\n    position: relative;\r\n    z-index: 5;\r\n    max-width: 720px;\r\n    text-align: center;\r\n  }\r\n  .rv {\r\n    opacity: 0;\r\n    transform: translateY(22px);\r\n    transition:\r\n      opacity 1.1s ease,\r\n      transform 1.1s ease;\r\n  }\r\n  .rv.vis {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n  .rl {\r\n    width: 1px;\r\n    height: 0;\r\n    background: linear-gradient(180deg, transparent, #d4af37 50%, transparent);\r\n    margin: 0 auto 46px;\r\n    transition: height 1.5s ease;\r\n  }\r\n  .rl.vis {\r\n    height: 76px;\r\n  }\r\n  .ih {\r\n    font-family: \"Cormorant Garamond\", serif;\r\n    font-size: clamp(20px, 3.8vw, 34px);\r\n    font-weight: 400;\r\n    font-style: italic;\r\n    color: #c8b060;\r\n    line-height: 1.58;\r\n    letter-spacing: 0.02em;\r\n    margin-bottom: 50px;\r\n    padding: 0 16px;\r\n  }\r\n  .ib {\r\n    font-family: \"Cormorant Garamond\", serif;\r\n    font-size: clamp(16px, 2.1vw, 21px);\r\n    font-weight: 300;\r\n    line-height: 1.95;\r\n    letter-spacing: 0.03em;\r\n    margin-bottom: 22px;\r\n  }\r\n  .ib em {\r\n    color: #c8b060;\r\n    font-style: italic;\r\n    font-weight: 400;\r\n  }\r\n  .ic {\r\n    font-family: \"Cinzel\", serif;\r\n    font-size: clamp(12px, 1.8vw, 16px);\r\n    font-weight: 600;\r\n    color: #d4af37;\r\n    letter-spacing: 0.22em;\r\n    text-transform: uppercase;\r\n    margin-top: 54px;\r\n    text-shadow: 0 0 18px rgba(212, 175, 55, 0.38);\r\n    line-height: 1.7;\r\n  }\r\n<\/style>\r\n\r\n<div id=\"gc\"><\/div>\r\n<div id=\"gd\"><\/div>\r\n\r\n<section id=\"hero\">\r\n  \r\n  <div id=\"bg-layers\">\r\n    <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 1440 900\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n      <circle cx=\"20%\" cy=\"20%\" r=\"200\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.3\" opacity=\"0.2\"\/>\r\n      <circle cx=\"80%\" cy=\"30%\" r=\"300\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.2\" opacity=\"0.1\"\/>\r\n      <circle cx=\"50%\" cy=\"80%\" r=\"250\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.3\" opacity=\"0.2\"\/>\r\n      <line x1=\"0\" y1=\"50%\" x2=\"100%\" y2=\"50%\" stroke=\"#d4af37\" stroke-width=\"0.2\" opacity=\"0.1\"\/>\r\n      <line x1=\"50%\" y1=\"0\" x2=\"50%\" y2=\"100%\" stroke=\"#d4af37\" stroke-width=\"0.2\" opacity=\"0.1\"\/>\r\n    <\/svg>\r\n  <\/div>\r\n\r\n  <canvas id=\"pc\"><\/canvas>\r\n  <svg\r\n    id=\"wsv\"\r\n    viewBox=\"0 0 1440 900\"\r\n    preserveAspectRatio=\"xMidYMid slice\"\r\n    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n  >\r\n    <defs>\r\n      <filter id=\"gf\">\r\n        <feGaussianBlur stdDeviation=\"3.5\" result=\"b\" \/>\r\n        <feMerge>\r\n          <feMergeNode in=\"b\" \/>\r\n          <feMergeNode in=\"SourceGraphic\" \/>\r\n        <\/feMerge>\r\n      <\/filter>\r\n    <\/defs>\r\n    <path id=\"w1\" fill=\"none\" stroke=\"rgba(212,175,55,.52)\" stroke-width=\"1.2\" filter=\"url(#gf)\" \/>\r\n    <path id=\"w2\" fill=\"none\" stroke=\"rgba(175,115,18,.38)\" stroke-width=\".8\" \/>\r\n    <path id=\"w3\" fill=\"none\" stroke=\"rgba(235,195,75,.28)\" stroke-width=\"1.5\" filter=\"url(#gf)\" \/>\r\n    <path id=\"w4\" fill=\"none\" stroke=\"rgba(150,95,8,.22)\" stroke-width=\".6\" \/>\r\n    <path id=\"w5\" fill=\"none\" stroke=\"rgba(212,175,55,.18)\" stroke-width=\"2\" filter=\"url(#gf)\" \/>\r\n  <\/svg>\r\n\r\n \r\n  <svg class=\"sym\" style=\"top: 8%; left: 6%; width: 46px; height: 46px; animation-delay: 0.5s, 2.5s;\" viewBox=\"0 0 46 46\">\r\n    <line x1=\"23\" y1=\"4\" x2=\"23\" y2=\"42\" stroke=\"#d4af37\" stroke-width=\"1.1\" \/>\r\n    <line x1=\"4\" y1=\"17\" x2=\"42\" y2=\"17\" stroke=\"#d4af37\" stroke-width=\"1.1\" \/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"top: 9%; right: 8%; width: 50px; height: 50px; animation-delay: 0.9s, 3s;\" viewBox=\"0 0 50 50\">\r\n    <circle cx=\"25\" cy=\"25\" r=\"19\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\".9\" \/>\r\n    <circle cx=\"25\" cy=\"25\" r=\"5\" fill=\"rgba(212,175,55,.28)\" stroke=\"#d4af37\" stroke-width=\".7\" \/>\r\n    <line x1=\"25\" y1=\"6\" x2=\"25\" y2=\"44\" stroke=\"#d4af37\" stroke-width=\".5\" opacity=\".45\" \/>\r\n    <line x1=\"6\" y1=\"25\" x2=\"44\" y2=\"25\" stroke=\"#d4af37\" stroke-width=\".5\" opacity=\".45\" \/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"bottom: 19%; left: 5%; width: 42px; height: 42px; animation-delay: 1.2s, 4s;\" viewBox=\"0 0 42 42\">\r\n    <path d=\"M21 4C9 10 5 21 21 25C37 21 33 10 21 4Z\" fill=\"rgba(212,175,55,.13)\" stroke=\"#d4af37\" stroke-width=\".9\" \/>\r\n    <path d=\"M21 38C9 32 5 21 21 17C37 21 33 32 21 38Z\" fill=\"rgba(212,175,55,.08)\" stroke=\"#d4af37\" stroke-width=\".7\" \/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"bottom: 22%; right: 7%; width: 48px; height: 48px; animation-delay: 0.3s, 5s;\" viewBox=\"0 0 48 48\">\r\n    <path d=\"M24 4L27.5 18H42L30.5 27L34 41L24 33L14 41L17.5 27L6 18H20.5Z\" fill=\"rgba(212,175,55,.16)\" stroke=\"#d4af37\" stroke-width=\".85\" \/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"top: 43%; left: 2.5%; width: 34px; height: 34px; animation-delay: 1.5s, 3.5s;\" viewBox=\"0 0 34 34\">\r\n    <circle cx=\"17\" cy=\"17\" r=\"14\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\".75\" stroke-dasharray=\"4 3\" \/>\r\n    <circle cx=\"17\" cy=\"17\" r=\"3.5\" fill=\"rgba(212,175,55,.38)\" \/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"top: 39%; right: 3.5%; width: 38px; height: 38px; animation-delay: 0.7s, 4.5s;\" viewBox=\"0 0 38 38\">\r\n    <path d=\"M19 3C19 3 26 15 33 19C26 23 19 35 19 35C19 35 12 23 5 19C12 15 19 3 19 3Z\" fill=\"rgba(212,175,55,.1)\" stroke=\"#d4af37\" stroke-width=\".95\" \/>\r\n  <\/svg>\r\n  \r\n  \r\n  <svg class=\"sym\" style=\"top: 25%; left: 20%; width: 30px; height: 30px; animation-delay: 1.1s, 6s;\" viewBox=\"0 0 30 30\">\r\n    <rect x=\"5\" y=\"5\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.5\" transform=\"rotate(45 15 15)\"\/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"top: 15%; left: 45%; width: 20px; height: 20px; animation-delay: 0.4s, 5.5s;\" viewBox=\"0 0 20 20\">\r\n    <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.4\" stroke-dasharray=\"2 2\"\/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"bottom: 35%; right: 25%; width: 35px; height: 35px; animation-delay: 2s, 7s;\" viewBox=\"0 0 35 35\">\r\n    <path d=\"M17.5 2 L17.5 33 M2 17.5 L33 17.5\" stroke=\"#d4af37\" stroke-width=\"0.6\" opacity=\"0.6\"\/>\r\n    <circle cx=\"17.5\" cy=\"17.5\" r=\"10\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.5\"\/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"top: 60%; right: 15%; width: 25px; height: 25px; animation-delay: 1.8s, 4.2s;\" viewBox=\"0 0 25 25\">\r\n    <polygon points=\"12.5,2 15,10 23,10 17,15 19,23 12.5,18 6,23 8,15 2,10 10,10\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.5\"\/>\r\n  <\/svg>\r\n\r\n  <div class=\"hc\">\r\n    <p class=\"ey\">Oluwaseun Animashaun<\/p>\r\n    <h1 class=\"tt\"><span class=\"ta\">BOOKS<\/span><\/h1>\r\n    <div class=\"dv\"><\/div>\r\n    \r\n    <p class=\"mc\">\r\n      Not a new belief &nbsp;\u00b7&nbsp; Not a system &nbsp;\u00b7&nbsp; A remembering\r\n    <\/p>\r\n    <div class=\"cg\">\r\n    <a href=\"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/contact\/\">\r\n     <button class=\"btn bp\">Begin the Journey<\/button>\r\n    <\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"sh\">\r\n    <span>Descend<\/span>\r\n    <div class=\"sa\"><\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n<script>\r\n  var cg = document.getElementById(\"gc\"),\r\n    cd = document.getElementById(\"gd\");\r\n  document.addEventListener(\"mousemove\", function (e) {\r\n    cg.style.left = e.clientX + \"px\";\r\n    cg.style.top = e.clientY + \"px\";\r\n    cd.style.left = e.clientX + \"px\";\r\n    cd.style.top = e.clientY + \"px\";\r\n  });\r\n  \r\n  var pc = document.getElementById(\"pc\"),\r\n    cx = pc.getContext(\"2d\"),\r\n    PW,\r\n    PH,\r\n    pts = [];\r\n  function rsP() {\r\n    PW = pc.width = pc.offsetWidth;\r\n    PH = pc.height = pc.offsetHeight;\r\n  }\r\n  rsP();\r\n  window.addEventListener(\"resize\", rsP);\r\n  function mkP() {\r\n    return {\r\n      x: Math.random() * PW,\r\n      y: Math.random() * PH,\r\n      vx: (Math.random() - 0.5) * 0.25,\r\n      vy: -Math.random() * 0.45 - 0.1,\r\n      r: Math.random() * 1.8 + 0.4,\r\n      life: 0,\r\n      max: Math.random() * 250 + 150,\r\n      hue: 38 + Math.random() * 18,\r\n    };\r\n  }\r\n  for (var i = 0; i < 220; i++) {\r\n    var p = mkP();\r\n    p.life = Math.random() * p.max;\r\n    pts.push(p);\r\n  }\r\n  function dP() {\r\n    cx.clearRect(0, 0, PW, PH);\r\n    for (var i = 0; i < pts.length; i++) {\r\n      var p = pts[i];\r\n      p.life++;\r\n      if (p.life > p.max) {\r\n        pts[i] = mkP();\r\n        continue;\r\n      }\r\n      var pr = p.life \/ p.max,\r\n        a = pr < 0.2 ? pr \/ 0.2 : pr > 0.8 ? (1 - pr) \/ 0.2 : 1;\r\n      cx.beginPath();\r\n      cx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\r\n      cx.fillStyle = \"hsla(\" + p.hue + \",72%,63%,\" + a * 0.45 + \")\";\r\n      cx.fill();\r\n      p.x += p.vx;\r\n      p.y += p.vy;\r\n    }\r\n    requestAnimationFrame(dP);\r\n  }\r\n  dP();\r\n \r\n  var ws = [\r\n    { el: document.getElementById(\"w1\"), amp: 80, spd: 0.00018, yb: 450, ph: 0 },\r\n    { el: document.getElementById(\"w2\"), amp: 115, spd: 0.00013, yb: 420, ph: Math.PI * 0.4 },\r\n    { el: document.getElementById(\"w3\"), amp: 58, spd: 0.00024, yb: 478, ph: Math.PI * 0.8 },\r\n    { el: document.getElementById(\"w4\"), amp: 135, spd: 0.0001, yb: 390, ph: Math.PI * 1.2 },\r\n    { el: document.getElementById(\"w5\"), amp: 90, spd: 0.00016, yb: 508, ph: Math.PI * 1.6 },\r\n  ];\r\n  function bw(w, t) {\r\n    var n = 55,\r\n      d = \"\";\r\n    for (var i = 0; i <= n; i++) {\r\n      var x = (i \/ n) * 1440,\r\n        y =\r\n          w.yb +\r\n          Math.sin((i \/ n) * Math.PI * 4 + t * w.spd + w.ph) * w.amp +\r\n          Math.sin((i \/ n) * Math.PI * 2.2 + t * w.spd * 0.6) * (w.amp * 0.32);\r\n      d += (i === 0 ? \"M\" : \"L\") + x.toFixed(1) + \",\" + y.toFixed(1);\r\n    }\r\n    return d;\r\n  }\r\n  function aW(t) {\r\n    for (var i = 0; i < ws.length; i++)\r\n      ws[i].el.setAttribute(\"d\", bw(ws[i], t));\r\n    requestAnimationFrame(aW);\r\n  }\r\n  requestAnimationFrame(aW);\r\n  \r\n  var pc2 = document.getElementById(\"pc2\"),\r\n    cx2 = pc2.getContext(\"2d\"),\r\n    PW2,\r\n    PH2;\r\n  function rsP2() {\r\n    PW2 = pc2.width = pc2.offsetWidth;\r\n    PH2 = pc2.height = pc2.offsetHeight;\r\n  }\r\n  rsP2();\r\n  window.addEventListener(\"resize\", rsP2);\r\n  function aP(ts) {\r\n    var t = ts * 0.001;\r\n    cx2.clearRect(0, 0, PW2, PH2);\r\n    var cx = PW2 \/ 2,\r\n      cy = PH2 \/ 2;\r\n    for (var i = 0; i < 4; i++) {\r\n      var ph = (t + i * 1.3) % 4,\r\n        r = ph \/ 4,\r\n        rad = 38 + r * Math.min(PW2, PH2) * 0.62;\r\n      cx2.beginPath();\r\n      cx2.arc(cx, cy, rad, 0, Math.PI * 2);\r\n      cx2.strokeStyle = \"rgba(212,175,55,\" + (1 - r) * 0.065 + \")\";\r\n      cx2.lineWidth = 1;\r\n      cx2.stroke();\r\n    }\r\n    var g = cx2.createRadialGradient(cx, cy, 0, cx, cy, 200);\r\n    g.addColorStop(0, \"rgba(212,175,55,.035)\");\r\n    g.addColorStop(1, \"transparent\");\r\n    cx2.fillStyle = g;\r\n    cx2.fillRect(0, 0, PW2, PH2);\r\n    requestAnimationFrame(aP);\r\n  }\r\n  requestAnimationFrame(aP);\r\n\r\n  var ri = [\r\n    { id: \"i-orn\", d: 0 },\r\n    { id: \"i-rule\", d: 200 },\r\n    { id: \"i-h\", d: 420 },\r\n    { id: \"i-b1\", d: 640 },\r\n    { id: \"i-b2\", d: 840 },\r\n    { id: \"i-b3\", d: 1040 },\r\n    { id: \"i-b4\", d: 1220 },\r\n    { id: \"i-cl\", d: 1480 },\r\n  ];\r\n  var s2 = document.getElementById(\"inv\"),\r\n    triggered = false;\r\n  function chk() {\r\n    if (triggered) return;\r\n    var r = s2.getBoundingClientRect();\r\n    if (r.top < window.innerHeight * 0.78) {\r\n      triggered = true;\r\n      ri.forEach(function (x) {\r\n        setTimeout(function () {\r\n          var el = document.getElementById(x.id);\r\n          if (el) el.classList.add(\"vis\");\r\n        }, x.d);\r\n      });\r\n    }\r\n  }\r\n  window.addEventListener(\"scroll\", chk, { passive: true });\r\n  setTimeout(chk, 500);\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2f45a32 e-con-full e-flex e-con e-parent\" data-id=\"2f45a32\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bc3ff06 elementor-widget elementor-widget-html\" data-id=\"bc3ff06\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Cinzel:wght@400;500;600;700&family=Cinzel+Decorative:wght@400;700&display=swap');\r\n\r\n:root {\r\n    --ink: #050504;\r\n    --ink2: #0d0c09;\r\n    --ink3: #171610;\r\n    --g: #d4af37;\r\n    --gl: #f0d060;\r\n    --gd: #a07820;\r\n    --cr: #e8d5a3;\r\n    --cd: #b09860;\r\n    --tm: #7a6a44;\r\n    --tb: #c2a96a;\r\n    --bd: rgba(212,175,55,0.18);\r\n    --bm: rgba(212,175,55,0.35);\r\n}\r\n\r\n\/* ============================================\r\n   SECTION 1: CINEMATIC BOOK HERO\r\n   Full-bleed immersive showcase with parallax\r\n   ============================================ *\/\r\n#book-hero {\r\n    position: relative;\r\n    background: var(--ink);\r\n    min-height: 100vh;\r\n    overflow: hidden;\r\n    font-family: 'Cormorant Garamond', Georgia, serif;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n\r\n.bh-mesh {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 1;\r\n    background: \r\n        radial-gradient(ellipse 80% 60% at 20% 40%, rgba(212,175,55,0.06) 0%, transparent 60%),\r\n        radial-gradient(ellipse 60% 80% at 80% 60%, rgba(160,120,32,0.04) 0%, transparent 50%),\r\n        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(212,175,55,0.02) 0%, transparent 70%);\r\n    animation: meshShift 15s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes meshShift {\r\n    0% { transform: scale(1) translate(0, 0); }\r\n    50% { transform: scale(1.1) translate(-2%, 1%); }\r\n    100% { transform: scale(1) translate(1%, -1%); }\r\n}\r\n\r\n\r\n.bh-geo {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 2;\r\n    pointer-events: none;\r\n    overflow: hidden;\r\n}\r\n\r\n.bh-geo-item {\r\n    position: absolute;\r\n    opacity: 0.06;\r\n    animation: geoFloat 20s infinite ease-in-out;\r\n}\r\n\r\n.bh-geo-item svg {\r\n    width: 100%;\r\n    height: 100%;\r\n    stroke: var(--g);\r\n    fill: none;\r\n    stroke-width: 0.5;\r\n}\r\n\r\n.bh-geo-item:nth-child(1) { width: 300px; height: 300px; top: 10%; left: 5%; animation-delay: 0s; }\r\n.bh-geo-item:nth-child(2) { width: 200px; height: 200px; top: 60%; right: 8%; animation-delay: -7s; }\r\n.bh-geo-item:nth-child(3) { width: 150px; height: 150px; bottom: 15%; left: 15%; animation-delay: -14s; }\r\n\r\n@keyframes geoFloat {\r\n    0%, 100% { transform: translate(0, 0) rotate(0deg); }\r\n    33% { transform: translate(20px, -30px) rotate(5deg); }\r\n    66% { transform: translate(-15px, 20px) rotate(-3deg); }\r\n}\r\n\r\n\r\n.bh-rays {\r\n    position: absolute;\r\n    top: -20%;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 120%;\r\n    height: 80%;\r\n    background: conic-gradient(from 180deg at 50% 0%, \r\n        transparent 0deg, \r\n        rgba(212,175,55,0.03) 15deg, \r\n        transparent 30deg,\r\n        rgba(212,175,55,0.02) 45deg,\r\n        transparent 60deg,\r\n        rgba(212,175,55,0.04) 75deg,\r\n        transparent 90deg,\r\n        rgba(212,175,55,0.02) 105deg,\r\n        transparent 120deg,\r\n        rgba(212,175,55,0.03) 135deg,\r\n        transparent 150deg,\r\n        rgba(212,175,55,0.02) 165deg,\r\n        transparent 180deg\r\n    );\r\n    z-index: 1;\r\n    animation: rayPulse 8s ease-in-out infinite;\r\n    pointer-events: none;\r\n}\r\n\r\n@keyframes rayPulse {\r\n    0%, 100% { opacity: 0.5; }\r\n    50% { opacity: 1; }\r\n}\r\n\r\n\r\n.bh-container {\r\n    position: relative;\r\n    z-index: 10;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    padding: 100px 60px;\r\n    width: 100%;\r\n    display: grid;\r\n    grid-template-columns: 1.1fr 1fr;\r\n    gap: 100px;\r\n    align-items: center;\r\n}\r\n\r\n\r\n.bh-visual {\r\n    position: relative;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    perspective: 1200px;\r\n}\r\n\r\n\r\n.bh-book-stage {\r\n    position: relative;\r\n    width: 380px;\r\n    height: 540px;\r\n    transform-style: preserve-3d;\r\n    animation: bookFloat 6s ease-in-out infinite;\r\n}\r\n\r\n@keyframes bookFloat {\r\n    0%, 100% { transform: translateY(0) rotateY(-8deg); }\r\n    50% { transform: translateY(-15px) rotateY(-5deg); }\r\n}\r\n\r\n\r\n.bh-book-image {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 10;\r\n    transform-style: preserve-3d;\r\n}\r\n\r\n.bh-book-image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)) drop-shadow(0 0 40px rgba(212,175,55,0.1));\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.bh-book-stage:hover .bh-book-image img {\r\n    filter: drop-shadow(0 40px 80px rgba(0,0,0,0.9)) drop-shadow(0 0 60px rgba(212,175,55,0.15));\r\n}\r\n\r\n\r\n.bh-image-frame {\r\n    position: absolute;\r\n    inset: -20px;\r\n    border: 1px solid rgba(212,175,55,0.08);\r\n    pointer-events: none;\r\n    z-index: 5;\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.bh-book-stage:hover .bh-image-frame {\r\n    inset: -30px;\r\n    border-color: rgba(212,175,55,0.15);\r\n}\r\n\r\n.bh-image-frame::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 10px;\r\n    border: 1px solid rgba(212,175,55,0.05);\r\n}\r\n\r\n\r\n.bh-corner {\r\n    position: absolute;\r\n    width: 30px;\r\n    height: 30px;\r\n    border: 1px solid var(--bd);\r\n    z-index: 15;\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.bh-corner-tl { top: -10px; left: -10px; border-right: none; border-bottom: none; }\r\n.bh-corner-tr { top: -10px; right: -10px; border-left: none; border-bottom: none; }\r\n.bh-corner-bl { bottom: -10px; left: -10px; border-right: none; border-top: none; }\r\n.bh-corner-br { bottom: -10px; right: -10px; border-left: none; border-top: none; }\r\n\r\n.bh-book-stage:hover .bh-corner {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-color: rgba(212,175,55,0.25);\r\n}\r\n\r\n\r\n.bh-glow-orb {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 500px;\r\n    height: 500px;\r\n    background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 60%);\r\n    pointer-events: none;\r\n    animation: glowBreathe 4s ease-in-out infinite;\r\n}\r\n\r\n@keyframes glowBreathe {\r\n    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }\r\n    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }\r\n}\r\n\r\n\r\n.bh-book-shadow {\r\n    position: absolute;\r\n    bottom: -40px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 280px;\r\n    height: 30px;\r\n    background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, transparent 70%);\r\n    filter: blur(15px);\r\n    animation: shadowPulse 6s ease-in-out infinite;\r\n}\r\n\r\n@keyframes shadowPulse {\r\n    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }\r\n    50% { transform: translateX(-50%) scale(0.9); opacity: 0.7; }\r\n}\r\n\r\n\r\n.bh-content {\r\n    position: relative;\r\n}\r\n\r\n.bh-eyebrow {\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 12px;\r\n    letter-spacing: 0.5em;\r\n    color: var(--gd);\r\n    text-transform: uppercase;\r\n    margin-bottom: 25px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    opacity: 0;\r\n    animation: fadeUp 0.8s ease forwards 0.3s;\r\n}\r\n\r\n.bh-eyebrow::before {\r\n    content: '';\r\n    width: 40px;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, var(--g), transparent);\r\n}\r\n\r\n.bh-title {\r\n    font-family: 'Cinzel Decorative', serif;\r\n    font-size: clamp(36px, 4.5vw, 64px);\r\n    color: var(--cr);\r\n    line-height: 1.1;\r\n    letter-spacing: 0.04em;\r\n    margin-bottom: 15px;\r\n    text-shadow: 0 0 50px rgba(212,175,55,0.15);\r\n    opacity: 0;\r\n    animation: fadeUp 0.8s ease forwards 0.5s;\r\n}\r\n\r\n.bh-title em {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-style: italic;\r\n    color: var(--g);\r\n    font-size: 1.05em;\r\n    font-weight: 400;\r\n}\r\n\r\n.bh-subtitle {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: clamp(20px, 2vw, 26px);\r\n    font-style: italic;\r\n    color: var(--cd);\r\n    font-weight: 300;\r\n    line-height: 1.6;\r\n    margin-bottom: 40px;\r\n    padding-left: 30px;\r\n    border-left: 2px solid var(--bd);\r\n    opacity: 0;\r\n    animation: fadeUp 0.8s ease forwards 0.7s;\r\n}\r\n\r\n.bh-desc {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 18px;\r\n    color: var(--tb);\r\n    line-height: 1.9;\r\n    font-weight: 300;\r\n    margin-bottom: 25px;\r\n    opacity: 0;\r\n    animation: fadeUp 0.8s ease forwards 0.9s;\r\n}\r\n\r\n.bh-desc em {\r\n    color: var(--cd);\r\n    font-style: italic;\r\n}\r\n\r\n.bh-desc strong {\r\n    color: var(--g);\r\n    font-weight: 500;\r\n}\r\n\r\n\r\n.bh-stats {\r\n    display: flex;\r\n    gap: 0;\r\n    margin: 50px 0;\r\n    border: 1px solid var(--bd);\r\n    opacity: 0;\r\n    animation: fadeUp 0.8s ease forwards 1.1s;\r\n}\r\n\r\n.bh-stat {\r\n    flex: 1;\r\n    padding: 25px 20px;\r\n    text-align: center;\r\n    border-right: 1px solid var(--bd);\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.bh-stat:last-child {\r\n    border-right: none;\r\n}\r\n\r\n.bh-stat::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 2px;\r\n    background: linear-gradient(90deg, transparent, var(--g), transparent);\r\n    transform: scaleX(0);\r\n    transition: transform 0.4s ease;\r\n}\r\n\r\n.bh-stat:hover::before {\r\n    transform: scaleX(1);\r\n}\r\n\r\n.bh-stat:hover {\r\n    background: rgba(212,175,55,0.03);\r\n}\r\n\r\n.bh-stat-num {\r\n    font-family: 'Cinzel Decorative', serif;\r\n    font-size: 32px;\r\n    color: var(--g);\r\n    display: block;\r\n    line-height: 1;\r\n    margin-bottom: 8px;\r\n    text-shadow: 0 0 20px rgba(212,175,55,0.3);\r\n}\r\n\r\n.bh-stat-label {\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 10px;\r\n    letter-spacing: 0.3em;\r\n    color: var(--tm);\r\n    text-transform: uppercase;\r\n}\r\n\r\n\r\n.bh-actions {\r\n    display: flex;\r\n    gap: 20px;\r\n    flex-wrap: wrap;\r\n    opacity: 0;\r\n    animation: fadeUp 0.8s ease forwards 1.3s;\r\n}\r\n\r\n.bh-btn {\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 13px;\r\n    letter-spacing: 0.25em;\r\n    text-transform: uppercase;\r\n    padding: 18px 44px;\r\n    border: none;\r\n    cursor: pointer;\r\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n    font-weight: 600;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.bh-btn-primary {\r\n    background: linear-gradient(135deg, #c9a227 0%, #e8d48b 42%, #c9a227 70%, #a07820 100%);\r\n    color: #1a1200;\r\n    box-shadow: 0 0 25px rgba(212,175,55,0.2), 0 4px 16px rgba(0,0,0,0.5);\r\n}\r\n\r\n.bh-btn-primary:hover {\r\n    transform: translateY(-3px) scale(1.02);\r\n    box-shadow: 0 0 45px rgba(212,175,55,0.5), 0 8px 26px rgba(0,0,0,0.6);\r\n}\r\n\r\n.bh-btn-secondary {\r\n    background: transparent;\r\n    color: var(--g);\r\n    border: 1px solid rgba(212,175,55,0.45);\r\n}\r\n\r\n.bh-btn-secondary:hover {\r\n    background: rgba(212,175,55,0.1);\r\n    border-color: rgba(212,175,55,0.9);\r\n    color: var(--gl);\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 0 28px rgba(212,175,55,0.25);\r\n}\r\n\r\n.bh-note {\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 10px;\r\n    letter-spacing: 0.15em;\r\n    color: var(--tm);\r\n    margin-top: 20px;\r\n    opacity: 0;\r\n    animation: fadeUp 0.8s ease forwards 1.5s;\r\n}\r\n\r\n@keyframes fadeUp {\r\n    from { opacity: 0; transform: translateY(30px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\r\n@media (max-width: 1200px) {\r\n    .bh-container {\r\n        gap: 60px;\r\n        padding: 80px 40px;\r\n    }\r\n}\r\n\r\n@media (max-width: 968px) {\r\n    .bh-container {\r\n        grid-template-columns: 1fr;\r\n        text-align: center;\r\n    }\r\n    .bh-visual {\r\n        order: -1;\r\n        margin-bottom: 40px;\r\n    }\r\n    .bh-book-stage {\r\n        width: 300px;\r\n        height: 430px;\r\n    }\r\n    .bh-eyebrow {\r\n        justify-content: center;\r\n    }\r\n    .bh-subtitle {\r\n        padding-left: 0;\r\n        border-left: none;\r\n        border-top: 1px solid var(--bd);\r\n        padding-top: 20px;\r\n    }\r\n    .bh-stats {\r\n        max-width: 500px;\r\n        margin: 40px auto;\r\n    }\r\n    .bh-actions {\r\n        justify-content: center;\r\n    }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n    .bh-container {\r\n        padding: 60px 20px;\r\n    }\r\n    .bh-book-stage {\r\n        width: 260px;\r\n        height: 370px;\r\n    }\r\n    .bh-stats {\r\n        flex-direction: column;\r\n    }\r\n    .bh-stat {\r\n        border-right: none;\r\n        border-bottom: 1px solid var(--bd);\r\n    }\r\n    .bh-stat:last-child {\r\n        border-bottom: none;\r\n    }\r\n    .bh-actions {\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n    .bh-btn {\r\n        width: 100%;\r\n        max-width: 280px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<!-- ============================================\r\n     SECTION 1: CINEMATIC BOOK HERO\r\n     ============================================ -->\r\n<section id=\"book-hero\">\r\n    <!-- Background layers -->\r\n    <div class=\"bh-mesh\"><\/div>\r\n    <div class=\"bh-rays\"><\/div>\r\n    <div class=\"bh-geo\">\r\n        <div class=\"bh-geo-item\">\r\n            <svg viewBox=\"0 0 100 100\"><circle cx=\"50\" cy=\"50\" r=\"40\" stroke-dasharray=\"4 4\"\/><circle cx=\"50\" cy=\"50\" r=\"25\"\/><circle cx=\"50\" cy=\"50\" r=\"10\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"bh-geo-item\">\r\n            <svg viewBox=\"0 0 100 100\"><rect x=\"20\" y=\"20\" width=\"60\" height=\"60\" transform=\"rotate(45 50 50)\"\/><rect x=\"30\" y=\"30\" width=\"40\" height=\"40\" transform=\"rotate(45 50 50)\"\/><\/svg>\r\n        <\/div>\r\n        <div class=\"bh-geo-item\">\r\n            <svg viewBox=\"0 0 100 100\"><path d=\"M50 5 L95 50 L50 95 L5 50 Z\"\/><path d=\"M50 20 L80 50 L50 80 L20 50 Z\"\/><\/svg>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"bh-container\">\r\n        \r\n        <div class=\"bh-visual\">\r\n            <div class=\"bh-glow-orb\"><\/div>\r\n            <div class=\"bh-book-stage\">\r\n                \r\n                <div class=\"bh-image-frame\"><\/div>\r\n                \r\n                \r\n                <div class=\"bh-corner bh-corner-tl\"><\/div>\r\n                <div class=\"bh-corner bh-corner-tr\"><\/div>\r\n                <div class=\"bh-corner bh-corner-bl\"><\/div>\r\n                <div class=\"bh-corner bh-corner-br\"><\/div>\r\n                \r\n                \r\n                <div class=\"bh-book-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/oluwaseun\/wp-content\/uploads\/2026\/05\/Updated-2-a.png\" alt=\"ORI - The God Within You by Oluwaseun Animashaun\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"bh-book-shadow\"><\/div>\r\n        <\/div>\r\n\r\n       \r\n        <div class=\"bh-content\">\r\n            <div class=\"bh-eyebrow\">The Book<\/div>\r\n            <h2 class=\"bh-title\">\r\n                Not Theory.<br>\r\n                <em>Something You Recognize.<\/em>\r\n            <\/h2>\r\n            <p class=\"bh-subtitle\">\r\n                A simple exploration of the intelligence within you the quiet knowing that has always been there.\r\n            <\/p>\r\n            <p class=\"bh-desc\">\r\n                This book does not try to convince you of anything. It simply points to <strong>what you have already experienced<\/strong> the quiet sense of knowing that appears before thought.\r\n            <\/p>\r\n            <p class=\"bh-desc\">\r\n                It brings together what many traditions have described in different ways, and places it in simple terms: that <em>guidance has always been within you<\/em>, and that you can learn to recognize it clearly.\r\n            <\/p>\r\n\r\n           \r\n            \r\n\r\n            \r\n            <div class=\"bh-actions\">\r\n                <a href=\"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/books\/\">\r\n                <button class=\"bh-btn bh-btn-primary\">Get Your Copy<\/button>\r\n                <\/a>\r\n            <\/div>\r\n            <p class=\"bh-note\">Available in Paperback & Digital formats<\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-05d813f e-con-full e-flex e-con e-parent\" data-id=\"05d813f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ccfe2fa elementor-widget elementor-widget-html\" data-id=\"ccfe2fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================\r\n     SECTION 2A: CINEMATIC CHAPTER GALLERY\r\n     Full-bleed horizontal scroll with parallax\r\n     ============================================ -->\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Cinzel:wght@400;500;600;700&family=Cinzel+Decorative:wght@400;700&display=swap');\r\n\r\n:root {\r\n    --ink: #050504;\r\n    --ink2: #0d0c09;\r\n    --g: #d4af37;\r\n    --gl: #f0d060;\r\n    --gd: #a07820;\r\n    --cr: #e8d5a3;\r\n    --cd: #b09860;\r\n    --tm: #7a6a44;\r\n    --tb: #c2a96a;\r\n    --bd: rgba(212,175,55,0.18);\r\n}\r\n\r\n\r\n#chapter-gallery {\r\n    position: relative;\r\n    background: var(--ink);\r\n    overflow: hidden;\r\n    font-family: 'Cormorant Garamond', Georgia, serif;\r\n    padding: 120px 0 0;\r\n}\r\n\r\n\r\n.cg-ambient {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n.cg-ambient::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 30%;\r\n    left: 20%;\r\n    width: 600px;\r\n    height: 600px;\r\n    background: radial-gradient(circle, rgba(212,175,55,0.04) 0%, transparent 60%);\r\n    animation: ambientShift 20s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes ambientShift {\r\n    0% { transform: translate(0, 0) scale(1); }\r\n    100% { transform: translate(50px, -30px) scale(1.1); }\r\n}\r\n\r\n\r\n.cg-header {\r\n    text-align: center;\r\n    max-width: 800px;\r\n    margin: 0 auto 80px;\r\n    position: relative;\r\n    z-index: 10;\r\n    padding: 0 40px;\r\n}\r\n\r\n.cg-eyebrow {\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 11px;\r\n    letter-spacing: 0.6em;\r\n    color: var(--gd);\r\n    text-transform: uppercase;\r\n    margin-bottom: 25px;\r\n    display: block;\r\n}\r\n\r\n.cg-title {\r\n    font-family: 'Cinzel Decorative', serif;\r\n    font-size: clamp(36px, 5vw, 64px);\r\n    color: var(--cr);\r\n    line-height: 1.1;\r\n    letter-spacing: 0.04em;\r\n    margin-bottom: 20px;\r\n    text-shadow: 0 0 50px rgba(212,175,55,0.15);\r\n}\r\n\r\n.cg-title em {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-style: italic;\r\n    color: var(--g);\r\n    font-weight: 400;\r\n}\r\n\r\n.cg-subtitle {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 20px;\r\n    font-style: italic;\r\n    color: var(--cd);\r\n    font-weight: 300;\r\n    line-height: 1.7;\r\n}\r\n\r\n\r\n.cg-scroll-wrap {\r\n    position: relative;\r\n    z-index: 10;\r\n    overflow-x: auto;\r\n    overflow-y: hidden;\r\n    scrollbar-width: none;\r\n    -ms-overflow-style: none;\r\n    padding-bottom: 60px;\r\n}\r\n\r\n.cg-scroll-wrap::-webkit-scrollbar {\r\n    display: none;\r\n}\r\n\r\n.cg-track {\r\n    display: flex;\r\n    gap: 0;\r\n    padding: 0 60px;\r\n    width: max-content;\r\n}\r\n\r\n\r\n.cg-panel {\r\n    position: relative;\r\n    width: 420px;\r\n    height: 580px;\r\n    flex-shrink: 0;\r\n    margin-right: 2px;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.cg-panel::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(180deg, \r\n        rgba(5,5,4,0.3) 0%, \r\n        rgba(5,5,4,0.1) 30%, \r\n        rgba(5,5,4,0.7) 70%, \r\n        rgba(5,5,4,0.95) 100%\r\n    );\r\n    z-index: 2;\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.cg-panel:hover::before {\r\n    background: linear-gradient(180deg, \r\n        rgba(5,5,4,0.1) 0%, \r\n        rgba(5,5,4,0.05) 30%, \r\n        rgba(5,5,4,0.5) 70%, \r\n        rgba(5,5,4,0.9) 100%\r\n    );\r\n}\r\n\r\n\r\n.cg-panel-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(135deg, #0d0c09 0%, #1a1200 50%, #0d0c09 100%);\r\n    z-index: 1;\r\n}\r\n\r\n\r\n.cg-panel-pattern {\r\n    position: absolute;\r\n    inset: 0;\r\n    opacity: 0.03;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\r\n    z-index: 1;\r\n}\r\n\r\n\r\n.cg-panel-symbol {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 200px;\r\n    height: 200px;\r\n    z-index: 1;\r\n    opacity: 0.08;\r\n    transition: all 0.6s ease;\r\n}\r\n\r\n.cg-panel:hover .cg-panel-symbol {\r\n    opacity: 0.15;\r\n    transform: translate(-50%, -50%) scale(1.1);\r\n}\r\n\r\n.cg-panel-symbol svg {\r\n    width: 100%;\r\n    height: 100%;\r\n    stroke: var(--g);\r\n    fill: none;\r\n    stroke-width: 0.5;\r\n    animation: symbolSpin 40s linear infinite;\r\n}\r\n\r\n@keyframes symbolSpin {\r\n    from { transform: rotate(0deg); }\r\n    to { transform: rotate(360deg); }\r\n}\r\n\r\n\r\n.cg-panel-num {\r\n    position: absolute;\r\n    top: 40px;\r\n    right: 30px;\r\n    font-family: 'Cinzel Decorative', serif;\r\n    font-size: 140px;\r\n    color: rgba(212,175,55,0.06);\r\n    line-height: 1;\r\n    z-index: 3;\r\n    pointer-events: none;\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.cg-panel:hover .cg-panel-num {\r\n    color: rgba(212,175,55,0.12);\r\n    transform: scale(1.05);\r\n}\r\n\r\n\r\n.cg-panel-content {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    padding: 50px 40px;\r\n    z-index: 3;\r\n    transform: translateY(20px);\r\n    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.cg-panel:hover .cg-panel-content {\r\n    transform: translateY(0);\r\n}\r\n\r\n.cg-panel-chapter {\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 10px;\r\n    letter-spacing: 0.5em;\r\n    color: var(--gd);\r\n    text-transform: uppercase;\r\n    margin-bottom: 15px;\r\n    display: block;\r\n    opacity: 0;\r\n    transform: translateY(10px);\r\n    transition: all 0.4s ease 0.1s;\r\n}\r\n\r\n.cg-panel:hover .cg-panel-chapter {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n.cg-panel-title {\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 28px;\r\n    font-weight: 500;\r\n    color: var(--th);\r\n    letter-spacing: 0.06em;\r\n    text-transform: uppercase;\r\n    margin-bottom: 20px;\r\n    line-height: 1.2;\r\n}\r\n\r\n.cg-panel-desc {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 17px;\r\n    color: var(--tb);\r\n    line-height: 1.8;\r\n    font-weight: 300;\r\n    margin-bottom: 25px;\r\n    opacity: 0.9;\r\n}\r\n\r\n.cg-panel-quote {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 15px;\r\n    font-style: italic;\r\n    color: var(--cd);\r\n    line-height: 1.6;\r\n    padding-left: 20px;\r\n    border-left: 1px solid var(--bd);\r\n    opacity: 0;\r\n    transform: translateY(10px);\r\n    transition: all 0.4s ease 0.15s;\r\n}\r\n\r\n.cg-panel:hover .cg-panel-quote {\r\n    opacity: 0.85;\r\n    transform: translateY(0);\r\n}\r\n\r\n\r\n.cg-panel.active {\r\n    width: 520px;\r\n}\r\n\r\n\r\n.cg-scroll-hint {\r\n    position: absolute;\r\n    bottom: 20px;\r\n    right: 60px;\r\n    z-index: 20;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 10px;\r\n    letter-spacing: 0.3em;\r\n    color: var(--tm);\r\n    text-transform: uppercase;\r\n    opacity: 0.7;\r\n    animation: hintPulse 3s ease-in-out infinite;\r\n}\r\n\r\n@keyframes hintPulse {\r\n    0%, 100% { opacity: 0.5; }\r\n    50% { opacity: 0.9; }\r\n}\r\n\r\n.cg-scroll-hint::after {\r\n    content: '\u2192';\r\n    font-size: 16px;\r\n    color: var(--g);\r\n}\r\n\r\n\r\n.cg-divider {\r\n    position: relative;\r\n    z-index: 10;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 60px 40px;\r\n    gap: 20px;\r\n}\r\n\r\n.cg-divider-line {\r\n    flex: 1;\r\n    max-width: 200px;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, var(--gd), transparent);\r\n}\r\n\r\n.cg-divider-ornament {\r\n    width: 8px;\r\n    height: 8px;\r\n    border: 1px solid var(--g);\r\n    transform: rotate(45deg);\r\n}\r\n\r\n\r\n#book-preview {\r\n    position: relative;\r\n    background: linear-gradient(180deg, var(--ink) 0%, var(--ink2) 50%, var(--ink) 100%);\r\n    min-height: 100vh;\r\n    overflow: hidden;\r\n    font-family: 'Cormorant Garamond', Georgia, serif;\r\n    padding: 100px 0;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n\r\n.bp-stars {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n.bp-star {\r\n    position: absolute;\r\n    width: 2px;\r\n    height: 2px;\r\n    background: var(--g);\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 6px rgba(212,175,55,0.4);\r\n    animation: starTwinkle 4s infinite ease-in-out;\r\n}\r\n\r\n@keyframes starTwinkle {\r\n    0%, 100% { opacity: 0.3; transform: scale(1); }\r\n    50% { opacity: 1; transform: scale(1.8); }\r\n}\r\n\r\n\r\n.bp-container {\r\n    position: relative;\r\n    z-index: 10;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    padding: 0 60px;\r\n    width: 100%;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 100px;\r\n    align-items: center;\r\n}\r\n\r\n\r\n.bp-left {\r\n    position: relative;\r\n}\r\n\r\n.bp-eyebrow {\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 11px;\r\n    letter-spacing: 0.5em;\r\n    color: var(--gd);\r\n    text-transform: uppercase;\r\n    margin-bottom: 30px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n}\r\n\r\n.bp-eyebrow::before {\r\n    content: '';\r\n    width: 40px;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, var(--g), transparent);\r\n}\r\n\r\n.bp-quote {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: clamp(24px, 3vw, 36px);\r\n    font-style: italic;\r\n    color: var(--th);\r\n    font-weight: 300;\r\n    line-height: 1.5;\r\n    margin-bottom: 40px;\r\n    position: relative;\r\n    padding-left: 30px;\r\n    border-left: 2px solid var(--bd);\r\n}\r\n\r\n.bp-quote::before {\r\n    content: '\"';\r\n    position: absolute;\r\n    top: -20px;\r\n    left: 5px;\r\n    font-size: 80px;\r\n    color: rgba(212,175,55,0.08);\r\n    font-family: Georgia, serif;\r\n    line-height: 1;\r\n}\r\n\r\n.bp-quote em {\r\n    color: var(--g);\r\n    font-style: italic;\r\n}\r\n\r\n.bp-author {\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 12px;\r\n    letter-spacing: 0.4em;\r\n    color: var(--gd);\r\n    text-transform: uppercase;\r\n    margin-bottom: 50px;\r\n    display: block;\r\n}\r\n\r\n\r\n.bp-previews {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n}\r\n\r\n.bp-preview-card {\r\n    background: rgba(212,175,55,0.02);\r\n    border: 1px solid var(--bd);\r\n    padding: 30px 35px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n    cursor: default;\r\n}\r\n\r\n.bp-preview-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 3px;\r\n    height: 100%;\r\n    background: linear-gradient(to bottom, var(--g), transparent);\r\n    transform: scaleY(0);\r\n    transform-origin: top;\r\n    transition: transform 0.5s ease;\r\n}\r\n\r\n.bp-preview-card:hover {\r\n    background: rgba(212,175,55,0.04);\r\n    border-color: rgba(212,175,55,0.3);\r\n    transform: translateX(10px);\r\n}\r\n\r\n.bp-preview-card:hover::before {\r\n    transform: scaleY(1);\r\n}\r\n\r\n.bp-preview-num {\r\n    font-family: 'Cinzel Decorative', serif;\r\n    font-size: 11px;\r\n    color: var(--gd);\r\n    letter-spacing: 0.3em;\r\n    margin-bottom: 12px;\r\n    display: block;\r\n}\r\n\r\n.bp-preview-text {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 18px;\r\n    color: var(--tb);\r\n    line-height: 1.8;\r\n    font-weight: 300;\r\n}\r\n\r\n.bp-preview-text em {\r\n    color: var(--cd);\r\n    font-style: italic;\r\n}\r\n\r\n\r\n.bp-right {\r\n    position: relative;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    perspective: 1500px;\r\n}\r\n\r\n.bp-book-scene {\r\n    position: relative;\r\n    width: 380px;\r\n    height: 540px;\r\n    transform-style: preserve-3d;\r\n    animation: bookLevitate 6s ease-in-out infinite;\r\n}\r\n\r\n@keyframes bookLevitate {\r\n    0%, 100% { transform: translateY(0) rotateY(-8deg) rotateX(3deg); }\r\n    50% { transform: translateY(-15px) rotateY(-5deg) rotateX(2deg); }\r\n}\r\n\r\n\r\n.bp-book-image {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 10;\r\n    transform-style: preserve-3d;\r\n}\r\n\r\n.bp-book-image img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)) drop-shadow(0 0 40px rgba(212,175,55,0.1));\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.bp-book-scene:hover .bp-book-image img {\r\n    filter: drop-shadow(0 40px 80px rgba(0,0,0,0.9)) drop-shadow(0 0 60px rgba(212,175,55,0.15));\r\n}\r\n\r\n\r\n.bp-image-frame {\r\n    position: absolute;\r\n    inset: -20px;\r\n    border: 1px solid rgba(212,175,55,0.08);\r\n    pointer-events: none;\r\n    z-index: 5;\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.bp-book-scene:hover .bp-image-frame {\r\n    inset: -30px;\r\n    border-color: rgba(212,175,55,0.15);\r\n}\r\n\r\n.bp-image-frame::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 10px;\r\n    border: 1px solid rgba(212,175,55,0.05);\r\n}\r\n\r\n\r\n.bp-corner {\r\n    position: absolute;\r\n    width: 30px;\r\n    height: 30px;\r\n    border: 1px solid var(--bd);\r\n    z-index: 15;\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.bp-corner-tl { top: -10px; left: -10px; border-right: none; border-bottom: none; }\r\n.bp-corner-tr { top: -10px; right: -10px; border-left: none; border-bottom: none; }\r\n.bp-corner-bl { bottom: -10px; left: -10px; border-right: none; border-top: none; }\r\n.bp-corner-br { bottom: -10px; right: -10px; border-left: none; border-top: none; }\r\n\r\n.bp-book-scene:hover .bp-corner {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-color: rgba(212,175,55,0.25);\r\n}\r\n\r\n\r\n.bp-glow {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 500px;\r\n    height: 500px;\r\n    background: radial-gradient(circle, rgba(212,175,55,0.06) 0%, transparent 60%);\r\n    pointer-events: none;\r\n    animation: glowBreathe 5s ease-in-out infinite;\r\n}\r\n\r\n@keyframes glowBreathe {\r\n    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }\r\n    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }\r\n}\r\n\r\n\r\n.bp-ring {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    border-radius: 50%;\r\n    border: 1px solid rgba(212,175,55,0.06);\r\n    pointer-events: none;\r\n    z-index: 2;\r\n}\r\n\r\n.bp-ring:nth-child(1) { width: 450px; height: 450px; animation: ringRotate 30s linear infinite; }\r\n.bp-ring:nth-child(2) { width: 380px; height: 380px; animation: ringRotate 25s linear infinite reverse; border-color: rgba(212,175,55,0.04); }\r\n.bp-ring:nth-child(3) { width: 520px; height: 520px; animation: ringRotate 35s linear infinite; border-color: rgba(212,175,55,0.03); }\r\n\r\n@keyframes ringRotate {\r\n    from { transform: translate(-50%, -50%) rotate(0deg); }\r\n    to { transform: translate(-50%, -50%) rotate(360deg); }\r\n}\r\n\r\n\r\n.bp-shadow {\r\n    position: absolute;\r\n    bottom: -30px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 280px;\r\n    height: 20px;\r\n    background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, transparent 70%);\r\n    filter: blur(12px);\r\n    animation: shadowPulse 6s ease-in-out infinite;\r\n    z-index: 4;\r\n}\r\n\r\n@keyframes shadowPulse {\r\n    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }\r\n    50% { transform: translateX(-50%) scale(0.85); opacity: 0.7; }\r\n}\r\n\r\n\r\n.bp-cta {\r\n    position: absolute;\r\n    bottom: -80px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    text-align: center;\r\n    white-space: nowrap;\r\n    z-index: 20;\r\n}\r\n\r\n.bp-cta-btn {\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 12px;\r\n    letter-spacing: 0.25em;\r\n    text-transform: uppercase;\r\n    padding: 16px 40px;\r\n    background: linear-gradient(135deg, #c9a227 0%, #e8d48b 42%, #c9a227 70%, #a07820 100%);\r\n    color: #1a1200;\r\n    border: none;\r\n    cursor: pointer;\r\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n    font-weight: 600;\r\n    box-shadow: 0 0 25px rgba(212,175,55,0.2);\r\n}\r\n\r\n.bp-cta-btn:hover {\r\n    transform: translateY(-3px) scale(1.02);\r\n    box-shadow: 0 0 45px rgba(212,175,55,0.4);\r\n}\r\n\r\n\r\n@media (max-width: 1200px) {\r\n    .bp-container { gap: 60px; padding: 0 40px; }\r\n    .bp-book-scene { transform: scale(0.9); }\r\n}\r\n\r\n@media (max-width: 968px) {\r\n    .bp-container {\r\n        grid-template-columns: 1fr;\r\n        text-align: center;\r\n    }\r\n    .bp-left { order: 2; }\r\n    .bp-right { order: 1; margin-bottom: 80px; min-height: 500px; }\r\n    .bp-eyebrow { justify-content: center; }\r\n    .bp-quote { padding-left: 0; border-left: none; border-top: 2px solid var(--bd); padding-top: 30px; }\r\n    .bp-quote::before { display: none; }\r\n    .bp-preview-card:hover { transform: translateX(0); }\r\n    .bp-preview-card::before { left: auto; top: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; }\r\n    .bp-preview-card:hover::before { transform: scaleX(1); }\r\n    .bp-book-scene { width: 320px; height: 460px; }\r\n    .cg-panel { width: 340px; height: 480px; }\r\n    .cg-panel.active { width: 400px; }\r\n    .cg-panel-title { font-size: 22px; }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n    .cg-panel { width: 300px; height: 420px; }\r\n    .bp-book-scene { width: 260px; height: 380px; }\r\n    .bp-container { padding: 0 20px; }\r\n    .cg-track { padding: 0 20px; }\r\n    .bp-cta-btn { padding: 14px 32px; font-size: 11px; }\r\n}\r\n<\/style>\r\n\r\n\r\n<section id=\"chapter-gallery\">\r\n    <div class=\"cg-ambient\"><\/div>\r\n    \r\n    <div class=\"cg-header\">\r\n        <span class=\"cg-eyebrow\">Inside the Book<\/span>\r\n        <h2 class=\"cg-title\">Six Chapters.<br><em>One Journey Within.<\/em><\/h2>\r\n        <p class=\"cg-subtitle\">Scroll to explore the path from recognition to living.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"cg-scroll-wrap\">\r\n        <div class=\"cg-track\">\r\n           \r\n            <div class=\"cg-panel\">\r\n                <div class=\"cg-panel-bg\"><\/div>\r\n                <div class=\"cg-panel-pattern\"><\/div>\r\n                <div class=\"cg-panel-symbol\">\r\n                    <svg viewBox=\"0 0 200 200\"><circle cx=\"100\" cy=\"100\" r=\"80\" stroke-dasharray=\"4 4\"\/><circle cx=\"100\" cy=\"100\" r=\"50\"\/><circle cx=\"100\" cy=\"100\" r=\"20\"\/><line x1=\"100\" y1=\"20\" x2=\"100\" y2=\"180\"\/><line x1=\"20\" y1=\"100\" x2=\"180\" y2=\"100\"\/><\/svg>\r\n                <\/div>\r\n                <div class=\"cg-panel-num\">01<\/div>\r\n                <div class=\"cg-panel-content\">\r\n                    <span class=\"cg-panel-chapter\">Chapter One<\/span>\r\n                    <h3 class=\"cg-panel-title\">The Recognition<\/h3>\r\n                    <p class=\"cg-panel-desc\">You have always felt something guiding you. This chapter names what you have known but never spoken aloud.<\/p>\r\n                    <p class=\"cg-panel-quote\">\"The voice does not shout. It waits for you to become quiet enough to hear it.\"<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n         \r\n            <div class=\"cg-panel\">\r\n                <div class=\"cg-panel-bg\"><\/div>\r\n                <div class=\"cg-panel-pattern\"><\/div>\r\n                <div class=\"cg-panel-symbol\">\r\n                    <svg viewBox=\"0 0 200 200\"><rect x=\"40\" y=\"40\" width=\"120\" height=\"120\" transform=\"rotate(45 100 100)\"\/><rect x=\"60\" y=\"60\" width=\"80\" height=\"80\" transform=\"rotate(45 100 100)\"\/><circle cx=\"100\" cy=\"100\" r=\"15\"\/><\/svg>\r\n                <\/div>\r\n                <div class=\"cg-panel-num\">02<\/div>\r\n                <div class=\"cg-panel-content\">\r\n                    <span class=\"cg-panel-chapter\">Chapter Two<\/span>\r\n                    <h3 class=\"cg-panel-title\">The Source<\/h3>\r\n                    <p class=\"cg-panel-desc\">Where does this guidance come from? Not from outside but from the deepest layer of your own awareness.<\/p>\r\n                    <p class=\"cg-panel-quote\">\"God is not somewhere else. God is the intelligence that thinks through you when you are still.\"<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            \r\n            <div class=\"cg-panel\">\r\n                <div class=\"cg-panel-bg\"><\/div>\r\n                <div class=\"cg-panel-pattern\"><\/div>\r\n                <div class=\"cg-panel-symbol\">\r\n                    <svg viewBox=\"0 0 200 200\"><path d=\"M100 20 L180 100 L100 180 L20 100 Z\"\/><path d=\"M100 50 L150 100 L100 150 L50 100 Z\"\/><circle cx=\"100\" cy=\"100\" r=\"10\"\/><\/svg>\r\n                <\/div>\r\n                <div class=\"cg-panel-num\">03<\/div>\r\n                <div class=\"cg-panel-content\">\r\n                    <span class=\"cg-panel-chapter\">Chapter Three<\/span>\r\n                    <h3 class=\"cg-panel-title\">The Language<\/h3>\r\n                    <p class=\"cg-panel-desc\">Learn to read the signals: intuition, conscience, dreams, and the quiet certainty that arrives without reason.<\/p>\r\n                    <p class=\"cg-panel-quote\">\"Your feelings are not random. They are the language of a deeper knowing.\"<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            \r\n            <div class=\"cg-panel\">\r\n                <div class=\"cg-panel-bg\"><\/div>\r\n                <div class=\"cg-panel-pattern\"><\/div>\r\n                <div class=\"cg-panel-symbol\">\r\n                    <svg viewBox=\"0 0 200 200\"><circle cx=\"100\" cy=\"100\" r=\"80\"\/><circle cx=\"100\" cy=\"100\" r=\"55\"\/><circle cx=\"100\" cy=\"100\" r=\"30\"\/><path d=\"M100 20 L100 180 M20 100 L180 100 M45 45 L155 155 M45 155 L155 45\"\/><\/svg>\r\n                <\/div>\r\n                <div class=\"cg-panel-num\">04<\/div>\r\n                <div class=\"cg-panel-content\">\r\n                    <span class=\"cg-panel-chapter\">Chapter Four<\/span>\r\n                    <h3 class=\"cg-panel-title\">The Practice<\/h3>\r\n                    <p class=\"cg-panel-desc\">Simple, daily ways to strengthen your connection to inner guidance without rituals or complexity.<\/p>\r\n                    <p class=\"cg-panel-quote\">\"You do not need to seek. You only need to stop drowning out what is already speaking.\"<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n           \r\n            <div class=\"cg-panel\">\r\n                <div class=\"cg-panel-bg\"><\/div>\r\n                <div class=\"cg-panel-pattern\"><\/div>\r\n                <div class=\"cg-panel-symbol\">\r\n                    <svg viewBox=\"0 0 200 200\"><polygon points=\"100,10 120,80 190,80 135,120 155,190 100,150 45,190 65,120 10,80 80,80\"\/><polygon points=\"100,40 110,85 160,85 120,115 130,160 100,130 70,160 80,115 40,85 90,85\"\/><\/svg>\r\n                <\/div>\r\n                <div class=\"cg-panel-num\">05<\/div>\r\n                <div class=\"cg-panel-content\">\r\n                    <span class=\"cg-panel-chapter\">Chapter Five<\/span>\r\n                    <h3 class=\"cg-panel-title\">The Obstacles<\/h3>\r\n                    <p class=\"cg-panel-desc\">What blocks the voice? Fear, noise, and the habits that keep you from hearing what you already know.<\/p>\r\n                    <p class=\"cg-panel-quote\">\"The voice does not leave you. You leave it by choosing distraction over attention.\"<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            \r\n            <div class=\"cg-panel\">\r\n                <div class=\"cg-panel-bg\"><\/div>\r\n                <div class=\"cg-panel-pattern\"><\/div>\r\n                <div class=\"cg-panel-symbol\">\r\n                    <svg viewBox=\"0 0 200 200\"><circle cx=\"100\" cy=\"100\" r=\"85\"\/><path d=\"M100 30 Q170 30 170 100 Q170 170 100 170 Q30 170 30 100 Q30 30 100 30\" fill=\"none\"\/><circle cx=\"100\" cy=\"100\" r=\"40\"\/><circle cx=\"100\" cy=\"100\" r=\"15\"\/><\/svg>\r\n                <\/div>\r\n                <div class=\"cg-panel-num\">06<\/div>\r\n                <div class=\"cg-panel-content\">\r\n                    <span class=\"cg-panel-chapter\">Chapter Six<\/span>\r\n                    <h3 class=\"cg-panel-title\">The Living<\/h3>\r\n                    <p class=\"cg-panel-desc\">How to carry this recognition into every decision, relationship, and moment of your life.<\/p>\r\n                    <p class=\"cg-panel-quote\">\"To live from this place is not to be perfect. It is to be honest with what you know, deep down, to be true.\"<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"cg-scroll-hint\">Scroll to explore<\/div>\r\n    <\/div>\r\n\r\n   \r\n    <div class=\"cg-divider\">\r\n        <div class=\"cg-divider-line\"><\/div>\r\n        <div class=\"cg-divider-ornament\"><\/div>\r\n        <div class=\"cg-divider-ornament\" style=\"width:4px;height:4px;background:var(--g);border:none;\"><\/div>\r\n        <div class=\"cg-divider-ornament\"><\/div>\r\n        <div class=\"cg-divider-line\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"book-preview\">\r\n    <div class=\"bp-stars\" id=\"bpStars\"><\/div>\r\n    \r\n    <div class=\"bp-container\">\r\n      \r\n        <div class=\"bp-left\">\r\n            <div class=\"bp-eyebrow\">A Preview<\/div>\r\n            <p class=\"bp-quote\">This book brings that inner experience into focus, <em>without trying to change what you believe<\/em>, only helping you see more clearly for yourself.<\/p>\r\n            <span class=\"bp-author\">\u2014 Oluwaseun Animashaun<\/span>\r\n\r\n            <div class=\"bp-previews\">\r\n                <div class=\"bp-preview-card\">\r\n                    <span class=\"bp-preview-num\">FROM CHAPTER ONE<\/span>\r\n                    <p class=\"bp-preview-text\">\"There is a voice that does not use words. <em>Listen.<\/em> It has been there through every decision you ever made that felt right.\"<\/p>\r\n                <\/div>\r\n                <div class=\"bp-preview-card\">\r\n                    <span class=\"bp-preview-num\">FROM CHAPTER THREE<\/span>\r\n                    <p class=\"bp-preview-text\">\"Your intuition is not a guess. It is <em>recognition<\/em> the part of you that already knows, speaking before the mind catches up.\"<\/p>\r\n                <\/div>\r\n                <div class=\"bp-preview-card\">\r\n                    <span class=\"bp-preview-num\">FROM CHAPTER SIX<\/span>\r\n                    <p class=\"bp-preview-text\">\"To live from this place is to trust the quiet knowing over the loud opinion. <em>Not because it is easier.<\/em> Because it is true.\"<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        \r\n        <div class=\"bp-right\">\r\n            \r\n            <div class=\"bp-glow\"><\/div>\r\n            \r\n            \r\n            <div class=\"bp-ring\"><\/div>\r\n            <div class=\"bp-ring\"><\/div>\r\n            <div class=\"bp-ring\"><\/div>\r\n            \r\n            \r\n            <div class=\"bp-book-scene\">\r\n               \r\n                <div class=\"bp-image-frame\"><\/div>\r\n                \r\n               \r\n                <div class=\"bp-corner bp-corner-tl\"><\/div>\r\n                <div class=\"bp-corner bp-corner-tr\"><\/div>\r\n                <div class=\"bp-corner bp-corner-bl\"><\/div>\r\n                <div class=\"bp-corner bp-corner-br\"><\/div>\r\n                \r\n                \r\n                <div class=\"bp-book-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/oluwaseun\/wp-content\/uploads\/2026\/05\/Updated-2-a.png\" alt=\"ORI - The God Within You by Oluwaseun Animashaun\">\r\n                <\/div>\r\n                \r\n             \r\n                <div class=\"bp-shadow\"><\/div>\r\n            <\/div>\r\n            \r\n         \r\n            <div class=\"bp-cta\">\r\n                <a href=\"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/books\/\">\r\n                <button class=\"bp-cta-btn\">Get Your Copy<\/button>\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function() {\r\n\r\n    const starsContainer = document.getElementById('bpStars');\r\n    for (let i = 0; i < 50; i++) {\r\n        const star = document.createElement('div');\r\n        star.className = 'bp-star';\r\n        star.style.left = Math.random() * 100 + '%';\r\n        star.style.top = Math.random() * 100 + '%';\r\n        star.style.animationDelay = Math.random() * 4 + 's';\r\n        star.style.animationDuration = (3 + Math.random() * 3) + 's';\r\n        starsContainer.appendChild(star);\r\n    }\r\n\r\n   \r\n    const scrollWrap = document.querySelector('.cg-scroll-wrap');\r\n    if (scrollWrap) {\r\n        scrollWrap.addEventListener('wheel', (e) => {\r\n            if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {\r\n                e.preventDefault();\r\n                scrollWrap.scrollLeft += e.deltaY;\r\n            }\r\n        }, { passive: false });\r\n    }\r\n\r\n   \r\n    const panels = document.querySelectorAll('.cg-panel');\r\n    panels.forEach(panel => {\r\n        panel.addEventListener('mouseenter', () => {\r\n            panels.forEach(p => p.classList.remove('active'));\r\n            panel.classList.add('active');\r\n        });\r\n    });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b041a24 e-con-full e-flex e-con e-parent\" data-id=\"b041a24\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6c425a5 elementor-widget elementor-widget-html\" data-id=\"6c425a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================\r\n     KEY THEMES SECTION - Premium Glowing Cards\r\n     ============================================ -->\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Cinzel:wght@400;500;600;700&family=Cinzel+Decorative:wght@400;700&display=swap');\r\n\r\n:root {\r\n    --ink: #050504;\r\n    --ink2: #0d0c09;\r\n    --g: #d4af37;\r\n    --gl: #f0d060;\r\n    --gd: #a07820;\r\n    --cr: #e8d5a3;\r\n    --cd: #b09860;\r\n    --tm: #7a6a44;\r\n    --tb: #c2a96a;\r\n    --bd: rgba(212,175,55,0.18);\r\n}\r\n\r\n#key-themes {\r\n    position: relative;\r\n    background: linear-gradient(180deg, var(--ink) 0%, #080703 40%, var(--ink2) 70%, var(--ink) 100%);\r\n    padding: 140px 0 120px;\r\n    overflow: hidden;\r\n    font-family: 'Cormorant Garamond', Georgia, serif;\r\n}\r\n\r\n\r\n.kt-ambient {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n.kt-orb {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    background: radial-gradient(circle, rgba(212,175,55,0.04) 0%, transparent 70%);\r\n    animation: orbDrift 20s infinite ease-in-out;\r\n}\r\n\r\n.kt-orb:nth-child(1) { width: 500px; height: 500px; top: 10%; left: -10%; }\r\n.kt-orb:nth-child(2) { width: 400px; height: 400px; top: 50%; right: -5%; animation-delay: -7s; }\r\n.kt-orb:nth-child(3) { width: 300px; height: 300px; bottom: 10%; left: 30%; animation-delay: -14s; }\r\n\r\n@keyframes orbDrift {\r\n    0%, 100% { transform: translate(0, 0) scale(1); }\r\n    33% { transform: translate(30px, -20px) scale(1.1); }\r\n    66% { transform: translate(-20px, 15px) scale(0.95); }\r\n}\r\n\r\n.kt-grid-pattern {\r\n    position: absolute;\r\n    inset: 0;\r\n    opacity: 0.015;\r\n    background-image: \r\n        linear-gradient(rgba(212,175,55,0.3) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(212,175,55,0.3) 1px, transparent 1px);\r\n    background-size: 60px 60px;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n.kt-particles {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 2;\r\n}\r\n\r\n.kt-particle {\r\n    position: absolute;\r\n    width: 2px;\r\n    height: 2px;\r\n    background: var(--g);\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 6px rgba(212,175,55,0.4);\r\n    animation: particleFloat 15s infinite linear;\r\n}\r\n\r\n@keyframes particleFloat {\r\n    0% { opacity: 0; transform: translateY(100vh) scale(0); }\r\n    10% { opacity: 0.7; }\r\n    90% { opacity: 0.7; }\r\n    100% { opacity: 0; transform: translateY(-10vh) scale(1.2); }\r\n}\r\n\r\n\r\n.kt-header {\r\n    text-align: center;\r\n    max-width: 700px;\r\n    margin: 0 auto 100px;\r\n    position: relative;\r\n    z-index: 10;\r\n    padding: 0 40px;\r\n}\r\n\r\n.kt-eyebrow {\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 11px;\r\n    letter-spacing: 0.6em;\r\n    color: var(--gd);\r\n    text-transform: uppercase;\r\n    margin-bottom: 25px;\r\n    display: block;\r\n}\r\n\r\n.kt-title {\r\n    font-family: 'Cinzel Decorative', serif;\r\n    font-size: clamp(36px, 5vw, 64px);\r\n    color: var(--cr);\r\n    line-height: 1.1;\r\n    letter-spacing: 0.04em;\r\n    margin-bottom: 20px;\r\n    text-shadow: 0 0 50px rgba(212,175,55,0.12);\r\n}\r\n\r\n.kt-title em {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-style: italic;\r\n    color: var(--g);\r\n    font-weight: 400;\r\n}\r\n\r\n.kt-subtitle {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 20px;\r\n    font-style: italic;\r\n    color: var(--cd);\r\n    font-weight: 300;\r\n    line-height: 1.7;\r\n}\r\n\r\n\r\n.kt-grid {\r\n    position: relative;\r\n    z-index: 10;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 40px;\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 30px;\r\n}\r\n\r\n\r\n.kt-card {\r\n    position: relative;\r\n    background: rgba(13, 12, 9, 0.6);\r\n    border: 1px solid var(--bd);\r\n    padding: 50px 35px 45px;\r\n    overflow: hidden;\r\n    cursor: default;\r\n    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    backdrop-filter: blur(10px);\r\n}\r\n\r\n.kt-card.revealed {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n.kt-card:nth-child(1) { transition-delay: 0.1s; }\r\n.kt-card:nth-child(2) { transition-delay: 0.2s; }\r\n.kt-card:nth-child(3) { transition-delay: 0.3s; }\r\n.kt-card:nth-child(4) { transition-delay: 0.4s; }\r\n.kt-card:nth-child(5) { transition-delay: 0.5s; }\r\n.kt-card:nth-child(6) { transition-delay: 0.6s; }\r\n\r\n\r\n.kt-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 50%;\r\n    transform: translateX(-50%) scaleX(0);\r\n    width: 80%;\r\n    height: 2px;\r\n    background: linear-gradient(90deg, transparent, var(--g), transparent);\r\n    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.kt-card:hover::before {\r\n    transform: translateX(-50%) scaleX(1);\r\n}\r\n\r\n\r\n.kt-card::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 15px;\r\n    right: 15px;\r\n    width: 20px;\r\n    height: 20px;\r\n    border-top: 1px solid rgba(212,175,55,0.1);\r\n    border-right: 1px solid rgba(212,175,55,0.1);\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.kt-card:hover::after {\r\n    border-color: rgba(212,175,55,0.3);\r\n    width: 30px;\r\n    height: 30px;\r\n}\r\n\r\n.kt-card-corner-bl {\r\n    position: absolute;\r\n    bottom: 15px;\r\n    left: 15px;\r\n    width: 20px;\r\n    height: 20px;\r\n    border-bottom: 1px solid rgba(212,175,55,0.1);\r\n    border-left: 1px solid rgba(212,175,55,0.1);\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.kt-card:hover .kt-card-corner-bl {\r\n    border-color: rgba(212,175,55,0.3);\r\n    width: 30px;\r\n    height: 30px;\r\n}\r\n\r\n\r\n.kt-card-glow {\r\n    position: absolute;\r\n    inset: -1px;\r\n    background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.15) 0%, transparent 70%);\r\n    opacity: 0;\r\n    transition: opacity 0.6s ease;\r\n    pointer-events: none;\r\n    z-index: 0;\r\n}\r\n\r\n.kt-card:hover .kt-card-glow {\r\n    opacity: 1;\r\n}\r\n\r\n.kt-card:hover {\r\n    transform: translateY(-12px);\r\n    border-color: rgba(212,175,55,0.4);\r\n    box-shadow: \r\n        0 30px 60px rgba(0,0,0,0.5),\r\n        0 0 40px rgba(212,175,55,0.08),\r\n        inset 0 1px 0 rgba(212,175,55,0.1);\r\n    background: rgba(13, 12, 9, 0.8);\r\n}\r\n\r\n\r\n.kt-card-num {\r\n    position: absolute;\r\n    top: 20px;\r\n    left: 25px;\r\n    font-family: 'Cinzel Decorative', serif;\r\n    font-size: 14px;\r\n    color: var(--gd);\r\n    letter-spacing: 0.2em;\r\n    opacity: 0.6;\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.kt-card:hover .kt-card-num {\r\n    opacity: 1;\r\n    color: var(--g);\r\n    text-shadow: 0 0 10px rgba(212,175,55,0.3);\r\n}\r\n\r\n\r\n.kt-icon-wrap {\r\n    position: relative;\r\n    width: 70px;\r\n    height: 70px;\r\n    margin-bottom: 35px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.kt-icon-ring {\r\n    position: absolute;\r\n    inset: 0;\r\n    border: 1px solid var(--bd);\r\n    border-radius: 50%;\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.kt-card:hover .kt-icon-ring {\r\n    border-color: rgba(212,175,55,0.4);\r\n    transform: scale(1.1);\r\n    box-shadow: 0 0 20px rgba(212,175,55,0.15);\r\n}\r\n\r\n.kt-icon-ring::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: -8px;\r\n    border: 1px solid rgba(212,175,55,0.06);\r\n    border-radius: 50%;\r\n    transition: all 0.5s ease;\r\n}\r\n\r\n.kt-card:hover .kt-icon-ring::before {\r\n    inset: -12px;\r\n    border-color: rgba(212,175,55,0.12);\r\n}\r\n\r\n.kt-icon {\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 28px;\r\n    height: 28px;\r\n    stroke: var(--g);\r\n    fill: none;\r\n    stroke-width: 1.5;\r\n    filter: drop-shadow(0 0 5px rgba(212,175,55,0.3));\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.kt-card:hover .kt-icon {\r\n    stroke: var(--gl);\r\n    filter: drop-shadow(0 0 10px rgba(212,175,55,0.5));\r\n    transform: scale(1.1);\r\n}\r\n\r\n\r\n.kt-card-title {\r\n    font-family: 'Cinzel', serif;\r\n    font-size: 18px;\r\n    font-weight: 500;\r\n    color: var(--th);\r\n    letter-spacing: 0.08em;\r\n    text-transform: uppercase;\r\n    margin-bottom: 20px;\r\n    line-height: 1.3;\r\n    position: relative;\r\n    z-index: 2;\r\n    transition: color 0.4s ease;\r\n}\r\n\r\n.kt-card:hover .kt-card-title {\r\n    color: var(--gl);\r\n}\r\n\r\n\r\n.kt-card-desc {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 17px;\r\n    color: var(--tb);\r\n    line-height: 1.85;\r\n    font-weight: 300;\r\n    position: relative;\r\n    z-index: 2;\r\n    opacity: 0.9;\r\n    transition: opacity 0.4s ease;\r\n}\r\n\r\n.kt-card:hover .kt-card-desc {\r\n    opacity: 1;\r\n}\r\n\r\n\r\n.kt-card-line {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 50%;\r\n    transform: translateX(-50%) scaleX(0);\r\n    width: 60%;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, var(--g), transparent);\r\n    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\r\n}\r\n\r\n.kt-card:hover .kt-card-line {\r\n    transform: translateX(-50%) scaleX(1);\r\n}\r\n\r\n\r\n.kt-divider {\r\n    position: relative;\r\n    z-index: 10;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 20px;\r\n    margin-top: 100px;\r\n    padding: 0 40px;\r\n}\r\n\r\n.kt-divider-line {\r\n    flex: 1;\r\n    max-width: 200px;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, var(--gd), transparent);\r\n}\r\n\r\n.kt-divider-ornament {\r\n    width: 8px;\r\n    height: 8px;\r\n    border: 1px solid var(--g);\r\n    transform: rotate(45deg);\r\n}\r\n\r\n.kt-divider-dot {\r\n    width: 4px;\r\n    height: 4px;\r\n    background: var(--g);\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 6px 2px rgba(212,175,55,0.4);\r\n}\r\n\r\n\r\n@media (max-width: 1024px) {\r\n    .kt-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n    .kt-grid { grid-template-columns: 1fr; max-width: 400px; }\r\n    .kt-header { margin-bottom: 60px; }\r\n    .kt-card { padding: 40px 28px 35px; }\r\n}\r\n<\/style>\r\n\r\n<section id=\"key-themes\">\r\n    \r\n    <div class=\"kt-ambient\">\r\n        <div class=\"kt-orb\"><\/div>\r\n        <div class=\"kt-orb\"><\/div>\r\n        <div class=\"kt-orb\"><\/div>\r\n    <\/div>\r\n    <div class=\"kt-grid-pattern\"><\/div>\r\n    <div class=\"kt-particles\" id=\"ktParticles\"><\/div>\r\n\r\n   \r\n    <div class=\"kt-header\">\r\n        <span class=\"kt-eyebrow\">The Essence<\/span>\r\n        <h2 class=\"kt-title\">What You Will <em>Discover<\/em><\/h2>\r\n        <p class=\"kt-subtitle\">Six truths that have always been within you, waiting to be recognized.<\/p>\r\n    <\/div>\r\n\r\n    \r\n    <div class=\"kt-grid\">\r\n        \r\n        <div class=\"kt-card\">\r\n            <div class=\"kt-card-glow\"><\/div>\r\n            <div class=\"kt-card-corner-bl\"><\/div>\r\n            <div class=\"kt-card-line\"><\/div>\r\n            <span class=\"kt-card-num\">01<\/span>\r\n            <div class=\"kt-icon-wrap\">\r\n                <div class=\"kt-icon-ring\"><\/div>\r\n                <svg class=\"kt-icon\" viewBox=\"0 0 24 24\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\r\n                    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\/>\r\n                    <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"\/>\r\n                    <line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"\/>\r\n                    <line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"\/>\r\n                    <line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"\/>\r\n                <\/svg>\r\n            <\/div>\r\n            <h3 class=\"kt-card-title\">Inner Guidance<\/h3>\r\n            <p class=\"kt-card-desc\">Learn to recognize the quiet intelligence already guiding your decisions.<\/p>\r\n        <\/div>\r\n\r\n        \r\n        <div class=\"kt-card\">\r\n            <div class=\"kt-card-glow\"><\/div>\r\n            <div class=\"kt-card-corner-bl\"><\/div>\r\n            <div class=\"kt-card-line\"><\/div>\r\n            <span class=\"kt-card-num\">02<\/span>\r\n            <div class=\"kt-icon-wrap\">\r\n                <div class=\"kt-icon-ring\"><\/div>\r\n                <svg class=\"kt-icon\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-3.03 0-5.5-2.47-5.5-5.5 0-1.82.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z\"\/>\r\n                    <circle cx=\"12\" cy=\"12\" r=\"5\" stroke-dasharray=\"2 2\"\/>\r\n                <\/svg>\r\n            <\/div>\r\n            <h3 class=\"kt-card-title\">Conscious Awareness<\/h3>\r\n            <p class=\"kt-card-desc\">Understand the relationship between thought, awareness, and intuition.<\/p>\r\n        <\/div>\r\n\r\n        \r\n        <div class=\"kt-card\">\r\n            <div class=\"kt-card-glow\"><\/div>\r\n            <div class=\"kt-card-corner-bl\"><\/div>\r\n            <div class=\"kt-card-line\"><\/div>\r\n            <span class=\"kt-card-num\">03<\/span>\r\n            <div class=\"kt-icon-wrap\">\r\n                <div class=\"kt-icon-ring\"><\/div>\r\n                <svg class=\"kt-icon\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/>\r\n                    <path d=\"M9 12l2 2 4-4\"\/>\r\n                <\/svg>\r\n            <\/div>\r\n            <h3 class=\"kt-card-title\">Discernment<\/h3>\r\n            <p class=\"kt-card-desc\">Differentiate fear, ego, and true inner knowing.<\/p>\r\n        <\/div>\r\n\r\n       \r\n        <div class=\"kt-card\">\r\n            <div class=\"kt-card-glow\"><\/div>\r\n            <div class=\"kt-card-corner-bl\"><\/div>\r\n            <div class=\"kt-card-line\"><\/div>\r\n            <span class=\"kt-card-num\">04<\/span>\r\n            <div class=\"kt-icon-wrap\">\r\n                <div class=\"kt-icon-ring\"><\/div>\r\n                <svg class=\"kt-icon\" viewBox=\"0 0 24 24\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n                    <path d=\"M12 6v6l4 2\"\/>\r\n                    <path d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41\"\/>\r\n                <\/svg>\r\n            <\/div>\r\n            <h3 class=\"kt-card-title\">Destiny<\/h3>\r\n            <p class=\"kt-card-desc\">Explore how purpose and divine alignment connect.<\/p>\r\n        <\/div>\r\n\r\n        \r\n        <div class=\"kt-card\">\r\n            <div class=\"kt-card-glow\"><\/div>\r\n            <div class=\"kt-card-corner-bl\"><\/div>\r\n            <div class=\"kt-card-line\"><\/div>\r\n            <span class=\"kt-card-num\">05<\/span>\r\n            <div class=\"kt-icon-wrap\">\r\n                <div class=\"kt-icon-ring\"><\/div>\r\n                <svg class=\"kt-icon\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"\/>\r\n                    <path d=\"M12 8v4M12 16h.01\"\/>\r\n                <\/svg>\r\n            <\/div>\r\n            <h3 class=\"kt-card-title\">Healing<\/h3>\r\n            <p class=\"kt-card-desc\">Reconnect with inner clarity for emotional restoration.<\/p>\r\n        <\/div>\r\n\r\n        \r\n        <div class=\"kt-card\">\r\n            <div class=\"kt-card-glow\"><\/div>\r\n            <div class=\"kt-card-corner-bl\"><\/div>\r\n            <div class=\"kt-card-line\"><\/div>\r\n            <span class=\"kt-card-num\">06<\/span>\r\n            <div class=\"kt-icon-wrap\">\r\n                <div class=\"kt-icon-ring\"><\/div>\r\n                <svg class=\"kt-icon\" viewBox=\"0 0 24 24\">\r\n                    <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/>\r\n                    <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\r\n                <\/svg>\r\n            <\/div>\r\n            <h3 class=\"kt-card-title\">Spiritual Intelligence<\/h3>\r\n            <p class=\"kt-card-desc\">See how ancient traditions describe the same truth differently.<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n   \r\n    <div class=\"kt-divider\">\r\n        <div class=\"kt-divider-line\"><\/div>\r\n        <div class=\"kt-divider-ornament\"><\/div>\r\n        <div class=\"kt-divider-dot\"><\/div>\r\n        <div class=\"kt-divider-ornament\"><\/div>\r\n        <div class=\"kt-divider-line\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function() {\r\n   \r\n    const particlesContainer = document.getElementById('ktParticles');\r\n    for (let i = 0; i < 20; i++) {\r\n        const particle = document.createElement('div');\r\n        particle.className = 'kt-particle';\r\n        particle.style.left = Math.random() * 100 + '%';\r\n        particle.style.animationDelay = Math.random() * 15 + 's';\r\n        particle.style.animationDuration = (10 + Math.random() * 8) + 's';\r\n        particlesContainer.appendChild(particle);\r\n    }\r\n\r\n   \r\n    const cards = document.querySelectorAll('.kt-card');\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.classList.add('revealed');\r\n            }\r\n        });\r\n    }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });\r\n\r\n    cards.forEach(card => observer.observe(card));\r\n})();\r\n<\/script>\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>Oluwaseun Animashaun BOOKS Not a new belief &nbsp;\u00b7&nbsp; Not a system &nbsp;\u00b7&nbsp; A remembering Begin the Journey Descend The Book [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-199","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/pages\/199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/comments?post=199"}],"version-history":[{"count":49,"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/pages\/199\/revisions"}],"predecessor-version":[{"id":357,"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/pages\/199\/revisions\/357"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/media?parent=199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}