*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #0a0a0a;
  --pink: #f03e9e;
  --pink2: #cc44ff;
  --text: #ffffff;
  --muted: rgba(255,255,255,0.5);
  --border: rgba(255,255,255,0.08);
  --radius-btn: 14px;
  --font: 'Inter', system-ui, sans-serif;
}


body {
  min-height: 100dvh;

  overflow-y: auto; 
  

  background: #0a0a0a;
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  

  padding: 24px 12px; 
}


body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  
  background: url("243.jpg") center center / cover no-repeat;
  
 
  filter: blur(30px) brightness(0.5);
  -webkit-filter: blur(30px) brightness(0.5);
  
  
  transform: scale(1.1); 
  
  z-index: -1; 
}


@media (min-width: 768px) {
  body {
   
    padding: 40px 24px;
  }
  
  body::before {
    filter: blur(40px) brightness(0.45);
    -webkit-filter: blur(40px) brightness(0.45);
  }
}

/* ── Page ── */

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px; 
  

  height: auto; 
  

  border-radius: 36px; 
  
  display: flex;
  flex-direction: column;
  overflow: hidden; 
  
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 8px 32px rgba(0,0,0,0.6),
    0 24px 80px rgba(0,0,0,0.5),
    0 0 120px rgba(0,0,0,0.4);
}

/* ── Hero ── */
.hero {
  position: relative;
  width: 100%;
  height: 64vh;
  flex-shrink: 0;
  overflow: hidden;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 40%,
    rgba(10,10,10,0.95) 75%,
    #0a0a0a 85%
  );
  pointer-events: none;
}

/* ── Profile ── */
.profile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 18px 32px; 
  margin-top: -90px;
  position: relative;
  z-index: 2;
  background: #0a0a0a;
}

.profile-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.profile-handle {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  text-align: center;
}

.profile-info {
  margin-top: 12px;
  text-align: center;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  line-height: 1.9;
}

/* ── Buttons ── */
.links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 22px;
}

.btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  height: 58px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.97); }

.btn--pink {
  background: linear-gradient(90deg, var(--pink) 0%, var(--pink2) 100%);
  box-shadow: 0 4px 28px rgba(240,62,158,0.4);
}

.btn--dark {
  background: #1c1c1e;
  border: 1px solid var(--border);
}

.btn-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-logo svg { width: 18px; height: 18px; }

.btn-logo--tg { background: transparent; }
.btn-logo--ig { background: radial-gradient(circle at 30% 110%, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); border-radius: 10px; }
.btn-logo--fv { background: linear-gradient(135deg, #a259ff, #6c2bd9); color: white; font-size: 12px; font-weight: 700; }

.btn-label {
  flex: 1;
  text-align: center;
  padding-right: 36px;
}

@media (max-width: 400px) {
  .hero { height: 52vh; }
  .profile-name { font-size: 22px; }
  .btn { height: 54px; font-size: 14px; }
}
.btn-logo--ig svg {
  width: 20px;
  height: 20px;
}

.btn-logo--fv { 
  background: transparent; 
  overflow: hidden; 
}


.btn-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}