From 635d1a4ce1b779f4e930ae516c412ae9895c31eb Mon Sep 17 00:00:00 2001
From: olilovedani <olilovedani@gmail.com>
Date: Sat, 3 May 2025 23:33:02 +0000
Subject: [PATCH] update v1.1

---
 css/products.css       | 155 +++++++++++
 favicon.ico            | Bin 0 -> 9662 bytes
 images/wallet_ltc.webp | Bin 0 -> 5402 bytes
 index.html             |   1 -
 js/flipbook.js         |  25 +-
 js/products.js         | 575 +++++++++++++++++++++++++++++++++++++++++
 pages/products.html    | 337 ++++++++++++++++++++++++
 7 files changed, 1069 insertions(+), 24 deletions(-)
 create mode 100644 css/products.css
 create mode 100644 favicon.ico
 create mode 100644 images/wallet_ltc.webp
 create mode 100644 js/products.js
 create mode 100644 pages/products.html

diff --git a/css/products.css b/css/products.css
new file mode 100644
index 0000000..6dd9af5
--- /dev/null
+++ b/css/products.css
@@ -0,0 +1,155 @@
+/* Glow effect for active arrow */
+.dropdown-item.active i.fa-chevron-right {
+  color: #22d3ee;
+  text-shadow:
+    0 0 5px #22d3ee,
+    0 0 10px #22d3ee,
+    0 0 20px #22d3ee,
+    0 0 40px #0ea5e9;
+  background: linear-gradient(to bottom, #22d3ee, #0ea5e9);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  transition: all 0.3s ease;
+}
+
+.content-area {
+  padding: 20px; /* Adjusted padding for mobile */
+  overflow-y: auto;
+  transition: all 0.3s ease-out;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 5;
+  display: none; /* Hide by default on mobile */
+}
+.content-area.active {
+   display: block; /* Show when active on mobile */
+   opacity: 1;
+   pointer-events: auto;
+}
+@media (min-width: 768px) {
+  .content-area {
+    position: fixed;
+    left: 300px;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    padding: 80px 20px 20px;
+    border-left: 1px solid rgba(34, 211, 238, 0.2);
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+  .dropdown-item:hover .content-area,
+  .dropdown-item.active .content-area,
+  .content-area.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .dropdown-item button:hover {
+    transform: translateX(5px);
+  }
+  .dropdown-item.active button {
+    background: rgba(34, 211, 238, 0.1);
+    border-left: 3px solid rgba(34, 211, 238, 0.5);
+  }
+}
+.glass-card {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-style: preserve-3d;
+  perspective: 1000px;
+  /* Existing glass-card styles from style.css */
+  background: rgba(36,40,46,0.76);
+  border-radius: 2rem;
+  box-shadow: 0 7px 48px 0 #000B;
+  border: 1px solid rgba(116, 250, 255, 0.3);
+  backdrop-filter: blur(8px);
+}
+.glass-card:hover {
+  transform: translateY(-5px) scale(1.02);
+  box-shadow: 0 25px 50px -12px rgba(34, 211, 238, 0.25); /* This might be overridden by style.css .shadow-3d:hover */
+}
+.content-area .glass-card {
+  /* Styles similar to .flipbook-page and .glass-card.selected */
+  opacity: 1; /* Make them fully visible */
+  transform: none; /* Remove any default transform */
+  filter: none; /* Remove any default filter */
+  border: 1px solid rgba(116, 250, 255, 0.3); /* Match .glass-card.selected border */
+  box-shadow: 0 12px 36px 0 #33f8fd14, 0 0px 0px #252526; /* Match .shadow-3d */
+  width: 18rem; /* Set a specific width */
+  height: 32rem; /* Set a specific height */
+}
+@media (min-width: 768px) {
+  .content-area .glass-card {
+    width: 20rem; /* Adjust width for larger screens */
+    height: 36rem; /* Adjust height for larger screens */
+  }
+}
+.content-area .glass-card:hover {
+  box-shadow: 0 16px 64px 0 #29ffc679, 0 1px 6px #1115; /* Match .shadow-3d:hover */
+  transform: translateY(-6px) scale(1.05); /* Match .shadow-3d:hover */
+}
+.menu-item {
+  position: relative;
+  overflow: hidden;
+}
+.menu-item::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 1));
+  transition: width 0.3s ease;
+}
+.menu-item:hover::after {
+  width: 100%;
+}
+.menu-item.active::after {
+  width: 100%;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5);
+    border-color: rgba(34, 211, 238, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(34, 211, 238, 0.2);
+    border-color: rgba(34, 211, 238, 0.8);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
+    border-color: rgba(34, 211, 238, 0.3);
+  }
+}
+
+.pulse-border {
+  animation: pulse 3s infinite;
+  border: 1px solid rgba(34, 211, 238, 0.3);
+}
+
+/* Product modal styles */
+#productModal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.9);
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999 !important;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+#productModal:not(.hidden) {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible !important;
+}
+#productModal .glass-card {
+  max-height: 90vh;
+  overflow-y: auto;
+}
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..1823e81948af3781970c06c9c0ebf9f292b3c582
GIT binary patch
literal 9662
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

literal 0
HcmV?d00001

