:root{
  --bg0:#050505;
  --bg1:#0a0a0a;
  --card: rgba(18,18,18,.66);
  --stroke: rgba(255,255,255,.10);

  --text:#f4f4f4;
  --muted: rgba(244,244,244,.70);

  --gold:#c9a24d;
  --gold2:#f2d27a;

  --r: 22px;
  --shadow: 0 30px 90px rgba(0,0,0,.70);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  color: var(--text);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow-x:hidden;

  background:
    radial-gradient(1100px 620px at 50% 10%, rgba(201,162,77,.14), transparent 62%),
    radial-gradient(900px 520px at 18% 66%, rgba(242,210,122,.07), transparent 60%),
    radial-gradient(900px 520px at 82% 66%, rgba(242,210,122,.05), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}
a{ text-decoration:none !important; }
.container{ max-width: 1200px; }

/* ====== GOLD TEXT ====== */
.x-gold{
  background: linear-gradient(90deg, var(--gold), var(--gold2), var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(201,162,77,.18));
}

/* ====== NAV ====== */
.navbar{
  background: rgba(8,8,8,.62) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 22px 80px rgba(0,0,0,.65);
}
.navbar-brand{
  font-weight: 950 !important;
  letter-spacing: .7px;
  font-size: 1.15rem;
}
.navbar-toggler{
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 14px !important;
  padding: 8px 10px !important;
  background: rgba(255,255,255,.07) !important;
  backdrop-filter: blur(14px);
}
.navbar-toggler:focus{ box-shadow: 0 0 0 4px rgba(201,162,77,.14) !important; }

.x-nav{ gap:10px; align-items:center; }

.x-navlink{
  position: relative;
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(244,244,244,.94) !important;
  font-weight: 900 !important;
  letter-spacing: .15px;
  box-shadow: 0 14px 46px rgba(0,0,0,.40);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.x-navlink:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent, rgba(201,162,77,.30), transparent);
  opacity:0;
  transform: translateX(-30%);
  transition: opacity .22s ease, transform .22s ease;
}
.x-navlink:hover:before{ opacity:1; transform: translateX(0%); }
.x-navlink:hover{
  transform: translateY(-1px);
  border-color: rgba(201,162,77,.42);
  color: var(--gold2) !important;
  background: rgba(255,255,255,.075);
}
.x-navlink i{
  width: 18px;
  text-align:center;
  color: rgba(242,210,122,.92);
  filter: drop-shadow(0 0 14px rgba(201,162,77,.16));
}
.x-navlink-primary{
  background: linear-gradient(135deg, rgba(201,162,77,.22), rgba(255,255,255,.05)) !important;
  border-color: rgba(201,162,77,.32) !important;
}

/* ====== HERO ====== */
.hero{
  min-height: 100vh;
  padding: 150px 0 90px;
  position:relative;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: url('https://i.ibb.co/mMBBW72/photo-2025-06-13-17-14-01-2.jpg') center/cover no-repeat;
  opacity:.07;
  filter: saturate(1.0) contrast(1.1);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 50% 24%, rgba(201,162,77,.22), transparent 62%),
    radial-gradient(700px 420px at 15% 10%, rgba(242,210,122,.08), transparent 60%),
    radial-gradient(700px 420px at 85% 10%, rgba(242,210,122,.06), transparent 60%);
  opacity: .95;
}
.hero .container{ position:relative; z-index:1; }

.x-hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items:center;
}
@media (max-width: 992px){ .x-hero-grid{ grid-template-columns: 1fr; } }

.x-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(244,244,244,.90);
  font-weight: 900;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.x-h1{
  font-size: clamp(2.6rem, 5.9vw, 5.4rem);
  font-weight: 950;
  letter-spacing: 1.3px;
  margin: 16px 0 12px;
  line-height: 1.02;
}
.x-sub{
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  color: rgba(244,244,244,.78);
  max-width: 720px;
  font-weight: 650;
  line-height: 1.55;
}

/* ====== CTA BUTTONS ====== */
.x-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px; }

