:root{
  --bg:rgba(0,0,0,0.2);
  --gold:#c49b66;
  --gray:#8f8f8f;
  --white:#fff;
  --transition:.3s;
  --shadow:0 20px 60px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:#000;color:var(--white);overflow-x:hidden;scroll-behavior:smooth;}

/* HEADER */
.header{position:fixed;top:0;left:0;width:100%;background:var(--bg);backdrop-filter:blur(8px);z-index:1000;}
.header-inner{height:70px;max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 15px;}
.menu-btn,.tg-btn{width:50px;height:50px;border:none;background:none;color:var(--gold);border-radius:12px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);}
.menu-btn:hover,.tg-btn:hover{color:var(--gray);}
.logo-img{height:40px;width:auto;display:block;object-fit:contain;}

/* SIDE MENU & TELEGRAM PANEL */
.side-menu,.tg-panel{position:fixed;top:0;width:340px;height:100%;padding:30px 25px;background:linear-gradient(145deg, rgba(10,10,10,0.9), rgba(20,20,20,0.9));box-shadow:8px 0 25px rgba(0,0,0,0.8);border-radius:25px;backdrop-filter:blur(8px);transition:0.4s ease-in-out;z-index:2000;overflow-y:auto;}
.side-menu{left:-340px;border-top-right-radius:25px;border-bottom-right-radius:25px;}
.side-menu.active{left:0;}
.tg-panel{right:-340px;border-top-left-radius:25px;border-bottom-left-radius:25px;box-shadow:-8px 0 25px rgba(0,0,0,0.8);}
.tg-panel.active{right:0;}
.close-left,.close-right{position:absolute;top:15px;width:36px;height:36px;border:none;border-radius:50%;background:var(--gold);color:#111;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.25s ease;z-index:10;}
.close-left{left:15px;}
.close-right{right:15px;}
.close-left:hover,.close-right:hover{background:rgba(255,255,255,.2);transform:scale(1.1);}
.menu-title,.tg-panel h3{color:var(--gold);font-weight:700;margin-bottom:25px;letter-spacing:0.5px;}
.tg-panel h3{text-align:left;}
.tg-panel form{display:flex;flex-direction:column;gap:12px;}
.tg-panel input,.tg-panel textarea{padding:14px;border:none;border-radius:12px;background:#222;color:#fff;font-size:14px;}
.tg-panel button{padding:14px;border:none;border-radius:12px;background:var(--gold);color:#000;font-weight:700;cursor:pointer;transition:all var(--transition);}
.tg-panel button:hover{background:#fff;color:#000;}

/* BOTTOM NAVIGATION */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;height:65px;background:var(--bg);backdrop-filter:blur(8px);display:flex;justify-content:space-around;align-items:center;z-index:1000;}
.nav-item{display:flex;flex-direction:column;align-items:center;font-size:12px;color:var(--gray);text-decoration:none;transition:all var(--transition);}
.nav-item i{font-size:20px;margin-bottom:4px;}
.nav-item.active,.nav-item:hover{color:var(--gold);}

/* HOME SECTION */
#home{position:relative;height:100vh;padding:0;display:flex;align-items:center;overflow:hidden;}
.home-bg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:40px;overflow:hidden;z-index:0;opacity:.35;}
.images-line{display:flex;width:max-content;will-change:transform;}
.images-line.left{animation:scrollLeft 40s linear infinite;}
.images-line.middle{animation:scrollRight 50s linear infinite;}
.images-line.right{animation:scrollLeft 45s linear infinite;}
.line{width:240px;height:160px;margin:0 16px;border-radius:16px;background-size:cover;background-position:center;flex-shrink:0;box-shadow:var(--shadow);transition:transform .35s;}
.line:hover{transform:scale(1.06);}
@keyframes scrollLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes scrollRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}
#home::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.45));z-index:1;}
.home-content{position:relative;z-index:2;max-width:680px;}
.home-content h1{font-size:clamp(32px,4vw,58px);color:var(--gold);margin-bottom:20px;line-height:1.1;}
.home-content p{color:#ddd;font-size:clamp(15px,1.2vw,19px);margin-bottom:30px;max-width:520px;}
.home-btn{display:inline-block;padding:14px 32px;border-radius:10px;background:var(--gold);color:#000;font-weight:700;text-decoration:none;transition:.3s;}
.home-btn:hover{background:#fff;transform:translateY(-3px);}

/* TABLET & MOBILE */
@media(max-width:900px){.line{width:170px;height:115px;}.home-content h1{font-size:36px;}}
@media(max-width:600px){.home-bg{gap:25px;}.line{width:120px;height:85px;margin:0 10px;}.home-content h1{font-size:28px;}.home-content p{font-size:14px;}.home-btn{padding:12px 24px;}.side-menu,.tg-panel{width:260px;padding:20px 15px;}}

/* SECTION TITLES */
.section-title{font-size:1.8rem;color:#ffb800;text-align:left;margin:2rem 0 1rem;letter-spacing:0.5px;position:relative;}
.section-title::after{content:'';display:block;width:50px;height:2px;background-color:gray;margin-top:0.5rem;border-radius:1px;}

/* SECTIONS GRID */
.products-section,.downloads-section{background:var(--bg);padding:10px 20px;max-height:calc(100vh - 100px);overflow-y:auto;scroll-behavior:smooth;}
.products-grid,.downloads-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:25px;}
@media(min-width:768px){.products-grid,.downloads-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1200px){.products-grid,.downloads-grid{grid-template-columns:repeat(4,1fr);}}

/* FILTER BUTTONS */
.filter-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;position:relative;}
.filter-buttons button{padding:8px 12px;border:1px solid var(--gray);background:var(--bg);color:var(--gray);cursor:pointer;font-size:14px;transition:all var(--transition);}
.filter-buttons button:hover,.filter-buttons button.active{background:var(--gold);color:#fff;border-color:var(--gold);}
@media(max-width:767px){.filter-buttons{flex-wrap:nowrap;overflow-x:auto;padding:5px 0;margin-bottom:15px;}.filter-buttons button{flex:0 0 auto;margin:0 5px;}}

/* PRODUCT CARD */
.product-card,.download-card{position:relative;background:linear-gradient(145deg,#0d0d0d,#1a1a1a);border-radius:15px;overflow:hidden;box-shadow:0 0 12px rgba(0,0,0,0.7);transition:transform 0.3s ease,box-shadow 0.3s ease;cursor:pointer;}
.product-card:hover,.download-card:hover{transform:translateY(-10px) scale(1.03);}
.product-media{position:relative;width:100%;height:200px;overflow:hidden;}
.product-media img,.product-media video{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.product-card:hover .product-media img,.product-card:hover .product-media video{transform:scale(1.1);}
.product-info{position:absolute;bottom:-100%;left:0;width:100%;padding:20px;background:rgba(10,10,10,0.9);color:var(--gray);transition:bottom 0.4s ease;}
.product-card:hover .product-info{bottom:0;}
.product-info h3{font-size:1.2rem;margin-bottom:6px;color:var(--gold);}
.product-info p{font-size:0.9rem;opacity:0.85;margin-bottom:12px;}
.product-info .price{font-size:1.1rem;font-weight:bold;margin-bottom:12px;color:var(--gold);}
.product-info a{display:inline-block;padding:10px 16px;background:var(--gold);color:#000;border-radius:15px;text-decoration:none;font-weight:bold;transition:transform 0.2s ease,opacity 0.2s ease;}
.product-info a:hover{transform:scale(1.05);opacity:0.9;}

/* CONTROLS */
.media-controls{position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:2;}
.media-controls button{background:rgba(0,0,0,0.6);border:1px solid var(--gold);padding:5px 8px;border-radius:8px;cursor:pointer;font-size:11px;color:var(--gray);transition:background 0.3s ease,transform 0.2s ease;}
.media-controls button:hover{background:var(--gold);color:#000;transform:scale(1.1);}

/* FULLSCREEN */
.product-fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(13,13,13,0.95);display:flex;justify-content:center;align-items:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity 0.3s ease;}
.product-fullscreen.active{opacity:1;visibility:visible;}
.product-fullscreen img,.product-fullscreen video{max-width:90%;max-height:90%;border-radius:25px;object-fit:contain;animation:fadeIn 0.3s ease;}
.product-fullscreen .close-btn{position:absolute;top:20px;right:30px;font-size:2rem;color:var(--gold);background:transparent;border:none;cursor:pointer;z-index:10000;transition:transform 0.2s ease;}
.product-fullscreen .close-btn:hover{transform:scale(1.2);}
@keyframes fadeIn{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}

/* PAGINATION */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:20px;flex-wrap:wrap;}
.pagination button{background:#1f1f1f;color:#fff;border:none;padding:8px 14px;border-radius:6px;cursor:pointer;font-weight:600;transition:all 0.3s ease;box-shadow:0 2px 6px rgba(0,0,0,0.4);}
.pagination button:hover,.pagination button.active{background:linear-gradient(135deg,#d9a441,#ffcc33);color:#1f1f1f;transform:scale(1.05);box-shadow:0 4px 10px rgba(0,0,0,0.6);}
@media(max-width:768px){.pagination{gap:6px;margin-top:16px;}.pagination button{padding:6px 10px;font-size:14px;}}


/* DOWNLOAD SECTION */
.downloads-section{background:var(--bg);padding:10px 20px;overflow:visible;max-height:none}

.download-hub{max-width:1000px;margin:auto;display:flex;flex-direction:column;gap:22px}

.download-box{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(145deg,#0c0c0c,#1c1c1c);border-radius:16px;padding:22px;border:1px solid rgba(255,255,255,.05);transition:.35s;box-shadow:0 0 25px rgba(196,155,102,.4)}

.download-left{display:flex;flex-direction:column;gap:6px;max-width:240px}

.download-left i{font-size:36px;color:var(--gold)}

.download-left h3{font-size:20px}

.download-left p{font-size:13px;color:var(--gray)}

.download-right{display:flex;flex-direction:column;gap:10px;width:55%}

.download-right a{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.05);color:#fff;text-decoration:none;font-size:14px;transition:.25s}

.download-right a:hover{background:linear-gradient(135deg,#c49b66,#e8c48d);color:#000;transform:scale(1.03)}

.download-right b{font-size:12px;opacity:.8}

@media(max-width:700px){
.download-box{flex-direction:column;align-items:flex-start;gap:15px}
.download-right{width:100%}
}

#profiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:25px;max-width:1200px;margin:auto}
.card{max-width:340px;margin:auto;overflow-y:auto;position:relative;z-index:1;overflow-x:hidden;background:#111;display:flex;flex-direction:column;border-radius:12px;border:1px solid rgba(217,164,65,.25);box-shadow:0 10px 25px rgba(0,0,0,.6);transition:.3s;color:#ddd}
.card[data-state="#about"]{height:450px}
.card[data-state="#contact"]{height:430px}
.card[data-state="#experience"]{height:550px}
.card.is-active .card-header{height:80px}
.card.is-active .card-cover{height:100px;top:-50px}
.card.is-active .card-avatar{transform:none;left:20px;width:50px;height:50px;bottom:10px}
.card.is-active .card-fullname,.card.is-active .card-jobtitle{left:86px;transform:none}
.card.is-active .card-fullname{bottom:18px;font-size:19px}
.card.is-active .card-jobtitle{bottom:16px;letter-spacing:1px;font-size:10px}
.card-header{position:relative;display:flex;height:200px;width:100%}
.card-cover{width:100%;position:absolute;height:160px;top:-20%;left:0;background-size:cover;background-position:center;filter:blur(30px);transform:scale(1.2);opacity:.4}
.card-avatar{width:100px;height:100px;border-radius:50%;object-fit:cover;position:absolute;bottom:0;left:50%;transform:translateX(-50%) translateY(-64px);border:3px solid #d9a441;box-shadow:0 8px 8px rgba(0,0,0,.6)}
.card-fullname{position:absolute;bottom:15px;font-size:22px;font-weight:700;text-align:center;color:#d9a441;transform:translateY(-10px) translateX(-50%);left:50%}
.card-jobtitle{position:absolute;bottom:0;font-size:11px;white-space:nowrap;font-weight:500;opacity:.7;text-transform:uppercase;letter-spacing:1.5px;left:50%;transform:translateX(-50%) translateY(-7px);color:#aaa}
.card-main{position:relative;flex:1;display:flex;flex-direction:column;padding-top:10px}
.card-subtitle{font-weight:700;font-size:13px;margin-bottom:8px;color:#d9a441}
.card-content{padding:20px}
.card-desc{line-height:1.6;color:#bdbdbd;font-size:14px;font-family:"DM Sans",sans-serif}
.card-timeline{display:flex;flex-direction:column;gap:15px;margin-top:10px}
.card-item{background:#1a1a1a;padding:12px 15px;border-radius:8px;border-left:3px solid #d9a441;transition:background .3s}
.card-item:hover{background:#222}
.card-item-title{font-weight:600;font-size:14px;color:#fff;margin-bottom:5px}
.card-item-title span{color:#d9a441}
.card-item-desc{font-size:13px;color:#bbb;line-height:1.5}
.card-buttons{display:flex;background:#111;margin-top:auto;position:sticky;bottom:0;border-top:1px solid rgba(255,255,255,.05)}
.card-buttons button{flex:1;background:0;font-size:13px;border:0;padding:15px 5px;cursor:pointer;color:#aaa;border-bottom:3px solid transparent;transition:.3s}
.card-buttons button.is-active,.card-buttons button:hover{color:#d9a441;border-bottom:3px solid #d9a441;background:#1a1a1a}
.card-section{display:none}
.card-section.is-active{display:block;animation:fadeIn .6s both}
@keyframes fadeIn{0%{opacity:0;transform:translatey(40px)}100%{opacity:1}}
.card-contact-wrapper{margin-top:20px}
.card-contact{display:flex;align-items:center;font-size:13px;color:#bbb;font-family:"DM Sans",sans-serif;line-height:1.6;cursor:pointer}
.card-contact + .card-contact{margin-top:16px}
.card-contact i{width:30px;min-height:34px;margin-right:12px;padding-right:12px;border-right:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#d9a441}
.contact-me {border:1px solid #d9a441;background:transparent;color:#d9a441;padding:12px 16px;width:100%;border-radius:6px;margin-top:25px;cursor:pointer;font-size:14px;font-weight:500;transition:.3s}
.contact-me a{text-decoration: none; color: var(--gold);} .contact-me a:hover {color: #000;}
.contact-me:hover{background:#d9a441;color:#000}