/*
 * meta-data.css
 * DocBase meta-data-pagina
 */

:root{
  --db-dark:#071015;
  --db-teal:#00a99d;
  --db-teal-light:#23e0c7;
  --db-orange:#ff8747;
  --db-orange-dark:#c86424;
  --db-orange-soft:#f6e5d4;
  --db-mint:#eef9f8;
}

.db-metadata-page,
.db-metadata-page *{
  box-sizing:border-box;
}

.db-metadata-page{
  position:relative;
  overflow:hidden;
  color:var(--db-dark);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.68), transparent 34%),
    radial-gradient(circle at 80% 18%, rgba(0,184,169,.10), transparent 34%),
    linear-gradient(135deg,#f6e5d4 0%,#f9eee2 46%,#eef9f8 100%);
}

.db-metadata-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 72% 16%, rgba(0,184,169,.10), transparent 30%),
    radial-gradient(circle at 20% 88%, rgba(31,124,255,.05), transparent 34%);
}

.db-metadata-page::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.34;
  background-image:radial-gradient(rgba(7,16,21,.09) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(90deg,#000 0,transparent 14%,transparent 86%,#000 100%);
}

.db-metadata__container{
  position:relative;
  z-index:2;
  width:min(1480px, calc(100% - 72px));
  margin:0 auto;
}

.db-metadata-hero{
  position:relative;
  z-index:1;
  padding:clamp(92px,8vw,132px) 0 clamp(116px,10vw,164px);
}

.db-metadata-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:180px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 42%,
    rgba(255,255,255,.48) 100%
  );
}

.db-metadata__eyebrow{
  margin:0 0 16px;
  color:var(--db-teal);
  font-family:"Jakarta Bold",Arial,sans-serif;
  font-size:13px;
  line-height:1;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.db-metadata__title{
  max-width:920px;
  margin:0 0 18px;
  color:var(--db-dark);
  font-family:"Jakarta Bold",Arial,sans-serif;
  font-size:clamp(58px,6.2vw,104px);
  line-height:.88;
  font-weight:900;
  letter-spacing:-.075em;
}

.db-metadata__title span{
  color:var(--db-teal);
}

.db-metadata__text{
  max-width:660px;
  margin:0;
  color:rgba(7,16,21,.76);
  font-family:"Jakarta Regular",Arial,sans-serif;
  font-size:20px;
  line-height:1.55;
}

.db-metadata__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:58px;
  margin-top:34px;
  padding:0 28px;
  border:0;
  border-radius:999px;
  color:#fff!important;
  background:linear-gradient(135deg,#00b8a9,#008f86);
  font-family:"Jakarta Bold",Arial,sans-serif;
  font-size:16px;
  line-height:1;
  font-weight:900;
  text-decoration:none!important;
  box-shadow:0 20px 44px rgba(0,169,157,.22);
  transition:transform .24s ease,box-shadow .24s ease;
  white-space:nowrap;
}

.db-metadata__button:hover{
  transform:translateY(-2px);
  color:#fff!important;
  box-shadow:0 26px 56px rgba(0,169,157,.30);
}

.db-metadata-benefits{
  position:relative;
  z-index:1;
  margin-top:-66px;
  padding:94px 0 clamp(96px,9vw,140px);
}

.db-metadata-benefits::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:250px;
  border-radius:52px 52px 0 0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.38) 62%,
      rgba(255,255,255,0) 100%
    );
  box-shadow:
    0 -28px 70px rgba(7,16,21,.045),
    inset 0 1px rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  pointer-events:none;
}

.db-metadata-benefits::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(520px,60vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(0,169,157,.22),transparent);
  pointer-events:none;
}

.db-metadata-benefits__heading{
  position:relative;
  z-index:2;
  max-width:1050px;
  margin:0 0 38px;
}

.db-metadata-benefits__heading h2{
  margin:0;
  color:var(--db-dark);
  font-family:"Jakarta Bold",Arial,sans-serif;
  font-size:clamp(42px,4.4vw,76px);
  line-height:.96;
  font-weight:900;
  letter-spacing:-.065em;
}

.db-metadata-benefits__heading h2 span{
  color:var(--db-teal);
}