.x-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 22px;
  border-radius: 18px;
  font-weight: 950;
  letter-spacing: .2px;
  color: #120b02 !important;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  border: 0;
  box-shadow: 0 22px 70px rgba(201,162,77,.18), 0 16px 44px rgba(0,0,0,.55);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.x-btn:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.20), transparent);
  opacity:.0;
  transform: translateX(-35%);
  transition: .25s;
}
.x-btn:hover:before{ opacity:.9; transform: translateX(0%); }
.x-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 30px 90px rgba(201,162,77,.22), 0 20px 52px rgba(0,0,0,.62);
}
.x-btn-ghost{
  background: rgba(255,255,255,.06) !important;
  color: rgba(244,244,244,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}
.x-btn-ghost:hover{
  border-color: rgba(201,162,77,.38) !important;
  color: var(--gold2) !important;
}

/* ====== PILLS ====== */
.x-pills{
  margin-top: 18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.x-pill{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(244,244,244,.88);
  font-weight: 850;
}
.x-pill i{ color: var(--gold2); margin-right: 6px; }

/* ====== RIGHT PANEL (FRAME) ====== */
.x-frame{
  border-radius: var(--r);
  padding: 1px;
  background: linear-gradient(120deg, rgba(201,162,77,.65), rgba(255,255,255,.10), rgba(201,162,77,.25), rgba(242,210,122,.50));
  background-size: 300% 300%;
  animation: goldMove 7s ease infinite;
  box-shadow: var(--shadow);
}
@keyframes goldMove{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.x-card{
  border-radius: calc(var(--r) - 1px);
  background: linear-gradient(180deg, rgba(18,18,18,.78), rgba(10,10,10,.62));
  border: 1px solid rgba(255,255,255,.10);
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.x-app-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.x-dots{ display:flex; gap:6px; }
.x-dot{ width:9px; height:9px; border-radius:999px; background: rgba(255,255,255,.22); }
.x-dot:nth-child(1){ background: rgba(255,107,107,.60); }
.x-dot:nth-child(2){ background: rgba(255,215,0,.60); }
.x-dot:nth-child(3){ background: rgba(0,255,153,.60); }
.x-app-title{ font-weight: 950; color: rgba(244,244,244,.92); }

/* ====== STATS (OVERVIEW) ====== */
.x-stats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
@media (max-width: 576px){
  .x-stats{ grid-template-columns: 1fr; }
}
.x-stat{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.x-stat-ic{
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: rgba(201,162,77,.12);
  border: 1px solid rgba(201,162,77,.22);
  box-shadow: 0 18px 44px rgba(201,162,77,.08);
}
.x-stat-ic i{ color: rgba(242,210,122,.95); }
.x-stat-t{
  font-weight: 900;
  color: rgba(244,244,244,.70);
  font-size: 12px;
  line-height: 1.1;
}
.x-stat-v{
  font-weight: 950;
  font-size: 14px;
  line-height: 1.1;
  margin-top: 2px;
}
.x-divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0 12px;
}

/* ====== TAGS ====== */
.x-mini{ display:flex; gap:10px; flex-wrap:wrap; }
.x-mini .x-tag{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(244,244,244,.88);
  font-weight: 900;
  font-size: 12px;
}
.x-mini .x-tag i{ color: rgba(242,210,122,.92); margin-right: 6px; }

/* ====== SERVICES SECTION ====== */
.x-services-section{ padding: 70px 0 90px; }
.x-section-title{
  text-align:center;
  font-weight: 950;
  font-size: 2.2rem;
  margin-bottom: 12px;
}
.x-section-sub{
  text-align:center;
  color: rgba(244,244,244,.72);
  max-width: 860px;
  margin: 0 auto 34px;
  font-weight: 750;
  line-height: 1.6;
}

/* ====== ULTRA TILES ====== */
.x-tiles{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 992px){
  .x-tiles{ grid-template-columns: 1fr; }
}

.x-tile{
  position: relative;
  border-radius: 24px;
  padding: 18px;
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(201,162,77,.20), transparent 60%),
    linear-gradient(180deg, rgba(18,18,18,.84), rgba(10,10,10,.64));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 72px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.x-tile:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent, rgba(201,162,77,.28), transparent);
  opacity:0;
  transform: translateX(-30%);
  transition: opacity .22s ease, transform .22s ease;
}
.x-tile:after{
  content:"";
  position:absolute;
  top:-40%;
  left:-10%;
  width: 140%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent 70%);
  transform: rotate(-10deg);
  opacity:.25;
  pointer-events:none;
}
.x-tile:hover:before{ opacity:1; transform: translateX(0%); }
.x-tile:hover{
  transform: translateY(-3px);
  border-color: rgba(201,162,77,.40);
  box-shadow: 0 32px 110px rgba(0,0,0,.62), 0 18px 50px rgba(201,162,77,.10);
}

.x-tile-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 12px;
}
.x-tile-ic{
  width: 48px; height: 48px;
  display:grid; place-items:center;
  border-radius: 18px;
  background: rgba(201,162,77,.14);
  border: 1px solid rgba(201,162,77,.24);
  box-shadow: 0 18px 44px rgba(201,162,77,.10);
}
.x-tile-ic i{ color: rgba(242,210,122,.98); }

.x-tile-badge{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(244,244,244,.92);
  font-weight: 950;
  font-size: 11px;
  letter-spacing:.25px;
}

.x-tile-title{
  font-weight: 950;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: .2px;
}
.x-tile-sub{
  margin-top: 6px;
  color: rgba(244,244,244,.74);
  font-weight: 720;
  font-size: 12.2px;
  line-height: 1.45;
}

/* ====== FLOAT TELEGRAM ====== */
.x-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index:1200;
}
.x-float a{
  width: 54px; height: 54px;
  display:grid; place-items:center;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(244,244,244,.94) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.x-float a:hover{
  transform: translateY(-1px);
  border-color: rgba(201,162,77,.34);
  color: var(--gold2) !important;
}

/* ====== FOOTER ====== */
.footer{
  background: rgba(8,8,8,.62);
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 44px 0;
  text-align:center;
}
.footer a{ color: rgba(244,244,244,.92); font-weight: 850; }
.footer a:hover{ color: var(--gold2); }

/* ====== MOBILE NAV ====== */
@media (max-width: 992px){
  .x-nav{ gap: 8px; padding-top: 10px; }
  .x-nav .x-navlink{ width: 100%; justify-content: center; }
}