diff --git a/images/wallet_ltc.webp b/images/wallet_ltc.webp
new file mode 100644
index 0000000000000000000000000000000000000000..823d7bf5fe2e80c97c305e5f2e6724f54fb7bfb9
GIT binary patch
literal 5402
zcmYjVXHXMN*A1bBCWJ`nQbP?2(nV^3(7S-N(50gwy@OH(gn&v>K|nwOBSmSU_f9B=
z4$?b<RB0bR@AJ+3?(Cg==G?Pq_s;C>k2O$7A|X%!z(fV1XRIgnkQ@L2kX}d1Kl7T=
zg3<y2LMaL`0I}T0)hgWmpmsWF;>%LJ+LyFsb4|gxN;^J|wgUhDyDlPNT+Xv-NX1hx
zi*y}2bhoW69ScZOSqWmx|1oK1Q>6cWwS!%WQeT5;k~#B2CQ~Qz?!8O7#=+yWy7}{4
zxG=ILSd9B95pX=+Trec}k%~dE!ueI+>u1Lj$h@arzf=XCyL-<PQ!c|8<?=U2<sFe$
z!zTo@Q|)BDq}~trSdwk+iNUC)H4;g{n6VguA%l|L`&kz4JU{%>z8%6|4d`N;#`-!q
z%`(<u*amytM7;KQ4wf8sM)OgJ9ZgS01FJ)Fag0ot){Q*tTK$%ER;h3B5UY@G?&4eB
znJ4J!$^m~ndo{-^uGScDmx=83ApJ_!MWs!h(05NF6^ePtfLR16;1k$68L98R+HXlZ
zi!|&aT|>FfkZ_XJFFI>!=VBTJck<=UX-`)uc63+4r-yc)%@p$94M|I-_pS~}@%a9f
zGNCqlWJja*;b9mxCBx*hfJV^i{pKm%hP3R!!Hl`(j{~xBFH>RrE?`~KMaZN1{WmXl
zsS`rCi+l2MQ;C#HkAD)th@CvWT?u}`P0DX2D)a!^4XEvJm;oNa2@7YRgD_yU;)`UW
zTlLBQ`C~XCFK>j16AhX^l-3l+O@**ky?WN#ar`zjTim%SnG$&^6{+4C7FPDS$1|m4
zvM=8}LC)9Zk-^GjbqI3;QA8(;WrbIwce)d(ItNfh3yBK6c}UMf1IGw+U>72DS8LrU
zFv8+Lq4bmm-+7dc8nJTc4R!roXO9r>ks~+Bu8>diV@tH3F^3y-Ka-!Bz5ojv++qC*
zeU|NVW<5r3=4=HJt|p7z^-*NX4{@`Np^l8yj#sKA{7Bfk9POJ2LREhVG`IL#QR`b6
zFy!{>%M;=tU$cOhee=hLkJu!<zI{kFxuIqGBc)HgkO)qwB~`p^Ol-8bezId=X(z~E
z8YaY3qcmiqfGot<x>=I~DH0*viH88D7X)+yXlZsS1{(21WAcn5Nqy%)r(1-=3~_ub
zU{4s+dh%r`cv$Q^kR}h765RW9(A;eb^8izne(7fM<d^=NHfTvfpkuIOsf}B`Sbc7%
zj=|QD^GvtnEzY>$*P)yWKk<<TurH_b0Y=qAITfitbr`pq(3wlRmJ0J^rz0xrI}9?q
z#~lJ{HP$A4jNWm~fN+tU&*p6$SY~$ANT^w1JeVTGBIDQ$tnDvr{<1xC?eZBA&3%j-
z%;@g!whl#Hlt~f#_L#ivS~Gk{U4gf-9aOCyJsGNhHj1d3*SaS-Dsmr%7~VJ`9+uG%
zTOnwsAWqGn)yO5T)BDATdk9KHvBQv@Y(mAEN!)L%Vjx?AqFN{YtHWKPXA}12^4AT_
z77o+r%v*EO9?6ocbTV0QN!}2?WIp~TT-pc}$k*12j+;w}A!#n-)Z?8wUP-M){z6G~
z3y~}PEnl!FZc$s%64XQ~*w8X$5x2Ee$CR*D&*1tA{E4gyqB~7)n-#06sV~YICb&4b
zS%Q`*l>LbHbNW<RlhF%n2!#f=YT&%fM@(*P9KnN0*#?0=32m_st@G<8<V`}n@6w0~
zaF+Ck3jLN%=c*B)T@t$XG^<A1H81bRr`}my^HT)@Dh*ufG2YF0cr$q>+~R)#wUP}V
zH_b%WG|5JqHUa4iO^m*5$j?~RY<P#cE~j3s8taDCUa2jPCOwU8t<pLRIq%XfmS}q^
z_;#<vjzQ=X%5$xG(z2W!{l@OF7371dJ}p!ojTjdHwwIoBwcazfIvs)vFhgx=zZyKK
zThrk^)iqBg+aC8v71Eh#gV)6cpU|?D#&Fhs-XB%wyKhQz_x2khiX25`@3ZVf6y-|y
zRVjzTcT$Oy?k!J!Qd$?t4S7AgS_*kiZ{tcr26sf=S69H5U=t=qE$-7MKC4Kq6wDYT
zJ2lHA0O-iD;7Wlck~J~i(6(*wRP3UMMCcC_jFQD6Ik}ls>2x=T%Z<5xOY4q4C>bn>
zRV-DFyqDsIF};TL{#bqrI%BkNXapdOnm2OhW9QBIr1i-i3Okys4IPA!lxfm#)c|{v
z=oDs}`TA%Mkk%2P3bR!|Pz5)oMX`l}<OK0Zd@z8fRJ$y$y{9Y74(-nlI%(hql4PX|
zMkmLSM71M|zm8X0+n1cmvXhka?nF0b6XBJ5ihYu2-AP}MZQj}cO_daR&UKnR_Xd<l
zwSvf(WahN8N2~|gRN0$Lj|R-k{qhM|m>%h8tBoGoU(SA~o9FP7)op!4&LpKV|3d9t
zZ)y^=7&AFV)&8>7GKeoUe|wIq<81QvdweM>5Eh#Aae{lI0=xJY^e5Y_{Qgdym4Zgq
z6iYOAmsPd(sCLzApZZlxk=;i<|CWnBqnu0QJj$x$SsRjz0a_=2S>n*L_Q${F_oec;
z4({lG8N06?UDkDQ@|goNTs@N3;S+vk#(o~c?&8DU>Bh~<X2hJf;8q5`(c#k9CdK~b
zTOOPUVI0D`YPrCw`r%zBjAWu7v2Z79U%a79;=EyoLy5nV1MvF?Xnyt%n~d8Miq!3w
zpr^yobh+*u?6j|%21~xOYlyq~Vd(keUauJrIkQuw%;isXcJ_;1)c%9UnnC%;m*Z38
zwbbZ$3LhkQpX*iS5OHSLt_IzaWoIDcq7J5yr?Mb#_m%Y@BRg;rndTjSaw)?v;@<;u
zFP%51*VUo`7=HVx5>P6DbVFB~8Yu>nn$QD17P(4B<#04juV&da6Hy#6UzCk)8AvPj
zWxGZtDcF-?`&OQb)Rog499%4}8=l~V+6#`a>pQayZyG6YI{0b+yBLNJU1p@fj8E1M
zu0b=~wx9(Cf$fgHZ)!V!#K32LxJN5&O=KE^qPpQf0B{pvY0}Oc>TrxJ)rq8Z?P}$@
zhu2bj^63skZ17GJ-OS^SgH;+nbOSgt>#afsN<Csq<qq@3&N5nJp6vFFQSyN%eO?5O
zehxcj0vQ3GBwQU~Tl-c8H*K9@gP1N)gnsu8V#N^EK^Sbxi)=-4$x7q>{x1d9h<sQX
zx1)@$m%XeL`BaS&26&m(RvEPbmAtl7lLe)eW9s(EDumubaFLJPr~uo}&2yHApEzn=
zGc8SVH|3B2#QWVY$+J6UeevP@r~{RUdY$=jL))i>*Q_Z<$wp5#XTQF}mhE$Kr&C*<
zwT{#Bw7?V65Jy*}X$qj32=btc4-X#1`&JW{=}}a+#9(?`bh(mX`7)}3<1LO@S=Uz$
zM&j-<djl-QoUP%wz<!%b8u%k-9L#v<TN4-Sw5ARAg~Tt}Lm1JIsbICRnU$*g1B%3y
z<VJZmo}H&GvngrV)itb4G(XiGiOd+V;ZQ@ntlMn=Pmk__weI(=7i`X`5C#7zR`=~m
zj8R<KttXM&uIpeF&C9TrH96DMTFvsH_D!??-Gfu5$LIj?iEeA3qLU;4^Er5wmXSPp
zZb*Dv*BPVU22nhjd<Zw=h6IsyQZfU)JqmpCjyLWX`3TgE*W0X8nO0$PR<3kK@AJC7
zo%k(ayid1EQ>=w`T8lW(BkAd7;kh=i4;2f>F=1ZmK%&aw&;+h-VlOd~X*r|(ZSTX|
zoBKaqpUO)R;h961Ii@z)?Hn1O&y7{ncwHF-OtuCinEO*X8TG2Tp*tZGP}XtU=P~%x
zpH}zJhsIV~@t^iYe_=wH&I6&F&DR%o1&WMQQwxk5hO9#0XM!+8upP#lt$Lm~zOm;f
zPOt&E%+J3vV}mT%q**8e4C#l<q)=GczyMk}7&)~wB&zdfG*>q`0f6*hkPMA{Ct;%J
z)GI@}>+KyzlcqSp>gRB<E%f+#7EzE_jvz+~MT^KfH1yn^?k&n_Lco#vo3v_Q9$SM?
z{HdbCfJC6veHV|dxZR>JYkL}3qOY_&|Cqy>8>Qz~9RmHb3ckn|4t8bo2xRgCN|BsR
z#zDTs9ObPb8jK*|(F~|Boq9U&E{#*#JIxx>lh@8H7vSPk((sxi8S*EMo#4s9gmghR
zDoXq>g7z;Hhd{#v!5j;%5VO5l+5Q4?IL1hi41BwC<4d|YnRGGR`s2^N&*aMGJtDCv
zu46@<evr;9#VuvBzP+CNN@OLIjGO_BKfvo7?Z>?G6KvHm&J+w29Di{C=A?^{m;X_k
ze0A<C-7sS|bIDOGV;J6aFSw!rxn&Z7$67gz9FV&kUB&8iA}f-wSDdOc!?V}%+>wk;
zA-2PFl`TX3)s*Ab4Cc+2HQ;k8=&&D%1Mi|c=rB0|%2Q^CiEH@vK8P!qh8$*j3<97U
zBvqLZNY%nefObK#?-#Y<N>;lx(&sSZE<-vg4BBrexLva&TDzAgbl#)RsV6@)1|6}t
zcSsXu=1>ta<KiZ#$3pytLbH2HN!@f8CC+*|`x#J^%|v%hem0G{oyH<MUD2c4X^jk{
zw7qyGtiPBA@n3pKCL>VV7!DijlJDc$4mgfKRC!!aYkM*^SRi_y=UX`Fp`M$m&na?!
zU4;8kWj2#;co}W{sr9OKfkaOkHx{8eh(JpvKq9#AZnq{loyR~*py@-gK@G<KQPENM
zITFz_9^$U<2l49~Op9&)`opoAwZ)q8;cE&w50#1ws!S&KVuJvu`X80cVsp1YC3Ma)
zD^9YJM3STjbkvVIm7BFZXv$;i)R@K{(W5UHW`oh$DT8ivoM$%@x9Mpv&NJ-yk9j)a
zeMWk^Du-136YEFhc2N7(>o@r!u`>jB&(eT+TC%kVo?xU$6pV>tQD-8WGlA7bf+3Kf
z&@An`F&6bt$>T<fnJViLHetwo5E3J7te88F!y<|cUOnH!B2q~)4C`x^0%{d}mLep4
z{gMGH;Odz+&X42HqT4ynqNN>j*0FRYB%I4h%Kj>!xNx6yf-4=~uC`E~R^;4|DS7k#
z2A6A0$E5wf+-Nn3{45jACpSvu&`F1w==S1!ljkTXb_h)!J*YxdJ3fvGsy)Au8J3<M
zuvs&op%MA9+hsd`L@!cP8Dy9KLPDckxcob8h~@e;ucWkhGQK@VaAI2?5(oT>j}Qh)
zI77<Jwbiz0&^}26|BwVV(7Dg*X%??1xzMyIeFAG`wFFeklgQ|(@kj3XJXvbO=6ipo
z{HPQR4Y4g*A=kTw#sS^j{9P2=ViLurY+QWm(bjFwdb`IQ9|m+)Q*h3x%@@hvv@Ml;
zV5_$kBYg*%xHW!nL3Knm5{!}!=8AEU%GPl{+}ES{A>($Q1V}0QFxHmtiB-#8jY|EM
zW_X&#f4COV5)X^^!W!LFV<^sJ9C?$LRQ*=+GAce#AvM7he~hQ1Z0uc9weoQg-mC7&
zq@61fEsY3&`&#N=V$=DeBp7>jLL~Bo?C4eU=~=ys1y=Fb4j-~!C~@83PQdRm7O(Hv
zl-7?|A5)6_gtw;tV6k++CnyqW@S5!_lB3$C7y+3*_uGloJkep(Rj$KBlX-;NVE=aS
zBgC6A*<Bj;IW?%TaUN08ZK53(1ucs87h3T5NFMWL2yt)$D{ZU}70LG(Xhoa6F~U9s
zd#_revvdb;PL4cXa!7`j@>{1vo8E?!$TKK^>y_L4l8nwOD>1Jvwwf)=M8Dq|o?92e
zJ5nD+`-Z+q3@^(CHS@i46pH;0lhj6z%x2IR#*=o(-5=ac8eo+!TOE4Ynksj|uD+BN
zY_ojJs5lJvvR^OPd6irc*s`#_nGHDgBg9Q8#Jz)&Pj9cwqNp8(#_g)2bc2*a5{CG>
zc=0H-nn5@>zrqXIO{iI#^}>UcKviDKJi1sN!g!vnBWXH<k=!Ji6l`$7*OjH-Hy>wx
zHCnxgn<r}4GZKfzJ*ZJf<-xiRfz}5{7=hG=s*7IcR0L+Han^6S*eW5<ez4Gi)_r8$
zZ~?v<a>y2pXH$c{OKLk@2+qebXuTE4RmTQK@l5zVJt+wBG}Js`-YC@|+0=3>j34KK
zF=ghnqzel_#MZl(;S8tVx~P8Q=eX;Ys~}AI9MqqE$g}i`lkCiJbFDahqnq%&@M-L(
ztLIVV44!pXkKR$JXu0F|&-Iuy4=R(xcUOTM4FpSLaKqiN!L?3I5+(eX<3qo3Vd#_z
zZ(mf$nu*R#s$Ae^_mn|n)v2=f2KDUM-tSd{pWFslSADXj84q^&H8ZP)e&z#ux7=oL
zCC(9e1Nj%^ocwxHY@9Q48NgYTY4ij}gj{8+Y8%?C%T7YSCxu-9M78aDQISJ*h@8Hy
zLfQNMQAxg^V{cveRU}C8$Q&$DS-drX68`XBpqz6z(_=B<-sC4vUng|K=U@FHY&zsu
zC&}z7J`*c4b7_lAmh_+<si$Es`_mOSoSiq05>iD8xg@gFQ_|{82ds7WRje+(fO7$+
zixtI;7jc$C*^LRqgR(Z<ruMZ+=`>IK$@28!5~*N9a0a2W7LI(Yi{$goI0l$8^En-#
zzyIC70r-|G;sY;MBeH2l%=!h{qPpIT@Yr`I<21j|DeZ;yb)oAG(wM(J?7{dvQAyVo
zPyddgsU)6#(?3-iS~Bih^>XQA@~GWod|jxwRZ)GIG~@P;p^8XYkgW{;mGJ;C-Cf&}
z=H1leX{$y}l<uzDozoXNXAtBO)pYQ)3FJ&e(mqD`y})peg`^+Qv?Ai%xv7Y(XT<HU
zu+996y+G;FQASm-zykpxbpb<GTBePlMv;(g(I>x+OOel&1E%zUlV6`1xJS9vg&FzG
zu2{3qtFy(tQ5GG_H8WNwap>N;GJa#Vo^wUoD8G@zc=qXMISG}(cKmUhfG=D9_MZZ-
zkg5)kd()Dl62-byUroz0LiVokW-I`ehw8{5*MEiT>H`1#8Ik}X1cU&BYvyk-5fJ~A
zjju8DzZi9m`To@aukl?1AOL)wA6<uY4ADP&-)sDLSYO9qpa0K#HqIX2cXU)9u#4Zh
zdq)yL3;-m907TacVG&Vbf}H>E49xkD6Z*PF_&=EVUtE37{~f?<f8ak32KS_{(Z6nY
Jg@ylC{|_15{j2~0

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 8882ce3..d7e664a 100644
--- a/index.html
+++ b/index.html
@@ -346,7 +346,6 @@
   </footer>
   <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
   <script src="/js/features.js"></script>
-  <script src="/js/flipbook.js"></script>
   <script src="/js/fade-up.js"></script>
   <!-- Yandex.Metrika counter -->
   <script type="text/javascript" >
diff --git a/js/flipbook.js b/js/flipbook.js
index 35f1be2..662713a 100644
--- a/js/flipbook.js
+++ b/js/flipbook.js
@@ -127,27 +127,6 @@ function initProductDetails() {
   });
 }
 
-// Show product details modal
-function showProductDetails(pageNum) {
-  const details = productDetails[pageNum];
-  if (details) {
-    document.getElementById('modalTitle').textContent = details.title;
-    document.getElementById('modalDescription').textContent = details.description;
-    document.getElementById('productModal').classList.add('show');
-  }
-}
-
-function hideProductDetails() {
-  document.getElementById('productModal').classList.remove('show');
-}
-
-// Close modal when clicking outside
-document.getElementById('productModal').addEventListener('click', function(e) {
-  if (e.target === this) {
-    hideProductDetails();
-  }
-});
-
-// Initialize
-initProductDetails();
+// Product details functionality moved to products.html
+// This file only handles flipbook navigation
 updatePages();
\ No newline at end of file
diff --git a/js/products.js b/js/products.js
new file mode 100644
index 0000000..0e22982
--- /dev/null
+++ b/js/products.js
@@ -0,0 +1,575 @@
+async function showCryptoModal(eurAmount) {
+  document.getElementById('cryptoModal').classList.remove('hidden');
+
+  // Update payment amount with loading state
+  const paymentAmountEl = document.getElementById('paymentAmount');
+  paymentAmountEl.textContent = 'Расчет суммы...';
+
+  try {
+    const ltcAmount = await convertEurToLtc(eurAmount);
+    paymentAmountEl.textContent = `Сумма к оплате: ${ltcAmount} LTC`;
+  } catch (error) {
+    console.error('Ошибка расчета суммы:', error);
+    paymentAmountEl.textContent = 'Ошибка расчета суммы';
+  }
+}
+
+function hideCryptoModal() {
+  document.getElementById('cryptoModal').classList.add('hidden');
+}
+
+// Product details data
+
+function showBlackBoxProductDetails(productName) {
+  console.log('showBlackBoxProductDetails called with:', productName);
+
+  // Verify productsData exists and has the product
+  if (!productsData) {
+    console.error('productsData is not defined!');
+    return;
+  }
+  if (!productsData[productName]) {
+    console.error('Product not found in productsData:', productName);
+    return;
+  }
+
+  const modal = document.getElementById('productModal');
+  if (!modal) {
+    console.error('Modal element not found!');
+    return;
+  }
+
+  // Force remove any inline display:none styles
+  modal.style.display = 'flex';
+
+  const titleEl = document.getElementById('modalTitle');
+  const descEl = document.getElementById('modalDescription');
+
+  if (titleEl) titleEl.textContent = productName;
+  if (descEl) descEl.textContent = productsData[productName].description;
+
+  // Ensure modal is visible
+  modal.classList.remove('hidden');
+
+  // Debug modal state after changes
+  setTimeout(() => {
+    console.log('Modal state after show:', {
+      classList: Array.from(modal.classList),
+      computedDisplay: window.getComputedStyle(modal).display,
+      computedOpacity: window.getComputedStyle(modal).opacity,
+      computedVisibility: window.getComputedStyle(modal).visibility,
+      computedZIndex: window.getComputedStyle(modal).zIndex,
+      computedPointerEvents: window.getComputedStyle(modal).pointerEvents
+    });
+  }, 50);
+}
+
+function hideBlackBoxProductDetails() {
+  const modal = document.getElementById('productModal');
+  modal.classList.add('hidden');
+  console.log('Product modal hidden');
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('DOMContentLoaded - Adding event listeners');
+
+  // Debug: Log all elements with onclick handlers
+  const detailButtons = document.querySelectorAll('[onclick^="showProductDetails"]');
+  console.log('Found', detailButtons.length, 'detail buttons');
+  detailButtons.forEach(btn => {
+    const originalOnClick = btn.onclick;
+    btn.onclick = function(e) {
+      console.log('Detail button clicked:', {
+        element: e.target,
+        product: e.target.getAttribute('onclick').match(/'([^']+)'/)[1],
+        stack: new Error().stack
+      });
+      return originalOnClick.call(this, e);
+    };
+  });
+
+  // Connect all buy buttons to show crypto modal
+  const buyButtons = document.querySelectorAll('.buy-btn');
+  console.log('Found', buyButtons.length, 'buy buttons');
+  buyButtons.forEach(btn => {
+    btn.addEventListener('click', function(e) {
+      console.log('Buy button clicked', e.target);
+      // Find the parent glass-card to get the product name and price
+      const productCard = e.target.closest('.glass-card');
+      if (productCard) {
+        const productNameElement = productCard.querySelector('h3');
+        if (productNameElement) {
+          const productName = productNameElement.textContent.trim();
+          const product = productsData[productName];
+          if (product && product.price) {
+            showCryptoModal(product.price);
+          } else {
+            console.error('Product price not found for:', productName);
+            // Optionally show the modal without price calculation or show an error message
+            showCryptoModal(0); // Pass 0 or handle error in showCryptoModal
+          }
+        } else {
+          console.error('Product name element not found in card');
+          showCryptoModal(0);
+        }
+      } else {
+        console.error('Product card not found for buy button');
+        showCryptoModal(0);
+      }
+    });
+  });
+
+  // Debug modal close button
+  const modalClose = document.querySelector('.modal-close');
+  if (modalClose) {
+    console.log('Found modal close button');
+    modalClose.addEventListener('click', function(e) {
+      console.log('Modal close clicked');
+      hideBlackBoxProductDetails();
+    });
+  }
+
+  const dropdownItems = document.querySelectorAll('.dropdown-item');
+  const menuButtons = document.querySelectorAll('.dropdown-item button');
+  const contentAreas = document.querySelectorAll('.content-area');
+
+  function activateCategory(index) {
+    // Remove active class from all menu items and content areas
+    dropdownItems.forEach(item => item.classList.remove('active'));
+    contentAreas.forEach(area => area.classList.remove('active'));
+
+    // Add active class to the selected menu item and content area
+    dropdownItems[index].classList.add('active');
+    const targetId = menuButtons[index].getAttribute('data-target');
+    const targetContentArea = document.getElementById(targetId);
+    if (targetContentArea) {
+      targetContentArea.classList.add('active');
+    }
+
+    // Rotate icon for active item
+    menuButtons.forEach((button, btnIndex) => {
+      const icon = button.querySelector('i'); // Get icon reference here
+      if (index === btnIndex) {
+        icon.style.transform = 'rotate(90deg)';
+        icon.classList.add('active-arrow');
+      } else {
+        icon.style.transform = 'rotate(0deg)';
+        icon.classList.remove('active-arrow');
+      }
+    });
+  }
+
+  // Initialize the first category as active
+  activateCategory(0);
+
+  menuButtons.forEach((button, index) => {
+    const icon = button.querySelector('i'); // Get icon reference here
+
+    button.addEventListener('click', () => {
+      activateCategory(index);
+    });
+
+    // Handle hover for icon rotation on desktop
+    // Handle arrow rotation and glow effect
+    button.addEventListener('click', () => {
+      const isActive = button.parentElement.classList.contains('active');
+      icon.style.transform = isActive ? 'rotate(90deg)' : 'rotate(0deg)';
+
+      if (isActive) {
+        icon.classList.add('active-arrow');
+      } else {
+        icon.classList.remove('active-arrow');
+      }
+    });
+
+    // Desktop hover effects
+    if (window.innerWidth >= 768) {
+      button.addEventListener('mouseenter', () => {
+        if (!button.parentElement.classList.contains('active')) {
+          icon.style.transform = 'rotate(90deg)';
+        }
+        button.style.transform = 'translateX(5px)';
+      });
+
+      button.addEventListener('mouseleave', () => {
+        if (!button.parentElement.classList.contains('active')) {
+          icon.style.transform = 'rotate(0deg)';
+        }
+        button.style.transform = '';
+      });
+    }
+  });
+
+
+  // Add click handlers for product cards (if needed, currently handled by onclick)
+  // document.querySelectorAll('.product-card').forEach(card => {
+  //   card.addEventListener('click', () => {
+  //     const productName = card.querySelector('h3').textContent;
+  //     showProductDetails(productName);
+  //   });
+  // });
+
+  // Close modal when clicking outside
+  document.getElementById('productModal').addEventListener('click', (e) => {
+    if (e.target === document.getElementById('productModal')) {
+      hideBlackBoxProductDetails();
+    }
+  });
+
+  // Close crypto modal when clicking outside
+  document.getElementById('cryptoModal').addEventListener('click', (e) => {
+    if (e.target === document.getElementById('cryptoModal')) {
+      hideCryptoModal();
+    }
+  });
+});
+
+// Функция для получения курса LTC/EUR с Kraken
+async function getKrakenRate() {
+  try {
+    const response = await fetch('https://api.kraken.com/0/public/Ticker?pair=LTCEUR');
+    const data = await response.json();
+    const price = parseFloat(data.result.XLTCZEUR.c[0]);
+    return price;
+  } catch (error) {
+    console.error('Ошибка при получении курса с Kraken:', error);
+    return null;
+  }
+}
+
+// Функция для получения курса LTC/EUR с CoinGecko
+async function getCoinGeckoRate() {
+  try {
+    const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=litecoin&vs_currencies=eur');
+    const data = await response.json();
+    const price = parseFloat(data.litecoin.eur);
+    return price;
+  } catch (error) {
+    console.error('Ошибка при получении курса с CoinGecko:', error);
+    return null;
+  }
+}
+
+// Функция для получения курса LTC/EUR с Bybit
+async function getBybitRate() {
+  try {
+    const response = await fetch('https://api.bybit.com/v2/public/tickers?symbol=LTCUSDT');
+    const data = await response.json();
+    const ltcUsdtPrice = parseFloat(data.result[0].last_price);
+    const eurResponse = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=tether&vs_currencies=eur');
+    const eurData = await eurResponse.json();
+    const usdtEurRate = parseFloat(eurData.tether.eur);
+    const ltcEurPrice = ltcUsdtPrice * usdtEurRate;
+    return ltcEurPrice;
+  } catch (error) {
+    console.error('Ошибка при получении курса с Bybit:', error);
+    return null;
+  }
+}
+
+// Функция для получения среднего курса LTC/EUR
+async function getAverageRate() {
+  const rates = await Promise.all([getKrakenRate(), getCoinGeckoRate(), getBybitRate()]);
+  const validRates = rates.filter(rate => rate !== null);
+  if (validRates.length === 0) {
+    throw new Error('Не удалось получить курсы с бирж.');
+  }
+  const sum = validRates.reduce((acc, rate) => acc + rate, 0);
+  return sum / validRates.length;
+}
+
+// Функция для конвертации суммы в евро в LTC
+async function convertEurToLtc(eurAmount) {
+  try {
+    const averageRate = await getAverageRate();
+    const ltcAmount = eurAmount / averageRate;
+    console.log(`Средний курс LTC/EUR: €${averageRate.toFixed(2)}`);
+    console.log(`${eurAmount} EUR ≈ ${ltcAmount.toFixed(8)} LTC`);
+    return ltcAmount.toFixed(8);
+  } catch (error) {
+    console.error('Ошибка при конвертации:', error);
+    throw error;
+  }
+}
+
+// Function to update the payment amount in the crypto modal
+async function updatePaymentAmount(eurAmount) {
+  const paymentAmountElement = document.getElementById('paymentAmount');
+  if (paymentAmountElement) {
+    paymentAmountElement.textContent = 'Расчет суммы...'; // Show loading state
+    const ltcAmount = await convertEurToLtc(eurAmount);
+    if (ltcAmount !== null) {
+      paymentAmountElement.textContent = `Сумма к оплате: ${ltcAmount} LTC`;
+    } else {
+      paymentAmountElement.textContent = 'Не удалось рассчитать сумму';
+    }
+  }
+}
+
+function showCryptoModal(productPrice) {
+  document.getElementById('cryptoModal').classList.remove('hidden');
+  // Call the function to update the payment amount when the modal is shown
+  updatePaymentAmount(productPrice);
+}
+
+function hideCryptoModal() {
+  document.getElementById('cryptoModal').classList.add('hidden');
+}
+
+// Product details data
+// Product details data with prices
+const productsData = {
+  "BlackBox VPN": {
+    description: "Базовый бокс с VPN функционалом. 512MB RAM. Создаёт Wi-Fi точку с защищённым VPN. Включает: безопасный браузинг, VPN сервер, анонимный e-mail, доставку обновлений.",
+    price: 99
+  },
+  "BlackBox Privacy Messenger/Cloud": {
+    description: "Встроенный Matrix Messenger или Nextcloud. 1 GB RAM. Полный контроль над вашими данными. Защищённые чаты и файловое хранилище.",
+    price: 199
+  },
+  "BlackBox 4GB": {
+    description: "Мощный бокс с увеличенной памятью. 4GB RAM. Все функции базовой модели + удалённый рабочий стол (Workspace). Полный контроль над вашими данными.",
+    price: 299
+  },
+  "BlackBox Workstation": {
+    description: "Полноценная рабочая станция. Все функции предыдущих моделей. Поддержка виртуальных машин и контейнеров.",
+    price: 499
+  },
+  "BlackBox AI": {
+    description: "Включает все технологии BlackBox. Приватный искусственный интеллект. Максимальная автономность и защита. Локальная обработка данных.",
+    price: 2999
+  },
+  "BlackBox Shop": {
+    description: "Создание магазина в Telegram через бота. Загрузка товаров, описание, цена. Оплата за товары через криптовалюту. Полная анонимность продавца и покупателя.",
+    price: 499 // Assuming a base price for the shop
+  },
+  "Защита данных": {
+    description: "Полная защита ваших персональных данных. Включает: мониторинг утечек, защиту от фишинга, безопасное хранение паролей, регулярные обновления безопасности.",
+    price: 49 // per month
+  },
+  "Облачное хранилище": {
+    description: "Защищенное хранилище файлов с end-to-end шифрованием. Доступ с любого устройства. Автоматическое резервное копирование. Совместимость со всеми популярными форматами.",
+    price: 29 // per month
+  },
+  "Приватный чат": {
+    description: "Полностью анонимные переписки с end-to-end шифрованием. Нет логов сообщений. Поддержка групповых чатов. Совместимость с другими мессенджерами.",
+    price: 19 // per month
+  },
+  "Анонимный email": {
+    description: "Полностью анонимная почта без привязки к личности. Временные адреса. Шифрование всех входящих/исходящих сообщений. Защита от спама.",
+    price: 39 // per month
+  },
+  "Крипто-кошелек": {
+    description: "Изолированный cold-wallet для хранения и операций криптовалютой с максимальной изоляцией от internet-угроз. Поддержка основных блокчейнов.",
+    price: 59 // per month
+  },
+  "Децентрализованный хостинг": {
+    description: "Размещение сайтов и приложений без центрального сервера. Полная анонимность владельца. Защита от DDoS. Автоматическое масштабирование.",
+    price: 79 // per month
+  }
+};
+
+function showBlackBoxProductDetails(productName) {
+  console.log('showBlackBoxProductDetails called with:', productName);
+
+  // Verify productsData exists and has the product
+  if (!productsData) {
+    console.error('productsData is not defined!');
+    return;
+  }
+  if (!productsData[productName]) {
+    console.error('Product not found in productsData:', productName);
+    return;
+  }
+
+  const modal = document.getElementById('productModal');
+  if (!modal) {
+    console.error('Modal element not found!');
+    return;
+  }
+
+  // Force remove any inline display:none styles
+  modal.style.display = 'flex';
+
+  const titleEl = document.getElementById('modalTitle');
+  const descEl = document.getElementById('modalDescription');
+
+  if (titleEl) titleEl.textContent = productName;
+  if (descEl) descEl.textContent = productsData[productName].description;
+
+  // Ensure modal is visible
+  modal.classList.remove('hidden');
+
+  // Debug modal state after changes
+  setTimeout(() => {
+    console.log('Modal state after show:', {
+      classList: Array.from(modal.classList),
+      computedDisplay: window.getComputedStyle(modal).display,
+      computedOpacity: window.getComputedStyle(modal).opacity,
+      computedVisibility: window.getComputedStyle(modal).visibility,
+      computedZIndex: window.getComputedStyle(modal).zIndex,
+      computedPointerEvents: window.getComputedStyle(modal).pointerEvents
+    });
+  }, 50);
+}
+
+function hideBlackBoxProductDetails() {
+  const modal = document.getElementById('productModal');
+  modal.classList.add('hidden');
+  console.log('Product modal hidden');
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('DOMContentLoaded - Adding event listeners');
+
+  // Debug: Log all elements with onclick handlers
+  const detailButtons = document.querySelectorAll('[onclick^="showProductDetails"]');
+  console.log('Found', detailButtons.length, 'detail buttons');
+  detailButtons.forEach(btn => {
+    const originalOnClick = btn.onclick;
+    btn.onclick = function(e) {
+      console.log('Detail button clicked:', {
+        element: e.target,
+        product: e.target.getAttribute('onclick').match(/'([^']+)'/)[1],
+        stack: new Error().stack
+      });
+      return originalOnClick.call(this, e);
+    };
+  });
+
+  // Connect all buy buttons to show crypto modal and pass product price
+  const buyButtons = document.querySelectorAll('.buy-btn');
+  console.log('Found', buyButtons.length, 'buy buttons');
+  buyButtons.forEach(btn => {
+    btn.addEventListener('click', function(e) {
+      console.log('Buy button clicked', e.target);
+      // Find the parent glass-card to get the product name and price
+      const productCard = e.target.closest('.glass-card');
+      if (productCard) {
+        const productNameElement = productCard.querySelector('h3');
+        if (productNameElement) {
+          const productName = productNameElement.textContent.trim();
+          const product = productsData[productName];
+          if (product && product.price) {
+            showCryptoModal(product.price);
+          } else {
+            console.error('Product price not found for:', productName);
+            // Optionally show the modal without price calculation or show an error message
+            showCryptoModal(0); // Pass 0 or handle error in showCryptoModal
+          }
+        } else {
+          console.error('Product name element not found in card');
+          showCryptoModal(0);
+        }
+      } else {
+        console.error('Product card not found for buy button');
+        showCryptoModal(0);
+      }
+    });
+  });
+
+
+  // Debug modal close button
+  const modalClose = document.querySelector('.modal-close');
+  if (modalClose) {
+    console.log('Found modal close button');
+    modalClose.addEventListener('click', function(e) {
+      console.log('Modal close clicked');
+      hideBlackBoxProductDetails();
+    });
+  }
+
+  const dropdownItems = document.querySelectorAll('.dropdown-item');
+  const menuButtons = document.querySelectorAll('.dropdown-item button');
+  const contentAreas = document.querySelectorAll('.content-area');
+
+  function activateCategory(index) {
+    // Remove active class from all menu items and content areas
+    dropdownItems.forEach(item => item.classList.remove('active'));
+    contentAreas.forEach(area => area.classList.remove('active'));
+
+    // Add active class to the selected menu item and content area
+    dropdownItems[index].classList.add('active');
+    const targetId = menuButtons[index].getAttribute('data-target');
+    const targetContentArea = document.getElementById(targetId);
+    if (targetContentArea) {
+      targetContentArea.classList.add('active');
+    }
+
+    // Rotate icon for active item
+    menuButtons.forEach((button, btnIndex) => {
+      const icon = button.querySelector('i'); // Get icon reference here
+      if (index === btnIndex) {
+        icon.style.transform = 'rotate(90deg)';
+        icon.classList.add('active-arrow');
+      } else {
+        icon.style.transform = 'rotate(0deg)';
+        icon.classList.remove('active-arrow');
+      }
+    });
+  }
+
+  // Initialize the first category as active
+  activateCategory(0);
+
+  menuButtons.forEach((button, index) => {
+    const icon = button.querySelector('i'); // Get icon reference here
+
+    button.addEventListener('click', () => {
+      activateCategory(index);
+    });
+
+    // Handle hover for icon rotation on desktop
+    // Handle arrow rotation and glow effect
+    button.addEventListener('click', () => {
+      const isActive = button.parentElement.classList.contains('active');
+      icon.style.transform = isActive ? 'rotate(90deg)' : 'rotate(0deg)';
+
+      if (isActive) {
+        icon.classList.add('active-arrow');
+      } else {
+        icon.classList.remove('active-arrow');
+      }
+    });
+
+    // Desktop hover effects
+    if (window.innerWidth >= 768) {
+      button.addEventListener('mouseenter', () => {
+        if (!button.parentElement.classList.contains('active')) {
+          icon.style.transform = 'rotate(90deg)';
+        }
+        button.style.transform = 'translateX(5px)';
+      });
+
+      button.addEventListener('mouseleave', () => {
+        if (!button.parentElement.classList.contains('active')) {
+          icon.style.transform = 'rotate(0deg)';
+        }
+        button.style.transform = '';
+      });
+    }
+  });
+
+
+  // Add click handlers for product cards (if needed, currently handled by onclick)
+  // document.querySelectorAll('.product-card').forEach(card => {
+  //   card.addEventListener('click', () => {
+  //     const productName = card.querySelector('h3').textContent;
+  //     showProductDetails(productName);
+  //   });
+  // });
+
+  // Close modal when clicking outside
+  document.getElementById('productModal').addEventListener('click', (e) => {
+    if (e.target === document.getElementById('productModal')) {
+      hideBlackBoxProductDetails();
+    }
+  });
+
+  // Close crypto modal when clicking outside
+  document.getElementById('cryptoModal').addEventListener('click', (e) => {
+    if (e.target === document.getElementById('cryptoModal')) {
+      hideCryptoModal();
+    }
+  });
+});
\ No newline at end of file
diff --git a/pages/products.html b/pages/products.html
new file mode 100644
index 0000000..ed6403a
--- /dev/null
+++ b/pages/products.html
@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <title>Blackbox - Продукты</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
+  <meta name="description" content="Продукты и сервисы Blackbox.">
+  <meta name="keywords" content="Blackbox, продукты, сервисы, боксы">
+  <link href="/css/tailwind.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+  <script src="/js/echarts.min.js"></script>
+  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="/css/products.css">
+</head>
+<body class="gradient-bg overflow-x-hidden">
+
+  <!-- ШАПКА -->
+  <header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-4 md:py-7 bg-transparent z-20 relative">
+    <a href="/ru/" class="flex items-center space-x-4">
+      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
+      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
+    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+    </nav>
+    <a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
+      Заказать сейчас
+      <i class="fas fa-lock ml-2"></i>
+    </a>
+  </header>
+
+  <main class="flex flex-col md:flex-row md:min-h-screen fade-up" style="--delay:.1s">
+    <!-- МЕНЮ -->
+    <div class="w-full md:w-64 bg-gray-900/50 border-b md:border-r border-gray-800 p-4 z-10">
+      <h2 class="text-xl font-bold text-cyan-400 mb-6">Категории</h2>
+      <ul class="space-y-2">
+        <!-- Category button with arrow icon -->
+        <!-- Arrow rotates 90deg and glows when category is active -->
+        <li class="dropdown-item menu-item">
+          <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all duration-300 flex justify-between items-center" data-target="boxes-content">
+            <span>Боксы</span>
+            <i class="fas text-cyan-400 transition-transform duration-300 arrow-icon"></i>
+          </button>
+        </li>
+        <!-- Second category button with same arrow behavior -->
+        <li class="dropdown-item menu-item">
+          <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all duration-300 flex justify-between items-center" data-target="services-content">
+            <span>Сервисы</span>
+            <i class="fas text-cyan-400 transition-transform duration-300 arrow-icon"></i>
+          </button>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Content Areas -->
+    <div id="boxes-content" class="content-area p-8">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 justify-items-center">
+        <!-- BlackBox VPN -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <img src="/images/bb_on_white-square.webp" alt="BlackBox VPN" class="h-full object-contain rounded-lg">
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox VPN</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>99 €</span>
+          </div>
+          <p class="text-gray-300 mb-4">Создаёт Wi-Fi точку с защищённым VPN. 512 MB RAM.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('BlackBox VPN')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- BlackBox Privacy Messenger/Cloud -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <img src="/images/bb_on_white-square.webp" alt="BlackBox Privacy" class="h-full object-contain rounded-lg">
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox Privacy Messenger/Cloud</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>199 €</span>
+          </div>
+          <p class="text-gray-300 mb-4">Встроенный Matrix Messenger или Nextcloud. 1 GB RAM. Полный контроль над вашими данными.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('BlackBox Privacy')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- BlackBox 4GB -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <img src="/images/bb_on_white-square.webp" alt="BlackBox 4GB" class="h-full object-contain rounded-lg">
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox 4GB</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>299 €</span>
+          </div>
+          <p class="text-gray-300 mb-4">Все функции первых моделей + удалённый рабочий стол (Workspace). 4 GB RAM.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('BlackBox 4GB')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- BlackBox Workstation -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <img src="/images/bb_on_white-square.webp" alt="BlackBox Workstation" class="h-full object-contain rounded-lg">
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox Workstation</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>499 €</span>
+          </div>
+          <p class="text-gray-300 mb-4">Полноценная рабочая станция. Все функции предыдущих моделей.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('BlackBox Workstation')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- BlackBox AI -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <img src="/images/bb_on_white-square.webp" alt="BlackBox AI" class="h-full object-contain rounded-lg">
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox AI</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
+            <span>2999 €</span>
+          </div>
+          <p class="text-gray-300 mb-4">Включает все технологии BlackBox. Приватный искусственный интеллект. Максимальная автономность и защита.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('BlackBox AI')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- BlackBox Shop -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <img src="/images/bb_on_white-square.webp" alt="BlackBox Shop" class="h-full object-contain rounded-lg">
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox Shop</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
+            <span>от 499 €</span>
+          </div>
+          <p class="text-gray-300 mb-4">Создание магазина в Telegram через бота. Загрузка товаров, описание, цена. Оплата за товары через криптовалюту. Полная анонимность продавца и покупателя.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('BlackBox Shop')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="services-content" class="content-area p-8">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 justify-items-center">
+        <!-- Защита данных -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <i class="fas fa-shield-alt text-5xl text-cyan-400"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">Защита данных</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>49 €/мес</span>
+          </div>
+          <p class="text-gray-300 mb-4">Полная защита ваших персональных данных. Включает: мониторинг утечек, защиту от фишинга, безопасное хранение паролей.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('Защита данных')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- Облачное хранилище -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <i class="fas fa-cloud text-5xl text-cyan-400"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">Облачное хранилище</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>29 €/мес</span>
+          </div>
+          <p class="text-gray-300 mb-4">Защищенное хранилище файлов с end-to-end шифрованием. Доступ с любого устройства. Автоматическое резервное копирование.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('Облачное хранилище')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- Приватный чат -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <i class="fas fa-comments text-5xl text-cyan-400"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">Приватный чат</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>19 €/мес</span>
+          </div>
+          <p class="text-gray-300 mb-4">Полностью анонимные переписки с end-to-end шифрованием. Нет логов сообщений. Поддержка групповых чатов.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('Приватный чат')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- Анонимный email -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <i class="fas fa-envelope text-5xl text-cyan-400"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">Анонимный email</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>39 €/мес</span>
+          </div>
+          <p class="text-gray-300 mb-4">Полностью анонимная почта без привязки к личности. Временные адреса. Шифрование всех входящих/исходящих сообщений.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('Анонимный email')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- Крипто-кошелек -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <i class="fas fa-wallet text-5xl text-cyan-400"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">Крипто-кошелек</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>59 €/мес</span>
+          </div>
+          <p class="text-gray-300 mb-4">Изолированный cold-wallet для хранения и операций криптовалютой с максимальной изоляцией от internet-угроз.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('Крипто-кошелек')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- Децентрализованный хостинг -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <i class="fas fa-server text-5xl text-cyan-400"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">Децентрализованный хостинг</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>79 €/мес</span>
+          </div>
+          <p class="text-gray-300 mb-4">Размещение сайтов и приложений без центрального сервера. Полная анонимность владельца. Защита от DDoS.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('Децентрализованный хостинг')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <footer class="w-full mt-10 pt-7 pb-8 bg-black/60 flex flex-col items-center text-center text-gray-500 text-sm">
+    <img src="/images/logo.webp" alt="bbox logo" class="w-10 h-10 mx-auto mb-3">
+    <div class="mb-2">
+      <span class="font-montserrat font-bold text-cyan-400 text-lg">BlackBox</span> &copy; 2022-2025. Все права защищены.<br>
+    </div>
+    <div class="flex justify-center space-x-6 mb-4">
+      <a href="https://t.me/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наш канал в Telegram">
+        <i class="fab fa-telegram text-2xl"></i> Telegram
+      </a>
+      <a href="https://vk.com/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наша группа ВКонтакте">
+        <i class="fab fa-vk text-2xl"></i> ВКонтакте
+      </a>
+    </div>
+    <div>
+      <a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Поддержка</a>
+      &nbsp;|&nbsp;
+      <a href="/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
+      &nbsp;|&nbsp;
+      <a href="https://bbox.rocks" class="hover:underline">Старый не поддерживаемый сайт</a>
+    </div>
+    <div class="mt-4">
+      <span class="text-gray-400">bbox.wtf — лендинг нового поколения: BlackBox — не просто VPN, это экосистема и ваша цифровая приватность.</span>
+    </div>
+  </footer>
+
+  <!-- PRODUCT DETAILS MODAL -->
+  <div id="productModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
+    <div class="glass-card shadow-3d p-6 md:p-8 max-w-2xl w-full mx-4 pulse-border relative">
+      <span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-4" onclick="hideBlackBoxProductDetails()">&times;</span>
+      <h3 id="modalTitle" class="text-2xl font-bold mb-6 text-cyan-400 text-center"></h3>
+      <p id="modalDescription" class="text-gray-300 mb-6 text-lg"></p>
+      <button class="w-full py-3 buy-btn text-lg font-bold" onclick="hideProductDetails(); showCryptoModal()">Купить сейчас</button>
+    </div>
+  </div>
+
+  <!-- CRYPTO PAYMENT MODAL -->
+  <div id="cryptoModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
+    <div class="glass-card shadow-3d p-4 md:p-8 max-w-4xl w-full mx-4 pulse-border relative overflow-y-auto" style="max-height: 90vh;">
+      <span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-2" onclick="hideCryptoModal()">&times;</span>
+      <h3 class="text-2xl font-bold mb-6 text-cyan-400 text-center">Оплата криптовалютой</h3>
+      <div class="flex flex-col md:flex-row gap-8">
+        <div class="flex-1 flex flex-col items-center">
+          <div class="w-64 h-64 bg-white p-4 rounded-lg mb-4 flex items-center justify-center">
+            <img src="/images/wallet_ltc.webp" alt="LTC QR код" class="w-full h-full object-contain">
+          </div>
+          <p class="text-gray-300 text-center">Litecoin (LTC)</p>
+          <p class="text-cyan-300 text-center mt-2" id="paymentAmount">Сумма к оплате: [Сумма]</p>
+        </div>
+        <div class="flex-1">
+          <div class="bg-gray-800/50 p-6 rounded-lg h-full">
+            <h4 class="text-xl font-bold mb-4 text-cyan-300">Инструкция по оплате:</h4>
+            <ol class="text-gray-300 space-y-3 text-lg">
+              <li>1. Откройте крипто-кошелек на вашем устройстве</li>
+              <li>2. Нажмите "Отправить" и выберите крипто-кошелекLTC</li>
+              <li>3. Отсканируйте соответствующий QR-код</li>
+              <li>4. Укажите точную сумму</li>
+              <li>5. Подтвердите транзакцию</li>
+              <li>6. После подтверждения сети (обычно 2-5 min) ваш заказ будет обработан</li>
+              <li>7. Войдите в наш телеграмм бот и введите 3 параметра, кошелк с которого вы отправили деньги, точное время и точную сумму, бот вам вышлет доступ в личный кабинет.</li>
+            </ol>
+            <div class="mt-6 space-y-4">
+              <div class="p-4 bg-gray-900 rounded-lg">
+                <p class="text-cyan-300 font-mono break-all">LTC: ltc1q0rq7shseegk0g44rd04e2w9psl6qn3hsnzj3j5</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
+  <script src="/js/features.js"></script>
+  <script src="/js/fade-up.js"></script>
+  <script src="/js/products.js"></script>
+</body>
+</html>
\ No newline at end of file