diff --git a/assets/ontoref-logo.svg b/assets/ontoref-logo.svg
new file mode 100644
index 0000000..180b071
--- /dev/null
+++ b/assets/ontoref-logo.svg
@@ -0,0 +1,193 @@
+<svg viewBox="0 0 575 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="sG3" x1="0" y1="0" x2=".5" y2="1">
+      <stop offset="0%" stop-color="#E6ECF2"/>
+      <stop offset="50%" stop-color="#BCC8D4"/>
+      <stop offset="100%" stop-color="#8090A4"/>
+    </linearGradient>
+    <linearGradient id="aG3" x1=".3" y1="0" x2=".8" y2="1">
+      <stop offset="0%" stop-color="#B87000"/>
+      <stop offset="50%" stop-color="#E0B040"/>
+      <stop offset="100%" stop-color="#F8D860"/>
+    </linearGradient>
+    <linearGradient id="aN3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#F5C44A"/>
+      <stop offset="100%" stop-color="#DC9018"/>
+    </linearGradient>
+    <linearGradient id="sN3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#A8B4C8"/>
+      <stop offset="100%" stop-color="#5A6A7C"/>
+    </linearGradient>
+
+    <clipPath id="sC3">
+      <path d="M300,75 C405,195 195,345 300,465 L162,408 L105,270 L162,132 Z"/>
+    </clipPath>
+    <clipPath id="aC3">
+      <path d="M300,75 C405,195 195,345 300,465 L438,408 L495,270 L438,132 Z"/>
+    </clipPath>
+
+    <filter id="nGl3" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="4" result="b"/>
+      <feFlood flood-color="#E8A838" flood-opacity=".1"/>
+      <feComposite in2="b" operator="in" result="g"/>
+      <feComposite in="SourceGraphic" in2="g" operator="over"/>
+    </filter>
+    <filter id="nSh3"><feDropShadow dx="0" dy="2" stdDeviation="3.5" flood-color="#DC9018" flood-opacity=".28"/></filter>
+    <filter id="sGl3"><feGaussianBlur stdDeviation="1.5" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
+    <filter id="cGl3"><feGaussianBlur stdDeviation="3" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
+  </defs>
+
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&amp;display=swap');
+    @keyframes bp3{0%,100%{opacity:calc(var(--o,.82) - .20)}50%{opacity:var(--o,.82)}}
+    @keyframes nf3{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2px)}}
+    @keyframes np3{0%,100%{r:var(--r,17)}50%{r:calc(var(--r,17) + 1.8)}}
+    @keyframes de3{0%{stroke-dashoffset:210}100%{stroke-dashoffset:0}}
+    @keyframes eb3{0%,100%{opacity:.48}50%{opacity:.88}}
+    @keyframes ap3{0%,100%{opacity:.42}50%{opacity:.92}}
+    @keyframes seedAmber{0%,100%{opacity:.72;r:16}50%{opacity:.88;r:18}}
+    @keyframes seedSilver{0%,100%{opacity:.32}50%{opacity:.52}}
+    @keyframes fl3{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
+    @keyframes fi3{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
+    @keyframes cB3{0%,100%{stroke-opacity:.1}50%{stroke-opacity:.2}}
+    @keyframes rP3{0%,100%{stroke-opacity:.04}50%{stroke-opacity:.068}}
+    @keyframes tP{0%,100%{opacity:calc(var(--to,.08)*5)}50%{opacity:calc(var(--to,.08)*5 + .25)}}
+    @keyframes cD{0%,100%{r:2.5;opacity:.60}50%{r:3.5;opacity:.80}}
+    .bp3{animation:bp3 4.5s ease-in-out infinite}
+    .nf3{animation:nf3 5s ease-in-out infinite}
+    .np3{animation:np3 3.5s ease-in-out infinite}
+    .de3{stroke-dasharray:210;animation:de3 1.8s ease-out forwards,eb3 4s ease-in-out 2s infinite}
+    .ap3{animation:ap3 3s ease-in-out infinite}
+    .sAm{animation:seedAmber 4s ease-in-out infinite}
+    .sSi{animation:seedSilver 4s ease-in-out infinite}
+    .fl3{animation:fl3 7s ease-in-out infinite}
+    .fi3{animation:fi3 1s ease-out .5s both}
+    .cB3{animation:cB3 5s ease-in-out infinite}
+    .rP3{animation:rP3 7s ease-in-out infinite}
+    .tP{animation:tP 5.5s ease-in-out infinite}
+    .cD{animation:cD 4s ease-in-out infinite}
+  </style>
+
+  <!-- ═══ IMAGE GROUP ═══ -->
+  <g id="image-group" transform="translate(-30, -22) scale(0.50)">
+    <!-- ═══ PAKUA FRAME ═══ -->
+    <path d="M300,52 L454,117 L518,270 L454,423 L300,488 L146,423 L82,270 L146,117 Z"
+      fill="none" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".35"/>
+    <path d="M300,62 L447,124 L508,270 L447,416 L300,478 L153,416 L92,270 L153,124 Z"
+      fill="none" stroke="#C0CCD8" stroke-width="1.2" stroke-opacity=".30"/>
+
+    <!-- Trigram marks -->
+    <g class="tP" style="--to:.1">
+      <line x1="278" y1="50" x2="322" y2="50" stroke="#C0CCD8" stroke-width="2.2" stroke-linecap="round"/>
+      <line x1="281" y1="57" x2="319" y2="57" stroke="#C0CCD8" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="284" y1="63" x2="316" y2="63" stroke="#C0CCD8" stroke-width="1.5" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.08;animation-delay:2.75s">
+      <line x1="280" y1="488" x2="296" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
+      <line x1="304" y1="488" x2="320" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
+      <line x1="282" y1="494" x2="295" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="305" y1="494" x2="318" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.07;animation-delay:.7s">
+      <line x1="518" y1="252" x2="518" y2="266" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+      <line x1="518" y1="274" x2="518" y2="278" stroke="#E8A838" stroke-width="1.5" stroke-linecap="round"/>
+      <line x1="518" y1="286" x2="518" y2="300" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.07;animation-delay:2s">
+      <line x1="82" y1="252" x2="82" y2="260" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+      <line x1="82" y1="268" x2="82" y2="282" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+      <line x1="82" y1="290" x2="82" y2="298" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.06;animation-delay:1.1s">
+      <line x1="462" y1="110" x2="472" y2="118" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+      <line x1="458" y1="103" x2="468" y2="111" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.06;animation-delay:3.8s">
+      <line x1="128" y1="118" x2="138" y2="110" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+      <line x1="132" y1="111" x2="142" y2="103" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.06;animation-delay:4.4s">
+      <line x1="462" y1="430" x2="472" y2="422" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+      <line x1="458" y1="437" x2="468" y2="429" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.06;animation-delay:5s">
+      <line x1="128" y1="422" x2="138" y2="430" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+      <line x1="132" y1="429" x2="142" y2="437" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+
+    <!-- Corner dots -->
+    <circle class="cD" cx="300" cy="52" r="2.5" fill="#C0CCD8" style="animation-delay:0s"/>
+    <circle class="cD" cx="454" cy="117" r="2.5" fill="#E8A838" style="animation-delay:.55s"/>
+    <circle class="cD" cx="518" cy="270" r="2.5" fill="#E8A838" style="animation-delay:1.1s"/>
+    <circle class="cD" cx="454" cy="423" r="2.5" fill="#E8A838" style="animation-delay:1.65s"/>
+    <circle class="cD" cx="300" cy="488" r="2.5" fill="#E8A838" style="animation-delay:2.2s"/>
+    <circle class="cD" cx="146" cy="423" r="2.5" fill="#C0CCD8" style="animation-delay:2.75s"/>
+    <circle class="cD" cx="82" cy="270" r="2.5" fill="#C0CCD8" style="animation-delay:3.3s"/>
+    <circle class="cD" cx="146" cy="117" r="2.5" fill="#C0CCD8" style="animation-delay:3.85s"/>
+
+    <!-- MAIN SYMBOL -->
+    <g class="fl3">
+      <path d="M300,75 L438,132 L495,270 L438,408 L300,465 L162,408 L105,270 L162,132 Z"
+        fill="none" stroke="rgba(255,255,255,.055)" stroke-width="1.5"/>
+
+      <!-- SILVER REGION -->
+      <g clip-path="url(#sC3)">
+        <path d="M300,75 L162,132 L105,270 L162,408 L300,465 C195,345 405,195 300,75Z" fill="url(#sG3)" opacity=".93"/>
+        <rect class="bp3" x="165" y="160" width="52" height="40" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".88" style="--o:.88;animation-delay:0.9s"/>
+        <rect class="bp3" x="235" y="223" width="48" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".82" style="--o:.82;animation-delay:0.7s"/>
+        <rect class="bp3" x="163" y="220" width="55" height="46" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.5s"/>
+        <rect class="bp3" x="168" y="345" width="25" height="18" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".70" style="--o:.70;animation-delay:0.15s"/>
+        <rect class="bp3" x="220" y="290" width="35" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.3s"/>
+        <rect class="bp3" x="160" y="285" width="40" height="32" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:0s"/>
+        <rect class="bp3" x="220" y="350" width="28" height="24" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:.8s"/>
+        <circle class="sAm" cx="265" cy="170" r="16" fill="url(#aN3)" opacity=".72" stroke="rgba(255,255,255,.3)" stroke-width="1.5"/>
+      </g>
+
+      <!-- AMBER REGION -->
+      <g clip-path="url(#aC3)">
+        <path d="M300,75 L438,132 L495,270 L438,408 L300,465 C195,345 405,195 300,75Z" fill="url(#aG3)" opacity=".88"/>
+        <g filter="url(#nGl3)">
+          <line class="de3" x1="386" y1="162" x2="355" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.15s"/>
+          <line class="de3" x1="405" y1="162" x2="440" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.35s"/>
+          <line class="de3" x1="364" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.6s"/>
+          <line class="de3" x1="431" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.8s"/>
+          <line class="de3" x1="394" y1="331" x2="385" y2="368" stroke="#8090A4" stroke-width="3.5" stroke-linecap="round" opacity=".35" style="animation-delay:1.05s"/>
+          <polygon class="ap3" points="349,210 357,222 363,212" fill="#8090A4" opacity=".45" style="animation-delay:.15s"/>
+          <polygon class="ap3" points="434,210 442,222 448,210" fill="#8090A4" opacity=".45" style="animation-delay:.35s"/>
+          <polygon class="ap3" points="392,290 400,302 406,290" fill="#8090A4" opacity=".4" style="animation-delay:.6s"/>
+          <polygon class="ap3" points="379,365 387,377 393,365" fill="#8090A4" opacity=".35" style="animation-delay:1.05s"/>
+        </g>
+        <g class="nf3" style="animation-delay:0s">
+          <circle class="np3" cx="395" cy="148" r="17" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".75" style="--r:17"/>
+        </g>
+        <g class="nf3" style="animation-delay:.3s">
+          <circle class="np3" cx="355" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
+        </g>
+        <g class="nf3" style="animation-delay:.5s">
+          <circle class="np3" cx="440" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
+        </g>
+        <g class="nf3" style="animation-delay:.8s">
+          <circle class="np3" cx="398" cy="316" r="15" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".72" style="--r:15"/>
+        </g>
+        <g class="nf3" style="animation-delay:1.1s">
+          <circle class="np3" cx="385" cy="390" r="12" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".65" style="--r:12"/>
+        </g>
+        <rect class="sAm" x="320" y="330" width="26" height="26" rx="3" fill="#5A6A7C" opacity=".85" stroke="rgba(255,255,255,.35)" stroke-width="1.5"/>
+      </g>
+
+      <!-- S-CURVE -->
+      <path class="cB3" d="M300,75 C405,195 195,345 300,465"
+        fill="none" stroke="rgba(255,255,255,.1)" stroke-width="1.8" filter="url(#cGl3)"/>
+    </g>
+  </g>
+
+  <!-- ═══ TEXT GROUP ═══ -->
+  <g id="text-group" class="fi3">
+    <text x="400" y="131" text-anchor="middle" font-family="'IBM Plex Mono',monospace" font-size="72" font-weight="600" letter-spacing=".03em">
+      <tspan fill="#C0CCD8">Onto</tspan><tspan fill="#E8A838">ref</tspan>
+    </text>
+    <text x="398" y="156" text-anchor="middle" font-family="'IBM Plex Sans',sans-serif" font-size="16" font-weight="500" fill="#A8B4C8" letter-spacing=".03em" opacity=".9">
+      Structure that remembers why
+    </text>
+  </g>
+</svg>
diff --git a/assets/ontoref.svg b/assets/ontoref.svg
new file mode 100644
index 0000000..180b071
--- /dev/null
+++ b/assets/ontoref.svg
@@ -0,0 +1,193 @@
+<svg viewBox="0 0 575 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="sG3" x1="0" y1="0" x2=".5" y2="1">
+      <stop offset="0%" stop-color="#E6ECF2"/>
+      <stop offset="50%" stop-color="#BCC8D4"/>
+      <stop offset="100%" stop-color="#8090A4"/>
+    </linearGradient>
+    <linearGradient id="aG3" x1=".3" y1="0" x2=".8" y2="1">
+      <stop offset="0%" stop-color="#B87000"/>
+      <stop offset="50%" stop-color="#E0B040"/>
+      <stop offset="100%" stop-color="#F8D860"/>
+    </linearGradient>
+    <linearGradient id="aN3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#F5C44A"/>
+      <stop offset="100%" stop-color="#DC9018"/>
+    </linearGradient>
+    <linearGradient id="sN3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#A8B4C8"/>
+      <stop offset="100%" stop-color="#5A6A7C"/>
+    </linearGradient>
+
+    <clipPath id="sC3">
+      <path d="M300,75 C405,195 195,345 300,465 L162,408 L105,270 L162,132 Z"/>
+    </clipPath>
+    <clipPath id="aC3">
+      <path d="M300,75 C405,195 195,345 300,465 L438,408 L495,270 L438,132 Z"/>
+    </clipPath>
+
+    <filter id="nGl3" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="4" result="b"/>
+      <feFlood flood-color="#E8A838" flood-opacity=".1"/>
+      <feComposite in2="b" operator="in" result="g"/>
+      <feComposite in="SourceGraphic" in2="g" operator="over"/>
+    </filter>
+    <filter id="nSh3"><feDropShadow dx="0" dy="2" stdDeviation="3.5" flood-color="#DC9018" flood-opacity=".28"/></filter>
+    <filter id="sGl3"><feGaussianBlur stdDeviation="1.5" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
+    <filter id="cGl3"><feGaussianBlur stdDeviation="3" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
+  </defs>
+
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&amp;display=swap');
+    @keyframes bp3{0%,100%{opacity:calc(var(--o,.82) - .20)}50%{opacity:var(--o,.82)}}
+    @keyframes nf3{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2px)}}
+    @keyframes np3{0%,100%{r:var(--r,17)}50%{r:calc(var(--r,17) + 1.8)}}
+    @keyframes de3{0%{stroke-dashoffset:210}100%{stroke-dashoffset:0}}
+    @keyframes eb3{0%,100%{opacity:.48}50%{opacity:.88}}
+    @keyframes ap3{0%,100%{opacity:.42}50%{opacity:.92}}
+    @keyframes seedAmber{0%,100%{opacity:.72;r:16}50%{opacity:.88;r:18}}
+    @keyframes seedSilver{0%,100%{opacity:.32}50%{opacity:.52}}
+    @keyframes fl3{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
+    @keyframes fi3{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
+    @keyframes cB3{0%,100%{stroke-opacity:.1}50%{stroke-opacity:.2}}
+    @keyframes rP3{0%,100%{stroke-opacity:.04}50%{stroke-opacity:.068}}
+    @keyframes tP{0%,100%{opacity:calc(var(--to,.08)*5)}50%{opacity:calc(var(--to,.08)*5 + .25)}}
+    @keyframes cD{0%,100%{r:2.5;opacity:.60}50%{r:3.5;opacity:.80}}
+    .bp3{animation:bp3 4.5s ease-in-out infinite}
+    .nf3{animation:nf3 5s ease-in-out infinite}
+    .np3{animation:np3 3.5s ease-in-out infinite}
+    .de3{stroke-dasharray:210;animation:de3 1.8s ease-out forwards,eb3 4s ease-in-out 2s infinite}
+    .ap3{animation:ap3 3s ease-in-out infinite}
+    .sAm{animation:seedAmber 4s ease-in-out infinite}
+    .sSi{animation:seedSilver 4s ease-in-out infinite}
+    .fl3{animation:fl3 7s ease-in-out infinite}
+    .fi3{animation:fi3 1s ease-out .5s both}
+    .cB3{animation:cB3 5s ease-in-out infinite}
+    .rP3{animation:rP3 7s ease-in-out infinite}
+    .tP{animation:tP 5.5s ease-in-out infinite}
+    .cD{animation:cD 4s ease-in-out infinite}
+  </style>
+
+  <!-- ═══ IMAGE GROUP ═══ -->
+  <g id="image-group" transform="translate(-30, -22) scale(0.50)">
+    <!-- ═══ PAKUA FRAME ═══ -->
+    <path d="M300,52 L454,117 L518,270 L454,423 L300,488 L146,423 L82,270 L146,117 Z"
+      fill="none" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".35"/>
+    <path d="M300,62 L447,124 L508,270 L447,416 L300,478 L153,416 L92,270 L153,124 Z"
+      fill="none" stroke="#C0CCD8" stroke-width="1.2" stroke-opacity=".30"/>
+
+    <!-- Trigram marks -->
+    <g class="tP" style="--to:.1">
+      <line x1="278" y1="50" x2="322" y2="50" stroke="#C0CCD8" stroke-width="2.2" stroke-linecap="round"/>
+      <line x1="281" y1="57" x2="319" y2="57" stroke="#C0CCD8" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="284" y1="63" x2="316" y2="63" stroke="#C0CCD8" stroke-width="1.5" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.08;animation-delay:2.75s">
+      <line x1="280" y1="488" x2="296" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
+      <line x1="304" y1="488" x2="320" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
+      <line x1="282" y1="494" x2="295" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="305" y1="494" x2="318" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.07;animation-delay:.7s">
+      <line x1="518" y1="252" x2="518" y2="266" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+      <line x1="518" y1="274" x2="518" y2="278" stroke="#E8A838" stroke-width="1.5" stroke-linecap="round"/>
+      <line x1="518" y1="286" x2="518" y2="300" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.07;animation-delay:2s">
+      <line x1="82" y1="252" x2="82" y2="260" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+      <line x1="82" y1="268" x2="82" y2="282" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+      <line x1="82" y1="290" x2="82" y2="298" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.06;animation-delay:1.1s">
+      <line x1="462" y1="110" x2="472" y2="118" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+      <line x1="458" y1="103" x2="468" y2="111" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.06;animation-delay:3.8s">
+      <line x1="128" y1="118" x2="138" y2="110" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+      <line x1="132" y1="111" x2="142" y2="103" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.06;animation-delay:4.4s">
+      <line x1="462" y1="430" x2="472" y2="422" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+      <line x1="458" y1="437" x2="468" y2="429" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.06;animation-delay:5s">
+      <line x1="128" y1="422" x2="138" y2="430" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+      <line x1="132" y1="429" x2="142" y2="437" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+
+    <!-- Corner dots -->
+    <circle class="cD" cx="300" cy="52" r="2.5" fill="#C0CCD8" style="animation-delay:0s"/>
+    <circle class="cD" cx="454" cy="117" r="2.5" fill="#E8A838" style="animation-delay:.55s"/>
+    <circle class="cD" cx="518" cy="270" r="2.5" fill="#E8A838" style="animation-delay:1.1s"/>
+    <circle class="cD" cx="454" cy="423" r="2.5" fill="#E8A838" style="animation-delay:1.65s"/>
+    <circle class="cD" cx="300" cy="488" r="2.5" fill="#E8A838" style="animation-delay:2.2s"/>
+    <circle class="cD" cx="146" cy="423" r="2.5" fill="#C0CCD8" style="animation-delay:2.75s"/>
+    <circle class="cD" cx="82" cy="270" r="2.5" fill="#C0CCD8" style="animation-delay:3.3s"/>
+    <circle class="cD" cx="146" cy="117" r="2.5" fill="#C0CCD8" style="animation-delay:3.85s"/>
+
+    <!-- MAIN SYMBOL -->
+    <g class="fl3">
+      <path d="M300,75 L438,132 L495,270 L438,408 L300,465 L162,408 L105,270 L162,132 Z"
+        fill="none" stroke="rgba(255,255,255,.055)" stroke-width="1.5"/>
+
+      <!-- SILVER REGION -->
+      <g clip-path="url(#sC3)">
+        <path d="M300,75 L162,132 L105,270 L162,408 L300,465 C195,345 405,195 300,75Z" fill="url(#sG3)" opacity=".93"/>
+        <rect class="bp3" x="165" y="160" width="52" height="40" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".88" style="--o:.88;animation-delay:0.9s"/>
+        <rect class="bp3" x="235" y="223" width="48" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".82" style="--o:.82;animation-delay:0.7s"/>
+        <rect class="bp3" x="163" y="220" width="55" height="46" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.5s"/>
+        <rect class="bp3" x="168" y="345" width="25" height="18" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".70" style="--o:.70;animation-delay:0.15s"/>
+        <rect class="bp3" x="220" y="290" width="35" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.3s"/>
+        <rect class="bp3" x="160" y="285" width="40" height="32" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:0s"/>
+        <rect class="bp3" x="220" y="350" width="28" height="24" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:.8s"/>
+        <circle class="sAm" cx="265" cy="170" r="16" fill="url(#aN3)" opacity=".72" stroke="rgba(255,255,255,.3)" stroke-width="1.5"/>
+      </g>
+
+      <!-- AMBER REGION -->
+      <g clip-path="url(#aC3)">
+        <path d="M300,75 L438,132 L495,270 L438,408 L300,465 C195,345 405,195 300,75Z" fill="url(#aG3)" opacity=".88"/>
+        <g filter="url(#nGl3)">
+          <line class="de3" x1="386" y1="162" x2="355" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.15s"/>
+          <line class="de3" x1="405" y1="162" x2="440" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.35s"/>
+          <line class="de3" x1="364" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.6s"/>
+          <line class="de3" x1="431" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.8s"/>
+          <line class="de3" x1="394" y1="331" x2="385" y2="368" stroke="#8090A4" stroke-width="3.5" stroke-linecap="round" opacity=".35" style="animation-delay:1.05s"/>
+          <polygon class="ap3" points="349,210 357,222 363,212" fill="#8090A4" opacity=".45" style="animation-delay:.15s"/>
+          <polygon class="ap3" points="434,210 442,222 448,210" fill="#8090A4" opacity=".45" style="animation-delay:.35s"/>
+          <polygon class="ap3" points="392,290 400,302 406,290" fill="#8090A4" opacity=".4" style="animation-delay:.6s"/>
+          <polygon class="ap3" points="379,365 387,377 393,365" fill="#8090A4" opacity=".35" style="animation-delay:1.05s"/>
+        </g>
+        <g class="nf3" style="animation-delay:0s">
+          <circle class="np3" cx="395" cy="148" r="17" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".75" style="--r:17"/>
+        </g>
+        <g class="nf3" style="animation-delay:.3s">
+          <circle class="np3" cx="355" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
+        </g>
+        <g class="nf3" style="animation-delay:.5s">
+          <circle class="np3" cx="440" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
+        </g>
+        <g class="nf3" style="animation-delay:.8s">
+          <circle class="np3" cx="398" cy="316" r="15" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".72" style="--r:15"/>
+        </g>
+        <g class="nf3" style="animation-delay:1.1s">
+          <circle class="np3" cx="385" cy="390" r="12" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".65" style="--r:12"/>
+        </g>
+        <rect class="sAm" x="320" y="330" width="26" height="26" rx="3" fill="#5A6A7C" opacity=".85" stroke="rgba(255,255,255,.35)" stroke-width="1.5"/>
+      </g>
+
+      <!-- S-CURVE -->
+      <path class="cB3" d="M300,75 C405,195 195,345 300,465"
+        fill="none" stroke="rgba(255,255,255,.1)" stroke-width="1.8" filter="url(#cGl3)"/>
+    </g>
+  </g>
+
+  <!-- ═══ TEXT GROUP ═══ -->
+  <g id="text-group" class="fi3">
+    <text x="400" y="131" text-anchor="middle" font-family="'IBM Plex Mono',monospace" font-size="72" font-weight="600" letter-spacing=".03em">
+      <tspan fill="#C0CCD8">Onto</tspan><tspan fill="#E8A838">ref</tspan>
+    </text>
+    <text x="398" y="156" text-anchor="middle" font-family="'IBM Plex Sans',sans-serif" font-size="16" font-weight="500" fill="#A8B4C8" letter-spacing=".03em" opacity=".9">
+      Structure that remembers why
+    </text>
+  </g>
+</svg>
diff --git a/assets/ontoref_graph_view-dark.png b/assets/ontoref_graph_view-dark.png
new file mode 100644
index 0000000..81dbee3
Binary files /dev/null and b/assets/ontoref_graph_view-dark.png differ
diff --git a/assets/ontoref_graph_view-light.png b/assets/ontoref_graph_view-light.png
new file mode 100644
index 0000000..6eb5d3b
Binary files /dev/null and b/assets/ontoref_graph_view-light.png differ
diff --git a/assets/ontoref_img.svg b/assets/ontoref_img.svg
new file mode 100644
index 0000000..ca4382c
--- /dev/null
+++ b/assets/ontoref_img.svg
@@ -0,0 +1,197 @@
+<svg viewBox="0 0 600 700" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="sG3" x1="0" y1="0" x2=".5" y2="1">
+      <stop offset="0%" stop-color="#E6ECF2"/>
+      <stop offset="50%" stop-color="#BCC8D4"/>
+      <stop offset="100%" stop-color="#8090A4"/>
+    </linearGradient>
+    <linearGradient id="aG3" x1=".3" y1="0" x2=".8" y2="1">
+      <stop offset="0%" stop-color="#B87000"/>
+      <stop offset="50%" stop-color="#E0B040"/>
+      <stop offset="100%" stop-color="#F8D860"/>
+    </linearGradient>
+    <linearGradient id="aN3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#F5C44A"/>
+      <stop offset="100%" stop-color="#DC9018"/>
+    </linearGradient>
+    <linearGradient id="sN3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#A8B4C8"/>
+      <stop offset="100%" stop-color="#5A6A7C"/>
+    </linearGradient>
+
+    <clipPath id="sC3">
+      <path d="M300,75 C405,195 195,345 300,465 L162,408 L105,270 L162,132 Z"/>
+    </clipPath>
+    <clipPath id="aC3">
+      <path d="M300,75 C405,195 195,345 300,465 L438,408 L495,270 L438,132 Z"/>
+    </clipPath>
+
+    <filter id="nGl3" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="4" result="b"/>
+      <feFlood flood-color="#E8A838" flood-opacity=".1"/>
+      <feComposite in2="b" operator="in" result="g"/>
+      <feComposite in="SourceGraphic" in2="g" operator="over"/>
+    </filter>
+    <filter id="nSh3"><feDropShadow dx="0" dy="2" stdDeviation="3.5" flood-color="#DC9018" flood-opacity=".28"/></filter>
+    <filter id="sGl3"><feGaussianBlur stdDeviation="1.5" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
+    <filter id="cGl3"><feGaussianBlur stdDeviation="3" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
+  </defs>
+
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&amp;display=swap');
+    @keyframes bp3{0%,100%{opacity:calc(var(--o,.82) - .20)}50%{opacity:var(--o,.82)}}
+    @keyframes nf3{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2px)}}
+    @keyframes np3{0%,100%{r:var(--r,17)}50%{r:calc(var(--r,17) + 1.8)}}
+    @keyframes de3{0%{stroke-dashoffset:210}100%{stroke-dashoffset:0}}
+    @keyframes eb3{0%,100%{opacity:.48}50%{opacity:.88}}
+    @keyframes ap3{0%,100%{opacity:.42}50%{opacity:.92}}
+    @keyframes seedAmber{0%,100%{opacity:.72;r:16}50%{opacity:.88;r:18}}
+    @keyframes seedSilver{0%,100%{opacity:.32}50%{opacity:.52}}
+    @keyframes fl3{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
+    @keyframes cB3{0%,100%{stroke-opacity:.1}50%{stroke-opacity:.2}}
+    @keyframes rP3{0%,100%{stroke-opacity:.04}50%{stroke-opacity:.068}}
+    @keyframes tP{0%,100%{opacity:calc(var(--to,.08)*5)}50%{opacity:calc(var(--to,.08)*5 + .25)}}
+    @keyframes cD{0%,100%{r:2.5;opacity:.60}50%{r:3.5;opacity:.80}}
+    .bp3{animation:bp3 4.5s ease-in-out infinite}
+    .nf3{animation:nf3 5s ease-in-out infinite}
+    .np3{animation:np3 3.5s ease-in-out infinite}
+    .de3{stroke-dasharray:210;animation:de3 1.8s ease-out forwards,eb3 4s ease-in-out 2s infinite}
+    .ap3{animation:ap3 3s ease-in-out infinite}
+    .sAm{animation:seedAmber 4s ease-in-out infinite}
+    .sSi{animation:seedSilver 4s ease-in-out infinite}
+    .fl3{animation:fl3 7s ease-in-out infinite}
+    .cB3{animation:cB3 5s ease-in-out infinite}
+    .rP3{animation:rP3 7s ease-in-out infinite}
+    .tP{animation:tP 5.5s ease-in-out infinite}
+    .cD{animation:cD 4s ease-in-out infinite}
+  </style>
+
+  <!-- ═══ PAKUA FRAME ═══ -->
+  <!-- Outer octagon R=218 -->
+  <path d="M300,52 L454,117 L518,270 L454,423 L300,488 L146,423 L82,270 L146,117 Z"
+    fill="none" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".35"/>
+  <!-- Inner decorative ring R=208 -->
+  <path d="M300,62 L447,124 L508,270 L447,416 L300,478 L153,416 L92,270 L153,124 Z"
+    fill="none" stroke="#C0CCD8" stroke-width="1.2" stroke-opacity=".30"/>
+
+  <!-- Trigram marks at 8 positions -->
+  <!-- Top (☰ heaven: 3 solid) — silver -->
+  <g class="tP" style="--to:.1">
+    <line x1="278" y1="50" x2="322" y2="50" stroke="#C0CCD8" stroke-width="2.2" stroke-linecap="round"/>
+    <line x1="281" y1="57" x2="319" y2="57" stroke="#C0CCD8" stroke-width="1.8" stroke-linecap="round"/>
+    <line x1="284" y1="63" x2="316" y2="63" stroke="#C0CCD8" stroke-width="1.5" stroke-linecap="round"/>
+  </g>
+  <!-- Bottom (☷ earth: 3 broken) — amber -->
+  <g class="tP" style="--to:.08;animation-delay:2.75s">
+    <line x1="280" y1="488" x2="296" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
+    <line x1="304" y1="488" x2="320" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
+    <line x1="282" y1="494" x2="295" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
+    <line x1="305" y1="494" x2="318" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
+  </g>
+  <!-- Right (☲ fire) — amber -->
+  <g class="tP" style="--to:.07;animation-delay:.7s">
+    <line x1="518" y1="252" x2="518" y2="266" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+    <line x1="518" y1="274" x2="518" y2="278" stroke="#E8A838" stroke-width="1.5" stroke-linecap="round"/>
+    <line x1="518" y1="286" x2="518" y2="300" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+  </g>
+  <!-- Left (☵ water) — silver -->
+  <g class="tP" style="--to:.07;animation-delay:2s">
+    <line x1="82" y1="252" x2="82" y2="260" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+    <line x1="82" y1="268" x2="82" y2="282" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+    <line x1="82" y1="290" x2="82" y2="298" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+  </g>
+  <!-- TR, TL, BR, BL — alternating -->
+  <g class="tP" style="--to:.06;animation-delay:1.1s">
+    <line x1="462" y1="110" x2="472" y2="118" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+    <line x1="458" y1="103" x2="468" y2="111" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
+  </g>
+  <g class="tP" style="--to:.06;animation-delay:3.8s">
+    <line x1="128" y1="118" x2="138" y2="110" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+    <line x1="132" y1="111" x2="142" y2="103" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
+  </g>
+  <g class="tP" style="--to:.06;animation-delay:4.4s">
+    <line x1="462" y1="430" x2="472" y2="422" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+    <line x1="458" y1="437" x2="468" y2="429" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
+  </g>
+  <g class="tP" style="--to:.06;animation-delay:5s">
+    <line x1="128" y1="422" x2="138" y2="430" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+    <line x1="132" y1="429" x2="142" y2="437" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
+  </g>
+
+  <!-- Corner dots -->
+  <circle class="cD" cx="300" cy="52" r="2.5" fill="#C0CCD8" style="animation-delay:0s"/>
+  <circle class="cD" cx="454" cy="117" r="2.5" fill="#E8A838" style="animation-delay:.55s"/>
+  <circle class="cD" cx="518" cy="270" r="2.5" fill="#E8A838" style="animation-delay:1.1s"/>
+  <circle class="cD" cx="454" cy="423" r="2.5" fill="#E8A838" style="animation-delay:1.65s"/>
+  <circle class="cD" cx="300" cy="488" r="2.5" fill="#E8A838" style="animation-delay:2.2s"/>
+  <circle class="cD" cx="146" cy="423" r="2.5" fill="#C0CCD8" style="animation-delay:2.75s"/>
+  <circle class="cD" cx="82" cy="270" r="2.5" fill="#C0CCD8" style="animation-delay:3.3s"/>
+  <circle class="cD" cx="146" cy="117" r="2.5" fill="#C0CCD8" style="animation-delay:3.85s"/>
+
+  <!-- ═══ MAIN SYMBOL ═══ -->
+  <g class="fl3" transform="scale(0.65) translate(64, 0)">
+    <!-- Octagon outline R=195 -->
+    <path d="M300,75 L438,132 L495,270 L438,408 L300,465 L162,408 L105,270 L162,132 Z"
+      fill="none" stroke="rgba(255,255,255,.055)" stroke-width="1.5"/>
+
+    <!-- SILVER REGION (Ref / Structure) -->
+    <g clip-path="url(#sC3)">
+      <path d="M300,75 L162,132 L105,270 L162,408 L300,465 C195,345 405,195 300,75Z" fill="url(#sG3)" opacity=".93"/>
+      <!-- Grid blocks (two columns) -->
+      <rect class="bp3" x="165" y="160" width="52" height="40" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".88" style="--o:.88;animation-delay:0.9s"/>
+      <rect class="bp3" x="235" y="223" width="48" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".82" style="--o:.82;animation-delay:0.7s"/>
+      <rect class="bp3" x="163" y="220" width="55" height="46" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.5s"/>
+      <rect class="bp3" x="168" y="345" width="25" height="18" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".70" style="--o:.70;animation-delay:0.15s"/>
+      <rect class="bp3" x="220" y="290" width="35" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.3s"/>
+      <rect class="bp3" x="160" y="285" width="40" height="32" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:0s"/>
+      <rect class="bp3" x="220" y="350" width="28" height="24" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:.8s"/>
+      <!-- ★ SEED: amber circle in silver -->
+      <circle class="sAm" cx="265" cy="170" r="16" fill="url(#aN3)" opacity=".72" stroke="rgba(255,255,255,.3)" stroke-width="1.5"/>
+    </g>
+
+    <!-- AMBER REGION (Onto / Graph) -->
+    <g clip-path="url(#aC3)">
+      <path d="M300,75 L438,132 L495,270 L438,408 L300,465 C195,345 405,195 300,75Z" fill="url(#aG3)" opacity=".88"/>
+      <!-- DAG -->
+      <g filter="url(#nGl3)">
+        <!-- Line 1: 395,155 → 355,236 (nodo 2, r=14) termina antes del nodo -->
+        <line class="de3" x1="386" y1="162" x2="355" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.15s"/>
+        <!-- Line 2: 395,155 → 440,236 (nodo 3, r=14) termina antes del nodo -->
+        <line class="de3" x1="405" y1="162" x2="440" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.35s"/>
+        <!-- Line 3: 355,244 → 398,316 (nodo 4, r=15) termina antes del nodo -->
+        <line class="de3" x1="364" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.6s"/>
+        <!-- Line 4: 440,244 → 398,316 (nodo 4, r=15) termina antes del nodo -->
+        <line class="de3" x1="431" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.8s"/>
+        <!-- Line 5: 398,324 → 385,390 (nodo 5, r=12) termina antes del nodo -->
+        <line class="de3" x1="394" y1="331" x2="385" y2="368" stroke="#8090A4" stroke-width="3.5" stroke-linecap="round" opacity=".35" style="animation-delay:1.05s"/>
+        <!-- Arrowheads -->
+        <polygon class="ap3" points="349,210 357,222 363,212" fill="#8090A4" opacity=".45" style="animation-delay:.15s"/>
+        <polygon class="ap3" points="434,210 442,222 448,210" fill="#8090A4" opacity=".45" style="animation-delay:.35s"/>
+        <polygon class="ap3" points="392,290 400,302 406,290" fill="#8090A4" opacity=".4" style="animation-delay:.6s"/>
+        <polygon class="ap3" points="379,365 387,377 393,365" fill="#8090A4" opacity=".35" style="animation-delay:1.05s"/>
+      </g>
+      <!-- Nodes (silver gradient) -->
+      <g class="nf3" style="animation-delay:0s">
+        <circle class="np3" cx="395" cy="148" r="17" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".75" style="--r:17"/>
+      </g>
+      <g class="nf3" style="animation-delay:.3s">
+        <circle class="np3" cx="355" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
+      </g>
+      <g class="nf3" style="animation-delay:.5s">
+        <circle class="np3" cx="440" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
+      </g>
+      <g class="nf3" style="animation-delay:.8s">
+        <circle class="np3" cx="398" cy="316" r="15" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".72" style="--r:15"/>
+      </g>
+      <g class="nf3" style="animation-delay:1.1s">
+        <circle class="np3" cx="385" cy="390" r="12" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".65" style="--r:12"/>
+      </g>
+      <!-- ★ SEED: silver square in amber -->
+      <rect class="sAm" x="320" y="330" width="26" height="26" rx="3" fill="#5A6A7C" opacity=".85" stroke="rgba(255,255,255,.35)" stroke-width="1.5"/>
+    </g>
+
+    <!-- S-CURVE -->
+    <path class="cB3" d="M300,75 C405,195 195,345 300,465"
+      fill="none" stroke="rgba(255,255,255,.1)" stroke-width="1.8" filter="url(#cGl3)"/>
+  </g>
+</svg>
diff --git a/assets/ontoref_text.svg b/assets/ontoref_text.svg
new file mode 100644
index 0000000..349c9ee
--- /dev/null
+++ b/assets/ontoref_text.svg
@@ -0,0 +1,19 @@
+<svg viewBox="0 0 400 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&amp;display=swap');
+      @keyframes fi3{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
+      .fi3{animation:fi3 1s ease-out .5s both}
+    </style>
+  </defs>
+
+  <!-- Wordmark -->
+  <g class="fi3">
+    <text x="200" y="55" text-anchor="middle" font-family="'IBM Plex Mono',monospace" font-size="92" font-weight="600" letter-spacing=".03em">
+      <tspan fill="#C0CCD8">Onto</tspan><tspan fill="#E8A838">ref</tspan>
+    </text>
+    <text x="200" y="105" text-anchor="middle" font-family="'IBM Plex Sans',sans-serif" font-size="22" font-weight="500" fill="#A8B4C8" letter-spacing=".03em" opacity=".9">
+      Structure that remembers why.
+    </text>
+  </g>
+</svg>
diff --git a/assets/ontoref_v.svg b/assets/ontoref_v.svg
new file mode 100644
index 0000000..95d7a8a
--- /dev/null
+++ b/assets/ontoref_v.svg
@@ -0,0 +1,193 @@
+<svg viewBox="0 0 380 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="sG3" x1="0" y1="0" x2=".5" y2="1">
+      <stop offset="0%" stop-color="#E6ECF2"/>
+      <stop offset="50%" stop-color="#BCC8D4"/>
+      <stop offset="100%" stop-color="#8090A4"/>
+    </linearGradient>
+    <linearGradient id="aG3" x1=".3" y1="0" x2=".8" y2="1">
+      <stop offset="0%" stop-color="#B87000"/>
+      <stop offset="50%" stop-color="#E0B040"/>
+      <stop offset="100%" stop-color="#F8D860"/>
+    </linearGradient>
+    <linearGradient id="aN3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#F5C44A"/>
+      <stop offset="100%" stop-color="#DC9018"/>
+    </linearGradient>
+    <linearGradient id="sN3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#A8B4C8"/>
+      <stop offset="100%" stop-color="#5A6A7C"/>
+    </linearGradient>
+
+    <clipPath id="sC3">
+      <path d="M300,75 C405,195 195,345 300,465 L162,408 L105,270 L162,132 Z"/>
+    </clipPath>
+    <clipPath id="aC3">
+      <path d="M300,75 C405,195 195,345 300,465 L438,408 L495,270 L438,132 Z"/>
+    </clipPath>
+
+    <filter id="nGl3" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="4" result="b"/>
+      <feFlood flood-color="#E8A838" flood-opacity=".1"/>
+      <feComposite in2="b" operator="in" result="g"/>
+      <feComposite in="SourceGraphic" in2="g" operator="over"/>
+    </filter>
+    <filter id="nSh3"><feDropShadow dx="0" dy="2" stdDeviation="3.5" flood-color="#DC9018" flood-opacity=".28"/></filter>
+    <filter id="sGl3"><feGaussianBlur stdDeviation="1.5" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
+    <filter id="cGl3"><feGaussianBlur stdDeviation="3" result="b"/><feComposite in="SourceGraphic" in2="b" operator="over"/></filter>
+  </defs>
+
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&amp;display=swap');
+    @keyframes bp3{0%,100%{opacity:calc(var(--o,.82) - .20)}50%{opacity:var(--o,.82)}}
+    @keyframes nf3{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2px)}}
+    @keyframes np3{0%,100%{r:var(--r,17)}50%{r:calc(var(--r,17) + 1.8)}}
+    @keyframes de3{0%{stroke-dashoffset:210}100%{stroke-dashoffset:0}}
+    @keyframes eb3{0%,100%{opacity:.48}50%{opacity:.88}}
+    @keyframes ap3{0%,100%{opacity:.42}50%{opacity:.92}}
+    @keyframes seedAmber{0%,100%{opacity:.72;r:16}50%{opacity:.88;r:18}}
+    @keyframes seedSilver{0%,100%{opacity:.32}50%{opacity:.52}}
+    @keyframes fl3{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
+    @keyframes fi3{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
+    @keyframes cB3{0%,100%{stroke-opacity:.1}50%{stroke-opacity:.2}}
+    @keyframes rP3{0%,100%{stroke-opacity:.04}50%{stroke-opacity:.068}}
+    @keyframes tP{0%,100%{opacity:calc(var(--to,.08)*5)}50%{opacity:calc(var(--to,.08)*5 + .25)}}
+    @keyframes cD{0%,100%{r:2.5;opacity:.60}50%{r:3.5;opacity:.80}}
+    .bp3{animation:bp3 4.5s ease-in-out infinite}
+    .nf3{animation:nf3 5s ease-in-out infinite}
+    .np3{animation:np3 3.5s ease-in-out infinite}
+    .de3{stroke-dasharray:210;animation:de3 1.8s ease-out forwards,eb3 4s ease-in-out 2s infinite}
+    .ap3{animation:ap3 3s ease-in-out infinite}
+    .sAm{animation:seedAmber 4s ease-in-out infinite}
+    .sSi{animation:seedSilver 4s ease-in-out infinite}
+    .fl3{animation:fl3 7s ease-in-out infinite}
+    .fi3{animation:fi3 1s ease-out .5s both}
+    .cB3{animation:cB3 5s ease-in-out infinite}
+    .rP3{animation:rP3 7s ease-in-out infinite}
+    .tP{animation:tP 5.5s ease-in-out infinite}
+    .cD{animation:cD 4s ease-in-out infinite}
+  </style>
+
+  <!-- ═══ IMAGE GROUP ═══ -->
+  <g id="image-group" transform="translate(40, -20) scale(0.50)">
+    <!-- ═══ PAKUA FRAME ═══ -->
+    <path d="M300,52 L454,117 L518,270 L454,423 L300,488 L146,423 L82,270 L146,117 Z"
+      fill="none" stroke="#E8A838" stroke-width="1.5" stroke-opacity=".35"/>
+    <path d="M300,62 L447,124 L508,270 L447,416 L300,478 L153,416 L92,270 L153,124 Z"
+      fill="none" stroke="#C0CCD8" stroke-width="1.2" stroke-opacity=".30"/>
+
+    <!-- Trigram marks -->
+    <g class="tP" style="--to:.1">
+      <line x1="278" y1="50" x2="322" y2="50" stroke="#C0CCD8" stroke-width="2.2" stroke-linecap="round"/>
+      <line x1="281" y1="57" x2="319" y2="57" stroke="#C0CCD8" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="284" y1="63" x2="316" y2="63" stroke="#C0CCD8" stroke-width="1.5" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.08;animation-delay:2.75s">
+      <line x1="280" y1="488" x2="296" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
+      <line x1="304" y1="488" x2="320" y2="488" stroke="#E8A838" stroke-width="2.2" stroke-linecap="round"/>
+      <line x1="282" y1="494" x2="295" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
+      <line x1="305" y1="494" x2="318" y2="494" stroke="#E8A838" stroke-width="1.8" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.07;animation-delay:.7s">
+      <line x1="518" y1="252" x2="518" y2="266" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+      <line x1="518" y1="274" x2="518" y2="278" stroke="#E8A838" stroke-width="1.5" stroke-linecap="round"/>
+      <line x1="518" y1="286" x2="518" y2="300" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.07;animation-delay:2s">
+      <line x1="82" y1="252" x2="82" y2="260" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+      <line x1="82" y1="268" x2="82" y2="282" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+      <line x1="82" y1="290" x2="82" y2="298" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.06;animation-delay:1.1s">
+      <line x1="462" y1="110" x2="472" y2="118" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+      <line x1="458" y1="103" x2="468" y2="111" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.06;animation-delay:3.8s">
+      <line x1="128" y1="118" x2="138" y2="110" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+      <line x1="132" y1="111" x2="142" y2="103" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.06;animation-delay:4.4s">
+      <line x1="462" y1="430" x2="472" y2="422" stroke="#E8A838" stroke-width="2" stroke-linecap="round"/>
+      <line x1="458" y1="437" x2="468" y2="429" stroke="#E8A838" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+    <g class="tP" style="--to:.06;animation-delay:5s">
+      <line x1="128" y1="422" x2="138" y2="430" stroke="#C0CCD8" stroke-width="2" stroke-linecap="round"/>
+      <line x1="132" y1="429" x2="142" y2="437" stroke="#C0CCD8" stroke-width="1.6" stroke-linecap="round"/>
+    </g>
+
+    <!-- Corner dots -->
+    <circle class="cD" cx="300" cy="52" r="2.5" fill="#C0CCD8" style="animation-delay:0s"/>
+    <circle class="cD" cx="454" cy="117" r="2.5" fill="#E8A838" style="animation-delay:.55s"/>
+    <circle class="cD" cx="518" cy="270" r="2.5" fill="#E8A838" style="animation-delay:1.1s"/>
+    <circle class="cD" cx="454" cy="423" r="2.5" fill="#E8A838" style="animation-delay:1.65s"/>
+    <circle class="cD" cx="300" cy="488" r="2.5" fill="#E8A838" style="animation-delay:2.2s"/>
+    <circle class="cD" cx="146" cy="423" r="2.5" fill="#C0CCD8" style="animation-delay:2.75s"/>
+    <circle class="cD" cx="82" cy="270" r="2.5" fill="#C0CCD8" style="animation-delay:3.3s"/>
+    <circle class="cD" cx="146" cy="117" r="2.5" fill="#C0CCD8" style="animation-delay:3.85s"/>
+
+    <!-- MAIN SYMBOL -->
+    <g class="fl3">
+      <path d="M300,75 L438,132 L495,270 L438,408 L300,465 L162,408 L105,270 L162,132 Z"
+        fill="none" stroke="rgba(255,255,255,.055)" stroke-width="1.5"/>
+
+      <!-- SILVER REGION -->
+      <g clip-path="url(#sC3)">
+        <path d="M300,75 L162,132 L105,270 L162,408 L300,465 C195,345 405,195 300,75Z" fill="url(#sG3)" opacity=".93"/>
+        <rect class="bp3" x="165" y="160" width="52" height="40" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".88" style="--o:.88;animation-delay:0.9s"/>
+        <rect class="bp3" x="235" y="223" width="48" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".82" style="--o:.82;animation-delay:0.7s"/>
+        <rect class="bp3" x="163" y="220" width="55" height="46" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.5s"/>
+        <rect class="bp3" x="168" y="345" width="25" height="18" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".70" style="--o:.70;animation-delay:0.15s"/>
+        <rect class="bp3" x="220" y="290" width="35" height="38" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".74" style="--o:.74;animation-delay:0.3s"/>
+        <rect class="bp3" x="160" y="285" width="40" height="32" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:0s"/>
+        <rect class="bp3" x="220" y="350" width="28" height="24" rx="4" fill="url(#aG3)" stroke="rgba(255,255,255,.25)" stroke-width="1" opacity=".64" style="--o:.64;animation-delay:.8s"/>
+        <circle class="sAm" cx="265" cy="170" r="16" fill="url(#aN3)" opacity=".72" stroke="rgba(255,255,255,.3)" stroke-width="1.5"/>
+      </g>
+
+      <!-- AMBER REGION -->
+      <g clip-path="url(#aC3)">
+        <path d="M300,75 L438,132 L495,270 L438,408 L300,465 C195,345 405,195 300,75Z" fill="url(#aG3)" opacity=".88"/>
+        <g filter="url(#nGl3)">
+          <line class="de3" x1="386" y1="162" x2="355" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.15s"/>
+          <line class="de3" x1="405" y1="162" x2="440" y2="214" stroke="#8090A4" stroke-width="4.5" stroke-linecap="round" opacity=".45" style="animation-delay:.35s"/>
+          <line class="de3" x1="364" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.6s"/>
+          <line class="de3" x1="431" y1="247" x2="398" y2="294" stroke="#8090A4" stroke-width="4" stroke-linecap="round" opacity=".4" style="animation-delay:.8s"/>
+          <line class="de3" x1="394" y1="331" x2="385" y2="368" stroke="#8090A4" stroke-width="3.5" stroke-linecap="round" opacity=".35" style="animation-delay:1.05s"/>
+          <polygon class="ap3" points="349,210 357,222 363,212" fill="#8090A4" opacity=".45" style="animation-delay:.15s"/>
+          <polygon class="ap3" points="434,210 442,222 448,210" fill="#8090A4" opacity=".45" style="animation-delay:.35s"/>
+          <polygon class="ap3" points="392,290 400,302 406,290" fill="#8090A4" opacity=".4" style="animation-delay:.6s"/>
+          <polygon class="ap3" points="379,365 387,377 393,365" fill="#8090A4" opacity=".35" style="animation-delay:1.05s"/>
+        </g>
+        <g class="nf3" style="animation-delay:0s">
+          <circle class="np3" cx="395" cy="148" r="17" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".75" style="--r:17"/>
+        </g>
+        <g class="nf3" style="animation-delay:.3s">
+          <circle class="np3" cx="355" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
+        </g>
+        <g class="nf3" style="animation-delay:.5s">
+          <circle class="np3" cx="440" cy="236" r="14" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".7" style="--r:14"/>
+        </g>
+        <g class="nf3" style="animation-delay:.8s">
+          <circle class="np3" cx="398" cy="316" r="15" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".72" style="--r:15"/>
+        </g>
+        <g class="nf3" style="animation-delay:1.1s">
+          <circle class="np3" cx="385" cy="390" r="12" fill="url(#sN3)" stroke="rgba(255,255,255,.3)" stroke-width="1.5" opacity=".65" style="--r:12"/>
+        </g>
+        <rect class="sAm" x="320" y="330" width="26" height="26" rx="3" fill="#5A6A7C" opacity=".85" stroke="rgba(255,255,255,.35)" stroke-width="1.5"/>
+      </g>
+
+      <!-- S-CURVE -->
+      <path class="cB3" d="M300,75 C405,195 195,345 300,465"
+        fill="none" stroke="rgba(255,255,255,.1)" stroke-width="1.8" filter="url(#cGl3)"/>
+    </g>
+  </g>
+
+  <!-- ═══ TEXT GROUP ═══ -->
+  <g id="text-group" class="fi3">
+    <text x="190" y="290" text-anchor="middle" font-family="'IBM Plex Mono',monospace" font-size="72" font-weight="600" letter-spacing=".03em">
+      <tspan fill="#C0CCD8">Onto</tspan><tspan fill="#E8A838">ref</tspan>
+    </text>
+    <text x="190" y="315" text-anchor="middle" font-family="'IBM Plex Sans',sans-serif" font-size="16" font-weight="500" fill="#A8B4C8" letter-spacing=".03em" opacity=".9">
+      Structure that remembers why
+    </text>
+  </g>
+</svg>