.db-metadata-benefits__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
}

.db-metadata-benefit{
  position:relative;
  min-height:280px;
  padding:30px 24px;
  border:0;
  border-radius:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  color:#fff;
  background:linear-gradient(145deg,#ff9b59 0%,#ff7a32 100%);
  box-shadow:0 22px 48px rgba(200,100,36,.16),inset 0 1px rgba(255,255,255,.20);
  cursor:pointer;
  transition:transform .24s ease,box-shadow .24s ease,background .24s ease;
}

.db-metadata-benefit:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 62px rgba(200,100,36,.24),inset 0 1px rgba(255,255,255,.24);
}

.db-metadata-benefit.is-active{
  background:linear-gradient(145deg,#62b79d 0%,#4b9f87 100%);
  box-shadow:0 30px 62px rgba(0,169,157,.18),inset 0 1px rgba(255,255,255,.22);
}

.db-metadata-benefit__icon{
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:3px solid rgba(255,255,255,.92);
  border-radius:50%;
  font-family:"Jakarta Bold",Arial,sans-serif;
  font-size:34px;
  line-height:1;
}

.db-metadata-benefit strong{
  font-family:"Jakarta Bold",Arial,sans-serif;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  text-align:center;
}

.db-metadata-benefit__toggle{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.85);
  border-radius:50%;
  font-size:22px;
  line-height:1;
}

.db-metadata-benefits__panel{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:30px;
  align-items:center;
  margin-top:18px;
  padding:34px 40px;
  border:1px solid rgba(7,16,21,.08);
  border-radius:28px;
  background:rgba(255,255,255,.82);
  box-shadow:0 28px 64px rgba(7,16,21,.08),inset 0 1px rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
}

.db-metadata-benefits__panel::before{
  content:"";
  position:absolute;
  top:-12px;
  left:calc(10% - 12px);
  width:24px;
  height:24px;
  background:rgba(255,255,255,.82);
  border-left:1px solid rgba(7,16,21,.08);
  border-top:1px solid rgba(7,16,21,.08);
  transform:rotate(45deg);
}

.db-metadata-benefits__panel-icon{
  width:88px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:var(--db-orange-dark);
  background:rgba(255,135,71,.12);
  font-family:"Jakarta Bold",Arial,sans-serif;
  font-size:40px;
}

.db-metadata-benefits__panel h3{
  margin:0 0 10px;
  color:var(--db-dark);
  font-family:"Jakarta Bold",Arial,sans-serif;
  font-size:28px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
}

.db-metadata-benefits__panel p{
  max-width:850px;
  margin:0;
  color:rgba(7,16,21,.72);
  font-family:"Jakarta Regular",Arial,sans-serif;
  font-size:17px;
  line-height:1.58;
}

@media(max-width:1100px){
  .db-metadata__container{
    width:min(100% - 56px,1480px);
  }

  .db-metadata-benefits__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .db-metadata-benefit:last-child{
    grid-column:1 / -1;
  }

  .db-metadata-benefits__panel::before{
    display:none;
  }
}

@media(max-width:720px){
  .db-metadata__container{
    width:min(100% - 36px,1480px);
  }

  .db-metadata-hero{
    padding:78px 0 104px;
  }

  .db-metadata-hero::after{
    height:120px;
  }

  .db-metadata__title{
    font-size:clamp(48px,15vw,68px);
  }

  .db-metadata__text{
    font-size:17px;
  }

  .db-metadata__button{
    width:100%;
  }

  .db-metadata-benefits{
    margin-top:-38px;
    padding:64px 0 90px;
  }

  .db-metadata-benefits::before{
    height:170px;
    border-radius:30px 30px 0 0;
  }

  .db-metadata-benefits__grid{
    grid-template-columns:1fr;
  }

  .db-metadata-benefit,
  .db-metadata-benefit:last-child{
    min-height:190px;
    grid-column:auto;
  }

  .db-metadata-benefits__panel{
    grid-template-columns:1fr;
    gap:20px;
    padding:28px 24px;
  }

  .db-metadata-benefits__panel-icon{
    width:72px;
    height:72px;
    font-size:34px;
  }
}