/* ===== MAIN WRAPPER ===== */

main{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    clamp(90px, 10vw, 120px)
    clamp(16px, 4vw, 32px)
    clamp(24px, 5vw, 40px);
}

/* ===== CARD ===== */

.card{
  width:min(100%, 520px);

  padding:clamp(1.4rem, 4vw, 2.5rem);

  border-radius:clamp(24px, 4vw, 40px);

  background:var(--card);
  border:1px solid var(--border);

  backdrop-filter:blur(var(--card-blur));
  -webkit-backdrop-filter:blur(var(--card-blur));

  box-shadow:var(--card-shadow);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--card-shadow-hover);
}

/* ===== TAG ===== */

.tag{
  display:inline-flex;
  align-items:center;

  padding:
    clamp(.35rem, 1vw, .45rem)
    clamp(.7rem, 2vw, 1rem);

  font-size:clamp(.65rem, 2vw, .8rem);

  border-radius:999px;

  background:var(--accent-soft);
  color:var(--accent);

  border:1px solid var(--border);

  margin-bottom:clamp(1rem, 3vw, 1.5rem);
}

/* ===== HEADING ===== */

h1{
  font-size:clamp(2rem, 7vw, 4rem);

  line-height:1.05;

  letter-spacing:-0.03em;

  margin-bottom:clamp(.8rem, 2vw, 1rem);

  overflow-wrap:break-word;
}

/* ===== DOMAIN TEXT ===== */

.domain{
  background:var(--btn-p-bg);

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  background-clip:text;
  color:transparent;
}

/* ===== PARAGRAPH ===== */

p{
  font-size:clamp(1rem, 2.8vw, 1.15rem);

  line-height:1.7;

  color:var(--text-soft);

  margin-bottom:clamp(1.5rem, 4vw, 2rem);
}

/* ===== BUTTON GROUP ===== */

.links{
  display:flex;
  flex-wrap:wrap;

  gap:clamp(.75rem, 2vw, 1rem);

  margin-bottom:clamp(1.5rem, 4vw, 2rem);
}

/* ===== BUTTON ===== */

.btn{
  flex:1 1 140px;

  min-height:52px;

  padding:
    clamp(.8rem, 2vw, 1rem)
    clamp(1rem, 3vw, 1.4rem);

  border-radius:clamp(14px, 2vw, 20px);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;

  font-size:clamp(.9rem, 2vw, 1rem);

  font-weight:500;

  transition:all .2s ease;

  background:var(--btn-s-bg);
  color:var(--btn-s-text);

  border:1px solid var(--btn-s-border);

  box-shadow:var(--btn-s-shadow);
}

.btn:hover{
  transform:translateY(-2px);
  background:var(--btn-s-bg-hover);
  box-shadow:var(--btn-s-shadow-hover);
}

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

/* ===== PRIMARY BUTTON ===== */

.links .btn:first-child{
  background:var(--btn-p-bg);
  color:var(--btn-p-text);
  border:none;
  box-shadow:var(--btn-p-shadow);
}

.links .btn:first-child:hover{
  box-shadow:var(--btn-p-shadow-hover);
}

.btn-icon{
  width: 20px;
  height: 20px;

  flex-shrink: 0;

  fill: currentColor;
}

/* Instagram specific */
.insta-btn{
  gap: 10px;
}

.insta-btn .btn-icon{
  width: 19px;
  height: 19px;

  opacity: 0.92;
}