commit 971a92cc97fc03bc6ecc42af749d7cf95079e09d
Author: Atash03 <hugokarp12@gmail.com>
Date:   Thu Apr 9 14:35:49 2026 +0500

    final product

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..dfe1eec
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,33 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
diff --git a/bun.lock b/bun.lock
new file mode 100644
index 0000000..419f4f8
--- /dev/null
+++ b/bun.lock
@@ -0,0 +1,177 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "netijeli-binyat",
+      "dependencies": {
+        "@fontsource-variable/manrope": "^5.2.8",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+        "tailwindcss": "^3.4",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+      },
+    },
+  },
+  "packages": {
+    "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
+
+    "@fontsource-variable/manrope": ["@fontsource-variable/manrope@5.2.8", "", {}, "sha512-nc9lOuCRz73UHnovDE2bwXUdghE2SEOc7Aii0qGe3CLyE03W1a7VnY5Z6euRiapiKbCkGS+eXbY3s/kvWeGeSw=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
+
+    "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
+
+    "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
+
+    "@types/bun": ["@types/bun@1.3.11", "", { "dependencies": { "bun-types": "1.3.11" } }, "sha512-5vPne5QvtpjGpsGYXiFyycfpDF2ECyPcTSsFBMa0fraoxiQyMJ3SmuQIGhzPg2WJuWxVBoxWJ2kClYTcw/4fAg=="],
+
+    "@types/node": ["@types/node@25.5.2", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-tO4ZIRKNC+MDWV4qKVZe3Ql/woTnmHDr5JD8UI5hn2pwBrHEwOEMZK7WlNb5RKB6EoJ02gwmQS9OrjuFnZYdpg=="],
+
+    "any-promise": ["any-promise@1.3.0", "", {}, "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="],
+
+    "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="],
+
+    "arg": ["arg@5.0.2", "", {}, "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="],
+
+    "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
+
+    "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
+
+    "bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
+
+    "camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],
+
+    "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
+
+    "commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
+
+    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
+
+    "didyoumean": ["didyoumean@1.2.2", "", {}, "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="],
+
+    "dlv": ["dlv@1.1.3", "", {}, "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="],
+
+    "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
+
+    "fastq": ["fastq@1.20.1", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw=="],
+
+    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
+
+    "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
+
+    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
+
+    "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
+
+    "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
+
+    "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
+
+    "is-core-module": ["is-core-module@2.16.1", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w=="],
+
+    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
+
+    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
+
+    "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
+
+    "jiti": ["jiti@1.21.7", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="],
+
+    "lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
+
+    "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
+
+    "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
+
+    "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
+
+    "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],
+
+    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
+    "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
+
+    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
+
+    "object-hash": ["object-hash@3.0.0", "", {}, "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="],
+
+    "path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
+
+    "pify": ["pify@2.3.0", "", {}, "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="],
+
+    "pirates": ["pirates@4.0.7", "", {}, "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="],
+
+    "postcss": ["postcss@8.5.9", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw=="],
+
+    "postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],
+
+    "postcss-js": ["postcss-js@4.1.0", "", { "dependencies": { "camelcase-css": "^2.0.1" }, "peerDependencies": { "postcss": "^8.4.21" } }, "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw=="],
+
+    "postcss-load-config": ["postcss-load-config@6.0.1", "", { "dependencies": { "lilconfig": "^3.1.1" }, "peerDependencies": { "jiti": ">=1.21.0", "postcss": ">=8.0.9", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["jiti", "postcss", "tsx", "yaml"] }, "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g=="],
+
+    "postcss-nested": ["postcss-nested@6.2.0", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ=="],
+
+    "postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
+
+    "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
+
+    "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
+
+    "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
+
+    "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
+
+    "resolve": ["resolve@1.22.11", "", { "dependencies": { "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ=="],
+
+    "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
+
+    "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "sucrase": ["sucrase@3.35.1", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", "lines-and-columns": "^1.1.6", "mz": "^2.7.0", "pirates": "^4.0.1", "tinyglobby": "^0.2.11", "ts-interface-checker": "^0.1.9" }, "bin": { "sucrase": "bin/sucrase", "sucrase-node": "bin/sucrase-node" } }, "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw=="],
+
+    "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
+
+    "tailwindcss": ["tailwindcss@3.4.19", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.6.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.21.7", "lilconfig": "^3.1.3", "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.1.1", "postcss": "^8.4.47", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", "postcss-nested": "^6.2.0", "postcss-selector-parser": "^6.1.2", "resolve": "^1.22.8", "sucrase": "^3.35.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ=="],
+
+    "thenify": ["thenify@3.3.1", "", { "dependencies": { "any-promise": "^1.0.0" } }, "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw=="],
+
+    "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
+
+    "tinyglobby": ["tinyglobby@0.2.16", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg=="],
+
+    "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
+
+    "ts-interface-checker": ["ts-interface-checker@0.1.13", "", {}, "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
+
+    "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
+
+    "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
+
+    "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
+
+    "tinyglobby/picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
+  }
+}
diff --git a/dist/styles.css b/dist/styles.css
new file mode 100644
index 0000000..cc52808
--- /dev/null
+++ b/dist/styles.css
@@ -0,0 +1,2 @@
+@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../public/fonts/inter/InterVariable.woff2) format("woff2")}@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(../public/fonts/manrope/manrope-cyrillic-ext-wght-normal.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(../public/fonts/manrope/manrope-cyrillic-wght-normal.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(../public/fonts/manrope/manrope-latin-ext-wght-normal.woff2) format("woff2");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(../public/fonts/manrope/manrope-latin-wght-normal.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:400;font-display:block;src:url(../public/fonts/material-symbols/MaterialSymbolsOutlined-subset.woff2) format("woff2")}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}body{font-family:Inter,sans-serif;background-color:#f7f9fb}h1,h2,h3{font-family:Manrope,sans-serif}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.lang-btn{color:rgba(42,52,57,.4)}.lang-btn.active{color:#3a5f94;background:rgba(58,95,148,.1)}.carousel{position:relative}.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}.carousel-slide.active{opacity:.9}.carousel-next,.carousel-prev{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;background:hsla(0,0%,100%,.8);border:none;font-size:24px;line-height:1;cursor:pointer;color:#2a3439;opacity:0;transition:opacity .3s}.carousel:hover .carousel-next,.carousel:hover .carousel-prev{opacity:1}.carousel-prev{left:12px}.carousel-next{right:12px}.carousel-next:hover,.carousel-prev:hover{background:#fff}.carousel-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10}.carousel-dot{width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;background:hsla(0,0%,100%,.5);transition:background .3s}.carousel-dot.active{background:#fff}.mobile-drawer{transform:translateX(100%);transition:transform .3s ease}.mobile-drawer.open{transform:translateX(0)}.drawer-backdrop{opacity:0;pointer-events:none;transition:opacity .3s ease}.drawer-backdrop.open{opacity:1;pointer-events:auto}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-bottom-8{bottom:-2rem}.-right-8{right:-2rem}.right-0{right:0}.top-0{top:0}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[60\]{z-index:60}.z-\[70\]{z-index:70}.order-1{order:1}.order-2{order:2}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-video{aspect-ratio:16/9}.h-10{height:2.5rem}.h-2{height:.5rem}.h-20{height:5rem}.h-64{height:16rem}.h-8{height:2rem}.h-\[80vh\]{height:80vh}.h-auto{height:auto}.h-full{height:100%}.w-10{width:2.5rem}.w-20{width:5rem}.w-72{width:18rem}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-md{max-width:28rem}.max-w-screen-2xl{max-width:1536px}.flex-grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-px{gap:1px}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2.5rem*var(--tw-space-x-reverse));margin-left:calc(2.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.scroll-smooth{scroll-behavior:smooth}.break-all{word-break:break-all}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-none{border-style:none}.border-outline-variant\/10{border-color:rgba(169,180,185,.1)}.border-outline-variant\/20{border-color:rgba(169,180,185,.2)}.bg-\[\#f7f9fb\]{--tw-bg-opacity:1;background-color:rgb(247 249 251/var(--tw-bg-opacity,1))}.bg-\[\#f7f9fb\]\/80{background-color:rgba(247,249,251,.8)}.bg-background{--tw-bg-opacity:1;background-color:rgb(247 249 251/var(--tw-bg-opacity,1))}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-outline-variant{--tw-bg-opacity:1;background-color:rgb(169 180 185/var(--tw-bg-opacity,1))}.bg-outline-variant\/20{background-color:rgba(169,180,185,.2)}.bg-primary{--tw-bg-opacity:1;background-color:rgb(58 95 148/var(--tw-bg-opacity,1))}.bg-primary\/80{background-color:rgba(58,95,148,.8)}.bg-surface-container{--tw-bg-opacity:1;background-color:rgb(232 239 243/var(--tw-bg-opacity,1))}.bg-surface-container-high{--tw-bg-opacity:1;background-color:rgb(225 233 238/var(--tw-bg-opacity,1))}.bg-surface-container-low{--tw-bg-opacity:1;background-color:rgb(240 244 247/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-background{--tw-gradient-from:#f7f9fb var(--tw-gradient-from-position);--tw-gradient-to:rgba(247,249,251,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-background\/80{--tw-gradient-to:rgba(247,249,251,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(247,249,251,.8) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-12{padding:3rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.font-\[\'Inter\'\]{font-family:Inter}.font-\[\'Manrope\'\]{font-family:Manrope}.font-body{font-family:Inter,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wide{letter-spacing:.025em}.tracking-widest{letter-spacing:.1em}.text-\[\#2a3439\]\/30{color:rgba(42,52,57,.3)}.text-\[\#2a3439\]\/60{color:rgba(42,52,57,.6)}.text-\[\#2a3439\]\/70{color:rgba(42,52,57,.7)}.text-\[\#3a5f94\]{--tw-text-opacity:1;color:rgb(58 95 148/var(--tw-text-opacity,1))}.text-on-primary{--tw-text-opacity:1;color:rgb(246 247 255/var(--tw-text-opacity,1))}.text-on-surface{--tw-text-opacity:1;color:rgb(42 52 57/var(--tw-text-opacity,1))}.text-on-surface-variant{--tw-text-opacity:1;color:rgb(86 97 102/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(58 95 148/var(--tw-text-opacity,1))}.text-primary-fixed{--tw-text-opacity:1;color:rgb(213 227 255/var(--tw-text-opacity,1))}.text-primary-fixed\/60{color:rgba(213,227,255,.6)}.opacity-0{opacity:0}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-primary\/20{--tw-shadow-color:rgba(58,95,148,.2);--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.hover\:bg-primary:hover{--tw-bg-opacity:1;background-color:rgb(58 95 148/var(--tw-bg-opacity,1))}.hover\:bg-primary-dim:hover{--tw-bg-opacity:1;background-color:rgb(45 83 135/var(--tw-bg-opacity,1))}.hover\:bg-surface-container:hover{--tw-bg-opacity:1;background-color:rgb(232 239 243/var(--tw-bg-opacity,1))}.hover\:bg-surface-container-highest:hover{--tw-bg-opacity:1;background-color:rgb(217 228 234/var(--tw-bg-opacity,1))}.hover\:text-\[\#3a5f94\]:hover{--tw-text-opacity:1;color:rgb(58 95 148/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-70:hover{opacity:.7}.focus\:bg-surface-container-lowest:focus{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\:opacity-80:active{opacity:.8}.group:hover .group-hover\:text-on-primary{--tw-text-opacity:1;color:rgb(246 247 255/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-on-primary\/80{color:rgba(246,247,255,.8)}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:gap-4{gap:1rem}}@media (min-width:768px){.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-7{grid-column:span 7/span 7}.md\:mb-10{margin-bottom:2.5rem}.md\:mb-12{margin-bottom:3rem}.md\:mb-16{margin-bottom:4rem}.md\:mb-24{margin-bottom:6rem}.md\:mb-4{margin-bottom:1rem}.md\:mb-6{margin-bottom:1.5rem}.md\:mb-8{margin-bottom:2rem}.md\:mt-16{margin-top:4rem}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-10{height:2.5rem}.md\:h-28{height:7rem}.md\:h-screen{height:100vh}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-12{gap:3rem}.md\:gap-8{gap:2rem}.md\:space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem*var(--tw-space-x-reverse));margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)))}.md\:break-normal{overflow-wrap:normal;word-break:normal}.md\:p-12{padding:3rem}.md\:p-8{padding:2rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:py-4{padding-top:1rem;padding-bottom:1rem}.md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.md\:pl-16{padding-left:4rem}.md\:pt-10{padding-top:2.5rem}.md\:text-left{text-align:left}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem}.md\:text-lg,.md\:text-xl{line-height:1.75rem}.md\:text-xl{font-size:1.25rem}}@media (min-width:1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:mb-16{margin-bottom:4rem}.lg\:mb-20{margin-bottom:5rem}.lg\:mt-20{margin-top:5rem}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:aspect-square{aspect-ratio:1/1}.lg\:h-36{height:9rem}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:gap-32{gap:8rem}.lg\:p-12{padding:3rem}.lg\:px-12{padding-left:3rem;padding-right:3rem}.lg\:py-20{padding-top:5rem;padding-bottom:5rem}.lg\:py-32{padding-top:8rem;padding-bottom:8rem}.lg\:text-2xl{font-size:1.5rem;line-height:2rem}.lg\:text-3xl{font-size:1.875rem;line-height:2.25rem}.lg\:text-5xl{font-size:3rem}.lg\:text-5xl,.lg\:text-6xl{line-height:1}.lg\:text-6xl{font-size:3.75rem}.lg\:text-xl{font-size:1.25rem;line-height:1.75rem}}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c3f203f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,439 @@
+<!DOCTYPE html>
+
+<html lang="ru" class="scroll-smooth">
+
+<head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <link rel="icon" type="image/png" href="public/favicon.png">
+    <link rel="apple-touch-icon" href="public/apple-touch-icon.png">
+    <link rel="preload" as="image" href="public/logo.png" fetchpriority="high">
+    <link rel="preload" as="image" href="public/logo-hero.png" fetchpriority="high">
+    <link rel="preload" as="image" href="public/hero-back-poster.jpg">
+    <link rel="preload" as="font" type="font/woff2" href="public/fonts/inter/InterVariable.woff2" crossorigin>
+    <link rel="stylesheet" href="dist/styles.css">
+</head>
+
+<body class="text-on-surface">
+    <!-- TopNavBar -->
+    <nav
+        class="bg-[#f7f9fb]/80 backdrop-blur-xl docked full-width top-0 sticky z-50 transition-all border-b border-outline-variant/10">
+        <div class="flex justify-between items-center px-4 md:px-8 lg:px-12 py-4 md:py-6 w-full max-w-screen-2xl mx-auto">
+            <a href="#">
+                <img src="public/logo.png" alt="Netijeli Binyat" class="h-8 md:h-10" fetchpriority="high">
+            </a>
+            <div class="hidden lg:flex space-x-10 items-center font-['Manrope'] font-bold tracking-tight">
+                <a class="text-[#2a3439]/70 hover:text-[#3a5f94] transition-colors duration-300" href="#about" data-i18n="nav_about">О нас</a>
+                <a class="text-[#2a3439]/70 hover:text-[#3a5f94] transition-colors duration-300"
+                    href="#services" data-i18n="nav_services">Услуги</a>
+                <a class="text-[#2a3439]/70 hover:text-[#3a5f94] transition-colors duration-300"
+                    href="#projects" data-i18n="nav_projects">Проекты</a>
+                <a class="text-[#2a3439]/70 hover:text-[#3a5f94] transition-colors duration-300"
+                    href="#current-works" data-i18n="nav_current_works">Текущие работы</a>
+                <a class="text-[#2a3439]/70 hover:text-[#3a5f94] transition-colors duration-300"
+                    href="#contacts" data-i18n="nav_contacts">Контакты</a>
+            </div>
+            <div class="flex items-center space-x-4 md:space-x-6">
+                <div class="hidden md:flex items-center gap-1" id="lang-switcher">
+                    <button onclick="setLang('ru')" class="lang-btn text-sm font-bold px-2 py-1 rounded-sm transition-all" data-lang="ru">RU</button>
+                    <span class="text-[#2a3439]/30 text-sm">/</span>
+                    <button onclick="setLang('en')" class="lang-btn text-sm font-bold px-2 py-1 rounded-sm transition-all" data-lang="en">EN</button>
+                    <!-- <span class="text-[#2a3439]/30 text-sm">/</span>
+                    <button onclick="setLang('tk')" class="lang-btn text-sm font-bold px-2 py-1 rounded-sm transition-all" data-lang="tk">TK</button> -->
+                </div>
+                <a href="#contacts"
+                    class="bg-primary text-on-primary px-4 py-2 md:px-6 text-sm font-bold rounded-sm hover:bg-primary-dim transition-all active:opacity-80" data-i18n="nav_contact_btn">
+                    Связаться
+                </a>
+                <button id="hamburger-btn" class="lg:hidden flex items-center justify-center w-10 h-10 text-on-surface" aria-label="Menu">
+                    <span class="material-symbols-outlined text-2xl">menu</span>
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Mobile Drawer -->
+    <div id="drawer-backdrop" class="drawer-backdrop fixed inset-0 bg-black/40 z-[60]"></div>
+    <aside id="mobile-drawer" class="mobile-drawer fixed top-0 right-0 h-full w-72 bg-[#f7f9fb] z-[70] shadow-2xl flex flex-col">
+        <div class="flex justify-between items-center px-6 py-5 border-b border-outline-variant/20">
+            <span class="font-bold text-primary font-['Manrope']">Netijeli binyat</span>
+            <button id="drawer-close" class="w-10 h-10 flex items-center justify-center text-on-surface">
+                <span class="material-symbols-outlined">close</span>
+            </button>
+        </div>
+        <div class="flex flex-col py-4 flex-grow font-['Manrope'] font-bold">
+            <a class="px-6 py-4 text-[#2a3439]/70 hover:bg-surface-container transition-colors" href="#about" data-i18n="nav_about" onclick="closeDrawer()">О нас</a>
+            <a class="px-6 py-4 text-[#2a3439]/70 hover:bg-surface-container transition-colors" href="#services" data-i18n="nav_services" onclick="closeDrawer()">Услуги</a>
+            <a class="px-6 py-4 text-[#2a3439]/70 hover:bg-surface-container transition-colors" href="#projects" data-i18n="nav_projects" onclick="closeDrawer()">Проекты</a>
+            <a class="px-6 py-4 text-[#2a3439]/70 hover:bg-surface-container transition-colors" href="#current-works" data-i18n="nav_current_works" onclick="closeDrawer()">Текущие работы</a>
+            <a class="px-6 py-4 text-[#2a3439]/70 hover:bg-surface-container transition-colors" href="#contacts" data-i18n="nav_contacts" onclick="closeDrawer()">Контакты</a>
+        </div>
+        <div class="px-6 py-6 border-t border-outline-variant/20">
+            <div class="flex items-center gap-2" id="lang-switcher-mobile">
+                <button onclick="setLang('ru')" class="lang-btn text-sm font-bold px-2 py-1 rounded-sm transition-all" data-lang="ru">RU</button>
+                <span class="text-[#2a3439]/30 text-sm">/</span>
+                <button onclick="setLang('en')" class="lang-btn text-sm font-bold px-2 py-1 rounded-sm transition-all" data-lang="en">EN</button>
+            </div>
+        </div>
+    </aside>
+    <!-- Hero Section -->
+    <section class="relative h-[80vh] md:h-screen flex items-center overflow-hidden bg-background">
+        <div class="absolute inset-0 z-0">
+            <div class="absolute inset-0 bg-gradient-to-r from-background via-background/80 to-transparent z-10"></div>
+            <img class="w-full h-full object-cover md:hidden" src="public/hero-back-poster.jpg" alt="Hero background" />
+            <video class="w-full h-full object-cover hidden md:block" autoplay muted loop playsinline preload="metadata" poster="public/hero-back-poster.jpg">
+                <source src="public/hero-back-video.webm" type="video/webm">
+                <source src="public/hero-back-video.mp4" type="video/mp4">
+            </video>
+        </div>
+        <div class="relative z-20 max-w-screen-2xl mx-auto px-4 md:px-8 lg:px-12 w-full grid grid-cols-1 lg:grid-cols-2 gap-12">
+            <div class="flex flex-col justify-center">
+                <img src="public/logo-hero.png" alt="Netijeli Binyat" class="h-20 md:h-28 lg:h-36 w-auto object-contain mb-4 md:mb-6 self-start" fetchpriority="high">
+                <p class="text-lg md:text-xl lg:text-2xl font-medium text-on-surface mb-3 md:mb-4" data-i18n="hero_subtitle">Надёжное строительство и инженерные решения</p>
+                <p class="text-sm md:text-base text-on-surface-variant max-w-md mb-6 md:mb-10 leading-relaxed font-body" data-i18n="hero_desc">
+                    Профессиональный подход к реализации сложных инфраструктурных задач. Мы строим будущее, опираясь на опыт и точность.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
+                    <a href="#contacts"
+                        class="bg-primary text-on-primary px-6 py-3 md:px-8 md:py-4 font-bold rounded-sm flex items-center justify-center gap-2 hover:bg-primary-dim transition-all" data-i18n-html="hero_contact_btn">
+                        Связаться
+                        <span class="material-symbols-outlined text-sm">arrow_forward</span>
+                    </a>
+                    <a href="#services"
+                        class="bg-surface-container-high text-on-surface px-6 py-3 md:px-8 md:py-4 font-bold rounded-sm hover:bg-surface-container-highest transition-all text-center" data-i18n="hero_services_btn">
+                        Наши услуги
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- About Section: Architectural Grid -->
+    <section class="py-16 md:py-24 lg:py-32 bg-surface-container-low" id="about">
+        <div class="max-w-screen-2xl mx-auto px-4 md:px-8 lg:px-12 grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
+            <div class="md:col-span-5 relative">
+                <div class="aspect-[3/4] bg-surface-container overflow-hidden flex items-center justify-center p-8 md:p-12">
+                    <img class="w-full h-auto object-contain" src="public/logo-hero.png" alt="Netijeli Binyat" loading="lazy" decoding="async" />
+                </div>
+                <div class="absolute -bottom-8 -right-8 bg-primary p-12 text-on-primary hidden lg:block shadow-2xl">
+                    <div class="text-5xl font-black">2021</div>
+                    <div class="text-xs uppercase tracking-[0.2em] opacity-80" data-i18n="year_established">Год основания</div>
+                </div>
+            </div>
+            <div class="md:col-span-7 md:pl-16">
+                <span class="text-primary text-sm font-bold tracking-widest uppercase mb-4 block" data-i18n="about_label">О компании</span>
+                <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-on-surface mb-6 md:mb-8 tracking-tight" data-i18n="about_title">Лицензированная деятельность и
+                    гарантия качества</h2>
+                <p class="text-base md:text-lg text-on-surface-variant mb-8 md:mb-12 leading-relaxed" data-i18n="about_desc">
+                    С 2021 года «Netijeli binyat» осуществляет профессиональную деятельность в строительном секторе. Мы
+                    объединяем глубокую техническую экспертизу с современными технологиями управления проектами.
+                </p>
+                <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 md:gap-8">
+                    <div>
+                        <span class="material-symbols-outlined text-primary text-3xl mb-4">architecture</span>
+                        <h4 class="font-bold text-on-surface mb-2" data-i18n="experience">Опыт</h4>
+                        <p class="text-sm text-on-surface-variant" data-i18n="experience_desc">Команда экспертов с многолетним стажем работы.</p>
+                    </div>
+                    <div>
+                        <span class="material-symbols-outlined text-primary text-3xl mb-4">verified</span>
+                        <h4 class="font-bold text-on-surface mb-2" data-i18n="quality">Качество</h4>
+                        <p class="text-sm text-on-surface-variant" data-i18n="quality_desc">Строгое соответствие международным стандартам.</p>
+                    </div>
+                    <div>
+                        <span class="material-symbols-outlined text-primary text-3xl mb-4">account_tree</span>
+                        <h4 class="font-bold text-on-surface mb-2" data-i18n="comprehensive">Комплекс</h4>
+                        <p class="text-sm text-on-surface-variant" data-i18n="comprehensive_desc">Реализация проектов от котлована до ввода.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Updated Services Section -->
+    <section class="py-16 md:py-24 lg:py-32 bg-white" id="services">
+        <div class="max-w-screen-2xl mx-auto px-4 md:px-8 lg:px-12">
+            <div class="mb-10 md:mb-16 lg:mb-20 text-center md:text-left">
+                <h2 class="text-3xl md:text-5xl lg:text-6xl font-black text-on-surface tracking-tighter uppercase leading-none mb-4 md:mb-6" data-i18n="services_title">Услуги</h2>
+                <div class="w-20 h-2 bg-primary mb-8 hidden md:block"></div>
+                <p class="text-base md:text-lg lg:text-xl text-on-surface-variant max-w-2xl" data-i18n="services_desc">Мы предоставляем полный спектр строительных и
+                    инженерных работ любой сложности с соблюдением высших стандартов индустрии.</p>
+            </div>
+            <div
+                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-outline-variant/20 border border-outline-variant/20">
+                <!-- Construction -->
+                <div class="bg-white p-6 md:p-8 lg:p-12 hover:bg-primary transition-all duration-500 group flex flex-col h-full">
+                    <span
+                        class="material-symbols-outlined text-5xl text-primary group-hover:text-on-primary mb-8 transition-colors">home_work</span>
+                    <h3
+                        class="text-2xl font-black text-on-surface group-hover:text-on-primary mb-4 uppercase tracking-tight transition-colors" data-i18n="construction">
+                        Строительство</h3>
+                    <p class="text-on-surface-variant group-hover:text-on-primary/80 mb-8 flex-grow transition-colors" data-i18n="construction_desc">
+                        Возведение современных жилых и коммерческих зданий с использованием передовых технологий и
+                        экологичных материалов.</p>
+                </div>
+                <!-- Reconstruction -->
+                <div class="bg-white p-6 md:p-8 lg:p-12 hover:bg-primary transition-all duration-500 group flex flex-col h-full">
+                    <span
+                        class="material-symbols-outlined text-5xl text-primary group-hover:text-on-primary mb-8 transition-colors">handyman</span>
+                    <h3
+                        class="text-2xl font-black text-on-surface group-hover:text-on-primary mb-4 uppercase tracking-tight transition-colors" data-i18n="reconstruction">
+                        Реконструкция</h3>
+                    <p class="text-on-surface-variant group-hover:text-on-primary/80 mb-8 flex-grow transition-colors" data-i18n="reconstruction_desc">
+                        Профессиональное восстановление, усиление конструкций и капитальный ремонт объектов любой
+                        сложности.</p>
+                </div>
+                <!-- Engineering -->
+                <div class="bg-white p-6 md:p-8 lg:p-12 hover:bg-primary transition-all duration-500 group flex flex-col h-full">
+                    <span
+                        class="material-symbols-outlined text-5xl text-primary group-hover:text-on-primary mb-8 transition-colors">settings_input_component</span>
+                    <h3
+                        class="text-2xl font-black text-on-surface group-hover:text-on-primary mb-4 uppercase tracking-tight transition-colors" data-i18n="engineering">
+                        Инженерные системы</h3>
+                    <p class="text-on-surface-variant group-hover:text-on-primary/80 mb-8 flex-grow transition-colors" data-i18n="engineering_desc">
+                        Монтаж и обслуживание систем водоснабжения, канализации, отопления и вентиляции по мировым
+                        стандартам.</p>
+                </div>
+                <!-- Electrical -->
+                <div class="bg-white p-6 md:p-8 lg:p-12 hover:bg-primary transition-all duration-500 group flex flex-col h-full">
+                    <span
+                        class="material-symbols-outlined text-5xl text-primary group-hover:text-on-primary mb-8 transition-colors">bolt</span>
+                    <h3
+                        class="text-2xl font-black text-on-surface group-hover:text-on-primary mb-4 uppercase tracking-tight transition-colors" data-i18n="electrical">
+                        Электромонтаж</h3>
+                    <p class="text-on-surface-variant group-hover:text-on-primary/80 mb-8 flex-grow transition-colors" data-i18n="electrical_desc">
+                        Полный комплекс электромонтажных работ: от проектирования сетей до установки сложного
+                        промышленного оборудования.</p>
+                </div>
+                <!-- Landscaping -->
+                <div class="bg-white p-6 md:p-8 lg:p-12 hover:bg-primary transition-all duration-500 group flex flex-col h-full">
+                    <span
+                        class="material-symbols-outlined text-5xl text-primary group-hover:text-on-primary mb-8 transition-colors">forest</span>
+                    <h3
+                        class="text-2xl font-black text-on-surface group-hover:text-on-primary mb-4 uppercase tracking-tight transition-colors" data-i18n="landscaping">
+                        Благоустройство</h3>
+                    <p class="text-on-surface-variant group-hover:text-on-primary/80 mb-8 flex-grow transition-colors" data-i18n="landscaping_desc">
+                        Профессиональное озеленение, создание парковых зон и ландшафтный дизайн для частных и
+                        общественных территорий.</p>
+                </div>
+                <!-- Consulting / More -->
+                <div class="bg-surface-container-low p-6 md:p-8 lg:p-12 flex flex-col justify-center items-center text-center">
+                    <p class="text-on-surface-variant font-medium mb-6" data-i18n="consultation_text">Нужна консультация по специальному проекту?</p>
+                    <a href="#contacts"
+                        class="bg-primary text-on-primary px-8 py-3 font-bold text-sm uppercase tracking-widest hover:bg-primary-dim transition-all shadow-lg shadow-primary/20" data-i18n="nav_contact_btn">
+                        Связаться
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Projects Section -->
+    <section class="py-16 md:py-24 lg:py-32 bg-surface-container-low" id="projects">
+        <div class="max-w-screen-2xl mx-auto px-4 md:px-8 lg:px-12">
+            <h2 class="text-3xl md:text-4xl lg:text-5xl font-black text-on-surface mb-8 md:mb-12 lg:mb-16 tracking-tight" data-i18n="completed_projects">Реализованные проекты</h2>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-px bg-outline-variant overflow-hidden">
+                <!-- Project 1: Water Treatment Plant -->
+                <div class="group relative bg-background overflow-hidden aspect-video lg:aspect-square">
+                    <div class="carousel absolute inset-0" data-autoplay="4000">
+                        <img class="carousel-slide active w-full h-full object-cover" loading="lazy" decoding="async" src="public/Tejen-SAD_1.webp" alt="Water treatment plant aerial view" />
+                        <img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Tejen-SAD_2.webp" alt="Water treatment plant wide view" />
+                        <button class="carousel-prev" aria-label="Previous">&lsaquo;</button>
+                        <button class="carousel-next" aria-label="Next">&rsaquo;</button>
+                        <div class="carousel-dots"></div>
+                    </div>
+                    <div
+                        class="absolute inset-0 bg-primary/80 opacity-0 group-hover:opacity-100 transition-opacity duration-500 p-4 md:p-8 lg:p-12 flex flex-col justify-end text-on-primary z-20">
+                        <h4 class="text-xl md:text-2xl lg:text-3xl font-bold mb-2" data-i18n="project1_title">Водоочистная станция в г. Теджен</h4>
+                        <p class="text-sm opacity-90" data-i18n="project1_desc">Строительство водоочистной станции мощностью 30 000 м³ в сутки в городе Теджен Ахалского велаята — завершён 2024 г.</p>
+                    </div>
+                </div>
+                <!-- Project 2: Power Supply System -->
+                <div class="group relative bg-background overflow-hidden aspect-video lg:aspect-square">
+                    <div class="carousel absolute inset-0" data-autoplay="4000">
+                        <img class="carousel-slide active w-full h-full object-cover" loading="lazy" decoding="async" src="public/Elektrika_4.webp" alt="Power lines near facility" />
+                        <img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Elektrika_1.webp" alt="Power lines in green field" />
+                        <img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Elektrika_2.webp" alt="Power line infrastructure" />
+                        <img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Elektrika_3.webp" alt="Power lines in desert" />
+                        <button class="carousel-prev" aria-label="Previous">&lsaquo;</button>
+                        <button class="carousel-next" aria-label="Next">&rsaquo;</button>
+                        <div class="carousel-dots"></div>
+                    </div>
+                    <div
+                        class="absolute inset-0 bg-primary/80 opacity-0 group-hover:opacity-100 transition-opacity duration-500 p-4 md:p-8 lg:p-12 flex flex-col justify-end text-on-primary z-20">
+                        <h4 class="text-xl md:text-2xl lg:text-3xl font-bold mb-2" data-i18n="project2_title">Электроснабжение водоочистной станции</h4>
+                        <p class="text-sm opacity-90" data-i18n="project2_desc">Строительно-монтажные работы по внешней системе электроснабжения водоочистной станции мощностью 30 000 м³ в сутки в г. Теджен — завершён 2026 г.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Current Projects: Tonal Layout -->
+    <section class="py-16 md:py-24 lg:py-32 bg-primary text-on-primary" id="current-works">
+        <div class="max-w-screen-2xl mx-auto px-4 md:px-8 lg:px-12">
+            <h2 class="text-3xl md:text-4xl lg:text-5xl font-black mb-4 md:mb-6 tracking-tight uppercase leading-none" data-i18n-html="current_projects_title">Текущие <br /> проекты</h2>
+            <p class="text-base md:text-lg lg:text-xl text-primary-fixed mb-10 md:mb-16 lg:mb-20 max-w-2xl leading-relaxed" data-i18n="current_projects_desc">
+                В настоящее время частное предприятие «Netijeli binyat» осуществляет следующие строительно-монтажные работы:
+            </p>
+            <!-- Current Project 1: text left, carousel right -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center mb-12 md:mb-24">
+                <div>
+                    <span class="text-xs uppercase font-bold tracking-widest text-primary-fixed/60" data-i18n="current1_status">Статус: В процессе</span>
+                    <h3 class="text-xl md:text-2xl lg:text-3xl font-black mt-2 mb-4 uppercase tracking-tight" data-i18n="current1_title">Водоочистная станция в Бабадайханском районе</h3>
+                    <p class="text-primary-fixed leading-relaxed" data-i18n="current1_desc">Строительство водоочистной станции мощностью 20 000 м³ в сутки в Бабадайханском районе Ахалского велаята (Туркменистан).</p>
+                </div>
+                <div class="relative aspect-video overflow-hidden">
+                    <div class="carousel absolute inset-0" data-autoplay="4000">
+                        <img class="carousel-slide active w-full h-full object-cover" loading="lazy" decoding="async" src="public/babadayhan_1.webp" alt="Babadayhan water treatment 1" />
+                        <img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/babadayhan_2.webp" alt="Babadayhan water treatment 2" />
+                        <img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/babadayhan_3.webp" alt="Babadayhan water treatment 3" />
+                        <button class="carousel-prev" aria-label="Previous">&lsaquo;</button>
+                        <button class="carousel-next" aria-label="Next">&rsaquo;</button>
+                        <div class="carousel-dots"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Current Project 2: carousel left, text right -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center">
+                <div class="relative aspect-video overflow-hidden order-2 lg:order-1">
+                    <div class="carousel absolute inset-0" data-autoplay="4000">
+                        <img class="carousel-slide active w-full h-full object-cover" loading="lazy" decoding="async" src="public/Garashsyzlyk_1.webp" alt="Garashsyzlyk water supply 1" />
+                        <img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Garashsyzlyk_2.webp" alt="Garashsyzlyk water supply 2" />
+                        <img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Garashsyzlyk_3.webp" alt="Garashsyzlyk water supply 3" />
+                        <img class="carousel-slide w-full h-full object-cover" loading="lazy" decoding="async" src="public/Garashsyzlyk_4.webp" alt="Garashsyzlyk water supply 4" />
+                        <button class="carousel-prev" aria-label="Previous">&lsaquo;</button>
+                        <button class="carousel-next" aria-label="Next">&rsaquo;</button>
+                        <div class="carousel-dots"></div>
+                    </div>
+                </div>
+                <div class="order-1 lg:order-2">
+                    <span class="text-xs uppercase font-bold tracking-widest text-primary-fixed/60" data-i18n="current2_status">Статус: В процессе</span>
+                    <h3 class="text-xl md:text-2xl lg:text-3xl font-black mt-2 mb-4 uppercase tracking-tight" data-i18n="current2_title">Водоснабжение генгешлика Гарашызлык</h3>
+                    <p class="text-primary-fixed leading-relaxed" data-i18n="current2_desc">Строительство системы водоснабжения генгешлика Гарашызлык в Теженском районе Ахалского велаята (Туркменистан).</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact & Feedback Form -->
+    <section class="py-16 md:py-24 lg:py-32 bg-background" id="contacts">
+        <div class="max-w-screen-2xl mx-auto px-4 md:px-8 lg:px-12">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-32">
+                <div>
+                    <h2 class="text-3xl md:text-4xl lg:text-5xl font-black text-on-surface mb-8 md:mb-12 tracking-tight" data-i18n="contacts_title">Контакты</h2>
+                    <div class="space-y-12">
+                        <div class="flex gap-6">
+                            <span class="material-symbols-outlined text-primary text-3xl">location_on</span>
+                            <div>
+                                <h5 class="font-bold text-on-surface uppercase text-xs tracking-widest mb-2" data-i18n="address_label">Юридический адрес</h5>
+                                <p class="text-sm md:text-lg text-on-surface-variant" data-i18n-html="address_text">Туркменистан, Ашхабад, Беркарарлыкский район,<br />улица Г. Гулиева (2127), дом 64
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex gap-6">
+                            <span class="material-symbols-outlined text-primary text-3xl">call</span>
+                            <div>
+                                <h5 class="font-bold text-on-surface uppercase text-xs tracking-widest mb-2" data-i18n="phones_label">Телефоны
+                                </h5>
+                                <p class="text-sm md:text-lg text-on-surface-variant" data-i18n-html="phones_text">75 35 06<br />+993 65 725570 - Директор<br />+993 65 705509 - Заместитель директора
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex gap-6">
+                            <span class="material-symbols-outlined text-primary text-3xl">mail</span>
+                            <div>
+                                <h5 class="font-bold text-on-surface uppercase text-xs tracking-widest mb-2">Email</h5>
+                                <p class="text-sm md:text-lg text-on-surface-variant break-all md:break-normal" data-i18n-html="email_text">sukrulbinyat@gmail.com - Директор<br />charievmuratberdi@gmail.com - Заместитель директора</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-10 md:mt-16 h-64 rounded-sm overflow-hidden">
+                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4292.169908939408!2d58.40571007685183!3d37.96763107193738!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f6ffe5d0683f49f%3A0x7d1f88253a775209!2zMjEyNyBrw7bDp2VzaSA2NCwgQcWfZ2FiYXQsINCi0YPRgNC60LzQtdC90LjRgdGC0LDQvQ!5e1!3m2!1sru!2s!4v1775706346815!5m2!1sru!2s" class="w-full h-full" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+                    </div>
+                </div>
+                <div class="bg-surface-container-low p-6 md:p-8 lg:p-12">
+                    <h3 class="text-2xl md:text-3xl font-bold text-on-surface mb-6 md:mb-10" data-i18n="write_us">Напишите нам</h3>
+                    <form class="space-y-8">
+                        <div>
+                            <label
+                                class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-3" data-i18n="your_name_label">Ваше
+                                имя</label>
+                            <input
+                                class="w-full bg-surface-container border-none focus:bg-surface-container-lowest focus:ring-0 transition-all py-4 px-6 font-medium text-on-surface"
+                                data-i18n-placeholder="name_placeholder" placeholder="Александр Петров" type="text" />
+                        </div>
+                        <div>
+                            <label
+                                class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-3" data-i18n="phone_label">Телефон</label>
+                            <input
+                                class="w-full bg-surface-container border-none focus:bg-surface-container-lowest focus:ring-0 transition-all py-4 px-6 font-medium text-on-surface"
+                                placeholder="+993 (__) __-__-__" type="tel" />
+                        </div>
+                        <div>
+                            <label
+                                class="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-3" data-i18n="message_label">Сообщение</label>
+                            <textarea
+                                class="w-full bg-surface-container border-none focus:bg-surface-container-lowest focus:ring-0 transition-all py-4 px-6 font-medium text-on-surface"
+                                data-i18n-placeholder="message_placeholder" placeholder="Расскажите о вашем проекте..." rows="4"></textarea>
+                        </div>
+                        <button
+                            class="w-full bg-primary text-on-primary py-5 font-bold uppercase tracking-[0.2em] rounded-sm hover:bg-primary-dim transition-all shadow-lg shadow-primary/20"
+                            type="submit" data-i18n="submit_btn">
+                            Отправить запрос
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-surface-container-low py-12 md:py-16 lg:py-20 px-4 md:px-8 lg:px-12">
+        <div class="max-w-screen-2xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
+            <div>
+                <div class="text-xl font-black text-[#3a5f94] mb-6">Netijeli binyat</div>
+                <p class="font-['Inter'] text-sm tracking-wide text-[#2a3439]/60 leading-relaxed" data-i18n="footer_desc">
+                    Строительная компания полного цикла. Качество, проверенное временем и проектами.
+                </p>
+            </div>
+            <div>
+                <h5 class="text-primary font-bold mb-6 uppercase text-xs tracking-widest" data-i18n="footer_nav">Навигация</h5>
+                <ul class="space-y-4 font-['Inter'] text-sm tracking-wide">
+                    <li><a class="text-[#2a3439]/60 hover:underline transition-all" href="#about" data-i18n="nav_about">О нас</a></li>
+                    <li><a class="text-[#2a3439]/60 hover:underline transition-all" href="#services" data-i18n="nav_services">Услуги</a></li>
+                    <li><a class="text-[#2a3439]/60 hover:underline transition-all" href="#projects" data-i18n="nav_projects">Проекты</a></li>
+                </ul>
+            </div>
+            <div>
+                <h5 class="text-primary font-bold mb-6 uppercase text-xs tracking-widest" data-i18n="footer_contact">Контакты</h5>
+                <p class="text-sm text-[#2a3439]/60 font-['Inter'] tracking-wide" data-i18n-html="footer_contact_info">
+                    Ашхабад, Туркменистан<br />
+                    sukrulbinyat@gmail.com<br />
+                    +993 65 725570
+                </p>
+            </div>
+        </div>
+        <div
+            class="max-w-screen-2xl mx-auto mt-10 md:mt-16 lg:mt-20 pt-8 md:pt-10 border-t border-outline-variant/20 flex flex-col md:flex-row justify-between items-center gap-4">
+            <p class="font-['Inter'] text-sm tracking-wide text-[#2a3439]/60" data-i18n="footer_copyright">© 2021 Netijeli binyat. Все права
+                защищены.</p>
+            <div class="flex gap-6">
+                <span
+                    class="material-symbols-outlined text-primary cursor-pointer hover:opacity-70 transition-opacity">language</span>
+                <span
+                    class="material-symbols-outlined text-primary cursor-pointer hover:opacity-70 transition-opacity">share</span>
+            </div>
+        </div>
+    </footer>
+
+    <script src="js/i18n.js"></script>
+    <script src="js/carousel.js"></script>
+    <script>
+        const drawer = document.getElementById('mobile-drawer');
+        const backdrop = document.getElementById('drawer-backdrop');
+        const hamburger = document.getElementById('hamburger-btn');
+        const closeBtn = document.getElementById('drawer-close');
+
+        function openDrawer() { drawer.classList.add('open'); backdrop.classList.add('open'); document.body.style.overflow = 'hidden'; }
+        function closeDrawer() { drawer.classList.remove('open'); backdrop.classList.remove('open'); document.body.style.overflow = ''; }
+
+        hamburger.addEventListener('click', openDrawer);
+        closeBtn.addEventListener('click', closeDrawer);
+        backdrop.addEventListener('click', closeDrawer);
+    </script>
+</body>
+
+</html>
diff --git a/js/carousel.js b/js/carousel.js
new file mode 100644
index 0000000..98a4553
--- /dev/null
+++ b/js/carousel.js
@@ -0,0 +1,36 @@
+document.querySelectorAll('.carousel').forEach(carousel => {
+    const slides = carousel.querySelectorAll('.carousel-slide');
+    const dotsContainer = carousel.querySelector('.carousel-dots');
+    const prevBtn = carousel.querySelector('.carousel-prev');
+    const nextBtn = carousel.querySelector('.carousel-next');
+    const autoplayDelay = parseInt(carousel.dataset.autoplay) || 4000;
+    let current = 0;
+    let interval;
+
+    slides.forEach((_, i) => {
+        const dot = document.createElement('button');
+        dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');
+        dot.addEventListener('click', () => goTo(i));
+        dotsContainer.appendChild(dot);
+    });
+
+    function goTo(index) {
+        slides[current].classList.remove('active');
+        dotsContainer.children[current].classList.remove('active');
+        current = (index + slides.length) % slides.length;
+        slides[current].classList.add('active');
+        dotsContainer.children[current].classList.add('active');
+    }
+
+    prevBtn.addEventListener('click', e => { e.stopPropagation(); goTo(current - 1); resetAutoplay(); });
+    nextBtn.addEventListener('click', e => { e.stopPropagation(); goTo(current + 1); resetAutoplay(); });
+
+    function startAutoplay() { interval = setInterval(() => goTo(current + 1), autoplayDelay); }
+    function resetAutoplay() { clearInterval(interval); startAutoplay(); }
+
+    const hoverTarget = carousel.closest('.group') || carousel.parentElement;
+    hoverTarget.addEventListener('mouseenter', () => clearInterval(interval));
+    hoverTarget.addEventListener('mouseleave', () => startAutoplay());
+
+    startAutoplay();
+});
diff --git a/js/i18n.js b/js/i18n.js
new file mode 100644
index 0000000..b3abfe2
--- /dev/null
+++ b/js/i18n.js
@@ -0,0 +1,196 @@
+const translations = {
+    ru: {
+        nav_about: "О нас", nav_services: "Услуги", nav_projects: "Проекты",
+        nav_current_works: "Текущие работы", nav_contacts: "Контакты", nav_contact_btn: "Связаться",
+        hero_subtitle: "Надёжное строительство и инженерные решения",
+        hero_desc: "Профессиональный подход к реализации сложных инфраструктурных задач. Мы строим будущее, опираясь на опыт и точность.",
+        hero_contact_btn: 'Связаться <span class="material-symbols-outlined text-sm">arrow_forward</span>',
+        hero_services_btn: "Наши услуги",
+        year_established: "Год основания", about_label: "О компании",
+        about_title: "Лицензированная деятельность и гарантия качества",
+        about_desc: "С 2021 года «Netijeli binyat» осуществляет профессиональную деятельность в строительном секторе. Мы объединяем глубокую техническую экспертизу с современными технологиями управления проектами.",
+        experience: "Опыт", experience_desc: "Команда экспертов с многолетним стажем работы.",
+        quality: "Качество", quality_desc: "Строгое соответствие международным стандартам.",
+        comprehensive: "Комплекс", comprehensive_desc: "Реализация проектов от котлована до ввода.",
+        expertise_label: "Экспертиза", services_title: "Услуги",
+        services_desc: "Частное предприятие «Netijeli binýat» в соответствии со своим уставом и Лицензиями, выданными уполномоченными группами, включает следующие виды деятельности качественно и гарантировано:",
+        construction: "Строительство",
+        construction_desc: "Возведение современных жилых и коммерческих зданий с использованием передовых технологий и экологичных материалов.",
+        reconstruction: "Реконструкция",
+        reconstruction_desc: "Профессиональное восстановление, усиление конструкций и капитальный ремонт объектов любой сложности.",
+        engineering: "Инженерные системы",
+        engineering_desc: "Монтаж и обслуживание систем водоснабжения, канализации, отопления и вентиляции по мировым стандартам.",
+        electrical: "Электромонтаж",
+        electrical_desc: "Полный комплекс электромонтажных работ: от проектирования сетей до установки сложного промышленного оборудования.",
+        landscaping: "Благоустройство",
+        landscaping_desc: "Профессиональное озеленение, создание парковых зон и ландшафтный дизайн для частных и общественных территорий.",
+        learn_more: "Подробнее",
+        consultation_text: "Нужна консультация по специальному проекту?", request_quote: "Запросить КП",
+        completed_projects: "Реализованные проекты",
+        project1_title: "Водоочистная станция в г. Теджен",
+        project1_desc: "Строительство водоочистной станции мощностью 30 000 м\u00b3 в сутки в городе Теджен Ахалского велаята — завершён 2024 г.",
+        project2_title: "Электроснабжение водоочистной станции",
+        project2_desc: "Строительно-монтажные работы по внешней системе электроснабжения водоочистной станции мощностью 30 000 м\u00b3 в сутки в г. Теджен — завершён 2026 г.",
+        current_projects_title: "Текущие <br /> проекты",
+        current_projects_desc: "В настоящее время частное предприятие \u00abNetijeli binyat\u00bb осуществляет следующие строительно-монтажные работы:",
+        current1_status: "Статус: В процессе", current1_title: "Водоочистная станция в Бабадайханском районе",
+        current1_desc: "Строительство водоочистной станции мощностью 20 000 м\u00b3 в сутки в Бабадайханском районе Ахалского велаята (Туркменистан).",
+        current2_status: "Статус: В процессе", current2_title: "Водоснабжение генгешлика Гарашызлык",
+        current2_desc: "Строительство системы водоснабжения генгешлика Гарашызлык в Теженском районе Ахалского велаята (Туркменистан).",
+        contacts_title: "Контакты", address_label: "Юридический адрес",
+        address_text: "Туркменистан, Ашхабад, Беркарарлыкский район,<br />улица Г. Гулиева (2127), дом 64",
+        phones_label: "Телефоны",
+        phones_text: "75 35 06<br />+993 65 725570 - Директор<br />+993 65 705509 - Заместитель директора",
+        email_text: "sukrulbinyat@gmail.com - Директор<br />charievmuratberdi@gmail.com - Заместитель директора",
+        write_us: "Напишите нам",
+        your_name_label: "Ваше имя", name_placeholder: "Александр Петров",
+        phone_label: "Телефон", message_label: "Сообщение",
+        message_placeholder: "Расскажите о вашем проекте...", submit_btn: "Отправить запрос",
+        map_placeholder: "Интерактивная карта", map_location: "Ашхабад, ТМ",
+        footer_desc: "Строительная компания полного цикла. Качество, проверенное временем и проектами.",
+        footer_nav: "Навигация", footer_legal: "Правовая информация", footer_contact: "Контакты",
+        privacy_policy: "Политика конфиденциальности",
+        footer_contact_info: "Ашхабад, Туркменистан<br />sukrulbinyat@gmail.com<br />+993 65 725570",
+        footer_copyright: "© 2021 Netijeli binyat. Все права защищены."
+    },
+    en: {
+        nav_about: "About", nav_services: "Services", nav_projects: "Projects",
+        nav_current_works: "Current Works", nav_contacts: "Contacts", nav_contact_btn: "Contact Us",
+        hero_subtitle: "Reliable Construction and Engineering Solutions",
+        hero_desc: "A professional approach to complex infrastructure projects. We build the future with experience and precision.",
+        hero_contact_btn: 'Contact us <span class="material-symbols-outlined text-sm">arrow_forward</span>',
+        hero_services_btn: "Our Services",
+        year_established: "Year Established", about_label: "About the Company",
+        about_title: "Licensed Operations and Quality Guarantee",
+        about_desc: "Since 2021, Netijeli Binýat has been professionally operating in the construction sector. We combine in-depth technical expertise with modern project management technologies.",
+        experience: "Experience", experience_desc: "A team of experts with years of professional experience.",
+        quality: "Quality", quality_desc: "Strict compliance with international standards.",
+        comprehensive: "Comprehensive services", comprehensive_desc: "Project implementation from excavation to commissioning.",
+        expertise_label: "Expertise", services_title: "Services",
+        services_desc: "In accordance with its charter and licenses issued by authorized groups, the private enterprise 'Netijeli Binýat' provides the following high-quality and guaranteed services:",
+        construction: "Construction",
+        construction_desc: "Construction of modern residential and commercial buildings using advanced technologies and eco-friendly materials.",
+        reconstruction: "Reconstruction",
+        reconstruction_desc: "Professional restoration, structural reinforcement, and major renovation of facilities of any complexity.",
+        engineering: "Engineering Systems",
+        engineering_desc: "Installation and maintenance of water supply, sewage, heating, and ventilation systems to world standards.",
+        electrical: "Electrical Installation",
+        electrical_desc: "Full range of electrical works: from network design to installation of complex industrial equipment.",
+        landscaping: "Landscaping",
+        landscaping_desc: "Professional greening, park zone creation, and landscape design for private and public areas.",
+        learn_more: "Learn More",
+        consultation_text: "Need a consultation for a special project?", request_quote: "Request Quote",
+        completed_projects: "Completed Projects",
+        project1_title: "Water Treatment Plant in Tejen",
+        project1_desc: "Construction of a water treatment plant with a capacity of 30,000 m\u00b3 per day in Tejen, Ahal Velayat \u2014 completed in 2024.",
+        project2_title: "Power Supply for Water Treatment Plant",
+        project2_desc: "Construction and installation work on the external power supply system for a water treatment plant with a capacity of 30,000 m\u00b3 per day in Tejen, Ahal Velayat \u2014 completed in 2026.",
+        current_projects_title: "Current <br /> Projects",
+        current_projects_desc: "Currently, the private enterprise \u00abNetijeli binyat\u00bb is carrying out the following construction and installation work:",
+        current1_status: "Status: In Progress", current1_title: "Water Treatment Plant in Babadayhan District",
+        current1_desc: "Construction of a water treatment plant with a capacity of 20,000 m\u00b3 per day in Babadayhan district, Ahal Velayat (Turkmenistan).",
+        current2_status: "Status: In Progress", current2_title: "Water Supply for Garashsyzlyk Gengeshlyk",
+        current2_desc: "Construction of the water supply system for Garashsyzlyk gengeshlyk in Tejen district, Ahal Velayat (Turkmenistan).",
+        contacts_title: "Contacts", address_label: "Legal address",
+        address_text: "Turkmenistan, Ashgabat, Berkararlyk district,<br />G. Guliyev street (2127), building 64",
+        phones_label: "Phones",
+        phones_text: "75 35 06<br />+993 65 725570 - Director<br />+993 65 705509 - Deputy Director",
+        email_text: "sukrulbinyat@gmail.com - Director<br />charievmuratberdi@gmail.com - Deputy Director",
+        write_us: "Write to Us",
+        your_name_label: "Your Name", name_placeholder: "John Smith",
+        phone_label: "Phone", message_label: "Message",
+        message_placeholder: "Tell us about your project...", submit_btn: "Submit Request",
+        map_placeholder: "Interactive Map", map_location: "Ashgabat, TM",
+        footer_desc: "Full-cycle construction company. Quality proven by time and projects.",
+        footer_nav: "Navigation", footer_legal: "Legal", footer_contact: "Contact",
+        privacy_policy: "Privacy Policy",
+        footer_contact_info: "Ashgabat, Turkmenistan<br />sukrulbinyat@gmail.com<br />+993 65 725570",
+        footer_copyright: "\u00A9 2021 Netijeli binyat. All rights reserved."
+    },
+    tk: {
+        nav_about: "Biz barada", nav_services: "Hyzmatlar", nav_projects: "Taslamalar",
+        nav_current_works: "H\u00e4zirki i\u015fler", nav_contacts: "Habarla\u015fmak", nav_contact_btn: "Habarla\u015fy\u0148",
+        hero_subtitle: "Ygtybarly gurlu\u015fyk we in\u017eener\u00e7ilik \u00e7\u00f6zg\u00fctleri",
+        hero_desc: "\u00c7yl\u015fyrymly infrastruktura taslamalaryna professional \u00e7emele\u015fme. Biz tejrib\u00e4 we takyklyk esasynda gelj\u0259gi gur\u00fd\u0101rys.",
+        hero_contact_btn: 'Habarla\u015fy\u0148 <span class="material-symbols-outlined text-sm">arrow_forward</span>',
+        hero_services_btn: "Bizi\u0148 hyzmatlarymyz",
+        year_established: "Esaslandyrylan \u00fd\u0131l", about_label: "Kompani\u00fda hakynda",
+        about_title: "Ygtyyarnamaly i\u015fler we hil kepilligi",
+        about_desc: "2021-nji \u00fd\u0131ldan b\u00e4ri \u00abNetijeli binyat\u00bb gurlu\u015fyk pudagynda professional i\u015fleri alyp bar\u00fd\u0101r. Biz \u00e7u\u0148\u0148ur tehniki tejrib\u00e4ni h\u00e4zirki zaman taslama dolandyry\u015f tehnologi\u00fdalary bilen birle\u015fdir\u00fd\u00e4ris.",
+        experience: "Tejribe", experience_desc: "K\u00f6p \u00fd\u0131llyk i\u015f tejribesi bolan h\u00fcn\u00e4rmenler topary.",
+        quality: "Hil", quality_desc: "Halkara standartlaryna berk la\u00fd\u0131klyk.",
+        comprehensive: "Toplumla\u00fd\u0131n", comprehensive_desc: "Taslamalary gazuw i\u015flerinden ulanmaga bermeklige \u00e7enli amala a\u015fyrmak.",
+        expertise_label: "Tejribe", services_title: "Hyzmatlar",
+        services_desc: "Biz pudagy\u0148 i\u0148 \u00fdokary standartlaryna la\u00fd\u0131klykda islendik \u00e7yl\u015fyrymlylykdaky gurlu\u015fyk we in\u017eener\u00e7ilik hyzmatlarynyng doly toplumyny h\u00f6d\u00fcrle\u00fd\u00e4ris.",
+        construction: "Gurlu\u015fyk",
+        construction_desc: "\u00d6\u0148debaryjy tehnologi\u00fdalary we ekologi\u00fda ta\u00fddan arassa materiallary ulanyp, h\u00e4zirki zaman \u00fda\u015fa\u00fd\u0131\u015f we s\u00f6wda binalaryny gurmak.",
+        reconstruction: "Durkuny t\u00e4zelemek",
+        reconstruction_desc: "Islendik \u00e7yl\u015fyrymlylykdaky desgalary professional dikeltmek, gurlu\u015flary berkitmek we d\u00fc\u00fdpli abatlamak.",
+        engineering: "In\u017eener\u00e7ilik ulgamlary",
+        engineering_desc: "D\u00fcn\u00fd\u00e4 standartlaryna la\u00fd\u0131klykda suw \u00fcpj\u00fcn\u00e7iligi, lagym, \u00fd\u0131lady\u015f we wentil\u00fdasiya ulgamlaryny gurnamak we hyzmat etmek.",
+        electrical: "Elektrik gurnamasy",
+        electrical_desc: "Elektrik gurna\u00fd\u0131\u015f i\u015flerini\u0148 doly toplumy: tor taslamasyndan \u00e7yl\u015fyrymly senagat enjamlaryny gurnamaklyga \u00e7enli.",
+        landscaping: "Abadanla\u015fdyry\u015f",
+        landscaping_desc: "Hususy we jemgy\u00fdet\u00e7ilik \u00fderleri \u00fc\u00e7in professional \u00fda\u015fulla\u015fdyrma, se\u00fdilg\u00e4h zolagyny d\u00f6retmek we land\u015faft diza\u00fdny.",
+        learn_more: "Gi\u0148i\u015fle\u00fdin",
+        consultation_text: "\u00dd\u00f6rite taslama bo\u00fdun\u00e7a maslahat gerekmi?", request_quote: "Teklip soramak",
+        completed_projects: "Tamamlanan taslamalar",
+        project1_title: "Tejen \u015f\u00e4herinde suw arassala\u00fd\u0131jy stansi\u00fda",
+        project1_desc: "Ahal wela\u00fdatynyng Tejen \u015f\u00e4herinde g\u00fcnde 30 000 m\u00b3 kuwwatly suw arassala\u00fd\u0131jy stansi\u00fdany gurmak \u2014 2024-nji \u00fd\u0131lda tamamlandy.",
+        project2_title: "Suw arassala\u00fd\u0131jy stansi\u00fdanyng elektrik \u00fcpj\u00fcn\u00e7iligi",
+        project2_desc: "Ahal wela\u00fdatynyng Tejen \u015f\u00e4herinde g\u00fcnde 30 000 m\u00b3 kuwwatly suw arassala\u00fd\u0131jy stansi\u00fdanyng da\u015fky elektrik \u00fcpj\u00fcn\u00e7ilik ulgamyny gurnamak \u2014 2026-njy \u00fd\u0131lda tamamlandy.",
+        current_projects_title: "H\u00e4zirki <br /> taslamalar",
+        current_projects_desc: "H\u00e4zirki wagtda \u00abNetijeli binyat\u00bb hususy k\u00e4rhanasy a\u015fakdaky gurlu\u015fyk-gurna\u00fd\u0131\u015f i\u015flerini amala a\u015fyr\u00fd\u0101r:",
+        current1_status: "\u00ddagda\u00fd: Dowam ed\u00fd\u00e4r", current1_title: "Babada\u00fdhan etrabynda suw arassala\u00fd\u0131jy stansi\u00fda",
+        current1_desc: "T\u00fcrkmenistanyng Ahal wela\u00fdatynyng Babada\u00fdhan etrabynda g\u00fcnde 20 000 m\u00b3 kuwwatly suw arassala\u00fd\u0131jy stansi\u00fdany gurmak.",
+        current2_status: "\u00ddagda\u00fd: Dowam ed\u00fd\u00e4r", current2_title: "Gara\u015fsyzlyk gen\u011fe\u015fligini\u0148 suw \u00fcpj\u00fcn\u00e7iligi",
+        current2_desc: "T\u00fcrkmenistanyng Ahal wela\u00fdatynyng Tejen etrabynda Gara\u015fsyzlyk gen\u011fe\u015fligini\u0148 suw \u00fcpj\u00fcn\u00e7ilik ulgamyny gurmak.",
+        contacts_title: "Habarla\u015fmak", address_label: "\u00dduridiki salgysy",
+        address_text: "T\u00fcrkmenistan, A\u015fgabat, Berkararlyk etraby,<br />G. Guly\u00fdew k\u00f6\u00e7esi (2127), 64-nji ja\u00fd",
+        phones_label: "Telefonlar",
+        phones_text: "75 35 06<br />+993 65 725570 - Direktor<br />+993 65 705509 - Direktoryn orunbasary",
+        email_text: "sukrulbinyat@gmail.com - Direktor<br />charievmuratberdi@gmail.com - Direktoryn orunbasary",
+        write_us: "Bize \u00fdazy\u0148",
+        your_name_label: "Ady\u0148yz", name_placeholder: "Myrat \u00d6wezow",
+        phone_label: "Telefon", message_label: "Hat",
+        message_placeholder: "Taslama\u0148yz barada a\u00fddyp beri\u0148...", submit_btn: "Ibermek",
+        map_placeholder: "Interaktiw karta", map_location: "A\u015fgabat, TM",
+        footer_desc: "Doly siklly gurlu\u015fyk kompani\u00fdasy. Wagt we taslamalar bilen subut edilen hil.",
+        footer_nav: "Nawigasi\u00fda", footer_legal: "Hukuk maglumatlary", footer_contact: "Habarla\u015fmak",
+        privacy_policy: "Gizlinlik sy\u00fdasaty",
+        footer_contact_info: "A\u015fgabat, T\u00fcrkmenistan<br />sukrulbinyat@gmail.com<br />+993 65 725570",
+        footer_copyright: "\u00a9 2021 Netijeli binyat. \u00c4hli hukuklar goralan."
+    }
+};
+
+function setLang(lang) {
+    document.documentElement.lang = lang;
+    localStorage.setItem('lang', lang);
+
+    document.querySelectorAll('[data-i18n]').forEach(el => {
+        const key = el.dataset.i18n;
+        if (translations[lang] && translations[lang][key]) {
+            el.textContent = translations[lang][key];
+        }
+    });
+
+    document.querySelectorAll('[data-i18n-html]').forEach(el => {
+        const key = el.dataset.i18nHtml;
+        if (translations[lang] && translations[lang][key]) {
+            el.innerHTML = translations[lang][key];
+        }
+    });
+
+    document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+        const key = el.dataset.i18nPlaceholder;
+        if (translations[lang] && translations[lang][key]) {
+            el.placeholder = translations[lang][key];
+        }
+    });
+
+    document.querySelectorAll('.lang-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.lang === lang);
+    });
+}
+
+setLang(localStorage.getItem('lang') || 'ru');
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..216f7af
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "netijeli-binyat",
+  "private": true,
+  "scripts": {
+    "build:css": "tailwindcss -i ./src/input.css -o ./dist/styles.css --minify",
+    "dev:css": "tailwindcss -i ./src/input.css -o ./dist/styles.css --watch"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4"
+  },
+  "dependencies": {
+    "@fontsource-variable/manrope": "^5.2.8"
+  }
+}
diff --git a/public/Elektrika_1.webp b/public/Elektrika_1.webp
new file mode 100644
index 0000000..cead845
Binary files /dev/null and b/public/Elektrika_1.webp differ
diff --git a/public/Elektrika_2.webp b/public/Elektrika_2.webp
new file mode 100644
index 0000000..3f8fac7
Binary files /dev/null and b/public/Elektrika_2.webp differ
diff --git a/public/Elektrika_3.webp b/public/Elektrika_3.webp
new file mode 100644
index 0000000..19d9cf6
Binary files /dev/null and b/public/Elektrika_3.webp differ
diff --git a/public/Elektrika_4.webp b/public/Elektrika_4.webp
new file mode 100644
index 0000000..a8d79e9
Binary files /dev/null and b/public/Elektrika_4.webp differ
diff --git a/public/Garashsyzlyk_1.webp b/public/Garashsyzlyk_1.webp
new file mode 100644
index 0000000..ccbde0a
Binary files /dev/null and b/public/Garashsyzlyk_1.webp differ
diff --git a/public/Garashsyzlyk_2.webp b/public/Garashsyzlyk_2.webp
new file mode 100644
index 0000000..32a0fd8
Binary files /dev/null and b/public/Garashsyzlyk_2.webp differ
diff --git a/public/Garashsyzlyk_3.webp b/public/Garashsyzlyk_3.webp
new file mode 100644
index 0000000..07924cd
Binary files /dev/null and b/public/Garashsyzlyk_3.webp differ
diff --git a/public/Garashsyzlyk_4.webp b/public/Garashsyzlyk_4.webp
new file mode 100644
index 0000000..9135861
Binary files /dev/null and b/public/Garashsyzlyk_4.webp differ
diff --git a/public/Tejen-SAD_1.webp b/public/Tejen-SAD_1.webp
new file mode 100644
index 0000000..b395a86
Binary files /dev/null and b/public/Tejen-SAD_1.webp differ
diff --git a/public/Tejen-SAD_2.webp b/public/Tejen-SAD_2.webp
new file mode 100644
index 0000000..9b6c22b
Binary files /dev/null and b/public/Tejen-SAD_2.webp differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..c0ea427
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/babadayhan_1.webp b/public/babadayhan_1.webp
new file mode 100644
index 0000000..43e361d
Binary files /dev/null and b/public/babadayhan_1.webp differ
diff --git a/public/babadayhan_2.webp b/public/babadayhan_2.webp
new file mode 100644
index 0000000..6884201
Binary files /dev/null and b/public/babadayhan_2.webp differ
diff --git a/public/babadayhan_3.webp b/public/babadayhan_3.webp
new file mode 100644
index 0000000..3533fe7
Binary files /dev/null and b/public/babadayhan_3.webp differ
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..75f926c
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/fonts/inter/InterVariable.woff2 b/public/fonts/inter/InterVariable.woff2
new file mode 100644
index 0000000..5a8d3e7
Binary files /dev/null and b/public/fonts/inter/InterVariable.woff2 differ
diff --git a/public/fonts/manrope/manrope-cyrillic-ext-wght-normal.woff2 b/public/fonts/manrope/manrope-cyrillic-ext-wght-normal.woff2
new file mode 100644
index 0000000..57c7c0e
Binary files /dev/null and b/public/fonts/manrope/manrope-cyrillic-ext-wght-normal.woff2 differ
diff --git a/public/fonts/manrope/manrope-cyrillic-wght-normal.woff2 b/public/fonts/manrope/manrope-cyrillic-wght-normal.woff2
new file mode 100644
index 0000000..3a06229
Binary files /dev/null and b/public/fonts/manrope/manrope-cyrillic-wght-normal.woff2 differ
diff --git a/public/fonts/manrope/manrope-latin-ext-wght-normal.woff2 b/public/fonts/manrope/manrope-latin-ext-wght-normal.woff2
new file mode 100644
index 0000000..bd24140
Binary files /dev/null and b/public/fonts/manrope/manrope-latin-ext-wght-normal.woff2 differ
diff --git a/public/fonts/manrope/manrope-latin-wght-normal.woff2 b/public/fonts/manrope/manrope-latin-wght-normal.woff2
new file mode 100644
index 0000000..71eb731
Binary files /dev/null and b/public/fonts/manrope/manrope-latin-wght-normal.woff2 differ
diff --git a/public/fonts/material-symbols/MaterialSymbolsOutlined-subset.woff2 b/public/fonts/material-symbols/MaterialSymbolsOutlined-subset.woff2
new file mode 100644
index 0000000..f887dc8
Binary files /dev/null and b/public/fonts/material-symbols/MaterialSymbolsOutlined-subset.woff2 differ
diff --git a/public/hero-back-poster.jpg b/public/hero-back-poster.jpg
new file mode 100644
index 0000000..b7dcbde
Binary files /dev/null and b/public/hero-back-poster.jpg differ
diff --git a/public/hero-back-video.mp4 b/public/hero-back-video.mp4
new file mode 100644
index 0000000..2ea03e0
Binary files /dev/null and b/public/hero-back-video.mp4 differ
diff --git a/public/hero-back-video.webm b/public/hero-back-video.webm
new file mode 100644
index 0000000..b739495
Binary files /dev/null and b/public/hero-back-video.webm differ
diff --git a/public/logo-hero.png b/public/logo-hero.png
new file mode 100644
index 0000000..9b12e0b
Binary files /dev/null and b/public/logo-hero.png differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..31ae7a4
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/input.css b/src/input.css
new file mode 100644
index 0000000..d93a861
--- /dev/null
+++ b/src/input.css
@@ -0,0 +1,121 @@
+/* Inter — variable font, full weight range, Latin + Cyrillic baked in */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('../public/fonts/inter/InterVariable.woff2') format('woff2');
+}
+
+/* Manrope — variable font, split by Unicode subset for smaller first paint.
+   cyrillic-ext */
+@font-face {
+    font-family: 'Manrope';
+    font-style: normal;
+    font-weight: 200 800;
+    font-display: swap;
+    src: url('../public/fonts/manrope/manrope-cyrillic-ext-wght-normal.woff2') format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: 'Manrope';
+    font-style: normal;
+    font-weight: 200 800;
+    font-display: swap;
+    src: url('../public/fonts/manrope/manrope-cyrillic-wght-normal.woff2') format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Manrope';
+    font-style: normal;
+    font-weight: 200 800;
+    font-display: swap;
+    src: url('../public/fonts/manrope/manrope-latin-ext-wght-normal.woff2') format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Manrope';
+    font-style: normal;
+    font-weight: 200 800;
+    font-display: swap;
+    src: url('../public/fonts/manrope/manrope-latin-wght-normal.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Material Symbols Outlined — static instance at FILL=0, wght=400, GRAD=0, opsz=24,
+   subset to only the 16 icons used on this site (~3KB). */
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url('../public/fonts/material-symbols/MaterialSymbolsOutlined-subset.woff2') format('woff2');
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    body {
+        font-family: 'Inter', sans-serif;
+        background-color: #f7f9fb;
+    }
+
+    h1, h2, h3 {
+        font-family: 'Manrope', sans-serif;
+    }
+}
+
+@layer components {
+    .material-symbols-outlined {
+        font-family: 'Material Symbols Outlined';
+        font-weight: normal;
+        font-style: normal;
+        font-size: 24px;
+        line-height: 1;
+        letter-spacing: normal;
+        text-transform: none;
+        display: inline-block;
+        white-space: nowrap;
+        word-wrap: normal;
+        direction: ltr;
+        -webkit-font-feature-settings: 'liga';
+        -webkit-font-smoothing: antialiased;
+    }
+
+    .lang-btn { color: rgba(42, 52, 57, 0.4); }
+    .lang-btn.active { color: #3a5f94; background: rgba(58, 95, 148, 0.1); }
+
+    .carousel { position: relative; }
+    .carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
+    .carousel-slide.active { opacity: 0.9; }
+    .carousel-prev, .carousel-next {
+        position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
+        width: 40px; height: 40px; background: rgba(255, 255, 255, 0.8); border: none;
+        font-size: 24px; line-height: 1; cursor: pointer; color: #2a3439;
+        opacity: 0; transition: opacity 0.3s;
+    }
+    .carousel:hover .carousel-prev, .carousel:hover .carousel-next { opacity: 1; }
+    .carousel-prev { left: 12px; }
+    .carousel-next { right: 12px; }
+    .carousel-prev:hover, .carousel-next:hover { background: #fff; }
+    .carousel-dots {
+        position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
+        display: flex; gap: 6px; z-index: 10;
+    }
+    .carousel-dot {
+        width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer;
+        background: rgba(255, 255, 255, 0.5); transition: background 0.3s;
+    }
+    .carousel-dot.active { background: #fff; }
+
+    /* Mobile drawer */
+    .mobile-drawer { transform: translateX(100%); transition: transform 0.3s ease; }
+    .mobile-drawer.open { transform: translateX(0); }
+    .drawer-backdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
+    .drawer-backdrop.open { opacity: 1; pointer-events: auto; }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..a3138e0
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,74 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./index.html', './js/**/*.js'],
+    darkMode: 'class',
+    theme: {
+        extend: {
+            colors: {
+                'tertiary-fixed': '#dbdafb',
+                'surface-dim': '#cfdce3',
+                'primary-dim': '#2d5387',
+                'secondary-container': '#d5e3fc',
+                'surface-container-lowest': '#ffffff',
+                'on-surface': '#2a3439',
+                'surface-container-highest': '#d9e4ea',
+                'error-container': '#fe8983',
+                'on-primary-container': '#2c5287',
+                'tertiary': '#5d5d78',
+                'secondary-dim': '#465468',
+                'on-error-container': '#752121',
+                'on-tertiary': '#fbf7ff',
+                'surface-container-low': '#f0f4f7',
+                'tertiary-container': '#dbdafb',
+                'on-primary-fixed-variant': '#375c91',
+                'primary-container': '#d5e3ff',
+                'on-primary-fixed': '#153f73',
+                'on-tertiary-container': '#4c4c67',
+                'secondary-fixed-dim': '#c7d5ed',
+                'on-secondary-fixed': '#324053',
+                'on-background': '#2a3439',
+                'on-surface-variant': '#566166',
+                'primary': '#3a5f94',
+                'surface-container': '#e8eff3',
+                'surface': '#f7f9fb',
+                'primary-fixed': '#d5e3ff',
+                'on-error': '#fff7f6',
+                'inverse-on-surface': '#9a9d9f',
+                'tertiary-fixed-dim': '#cdccec',
+                'tertiary-dim': '#51516c',
+                'surface-bright': '#f7f9fb',
+                'background': '#f7f9fb',
+                'secondary-fixed': '#d5e3fc',
+                'surface-tint': '#3a5f94',
+                'on-secondary-fixed-variant': '#4e5c71',
+                'outline-variant': '#a9b4b9',
+                'inverse-primary': '#9fc2fe',
+                'inverse-surface': '#0b0f10',
+                'on-tertiary-fixed': '#393953',
+                'on-tertiary-fixed-variant': '#555571',
+                'surface-container-high': '#e1e9ee',
+                'error-dim': '#4e0309',
+                'surface-variant': '#d9e4ea',
+                'on-primary': '#f6f7ff',
+                'on-secondary': '#f8f8ff',
+                'outline': '#717c82',
+                'on-secondary-container': '#455367',
+                'error': '#9f403d',
+                'secondary': '#526074',
+                'primary-fixed-dim': '#bfd5ff',
+            },
+            borderRadius: {
+                DEFAULT: '0.125rem',
+                lg: '0.25rem',
+                xl: '0.5rem',
+                full: '0.75rem',
+            },
+            fontFamily: {
+                headline: ['Manrope', 'sans-serif'],
+                body: ['Inter', 'sans-serif'],
+                label: ['Inter', 'sans-serif'],
+            },
+        },
+    },
+    plugins: [],
+};