{"id":8,"date":"2025-12-24T03:17:17","date_gmt":"2025-12-24T03:17:17","guid":{"rendered":"https:\/\/questium.fun\/?page_id=8"},"modified":"2026-02-03T09:49:13","modified_gmt":"2026-02-03T09:49:13","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/questium.fun\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a985d8 e-flex e-con-boxed e-con e-parent\" data-id=\"0a985d8\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-37c8d46 e-con-full e-flex e-con e-child\" data-id=\"37c8d46\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-143eee7 elementor-widget elementor-widget-html\" data-id=\"143eee7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n\/* ===== RESET AMAN ===== *\/\r\n#qs-header-wrapper *{\r\n  box-sizing:border-box;\r\n}\r\n\r\n\/* ===== HEADER ===== *\/\r\n#qs-header-wrapper{\r\n  position:fixed;\r\n  top:0;\r\n  left:0;\r\n  width:100%;\r\n  height:60px;\r\n  z-index:99999;\r\n\r\n  background:rgba(0,0,0,0.88);\r\n  backdrop-filter:blur(6px);\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n\r\n  padding:0 24px;\r\n}\r\n\r\n\/* ===== LOGO ===== *\/\r\n#qs-logo{\r\n  height:28px;\r\n  display:block;\r\n  filter:drop-shadow(0 0 6px rgba(148,0,0,.6));\r\n}\r\n\r\n\/* ===== MENU ===== *\/\r\n#qs-nav{\r\n  display:flex;\r\n  gap:26px;\r\n}\r\n\r\n#qs-nav a{\r\n  position:relative;\r\n  text-decoration:none;\r\n  color:#aaa;\r\n  font-size:12px;\r\n  letter-spacing:1.4px;\r\n  font-family:Arial, Helvetica, sans-serif;\r\n  padding:6px 0;\r\n  transition:color .3s ease;\r\n}\r\n\r\n\/* HOVER EFFECT *\/\r\n#qs-nav a::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  left:0;\r\n  bottom:-4px;\r\n  width:0%;\r\n  height:2px;\r\n  background:#940000;\r\n  box-shadow:0 0 8px rgba(148,0,0,.8);\r\n  transition:width .3s ease;\r\n}\r\n\r\n#qs-nav a:hover{\r\n  color:#fff;\r\n}\r\n\r\n#qs-nav a:hover::after{\r\n  width:100%;\r\n}\r\n\r\n\/* ACTIVE *\/\r\n#qs-nav a.active{\r\n  color:#fff;\r\n}\r\n\r\n#qs-nav a.active::after{\r\n  width:100%;\r\n}\r\n\r\n\/* MOBILE *\/\r\n@media(max-width:768px){\r\n  #qs-nav{display:none}\r\n}\r\n<\/style>\r\n\r\n<!-- ===== HEADER HTML ===== -->\r\n<div id=\"qs-header-wrapper\">\r\n\r\n  <!-- LOGO LEFT -->\r\n  <img decoding=\"async\"\r\n    id=\"qs-logo\"\r\n    src=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/QUESTIUM-LOGO1-scaled.png\"\r\n    alt=\"QUESTIUM Logo\"\r\n  >\r\n\r\n  <!-- MENU RIGHT -->\r\n  <nav id=\"qs-nav\">\r\n    <a href=\"#hero\">ENTER<\/a>\r\n    <a href=\"#world\">WORLD<\/a>\r\n    <a href=\"#characters\">CHARACTERS<\/a>\r\n    <a href=\"#system\">SYSTEM<\/a>\r\n    <a href=\"#roadmap\">ROADMAP<\/a>\r\n    <a href=\"#token\">TOKEN<\/a>\r\n  <\/nav>\r\n\r\n<\/div>\r\n\r\n<!-- ===== SCROLL ACTIVE SCRIPT ===== -->\r\n<script>\r\nconst qsLinks = document.querySelectorAll(\"#qs-nav a\");\r\nconst qsSections = Array.from(qsLinks).map(link =>\r\n  document.querySelector(link.getAttribute(\"href\"))\r\n);\r\n\r\nwindow.addEventListener(\"scroll\", () => {\r\n  let current = \"\";\r\n\r\n  qsSections.forEach(section => {\r\n    if(!section) return;\r\n    const sectionTop = section.offsetTop - 80;\r\n    if(scrollY >= sectionTop){\r\n      current = section.getAttribute(\"id\");\r\n    }\r\n  });\r\n\r\n  qsLinks.forEach(link => {\r\n    link.classList.remove(\"active\");\r\n    if(link.getAttribute(\"href\") === \"#\" + current){\r\n      link.classList.add(\"active\");\r\n    }\r\n  });\r\n});\r\n<\/script>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3af680e e-con-full e-flex e-con e-child\" data-id=\"3af680e\" data-element_type=\"container\" id=\"hero\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65d9fe3 elementor-widget elementor-widget-html\" data-id=\"65d9fe3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"qs-hero-scope\">\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;600;800&display=swap');\r\n\r\n\/* ===== SCOPE LOCK ===== *\/\r\n#qs-hero-scope{\r\n  position:relative;\r\n  isolation:isolate;\r\n}\r\n\r\n\/* ===== HERO ===== *\/\r\n#qs-hero{\r\n  min-height:100vh;\r\n  width:100%;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  text-align:center;\r\n  background:transparent;\r\n  color:#eaeaea;\r\n  font-family:'Orbitron', sans-serif;\r\n}\r\n\r\n\/* ===== INNER ===== *\/\r\n#qs-hero-inner{\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n\/* ===== LOGO WRAP ===== *\/\r\n#qs-logo-wrap{\r\n  position:relative;\r\n  margin:0 auto 28px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n}\r\n\r\n\/* ===== RADIAL LINES ===== *\/\r\n#qs-radial{\r\n  position:absolute;\r\n  inset:-60px;\r\n  border-radius:50%;\r\n  background:\r\n    repeating-conic-gradient(\r\n      from 0deg,\r\n      rgba(148,0,0,0) 0deg,\r\n      rgba(148,0,0,.28) 1deg,\r\n      rgba(148,0,0,0) 4deg\r\n    );\r\n  filter:blur(2px);\r\n  opacity:.35;\r\n  animation:qs-spin 26s linear infinite;\r\n}\r\n\r\n\/* ===== LOGO (NATURAL SIZE, NO STRETCH) ===== *\/\r\n#qs-logo{\r\n  position:relative;\r\n  z-index:2;\r\n\r\n  \/* IMPORTANT PART *\/\r\n  max-width:160px;   \/* batas aman, boleh kecilin\/besarin *\/\r\n  width:auto;\r\n  height:auto;\r\n\r\n  animation:none !important;\r\n  transform:none !important;\r\n\r\n  filter:\r\n    drop-shadow(0 0 10px rgba(148,0,0,.55))\r\n    drop-shadow(0 0 26px rgba(148,0,0,.35));\r\n}\r\n\r\n\/* ===== TITLE ===== *\/\r\n#qs-title{\r\n  font-size:clamp(42px,7vw,86px);\r\n  letter-spacing:3.5px;\r\n  margin-bottom:14px;\r\n  color:#f1f1f1;\r\n  animation:qs-glitch 3.2s infinite;\r\n}\r\n\r\n\/* ===== DESC ===== *\/\r\n#qs-desc{\r\n  font-size:13.5px;\r\n  line-height:1.7;\r\n  opacity:.75;\r\n  margin-bottom:26px;\r\n}\r\n\r\n\/* ===== CA BUTTON ===== *\/\r\n#qs-ca-btn{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  padding:14px 28px;\r\n  border-radius:999px;\r\n  cursor:pointer;\r\n  background:#4f0000;\r\n  color:#fff;\r\n  font-size:11.5px;\r\n  letter-spacing:1.6px;\r\n  box-shadow:\r\n    0 0 20px rgba(148,0,0,.6),\r\n    inset 0 0 10px rgba(0,0,0,.65);\r\n  transition:all .3s ease;\r\n}\r\n\r\n#qs-ca-btn:hover{\r\n  transform:translateY(-2px) scale(1.04);\r\n  box-shadow:\r\n    0 0 38px rgba(148,0,0,.9),\r\n    inset 0 0 14px rgba(0,0,0,.8);\r\n}\r\n\r\n#qs-ca{\r\n  opacity:.85;\r\n}\r\n\r\n\/* ===== COPY FEEDBACK ===== *\/\r\n#qs-copy-status{\r\n  font-size:10px;\r\n  opacity:.6;\r\n  margin-top:10px;\r\n}\r\n\r\n\/* ===== ANIMATIONS ===== *\/\r\n@keyframes qs-spin{\r\n  from{transform:rotate(0deg)}\r\n  to{transform:rotate(360deg)}\r\n}\r\n\r\n@keyframes qs-glitch{\r\n  0%{text-shadow:1px 0 #940000,-1px 0 #001f1f}\r\n  25%{text-shadow:-1px 0 #940000,1px 0 #001f1f}\r\n  50%{text-shadow:1px 0 #940000,-1px 0 #001f1f}\r\n  100%{text-shadow:0 0 16px rgba(148,0,0,.85)}\r\n}\r\n\r\n\/* ===== MOBILE ===== *\/\r\n@media(max-width:768px){\r\n  #qs-logo{\r\n    max-width:120px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section id=\"qs-hero\">\r\n  <div id=\"qs-hero-inner\">\r\n\r\n    <!-- LOGO -->\r\n    <div id=\"qs-logo-wrap\">\r\n      <div id=\"qs-radial\"><\/div>\r\n      <img decoding=\"async\"\r\n        id=\"qs-logo\"\r\n        src=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/QUESTIUM-LOGO2.png\"\r\n        alt=\"QUESTIUM Logo\"\r\n      >\r\n    <\/div>\r\n\r\n    <!-- CONTENT -->\r\n    <h1 id=\"qs-title\">QUESTIUM<\/h1>\r\n\r\n    <p id=\"qs-desc\">\r\n      A system built on intelligence, behavior, and time.<br>\r\n      Nothing here is random. Every action leaves a trace.\r\n    <\/p>\r\n\r\n    <!-- CA BUTTON -->\r\n    <div id=\"qs-ca-btn\" onclick=\"qsCopyCA()\">\r\n      <span>CA<\/span>\r\n      <span id=\"qs-ca\">A8Z8sSf2uoLrPAmGarkXpPZvSUHjjV54kpbgLr2Bpump<\/span>\r\n    <\/div>\r\n\r\n    <div id=\"qs-copy-status\"><\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\nfunction qsCopyCA(){\r\n  const ca = document.getElementById(\"qs-ca\").innerText;\r\n  navigator.clipboard.writeText(ca);\r\n  const status = document.getElementById(\"qs-copy-status\");\r\n  status.innerText = \"Contract Address copied\";\r\n  setTimeout(()=>status.innerText=\"\",2000);\r\n}\r\n<\/script>\r\n\r\n<\/div>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5945f91 e-flex e-con-boxed e-con e-parent\" data-id=\"5945f91\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-0ba13f7 e-con-full e-flex e-con e-child\" data-id=\"0ba13f7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-78bd10a elementor-widget elementor-widget-html\" data-id=\"78bd10a\" data-element_type=\"widget\" id=\"world\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"qs-world-scope\">\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;600;800&display=swap');\r\n\r\n\/* ================== SCOPE LOCK ================== *\/\r\n#qs-world-scope{\r\n  position:relative;\r\n  isolation:isolate;\r\n}\r\n\r\n\/* ================== SECTION ================== *\/\r\n#qs-world{\r\n  position:relative;\r\n  min-height:100vh;\r\n  width:100%;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:transparent;\r\n  color:#e6e6e6;\r\n  font-family:'Orbitron', sans-serif;\r\n}\r\n\r\n\/* ================== BACKGROUND EFFECT ================== *\/\r\n#qs-world::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  background:\r\n    radial-gradient(circle at center,\r\n      rgba(148,0,0,.22),\r\n      rgba(0,0,0,0) 65%\r\n    );\r\n  animation:qs-world-pulse 9s ease-in-out infinite;\r\n  z-index:1;\r\n}\r\n\r\n#qs-world::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  background:\r\n    linear-gradient(\r\n      120deg,\r\n      transparent 0%,\r\n      rgba(148,0,0,.14) 50%,\r\n      transparent 100%\r\n    );\r\n  animation:qs-world-sweep 14s linear infinite;\r\n  opacity:.4;\r\n  z-index:1;\r\n}\r\n\r\n\/* ================== INNER ================== *\/\r\n#qs-world-inner{\r\n  position:relative;\r\n  z-index:2;\r\n  max-width:1200px;\r\n  padding:120px 6vw;\r\n  text-align:center;\r\n}\r\n\r\n\/* ================== TEXT ================== *\/\r\n#qs-world-eyebrow{\r\n  font-size:11px;\r\n  letter-spacing:3px;\r\n  text-transform:uppercase;\r\n  opacity:.55;\r\n  margin-bottom:18px;\r\n}\r\n\r\n#qs-world-title{\r\n  font-size:clamp(36px,6vw,64px);\r\n  letter-spacing:2.5px;\r\n  margin-bottom:28px;\r\n  color:#f1f1f1;\r\n  animation:qs-world-glitch 3.6s infinite;\r\n}\r\n\r\n#qs-world-text{\r\n  max-width:820px;\r\n  margin:0 auto 60px;\r\n  font-size:14px;\r\n  line-height:1.9;\r\n  opacity:.8;\r\n}\r\n\r\n\/* ================== CARD ROW (DESKTOP) ================== *\/\r\n#qs-world-cards{\r\n  display:flex;\r\n  gap:28px;\r\n  justify-content:center;\r\n  margin-bottom:70px;\r\n\r\n  overflow-x:auto;\r\n  overflow-y:visible;\r\n  padding:20px 10px 30px;\r\n\r\n  scroll-snap-type:x mandatory;\r\n}\r\n\r\n#qs-world-cards::-webkit-scrollbar{\r\n  height:6px;\r\n}\r\n#qs-world-cards::-webkit-scrollbar-thumb{\r\n  background:#940000;\r\n  border-radius:6px;\r\n}\r\n\r\n\/* ================== CARD ================== *\/\r\n.qs-world-card{\r\n  min-width:280px;\r\n  max-width:280px;\r\n  scroll-snap-align:center;\r\n\r\n  position:relative;\r\n  padding:32px 28px;\r\n  border-radius:18px;\r\n\r\n  background:rgba(0,0,0,.6);\r\n  border:1px solid rgba(255,255,255,.08);\r\n\r\n  transition:\r\n    background .25s ease,\r\n    transform .25s ease,\r\n    box-shadow .25s ease,\r\n    border-color .25s ease;\r\n}\r\n\r\n\/* HOVER DESKTOP *\/\r\n.qs-world-card:hover{\r\n  background:#940000;\r\n  border-color:#940000;\r\n  transform:translateY(-8px);\r\n  box-shadow:0 18px 40px rgba(148,0,0,.55);\r\n}\r\n\r\n\/* CARD CONTENT *\/\r\n.qs-world-card h3{\r\n  font-size:16px;\r\n  letter-spacing:1.5px;\r\n  margin-bottom:14px;\r\n  color:#ffffff;\r\n}\r\n\r\n.qs-world-card p{\r\n  font-size:13px;\r\n  line-height:1.8;\r\n  color:#ddd;\r\n  opacity:.9;\r\n}\r\n\r\n.qs-world-card:hover p{\r\n  color:#ffffff;\r\n}\r\n\r\n\/* ================== CTA ================== *\/\r\n#qs-world-btn{\r\n  display:inline-block;\r\n  padding:16px 46px;\r\n  border-radius:999px;\r\n  background:#4f0000;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  font-size:12px;\r\n  letter-spacing:2.5px;\r\n\r\n  box-shadow:\r\n    0 0 28px rgba(148,0,0,.6),\r\n    inset 0 0 12px rgba(0,0,0,.6);\r\n\r\n  transition:all .35s ease;\r\n}\r\n\r\n#qs-world-btn:hover{\r\n  transform:translateY(-3px) scale(1.05);\r\n  box-shadow:\r\n    0 0 48px rgba(148,0,0,.9),\r\n    inset 0 0 16px rgba(0,0,0,.8);\r\n}\r\n\r\n\/* ================== ANIMATIONS ================== *\/\r\n@keyframes qs-world-pulse{\r\n  0%{opacity:.35}\r\n  50%{opacity:.6}\r\n  100%{opacity:.35}\r\n}\r\n\r\n@keyframes qs-world-sweep{\r\n  0%{transform:translateX(-100%)}\r\n  100%{transform:translateX(100%)}\r\n}\r\n\r\n@keyframes qs-world-glitch{\r\n  0%{text-shadow:1px 0 #940000,-1px 0 #001f1f}\r\n  25%{text-shadow:-1px 0 #940000,1px 0 #001f1f}\r\n  50%{text-shadow:1px 0 #940000,-1px 0 #001f1f}\r\n  100%{text-shadow:0 0 16px rgba(148,0,0,.85)}\r\n}\r\n\r\n\/* ================== MOBILE FIX (TANPA UBAH DESKTOP) ================== *\/\r\n@media(max-width:768px){\r\n\r\n  #qs-world-inner{\r\n    padding:100px 20px;\r\n  }\r\n\r\n  #qs-world-title{\r\n    font-size:32px;\r\n    line-height:1.2;\r\n  }\r\n\r\n  #qs-world-text{\r\n    font-size:13.5px;\r\n    margin-bottom:40px;\r\n  }\r\n\r\n  \/* CARD JADI VERTIKAL *\/\r\n  #qs-world-cards{\r\n    flex-direction:column;\r\n    align-items:stretch;\r\n    gap:18px;\r\n\r\n    overflow-x:visible;\r\n    padding:0;\r\n    margin-bottom:50px;\r\n  }\r\n\r\n  .qs-world-card{\r\n    min-width:100%;\r\n    max-width:100%;\r\n    padding:26px 22px;\r\n  }\r\n\r\n  #qs-world-btn{\r\n    width:100%;\r\n    max-width:320px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section id=\"world\">\r\n  <div id=\"qs-world\">\r\n    <div id=\"qs-world-inner\">\r\n\r\n      <div id=\"qs-world-eyebrow\">THE WORLD<\/div>\r\n      <h2 id=\"qs-world-title\">Inside Questium<\/h2>\r\n\r\n      <p id=\"qs-world-text\">\r\n        Questium is not a static environment. It is a system that grows,\r\n        adapts, and reshapes itself through interaction.\r\n        <br><br>\r\n        Time matters here. Behavior matters even more.\r\n        The system does not respond to noise or speculation \u2014 only to\r\n        consistent presence and meaningful participation.\r\n      <\/p>\r\n\r\n      <div id=\"qs-world-cards\">\r\n        <div class=\"qs-world-card\">\r\n          <h3>Intelligence Layer<\/h3>\r\n          <p>\r\n            Observes patterns, detects anomalies,\r\n            and adjusts the environment without interruption.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"qs-world-card\">\r\n          <h3>Behavior Layer<\/h3>\r\n          <p>\r\n            Tracks decisions, repetition, and intent.\r\n            Progress emerges from consistency, not speed.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"qs-world-card\">\r\n          <h3>Evolution Layer<\/h3>\r\n          <p>\r\n            The world never resets.\r\n            Past interactions permanently shape future states.\r\n          <\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <a href=\"#characters\" id=\"qs-world-btn\">\r\n        EXPLORE THE SYSTEM\r\n      <\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<\/div>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-de12cd4 e-flex e-con-boxed e-con e-parent\" data-id=\"de12cd4\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-b536791 e-con-full e-flex e-con e-child\" data-id=\"b536791\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bc2c0da elementor-widget elementor-widget-html\" data-id=\"bc2c0da\" data-element_type=\"widget\" id=\"characters\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"qs-character-scope\">\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;600;800&display=swap');\r\n\r\n\/* ================== SCOPE LOCK ================== *\/\r\n#qs-character-scope{\r\n  position:relative;\r\n  isolation:isolate;\r\n  font-family:'Orbitron', sans-serif;\r\n  color:#e6e6e6;\r\n}\r\n\r\n\/* ================== SECTION ================== *\/\r\n#qs-characters{\r\n  position:relative;\r\n  min-height:100vh;\r\n  display:flex;\r\n  justify-content:center;\r\n  background:transparent;\r\n}\r\n\r\n\/* ================== INNER ================== *\/\r\n#qs-characters-inner{\r\n  position:relative;\r\n  z-index:2;\r\n  max-width:1500px;\r\n  padding:120px 6vw;\r\n  text-align:center;\r\n}\r\n\r\n\/* ================== TITLE ================== *\/\r\n#qs-characters-eyebrow{\r\n  font-size:11px;\r\n  letter-spacing:3px;\r\n  opacity:.55;\r\n  margin-bottom:18px;\r\n}\r\n#qs-characters-title{\r\n  font-size:clamp(36px,6vw,64px);\r\n  letter-spacing:2.5px;\r\n  margin-bottom:26px;\r\n}\r\n#qs-characters-desc{\r\n  max-width:860px;\r\n  margin:0 auto 60px;\r\n  font-size:14px;\r\n  line-height:1.9;\r\n  opacity:.78;\r\n}\r\n\r\n\/* ================== CARD ROW (DESKTOP DEFAULT) ================== *\/\r\n#qs-character-cards{\r\n  display:flex;\r\n  gap:32px;\r\n  overflow-x:auto;\r\n  overflow-y:visible;\r\n  padding:30px 10px 40px;\r\n  scroll-snap-type:x mandatory;\r\n}\r\n#qs-character-cards::-webkit-scrollbar{\r\n  height:6px;\r\n}\r\n#qs-character-cards::-webkit-scrollbar-thumb{\r\n  background:#940000;\r\n  border-radius:6px;\r\n}\r\n\r\n\/* ================== CARD ================== *\/\r\n.qs-character-card{\r\n  min-width:300px;\r\n  max-width:300px;\r\n  scroll-snap-align:center;\r\n  background:rgba(0,0,0,.65);\r\n  border:1px solid rgba(255,255,255,.08);\r\n  border-radius:20px;\r\n  padding:26px 22px 30px;\r\n  cursor:pointer;\r\n  animation:qs-float 6s ease-in-out infinite;\r\n  transition:\r\n    transform .3s ease,\r\n    box-shadow .3s ease,\r\n    background .25s ease,\r\n    border-color .25s ease;\r\n}\r\n.qs-character-card:nth-child(even){\r\n  animation-delay:3s;\r\n}\r\n.qs-character-card:hover{\r\n  background:#940000;\r\n  border-color:#940000;\r\n  transform:translateY(-10px) scale(1.03);\r\n  box-shadow:0 20px 48px rgba(148,0,0,.6);\r\n}\r\n\r\n\/* ================== IMAGE ================== *\/\r\n.qs-character-img{\r\n  width:100%;\r\n  height:260px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  margin-bottom:20px;\r\n}\r\n.qs-character-img img{\r\n  max-width:100%;\r\n  max-height:100%;\r\n  object-fit:contain;\r\n  filter:drop-shadow(0 0 14px rgba(0,0,0,.85));\r\n}\r\n\r\n\/* ================== TEXT ================== *\/\r\n.qs-character-name{\r\n  font-size:16px;\r\n  letter-spacing:1.6px;\r\n  margin-bottom:6px;\r\n  color:#fff;\r\n}\r\n.qs-character-role{\r\n  font-size:10px;\r\n  letter-spacing:2px;\r\n  text-transform:uppercase;\r\n  opacity:.75;\r\n  margin-bottom:12px;\r\n}\r\n.qs-character-desc{\r\n  font-size:12.5px;\r\n  line-height:1.8;\r\n  opacity:.9;\r\n}\r\n\r\n\/* ================== FLOAT ================== *\/\r\n@keyframes qs-float{\r\n  0%{transform:translateY(0)}\r\n  50%{transform:translateY(-6px)}\r\n  100%{transform:translateY(0)}\r\n}\r\n\r\n\/* =====================================================\r\n   \ud83d\udcf1 MOBILE ONLY \u2014 RAPI, SWIPE, 8 KARAKTER UTUH\r\n   DESKTOP & EFFECT DESKTOP TIDAK BERUBAH\r\n   ===================================================== *\/\r\n@media(max-width:768px){\r\n\r\n  #qs-characters-inner{\r\n    padding:100px 16px;\r\n  }\r\n\r\n  #qs-characters-title{\r\n    font-size:32px;\r\n  }\r\n\r\n  #qs-characters-desc{\r\n    font-size:13.5px;\r\n    margin-bottom:40px;\r\n  }\r\n\r\n  \/* SWIPE TRACK *\/\r\n  #qs-character-cards{\r\n    gap:18px;\r\n    padding:20px 12vw 40px; \/* center snap *\/\r\n    -webkit-overflow-scrolling:touch;\r\n  }\r\n\r\n  \/* CARD MOBILE *\/\r\n  .qs-character-card{\r\n    min-width:78vw;\r\n    max-width:78vw;\r\n    animation:none;              \/* matikan float di mobile *\/\r\n    transform:scale(.94);\r\n  }\r\n\r\n  .qs-character-card:active{\r\n    transform:scale(1);\r\n  }\r\n\r\n  .qs-character-img{\r\n    height:230px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section id=\"characters\">\r\n  <div id=\"qs-characters\">\r\n    <div id=\"qs-characters-inner\">\r\n\r\n      <div id=\"qs-characters-eyebrow\">CHARACTERS<\/div>\r\n      <h2 id=\"qs-characters-title\">Entities of<BR>Questium<\/h2>\r\n      <p id=\"qs-characters-desc\">\r\n        Each entity represents a function inside the system.\r\n     <BR>Swipe to explore. Tap to inspect.\r\n      <\/p>\r\n\r\n      <div id=\"qs-character-cards\">\r\n\r\n        <!-- 1 -->\r\n        <div class=\"qs-character-card\"\r\n          data-name=\"Varyn Blackcell\"\r\n          data-role=\"System Vanguard\"\r\n          data-desc=\"Appears only when the system faces irreversible threats.\"\r\n          data-img=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/1.VARYN-BLACKCELL.png\">\r\n          <div class=\"qs-character-img\"><img decoding=\"async\" src=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/1.VARYN-BLACKCELL.png\"><\/div>\r\n          <div class=\"qs-character-name\">Varyn Blackcell<\/div>\r\n          <div class=\"qs-character-role\">System Vanguard<\/div>\r\n          <div class=\"qs-character-desc\">Appears only when the system faces irreversible threats.<\/div>\r\n        <\/div>\r\n\r\n        <!-- 2 -->\r\n        <div class=\"qs-character-card\"\r\n          data-name=\"Kitsune Null\"\r\n          data-role=\"Identity Breaker\"\r\n          data-desc=\"Exists between sessions. No persistent face or name.\"\r\n          data-img=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/2.KITSUNE-NULL.png\">\r\n          <div class=\"qs-character-img\"><img decoding=\"async\" src=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/2.KITSUNE-NULL.png\"><\/div>\r\n          <div class=\"qs-character-name\">Kitsune Null<\/div>\r\n          <div class=\"qs-character-role\">Identity Breaker<\/div>\r\n          <div class=\"qs-character-desc\">Exists between sessions. No persistent face or name.<\/div>\r\n        <\/div>\r\n\r\n        <!-- 3 -->\r\n        <div class=\"qs-character-card\"\r\n          data-name=\"Hex Harrow\"\r\n          data-role=\"Signal Runner\"\r\n          data-desc=\"Moves information through unstable channels.\"\r\n          data-img=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/3.HEX-HARROW.png\">\r\n          <div class=\"qs-character-img\"><img decoding=\"async\" src=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/3.HEX-HARROW.png\"><\/div>\r\n          <div class=\"qs-character-name\">Hex Harrow<\/div>\r\n          <div class=\"qs-character-role\">Signal Runner<\/div>\r\n          <div class=\"qs-character-desc\">Moves information through unstable channels.<\/div>\r\n        <\/div>\r\n\r\n        <!-- 4 -->\r\n        <div class=\"qs-character-card\"\r\n          data-name=\"Elara Static\"\r\n          data-role=\"Echo Listener\"\r\n          data-desc=\"Listens to fragments the system failed to erase.\"\r\n          data-img=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/4.ELARA-STATIC.png\">\r\n          <div class=\"qs-character-img\"><img decoding=\"async\" src=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/4.ELARA-STATIC.png\"><\/div>\r\n          <div class=\"qs-character-name\">Elara Static<\/div>\r\n          <div class=\"qs-character-role\">Echo Listener<\/div>\r\n          <div class=\"qs-character-desc\">Listens to fragments the system failed to erase.<\/div>\r\n        <\/div>\r\n\r\n        <!-- 5 -->\r\n        <div class=\"qs-character-card\"\r\n          data-name=\"Rift Noir\"\r\n          data-role=\"Urban Operative\"\r\n          data-desc=\"Operates where rules decay and systems fracture.\"\r\n          data-img=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/5.RIFT-NOIR.png\">\r\n          <div class=\"qs-character-img\"><img decoding=\"async\" src=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/5.RIFT-NOIR.png\"><\/div>\r\n          <div class=\"qs-character-name\">Rift Noir<\/div>\r\n          <div class=\"qs-character-role\">Urban Operative<\/div>\r\n          <div class=\"qs-character-desc\">Operates where rules decay and systems fracture.<\/div>\r\n        <\/div>\r\n\r\n        <!-- 6 -->\r\n        <div class=\"qs-character-card\"\r\n          data-name=\"Pixel Spark\"\r\n          data-role=\"Energy Catalyst\"\r\n          data-desc=\"Converts chaos into usable momentum.\"\r\n          data-img=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/6.PIXEL-SPARK.png\">\r\n          <div class=\"qs-character-img\"><img decoding=\"async\" src=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/6.PIXEL-SPARK.png\"><\/div>\r\n          <div class=\"qs-character-name\">Pixel Spark<\/div>\r\n          <div class=\"qs-character-role\">Energy Catalyst<\/div>\r\n          <div class=\"qs-character-desc\">Converts chaos into usable momentum.<\/div>\r\n        <\/div>\r\n\r\n        <!-- 7 -->\r\n        <div class=\"qs-character-card\"\r\n          data-name=\"Ash Vandal\"\r\n          data-role=\"Disruption Unit\"\r\n          data-desc=\"Destroys outdated structures without warning.\"\r\n          data-img=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/7.ASH-VANDAL.png\">\r\n          <div class=\"qs-character-img\"><img decoding=\"async\" src=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/7.ASH-VANDAL.png\"><\/div>\r\n          <div class=\"qs-character-name\">Ash Vandal<\/div>\r\n          <div class=\"qs-character-role\">Disruption Unit<\/div>\r\n          <div class=\"qs-character-desc\">Destroys outdated structures without warning.<\/div>\r\n        <\/div>\r\n\r\n        <!-- 8 -->\r\n        <div class=\"qs-character-card\"\r\n          data-name=\"Neon Veil\"\r\n          data-role=\"Signal Mirage\"\r\n          data-desc=\"Distorts perception and redirects attention.\"\r\n          data-img=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/8.NEON-VEIL.png\">\r\n          <div class=\"qs-character-img\"><img decoding=\"async\" src=\"http:\/\/questium.fun\/wp-content\/uploads\/2025\/12\/8.NEON-VEIL.png\"><\/div>\r\n          <div class=\"qs-character-name\">Neon Veil<\/div>\r\n          <div class=\"qs-character-role\">Signal Mirage<\/div>\r\n          <div class=\"qs-character-desc\">Distorts perception and redirects attention.<\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<\/div>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-488eaab e-flex e-con-boxed e-con e-parent\" data-id=\"488eaab\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2deb8cb e-con-full e-flex e-con e-child\" data-id=\"2deb8cb\" data-element_type=\"container\" id=\"system\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63ba8e0 elementor-widget elementor-widget-html\" data-id=\"63ba8e0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"qs-system-seq-scope\">\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;600&display=swap');\r\n\r\n\/* ================= SCOPE ================= *\/\r\n#qs-system-seq-scope{\r\n  position:relative;\r\n  isolation:isolate;\r\n  font-family:'Orbitron', sans-serif;\r\n  color:#e5e5e5;\r\n}\r\n\r\n\/* ================= SECTION ================= *\/\r\n#qs-system-seq{\r\n  position:relative;\r\n  min-height:100vh;\r\n  display:flex;\r\n  justify-content:center;\r\n  background:transparent;\r\n}\r\n\r\n\/* ================= INNER ================= *\/\r\n#qs-system-seq-inner{\r\n  width:100%;\r\n  max-width:900px;\r\n  padding:140px 6vw;\r\n}\r\n\r\n\/* ================= HEADER ================= *\/\r\n#qs-system-seq-eyebrow{\r\n  font-size:11px;\r\n  letter-spacing:3px;\r\n  opacity:.55;\r\n  margin-bottom:14px;\r\n}\r\n\r\n#qs-system-seq-title{\r\n  font-size:clamp(34px,5vw,56px);\r\n  letter-spacing:2px;\r\n  margin-bottom:40px;\r\n}\r\n\r\n#qs-system-seq-desc{\r\n  font-size:14px;\r\n  line-height:1.9;\r\n  opacity:.8;\r\n  max-width:720px;\r\n  margin-bottom:80px;\r\n}\r\n\r\n\/* ================= CARD ================= *\/\r\n.qs-system-step{\r\n  position:relative;\r\n  padding:34px 28px 34px 88px;\r\n  margin-bottom:36px;\r\n\r\n  background:rgba(0,0,0,.55);\r\n  border:1px solid rgba(255,255,255,.08);\r\n  border-radius:18px;\r\n\r\n  opacity:0;\r\n  transform:translateY(40px);\r\n  transition:\r\n    opacity .7s ease,\r\n    transform .7s ease,\r\n    border-color .3s ease;\r\n}\r\n\r\n\/* ACTIVE (ON SCROLL) *\/\r\n.qs-system-step.active{\r\n  opacity:1;\r\n  transform:translateY(0);\r\n  border-color:#940000;\r\n}\r\n\r\n\/* NUMBER *\/\r\n.qs-system-no{\r\n  position:absolute;\r\n  top:32px;\r\n  left:28px;\r\n\r\n  font-size:22px;\r\n  letter-spacing:2px;\r\n  color:#940000;\r\n  opacity:.9;\r\n}\r\n\r\n\/* CONTENT *\/\r\n.qs-system-step h4{\r\n  font-size:16px;\r\n  letter-spacing:1.4px;\r\n  margin-bottom:10px;\r\n}\r\n\r\n.qs-system-step p{\r\n  font-size:13px;\r\n  line-height:1.8;\r\n  opacity:.8;\r\n}\r\n\r\n\/* ================= CTA ================= *\/\r\n#qs-system-seq-btn{\r\n  margin-top:70px;\r\n  display:inline-block;\r\n  padding:14px 44px;\r\n  border-radius:999px;\r\n  border:1px solid rgba(148,0,0,.6);\r\n  background:transparent;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  font-size:11.5px;\r\n  letter-spacing:2.5px;\r\n  transition:all .3s ease;\r\n}\r\n\r\n#qs-system-seq-btn:hover{\r\n  background:#940000;\r\n  box-shadow:0 0 30px rgba(148,0,0,.7);\r\n}\r\n\r\n\/* ================= MOBILE ================= *\/\r\n@media(max-width:768px){\r\n  .qs-system-step{\r\n    padding:28px 22px 28px 74px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section id=\"system\">\r\n  <div id=\"qs-system-seq\">\r\n    <div id=\"qs-system-seq-inner\">\r\n\r\n      <div id=\"qs-system-seq-eyebrow\">SYSTEM FLOW<\/div>\r\n      <h2 id=\"qs-system-seq-title\">How Questium Thinks<\/h2>\r\n\r\n      <p id=\"qs-system-seq-desc\">\r\n        Questium operates through a sequence of internal processes.\r\n        Each stage observes, interprets, and records behavior over time.\r\n        Nothing happens instantly. Everything compounds.\r\n      <\/p>\r\n\r\n      <!-- STEP 01 -->\r\n      <div class=\"qs-system-step\">\r\n        <div class=\"qs-system-no\">01<\/div>\r\n        <h4>Observation<\/h4>\r\n        <p>\r\n          The system monitors presence, repetition,\r\n          and interaction without interrupting flow.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <!-- STEP 02 -->\r\n      <div class=\"qs-system-step\">\r\n        <div class=\"qs-system-no\">02<\/div>\r\n        <h4>Pattern Recognition<\/h4>\r\n        <p>\r\n          Raw behavior is translated into long-term patterns,\r\n          filtering noise from meaningful signals.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <!-- STEP 03 -->\r\n      <div class=\"qs-system-step\">\r\n        <div class=\"qs-system-no\">03<\/div>\r\n        <h4>Memory Encoding<\/h4>\r\n        <p>\r\n          Significant actions are preserved.\r\n          The system does not forget what shapes its evolution.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <!-- STEP 04 -->\r\n      <div class=\"qs-system-step\">\r\n        <div class=\"qs-system-no\">04<\/div>\r\n        <h4>Adaptive Response<\/h4>\r\n        <p>\r\n          Access, resistance, and opportunity adjust\r\n          based on accumulated history.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <!-- CTA -->\r\n      <a href=\"#token\" id=\"qs-system-seq-btn\">\r\n        ACCESS SYSTEM CORE\r\n      <\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\nconst qsSteps = document.querySelectorAll(\".qs-system-step\");\r\n\r\nconst qsObserver = new IntersectionObserver(\r\n  entries => {\r\n    entries.forEach(entry=>{\r\n      if(entry.isIntersecting){\r\n        entry.target.classList.add(\"active\");\r\n      }\r\n    });\r\n  },\r\n  { threshold: 0.2 }\r\n);\r\n\r\nqsSteps.forEach(step => qsObserver.observe(step));\r\n<\/script>\r\n\r\n<\/div>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ab7a5d7 e-flex e-con-boxed e-con e-parent\" data-id=\"ab7a5d7\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-6beb9f4 e-con-full e-flex e-con e-child\" data-id=\"6beb9f4\" data-element_type=\"container\" id=\"roadmap\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f8a0fe3 elementor-widget elementor-widget-html\" data-id=\"f8a0fe3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"qs-roadmap-center-scope\">\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;600&display=swap');\r\n\r\n\/* ================= SCOPE ================= *\/\r\n#qs-roadmap-center-scope{\r\n  position:relative;\r\n  isolation:isolate;\r\n  font-family:'Orbitron', sans-serif;\r\n  color:#e6e6e6;\r\n}\r\n\r\n\/* ================= SECTION ================= *\/\r\n#qs-roadmap-center{\r\n  min-height:100vh;\r\n  display:flex;\r\n  justify-content:center;\r\n  align-items:center;\r\n  background:transparent;\r\n}\r\n\r\n\/* ================= INNER ================= *\/\r\n#qs-roadmap-center-inner{\r\n  width:100%;\r\n  max-width:900px;\r\n  padding:140px 6vw;\r\n  text-align:center;\r\n}\r\n\r\n\/* ================= HEADER ================= *\/\r\n#qs-roadmap-eyebrow{\r\n  font-size:11px;\r\n  letter-spacing:3px;\r\n  opacity:.55;\r\n  margin-bottom:14px;\r\n}\r\n\r\n#qs-roadmap-title{\r\n  font-size:clamp(34px,5vw,56px);\r\n  letter-spacing:2px;\r\n  margin-bottom:22px;\r\n}\r\n\r\n#qs-roadmap-desc{\r\n  font-size:14px;\r\n  line-height:1.9;\r\n  opacity:.8;\r\n  max-width:720px;\r\n  margin:0 auto 70px;\r\n}\r\n\r\n\/* ================= SLIDER ================= *\/\r\n#qs-roadmap-slider{\r\n  position:relative;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n}\r\n\r\n\/* ================= CARD ================= *\/\r\n.qs-roadmap-card{\r\n  width:340px;\r\n  min-height:380px;\r\n  background:rgba(0,0,0,.65);\r\n  border:1px solid rgba(255,255,255,.08);\r\n  border-radius:22px;\r\n  padding:34px 30px;\r\n\r\n  display:none;\r\n  flex-direction:column;\r\n  justify-content:space-between;\r\n\r\n  animation:qs-slide-in .6s ease forwards;\r\n}\r\n\r\n\/* ACTIVE CARD *\/\r\n.qs-roadmap-card.active{\r\n  display:flex;\r\n}\r\n\r\n\/* ================= CONTENT ================= *\/\r\n.qs-roadmap-step{\r\n  font-size:32px;\r\n  letter-spacing:2px;\r\n  color:#940000;\r\n}\r\n\r\n.qs-roadmap-card h4{\r\n  font-size:17px;\r\n  letter-spacing:1.4px;\r\n  margin:18px 0 12px;\r\n}\r\n\r\n.qs-roadmap-card p{\r\n  font-size:13px;\r\n  line-height:1.8;\r\n  opacity:.85;\r\n}\r\n\r\n\/* ================= ARROWS ================= *\/\r\n.qs-roadmap-arrow{\r\n  position:absolute;\r\n  top:50%;\r\n  transform:translateY(-50%);\r\n  width:44px;\r\n  height:44px;\r\n  border-radius:50%;\r\n  border:1px solid rgba(148,0,0,.6);\r\n  background:rgba(0,0,0,.6);\r\n  color:#fff;\r\n  cursor:pointer;\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  transition:all .3s ease;\r\n}\r\n\r\n.qs-roadmap-arrow:hover{\r\n  background:#940000;\r\n  box-shadow:0 0 30px rgba(148,0,0,.8);\r\n}\r\n\r\n.qs-roadmap-arrow.left{ left:-70px; }\r\n.qs-roadmap-arrow.right{ right:-70px; }\r\n\r\n\/* ================= ANIM ================= *\/\r\n@keyframes qs-slide-in{\r\n  from{\r\n    opacity:0;\r\n    transform:translateY(30px) scale(.95);\r\n  }\r\n  to{\r\n    opacity:1;\r\n    transform:translateY(0) scale(1);\r\n  }\r\n}\r\n\r\n\/* ================= MOBILE ================= *\/\r\n@media(max-width:768px){\r\n  .qs-roadmap-arrow.left{ left:-10px; }\r\n  .qs-roadmap-arrow.right{ right:-10px; }\r\n\r\n  .qs-roadmap-card{\r\n    width:280px;\r\n    min-height:360px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section id=\"roadmap\">\r\n  <div id=\"qs-roadmap-center\">\r\n    <div id=\"qs-roadmap-center-inner\">\r\n\r\n      <!-- HEADER -->\r\n      <div id=\"qs-roadmap-eyebrow\">ROADMAP<\/div>\r\n      <h2 id=\"qs-roadmap-title\">System Progression<\/h2>\r\n      <p id=\"qs-roadmap-desc\">\r\n        Questium evolves through structured phases.\r\n        Each step introduces new behaviors, mechanics,\r\n        and system depth over time.\r\n      <\/p>\r\n\r\n      <!-- SLIDER -->\r\n      <div id=\"qs-roadmap-slider\">\r\n\r\n        <div class=\"qs-roadmap-arrow left\" onclick=\"qsPrev()\">\u2039<\/div>\r\n\r\n        <!-- CARD 1 -->\r\n        <div class=\"qs-roadmap-card active\">\r\n          <div class=\"qs-roadmap-step\">01<\/div>\r\n          <h4>System Awakening<\/h4>\r\n          <p>\r\n            Core identity established.\r\n            World boundaries and initial narrative defined.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <!-- CARD 2 -->\r\n        <div class=\"qs-roadmap-card\">\r\n          <div class=\"qs-roadmap-step\">02<\/div>\r\n          <h4>Entity Deployment<\/h4>\r\n          <p>\r\n            Characters introduced as functional roles\r\n            inside the system.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <!-- CARD 3 -->\r\n        <div class=\"qs-roadmap-card\">\r\n          <div class=\"qs-roadmap-step\">03<\/div>\r\n          <h4>Behavior Mapping<\/h4>\r\n          <p>\r\n            Long-term interaction patterns begin shaping\r\n            internal logic.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <!-- CARD 4 -->\r\n        <div class=\"qs-roadmap-card\">\r\n          <div class=\"qs-roadmap-step\">04<\/div>\r\n          <h4>Adaptive Logic<\/h4>\r\n          <p>\r\n            System responses adjust based on accumulated\r\n            behavioral history.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <!-- CARD 5 -->\r\n        <div class=\"qs-roadmap-card\">\r\n          <div class=\"qs-roadmap-step\">05<\/div>\r\n          <h4>System Expansion<\/h4>\r\n          <p>\r\n            New layers and pathways unlock\r\n            through sustained interaction.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <!-- CARD 6 -->\r\n        <div class=\"qs-roadmap-card\">\r\n          <div class=\"qs-roadmap-step\">06<\/div>\r\n          <h4>Persistent World<\/h4>\r\n          <p>\r\n            Questium stabilizes as a living system\r\n            shaped by history and participation.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"qs-roadmap-arrow right\" onclick=\"qsNext()\">\u203a<\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\nconst qsCards = document.querySelectorAll(\".qs-roadmap-card\");\r\nlet qsIndex = 0;\r\n\r\nfunction showCard(index){\r\n  qsCards.forEach(card => card.classList.remove(\"active\"));\r\n  qsCards[index].classList.add(\"active\");\r\n}\r\n\r\nfunction qsNext(){\r\n  qsIndex = (qsIndex + 1) % qsCards.length;\r\n  showCard(qsIndex);\r\n}\r\n\r\nfunction qsPrev(){\r\n  qsIndex = (qsIndex - 1 + qsCards.length) % qsCards.length;\r\n  showCard(qsIndex);\r\n}\r\n<\/script>\r\n\r\n<\/div>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9965809 e-flex e-con-boxed e-con e-parent\" data-id=\"9965809\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-bff4e98 e-con-full e-flex e-con e-child\" data-id=\"bff4e98\" data-element_type=\"container\" id=\"token\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c3b7f5c elementor-widget elementor-widget-html\" data-id=\"c3b7f5c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"qs-token-scope\">\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;600&display=swap');\r\n\r\n\/* ================= SCOPE ================= *\/\r\n#qs-token-scope{\r\n  position:relative;\r\n  isolation:isolate;\r\n  font-family:'Orbitron', sans-serif;\r\n  color:#e6e6e6;\r\n  text-align:center;\r\n}\r\n\r\n\/* ================= SECTION ================= *\/\r\n#qs-token{\r\n  position:relative;\r\n  min-height:100vh;\r\n  display:flex;\r\n  justify-content:center;\r\n  background:transparent;\r\n}\r\n\r\n\/* ================= BACKGROUND EFFECT ================= *\/\r\n#qs-token::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  background:\r\n    radial-gradient(circle at top,\r\n      rgba(148,0,0,.15),\r\n      rgba(0,0,0,0) 65%\r\n    );\r\n  z-index:0;\r\n}\r\n\r\n\/* ================= INNER ================= *\/\r\n#qs-token-inner{\r\n  position:relative;\r\n  z-index:2;\r\n  width:100%;\r\n  max-width:1100px;\r\n  padding:140px 6vw;\r\n}\r\n\r\n\/* ================= HEADER ================= *\/\r\n#qs-token-eyebrow{\r\n  font-size:11px;\r\n  letter-spacing:3px;\r\n  opacity:.55;\r\n  margin-bottom:14px;\r\n}\r\n\r\n#qs-token-title{\r\n  font-size:clamp(34px,5vw,56px);\r\n  letter-spacing:2px;\r\n  margin-bottom:28px;\r\n}\r\n\r\n#qs-token-desc{\r\n  max-width:760px;\r\n  margin:0 auto 80px;\r\n  font-size:14px;\r\n  line-height:1.9;\r\n  opacity:.8;\r\n}\r\n\r\n\/* ================= TOKEN GRID ================= *\/\r\n#qs-token-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:28px;\r\n  margin-bottom:90px;\r\n  justify-items:center;\r\n}\r\n\r\n\/* ================= TOKEN CARD ================= *\/\r\n.qs-token-card{\r\n  width:100%;\r\n  max-width:300px;\r\n  background:rgba(0,0,0,.6);\r\n  border:1px solid rgba(255,255,255,.08);\r\n  border-radius:20px;\r\n  padding:34px 30px;\r\n\r\n  transition:\r\n    background .3s ease,\r\n    transform .35s ease,\r\n    box-shadow .35s ease,\r\n    border-color .35s ease;\r\n}\r\n\r\n\/* HOVER CARD *\/\r\n.qs-token-card:hover{\r\n  background:linear-gradient(\r\n    160deg,\r\n    rgba(148,0,0,.55),\r\n    rgba(0,0,0,.75)\r\n  );\r\n  border-color:#940000;\r\n  transform:translateY(-10px) scale(1.03);\r\n  box-shadow:0 20px 50px rgba(148,0,0,.45);\r\n}\r\n\r\n\/* ================= TOKEN CONTENT ================= *\/\r\n.qs-token-label{\r\n  font-size:11px;\r\n  letter-spacing:2.5px;\r\n  opacity:.65;\r\n  margin-bottom:14px;\r\n}\r\n\r\n.qs-token-value{\r\n  font-size:18px;\r\n  letter-spacing:1.5px;\r\n  cursor:pointer;\r\n  user-select:none;\r\n}\r\n\r\n\/* ================= CTA ================= *\/\r\n#qs-cta{\r\n  position:relative;\r\n  padding:90px 60px;\r\n  border-radius:28px;\r\n  background:linear-gradient(\r\n    135deg,\r\n    rgba(148,0,0,.22),\r\n    rgba(0,0,0,.8)\r\n  );\r\n  border:1px solid rgba(255,255,255,.12);\r\n}\r\n\r\n#qs-cta h3{\r\n  font-size:clamp(26px,4vw,40px);\r\n  letter-spacing:2px;\r\n  margin-bottom:18px;\r\n}\r\n\r\n#qs-cta p{\r\n  max-width:640px;\r\n  margin:0 auto 44px;\r\n  font-size:14px;\r\n  line-height:1.9;\r\n  opacity:.85;\r\n}\r\n\r\n\/* ================= CTA BUTTON GROUP ================= *\/\r\n#qs-cta-actions{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  justify-content:center;\r\n  gap:14px;\r\n}\r\n\r\n\/* CTA BUTTON *\/\r\n.qs-cta-btn{\r\n  padding:14px 26px;\r\n  border-radius:999px;\r\n  background:rgba(0,0,0,.6);\r\n  border:1px solid rgba(148,0,0,.6);\r\n  color:#fff;\r\n  text-decoration:none;\r\n  font-size:11px;\r\n  letter-spacing:2.5px;\r\n\r\n  transition:all .3s ease;\r\n}\r\n\r\n.qs-cta-btn:hover{\r\n  background:#940000;\r\n  box-shadow:0 0 26px rgba(148,0,0,.8);\r\n  transform:translateY(-3px);\r\n}\r\n\r\n\/* ================= MOBILE ================= *\/\r\n@media(max-width:900px){\r\n  #qs-token-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n  #qs-cta{\r\n    padding:70px 30px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section id=\"token\">\r\n  <div id=\"qs-token\">\r\n    <div id=\"qs-token-inner\">\r\n\r\n      <!-- HEADER -->\r\n      <div id=\"qs-token-eyebrow\">TOKEN<\/div>\r\n      <h2 id=\"qs-token-title\">QUESTIUM Asset Layer<\/h2>\r\n      <p id=\"qs-token-desc\">\r\n        QUESTIUM is not designed as a speculative instrument.\r\n        It functions as an access layer within the system,\r\n        enabling participation, progression, and interaction.\r\n      <\/p>\r\n\r\n      <!-- TOKEN GRID -->\r\n      <div id=\"qs-token-grid\">\r\n\r\n        <div class=\"qs-token-card\">\r\n          <div class=\"qs-token-label\">Network<\/div>\r\n          <div class=\"qs-token-value scramble\">Solana<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"qs-token-card\">\r\n          <div class=\"qs-token-label\">Total Supply<\/div>\r\n          <div class=\"qs-token-value scramble\">1,000,000,000 QUESTIUM<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"qs-token-card\">\r\n          <div class=\"qs-token-label\">Launch Type<\/div>\r\n          <div class=\"qs-token-value scramble\">Fair Launch<\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <!-- CTA -->\r\n      <div id=\"qs-cta\">\r\n        <h3>Enter the System<\/h3>\r\n        <p>\r\n          Participation defines progression.\r\n          The system does not reward speed \u2014\r\n          it responds to consistency.\r\n        <\/p>\r\n\r\n        <div id=\"qs-cta-actions\">\r\n          <a href=\"https:\/\/x.com\/theQuestium\" target=\"_blank\" class=\"qs-cta-btn\">TWITTER<\/a>\r\n          <a href=\"https:\/\/t.me\/thequestium\" target=\"_blank\" class=\"qs-cta-btn\">TELEGRAM<\/a>\r\n          <a href=\"https:\/\/dexscreener.com\/solana\/A8Z8sSf2uoLrPAmGarkXpPZvSUHjjV54kpbgLr2Bpump\" target=\"_blank\" class=\"qs-cta-btn\">DEXSCREENER<\/a>\r\n          <a href=\"https:\/\/pump.fun\/coin\/A8Z8sSf2uoLrPAmGarkXpPZvSUHjjV54kpbgLr2Bpump\" target=\"_blank\" class=\"qs-cta-btn\">PUMP.FUN<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\nconst chars = \"!<>-_\\\\\/[]{}\u2014=+*^?#________\";\r\n\r\ndocument.querySelectorAll(\".scramble\").forEach(el=>{\r\n  const original = el.innerText;\r\n  let busy = false;\r\n\r\n  el.addEventListener(\"click\", ()=>{\r\n    if(busy) return;\r\n    busy = true;\r\n\r\n    let iteration = 0;\r\n    const text = original.split(\"\");\r\n\r\n    const interval = setInterval(()=>{\r\n      el.innerText = text.map((char, index)=>{\r\n        if(index < iteration){\r\n          return original[index];\r\n        }\r\n        return chars[Math.floor(Math.random() * chars.length)];\r\n      }).join(\"\");\r\n\r\n      iteration += 1\/3;\r\n\r\n      if(iteration >= text.length){\r\n        clearInterval(interval);\r\n        el.innerText = original;\r\n        busy = false;\r\n      }\r\n    }, 28);\r\n  });\r\n});\r\n<\/script>\r\n\r\n<\/div>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c50b234 e-flex e-con-boxed e-con e-parent\" data-id=\"c50b234\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-5e2b2f2 e-con-full e-flex e-con e-child\" data-id=\"5e2b2f2\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f30245f elementor-widget elementor-widget-html\" data-id=\"f30245f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<footer style=\"\r\n  padding:4px 4px;\r\n  text-align:center;\r\n  font-family:'Orbitron',sans-serif;\r\n  font-size:11px;\r\n  letter-spacing:2px;\r\n  opacity:.55;\r\n  color:#e6e6e6;\r\n\">\r\n  \u00a9 2025 QUESTIUM.\r\n  <span style=\"opacity:.8\">The system evolves.<\/span>\r\n<\/footer>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ENTER WORLD CHARACTERS SYSTEM ROADMAP TOKEN QUESTIUM A system built on intelligence, behavior, and time. Nothing here is random. Every action leaves a trace. CA A8Z8sSf2uoLrPAmGarkXpPZvSUHjjV54kpbgLr2Bpump THE WORLD Inside Questium Questium is not a static environment. It is a system that grows, adapts, and reshapes itself through interaction. Time matters here. Behavior matters even more. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/questium.fun\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/questium.fun\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/questium.fun\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/questium.fun\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/questium.fun\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":34,"href":"https:\/\/questium.fun\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":68,"href":"https:\/\/questium.fun\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/68"}],"wp:attachment":[{"href":"https:\/\/questium.fun\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}