diff --git a/index.html b/index.html
index 8b13789..048409d 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,249 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Privacy Index</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <style>
+    *{margin:0;padding:0;box-sizing:border-box}
+    html,body{height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:#e3f4ff;color:#123}
+    body{overflow:hidden}
+    .scene-wrap{
+      position:relative;
+      width:100vw;
+      height:100vh;
+      display:flex;
+      align-items:flex-end;
+      justify-content:center;
+      background:linear-gradient(to bottom,#bfe7ff 0%,#d8f1ff 35%,#f5fbff 100%);
+    }
+    .scene-sky{
+      position:absolute;
+      inset:0;
+      background:radial-gradient(circle at 20% 15%,#ffffffaa 0,transparent 40%);
+      pointer-events:none;
+      z-index:0;
+    }
+    .scene-svg{
+      position:relative;
+      width:100%;
+      height:100%;
+      display:block;
+      z-index:1;
+    }
+    .title-wrap{
+      position:absolute;
+      top:7vh;
+      left:6vw;
+      z-index:5;
+      color:#0f2434;
+      text-shadow:0 2px 6px #00000026;
+    }
+    .title-wrap h1{
+      font-size:clamp(2.4rem,4vw,3.6rem);
+      font-weight:700;
+      letter-spacing:0.02em;
+      margin-bottom:0.25rem;
+    }
+    .title-wrap p{
+      font-size:clamp(0.9rem,1.2vw,1.05rem);
+      max-width:26rem;
+      line-height:1.5;
+      opacity:0.9;
+    }
+    @keyframes treeFloat{
+      0%{transform:translateY(0)}
+      50%{transform:translateY(-2px)}
+      100%{transform:translateY(0)}
+    }
+    @keyframes cloudDrift{
+      0%{transform:translateX(0)}
+      100%{transform:translateX(40px)}
+    }
+    .tree{
+      animation:treeFloat 4s ease-in-out infinite;
+      transform-origin:50% 100%;
+    }
+    .tree:nth-child(odd){animation-duration:5.2s}
+    .cloud{
+      animation:cloudDrift 26s linear infinite alternate;
+    }
+    .ground-label{
+      font-size:9px;
+      fill:#fdfdfd;
+      opacity:.82;
+      letter-spacing:.06em;
+    }
+    @media (max-width:640px){
+      .title-wrap{top:5vh;left:5vw;right:8vw}
+      .title-wrap p{max-width:18rem}
+    }
+  </style>
+</head>
+<body>
+  <div class="scene-wrap">
+    <div class="scene-sky"></div>
+    <div class="title-wrap">
+      <h1>Privacy Index</h1>
+      <p>
+        A clear landscape of digital privacy.
+        View how services, products, and policies
+        stand on the horizon of trust.
+      </p>
+    </div>
+    <svg
+      class="scene-svg"
+      viewBox="0 0 1440 900"
+      preserveAspectRatio="xMidYMax slice"
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id="landGradient" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0%" stop-color="#86c97a" />
+          <stop offset="55%" stop-color="#4fa65a" />
+          <stop offset="100%" stop-color="#377b3e" />
+        </linearGradient>
+        <linearGradient id="dirtGradient" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0%" stop-color="#8b5a35" />
+          <stop offset="45%" stop-color="#6b4023" />
+          <stop offset="100%" stop-color="#3c2413" />
+        </linearGradient>
+        <linearGradient id="hillGradient" x1="0" x2="1" y1="0" y2="1">
+          <stop offset="0%" stop-color="#7ac384" />
+          <stop offset="100%" stop-color="#4a9054" />
+        </linearGradient>
+        <radialGradient id="treeCrown" cx="50%" cy="25%" r="65%">
+          <stop offset="0%" stop-color="#e5ffe5" />
+          <stop offset="35%" stop-color="#8fd19b" />
+          <stop offset="100%" stop-color="#357a42" />
+        </radialGradient>
+        <linearGradient id="treeTrunk" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0%" stop-color="#6b4226" />
+          <stop offset="100%" stop-color="#3d2616" />
+        </linearGradient>
+        <linearGradient id="cloudGrad" x1="0" x2="1" y1="0" y2="0">
+          <stop offset="0%" stop-color="#ffffffee" />
+          <stop offset="100%" stop-color="#f0f6ffdd" />
+        </linearGradient>
+      </defs>
 
+      <rect x="0" y="0" width="1440" height="900" fill="transparent" />
+
+      <g class="cloud" fill="url(#cloudGrad)" opacity="0.9">
+        <ellipse cx="230" cy="110" rx="60" ry="32" />
+        <ellipse cx="280" cy="100" rx="48" ry="26" />
+        <ellipse cx="320" cy="115" rx="54" ry="30" />
+      </g>
+      <g class="cloud" fill="url(#cloudGrad)" opacity="0.78">
+        <ellipse cx="1040" cy="160" rx="70" ry="34" />
+        <ellipse cx="990" cy="170" rx="40" ry="24" />
+        <ellipse cx="1105" cy="168" rx="46" ry="24" />
+      </g>
+
+      <path
+        d="M0,530
+           C240,480 420,470 720,500
+           C1040,530 1180,500 1440,470
+           L1440,660 L0,660 Z"
+        fill="url(#hillGradient)"
+        opacity="0.96"
+      />
+
+      <path
+        d="M0,560
+           C260,540 480,555 720,570
+           C1040,590 1200,600 1440,610
+           L1440,760 L0,760 Z"
+        fill="url(#landGradient)"
+      />
+
+      <path
+        d="M0,720
+           C220,700 430,715 720,730
+           C1040,750 1220,760 1440,755
+           L1440,900 L0,900 Z"
+        fill="url(#dirtGradient)"
+      />
+
+      <g>
+        <circle cx="160" cy="540" r="7" fill="#ffffffaa" />
+        <circle cx="310" cy="520" r="6" fill="#ffffffaa" />
+        <circle cx="490" cy="535" r="5" fill="#ffffffaa" />
+      </g>
+
+      <g class="tree" transform="translate(190,520)">
+        <rect x="-5" y="0" width="10" height="42" fill="url(#treeTrunk)" />
+        <circle cx="0" cy="-6" r="24" fill="url(#treeCrown)" />
+        <circle cx="-16" cy="0" r="16" fill="url(#treeCrown)" />
+        <circle cx="16" cy="0" r="16" fill="url(#treeCrown)" />
+      </g>
+
+      <g class="tree" transform="translate(360,515)">
+        <rect x="-4" y="0" width="8" height="36" fill="url(#treeTrunk)" />
+        <circle cx="0" cy="-4" r="20" fill="url(#treeCrown)" />
+        <circle cx="-13" cy="2" r="13" fill="url(#treeCrown)" />
+        <circle cx="13" cy="2" r="13" fill="url(#treeCrown)" />
+      </g>
+
+      <g class="tree" transform="translate(560,525)">
+        <rect x="-4" y="0" width="8" height="40" fill="url(#treeTrunk)" />
+        <circle cx="0" cy="-6" r="22" fill="url(#treeCrown)" />
+        <circle cx="-14" cy="2" r="14" fill="url(#treeCrown)" />
+        <circle cx="14" cy="2" r="14" fill="url(#treeCrown)" />
+      </g>
+
+      <g class="tree" transform="translate(860,520)">
+        <rect x="-4" y="0" width="8" height="38" fill="url(#treeTrunk)" />
+        <circle cx="0" cy="-6" r="21" fill="url(#treeCrown)" />
+        <circle cx="-13" cy="2" r="13" fill="url(#treeCrown)" />
+        <circle cx="13" cy="2" r="13" fill="url(#treeCrown)" />
+      </g>
+
+      <g class="tree" transform="translate(1120,515)">
+        <rect x="-5" y="0" width="10" height="44" fill="url(#treeTrunk)" />
+        <circle cx="0" cy="-8" r="25" fill="url(#treeCrown)" />
+        <circle cx="-17" cy="0" r="16" fill="url(#treeCrown)" />
+        <circle cx="17" cy="0" r="16" fill="url(#treeCrown)" />
+      </g>
+
+      <g opacity="0.18" fill="#000000">
+        <ellipse cx="190" cy="565" rx="15" ry="4" />
+        <ellipse cx="360" cy="560" rx="13" ry="3.5" />
+        <ellipse cx="560" cy="570" rx="14" ry="4" />
+        <ellipse cx="860" cy="565" rx="13" ry="3.5" />
+        <ellipse cx="1120" cy="560" rx="16" ry="4" />
+      </g>
+
+      <g opacity="0.5">
+        <path
+          d="M90,735 C130,728 190,726 240,730"
+          fill="none"
+          stroke="#d9b28a"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+        <path
+          d="M520,742 C580,736 640,736 700,741"
+          fill="none"
+          stroke="#c89c73"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+        <path
+          d="M960,750 C1040,744 1160,744 1240,748"
+          fill="none"
+          stroke="#b6865e"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+      </g>
+
+      <text
+        x="50"
+        y="880"
+        class="ground-label"
+      >FOUNDATION: TRANSPARENT, VERIFIABLE PRIVACY SCORES</text>
+    </svg>
+  </div>
+</body>
+</html>
