
:root{
  --bg: #0f1116;
  --bg-soft:#141821;
  --text: #e6e9ef;
  --muted:#9aa4b2;
  --brand:#7c5cff;
  --accent:#53d6ff;
  --card:#0f141c;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji';}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:780px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;gap:24px;margin-top:12px}
.hero{
  width:120px;height:120px;border-radius:24px;overflow:hidden;
  box-shadow: var(--shadow);
  flex:0 0 auto;
}
.title{display:flex;flex-direction:column;gap:8px}
.title h1{font-size:clamp(22px,4vw,34px);margin:0;letter-spacing:.2px}
.title p{margin:0;color:var(--muted);font-size:clamp(14px,1.6vw,16px)}
.lang-toggle{
  margin-left:auto;
  display:flex;gap:8px;align-items:center;background:var(--bg-soft);
  padding:8px 10px;border-radius:12px;border:1px solid #202633
}
.lang-toggle button{
  background:transparent;border:0;color:var(--text);padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:600
}
.lang-toggle button.active{background:linear-gradient(180deg, #22293a, #1a2030);border:1px solid #2b3346}
.badge{
  margin:18px 0 8px;background:linear-gradient(180deg, #1a2030, #10141f);border:1px solid #232b3d;
  padding:14px 16px;border-radius:12px;color:var(--muted)
}

.links{display:grid;gap:14px;margin:18px 0}
.link{
  background: linear-gradient(180deg,#182030,#0f141f);
  border:1px solid #232b3d;color:var(--text);
  padding:16px 18px;border-radius:16px;display:flex;align-items:center;gap:14px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .2s ease, background .2s ease;
  position:relative;overflow:hidden
}
.link:hover{transform:translateY(-2px);box-shadow: var(--shadow);border-color:#2e3950}
.link:active{transform:translateY(0)}
.link .icon{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#151927;
  color:#ffffff;
  flex-shrink:0;
}
.link .icon img{
  width:70%;
  height:70%;
  display:block;
}
#l-instagram .icon{
  background:radial-gradient(circle at 30% 30%, #fdf497 0, #fd5949 40%, #d6249f 60%, #285AEB 100%);
}
#l-telegram .icon{
  background:#2AABEE;
}
#l-tiktok .icon{
  background:radial-gradient(circle at 30% 20%, #25F4EE 0, #000000 45%, #FE2C55 100%);
}
#l-paypal .icon{
  background:linear-gradient(135deg, #009cde, #003087);
}
#l-amazon .icon{
  background:linear-gradient(135deg, #ffb347, #ff9900);
}
.link .label{font-weight:700;letter-spacing:.2px}
.link .sub{margin-left:auto;color:var(--muted);font-size:13px}

.footer{margin:36px 0 12px;color:var(--muted);text-align:center;opacity:.7;font-size:12px}

@media (min-width:720px){
  .header{gap:28px}
  .hero{width:140px;height:140px}
}


@media (max-width:640px){
  .header{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .lang-toggle{
    margin-left:0;
    margin-top:12px;
  }
}

}


#name{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

#name::before,
#name::after{
  content:"🚀";
  font-size:.9em;
}

/* v11 gradient from v5 */
body{background:
  radial-gradient(circle at left, rgba(124,92,255,0.38), transparent 55%),
  radial-gradient(circle at right, rgba(248,113,113,0.35), transparent 55%),
  #05060a;
}


/* v11 layout tweaks from v5 */
/* v5 layout tweaks */
.header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:24px;
  row-gap:4px;
  align-items:flex-start;
}
.hero{grid-row:1/3;}
.title{grid-column:2;grid-row:1;}
.lang-toggle{
  grid-column:2;
  grid-row:2;
  justify-self:flex-end;
  margin-left:0;
  margin-top:6px;
}
#name{display:inline-flex;align-items:center;gap:6px;}
#name::before,#name::after{content:'\1F680';font-size:.9em;}
.lang-toggle{background:rgba(15,23,42,0.95);border-radius:999px;padding:6px 8px;border:1px solid #202633;}
.lang-toggle button{padding:6px 12px;border-radius:999px;font-size:13px;}
.lang-toggle button.active{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-color:#4f46e5;}
