:root{
  --ml-pink:#de4fa4;
  --ml-blue:#25b8c8;
  --ml-dark:#101828;
  --ml-text:#344054;
  --ml-muted:#667085;
  --ml-soft:#f8fbff;
  --ml-border:#e6edf5;
  --ml-shadow:0 24px 65px rgba(16,24,40,.12);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
}

.melanin-page{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--ml-dark);
  background:#fff;
  overflow:hidden;
}

.melanin-container{
  width:min(1200px, calc(100% - 36px));
  margin:auto;
}

/* =========================
   HERO BACKGROUND SLIDER
========================= */

.ml-entry{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:#111827;
}

.ml-entry-slider{
  position:absolute;
  inset:0;
  z-index:1;
}

.ml-entry-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.08);
  animation:mlEntrySlider 35s infinite;
}

.ml-entry-slide:nth-child(1){
  background-image:url("melanin-hero-1.jpg");
  animation-delay:0s;
}

.ml-entry-slide:nth-child(2){
  background-image:url("melanin-hero-2.jpg");
  animation-delay:7s;
}

.ml-entry-slide:nth-child(3){
  background-image:url("melanin-hero-3.jpg");
  animation-delay:14s;
}

.ml-entry-slide:nth-child(4){
  background-image:url("melanin-hero-4.jpg");
  animation-delay:21s;
}

.ml-entry-slide:nth-child(5){
  background-image:url("melanin-hero-5.jpg");
  animation-delay:28s;
}

@keyframes mlEntrySlider{
  0%{
    opacity:0;
    transform:scale(1.08);
  }
  7%{
    opacity:1;
  }
  25%{
    opacity:1;
    transform:scale(1);
  }
  34%{
    opacity:0;
    transform:scale(1.03);
  }
  100%{
    opacity:0;
    transform:scale(1.08);
  }
}

.ml-entry-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.20) 48%,rgba(0,0,0,.18) 100%),
    linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.40) 100%);
}

.ml-entry-noise{
  display:none;
}

/* =========================
   NAVIGATION
========================= */

.ml-nav{
  position:absolute;
  top:24px;
  left:0;
  right:0;
  z-index:20;
}

.ml-nav-inner{
  width:min(1180px, calc(100% - 36px));
  min-height:74px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 18px;
  border-radius:28px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}

.ml-logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.ml-logo img{
  width:150px;
  height:auto;
  display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.24));
}

.ml-menu{
  display:flex;
  align-items:center;
  gap:22px;
}

.ml-menu a{
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:800;
  text-shadow:0 4px 14px rgba(0,0,0,.35);
  position:relative;
  padding:8px 0;
}

.ml-menu a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--ml-pink),var(--ml-blue));
  transition:.25s;
}

.ml-menu a:hover:after{
  width:100%;
}

.ml-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 22px;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
  background:linear-gradient(135deg,var(--ml-pink),var(--ml-blue));
  box-shadow:0 12px 30px rgba(37,184,200,.30);
  white-space:nowrap;
  transition:.25s ease;
}

.ml-login:hover{
  transform:translateY(-2px);
}

/* =========================
   SIMPLE HERO CONTENT
========================= */

.ml-entry-content{
  position:relative;
  z-index:10;
  width:min(780px, calc(100% - 36px));
  margin:auto;
  text-align:left;
  padding-top:110px;
  transform:translateY(70px);
}

.ml-entry-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 15px;
  border-radius:999px;
  color:#fff;
  font-size:13px;
  font-weight:900;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  margin-bottom:16px;
}

.ml-entry-badge i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--ml-pink),var(--ml-blue));
}

.ml-entry-title{
  max-width:720px;
  margin:0 0 14px;
  font-size:clamp(34px,5vw,66px);
  line-height:1.05;
  letter-spacing:-2px;
  color:#fff;
  text-shadow:0 20px 50px rgba(0,0,0,.45);
}

.ml-entry-subtitle{
  max-width:540px;
  margin:0 0 24px;
  color:rgba(255,255,255,.92);
  font-size:17px;
  line-height:1.75;
  text-shadow:0 10px 28px rgba(0,0,0,.38);
}

.ml-entry-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.ml-entry-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 23px;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:.25s ease;
}

.ml-entry-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.24);
}

.ml-entry-btn.primary{
  background:linear-gradient(135deg,var(--ml-pink),var(--ml-blue));
  border:0;
  box-shadow:0 16px 36px rgba(37,184,200,.30);
}

.ml-scroll{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  color:#fff;
  font-size:12px;
  font-weight:800;
  opacity:.82;
  text-align:center;
}

.ml-scroll span{
  display:block;
  width:22px;
  height:36px;
  border:2px solid rgba(255,255,255,.75);
  border-radius:999px;
  margin:0 auto 7px;
  position:relative;
}

.ml-scroll span:before{
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff;
  transform:translateX(-50%);
  animation:mlScrollDot 1.5s infinite;
}

@keyframes mlScrollDot{
  0%{
    top:8px;
    opacity:1;
  }
  100%{
    top:22px;
    opacity:0;
  }
}

/* =========================
   GENERAL SECTIONS
========================= */

.ml-section{
  position:relative;
  padding:90px 0;
}

.ml-section-soft{
  background:
    radial-gradient(circle at 10% 10%,rgba(222,79,164,.08),transparent 28%),
    radial-gradient(circle at 90% 20%,rgba(37,184,200,.10),transparent 30%),
    var(--ml-soft);
}

.ml-head{
  max-width:820px;
  margin:0 auto 50px;
  text-align:center;
}

.ml-tag{
  display:inline-flex;
  padding:8px 15px;
  border-radius:999px;
  color:var(--ml-pink);
  background:#fff;
  border:1px solid var(--ml-border);
  font-weight:900;
  margin-bottom:14px;
  box-shadow:0 12px 28px rgba(17,24,39,.06);
}

.ml-head h2{
  margin:0 0 14px;
  font-size:clamp(30px,4vw,46px);
  letter-spacing:-1.4px;
  color:var(--ml-dark);
}

.ml-head p{
  margin:0;
  color:var(--ml-muted);
  font-size:17px;
  line-height:1.8;
}

/* =========================
   ABOUT
========================= */

.ml-about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:stretch;
}

.ml-about-card{
  border-radius:34px;
  padding:40px;
  background:#fff;
  border:1px solid var(--ml-border);
  box-shadow:var(--ml-shadow);
}

.ml-about-card h2{
  margin:0 0 16px;
  font-size:40px;
  letter-spacing:-1.3px;
}

.ml-about-card p{
  color:var(--ml-muted);
  line-height:1.85;
  margin:0 0 16px;
  font-size:16px;
}

.ml-about-list{
  display:grid;
  gap:12px;
  margin-top:22px;
}

.ml-about-list div{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-weight:800;
  color:#344054;
}

.ml-about-list b{
  width:26px;
  height:26px;
  min-width:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--ml-pink),var(--ml-blue));
}

.ml-about-visual{
  border-radius:34px;
  min-height:460px;
  background:
    linear-gradient(135deg,rgba(222,79,164,.10),rgba(37,184,200,.12)),
    url("melanin-hero-1.jpg") center/cover no-repeat;
  box-shadow:var(--ml-shadow);
  overflow:hidden;
  position:relative;
}

.ml-about-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,rgba(17,24,39,.56));
}

.ml-about-caption{
  position:absolute;
  left:22px;
  right:22px;
  bottom:22px;
  z-index:2;
  padding:18px;
  border-radius:24px;
  color:#fff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.ml-about-caption strong{
  display:block;
  font-size:21px;
  margin-bottom:6px;
}

.ml-about-caption span{
  color:rgba(255,255,255,.84);
  line-height:1.6;
}

/* =========================
   SERVICES
========================= */

.ml-services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.ml-service-card{
  position:relative;
  min-height:250px;
  padding:28px;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--ml-border);
  box-shadow:0 16px 40px rgba(17,24,39,.07);
  transition:.28s ease;
  overflow:hidden;
}

.ml-service-card:before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  top:-80px;
  right:-70px;
  background:linear-gradient(135deg,rgba(222,79,164,.18),rgba(37,184,200,.20));
}

.ml-service-card:hover{
  transform:translateY(-7px);
  box-shadow:0 26px 65px rgba(17,24,39,.12);
}

.ml-service-icon{
  position:relative;
  width:60px;
  height:60px;
  border-radius:21px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:26px;
  margin-bottom:18px;
  background:linear-gradient(135deg,var(--ml-pink),var(--ml-blue));
}

.ml-service-card h3{
  position:relative;
  margin:0 0 10px;
  font-size:22px;
}

.ml-service-card p{
  position:relative;
  margin:0;
  color:var(--ml-muted);
  line-height:1.75;
}

/* =========================
   GALLERY
========================= */

.ml-gallery-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  grid-template-rows:270px 270px;
  gap:18px;
}

.ml-gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  box-shadow:var(--ml-shadow);
  background:#ddd;
}

.ml-gallery-item.big{
  grid-row:span 2;
}

.ml-gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.5s ease;
}

.ml-gallery-item:hover img{
  transform:scale(1.07);
}

.ml-gallery-caption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  padding:16px;
  border-radius:22px;
  color:#fff;
  background:rgba(17,24,39,.42);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.ml-gallery-caption strong{
  display:block;
  margin-bottom:5px;
  font-size:18px;
}

.ml-gallery-caption span{
  color:rgba(255,255,255,.82);
  font-size:13px;
  line-height:1.5;
}

/* =========================
   EXPERIENCE
========================= */

.ml-experience{
  border-radius:38px;
  padding:44px;
  color:#fff;
  background:
    radial-gradient(circle at 12% 20%,rgba(255,255,255,.22),transparent 26%),
    linear-gradient(135deg,#15102a,#2c1452 35%,var(--ml-pink) 68%,var(--ml-blue));
  box-shadow:0 30px 80px rgba(37,184,200,.22);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.ml-experience-card{
  padding:16px;
}

.ml-experience-card h3{
  margin:0 0 10px;
  font-size:23px;
}

.ml-experience-card p{
  margin:0;
  color:rgba(255,255,255,.86);
  line-height:1.75;
}

/* =========================
   CONTACT INFO
========================= */

.ml-info-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.ml-info-card{
  padding:25px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--ml-border);
  box-shadow:0 16px 40px rgba(17,24,39,.07);
}

.ml-info-icon{
  width:56px;
  height:56px;
  border-radius:19px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:24px;
  background:linear-gradient(135deg,var(--ml-pink),var(--ml-blue));
  margin-bottom:16px;
}

.ml-info-card h3{
  margin:0 0 8px;
  font-size:20px;
}

.ml-info-card p,
.ml-info-card a{
  margin:0;
  color:var(--ml-muted);
  text-decoration:none;
  line-height:1.7;
}

/* =========================
   FOOTER
========================= */

.ml-footer{
  background:#101828;
  color:#fff;
  padding:56px 0 24px;
}

.ml-footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr .8fr;
  gap:28px;
  margin-bottom:34px;
}

.ml-footer img{
  width:185px;
  background:#fff;
  border-radius:20px;
  padding:10px;
  margin-bottom:14px;
}

.ml-footer p{
  color:#d0d5dd;
  line-height:1.75;
  margin:0;
}

.ml-footer h3{
  margin:0 0 14px;
  font-size:18px;
}

.ml-footer a{
  display:block;
  color:#d0d5dd;
  text-decoration:none;
  margin:10px 0;
}

.ml-footer a:hover{
  color:#fff;
}

.ml-copyright{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:20px;
  color:#98a2b3;
  display:flex;
  justify-content:space-between;
  gap:15px;
  flex-wrap:wrap;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1020px){
  .ml-menu{
    display:none;
  }

  .ml-about-grid{
    grid-template-columns:1fr;
  }

  .ml-services-grid,
  .ml-info-grid{
    grid-template-columns:1fr 1fr;
  }

  .ml-experience{
    grid-template-columns:1fr;
  }

  .ml-gallery-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }

  .ml-gallery-item.big{
    grid-row:auto;
    grid-column:span 2;
    height:420px;
  }

  .ml-gallery-item{
    height:290px;
  }

  .ml-footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:680px){
  .melanin-container{
    width:min(100% - 24px,1200px);
  }

  .ml-nav{
    top:16px;
  }

  .ml-nav-inner{
    min-height:68px;
    border-radius:22px;
    padding:10px 12px;
  }

  .ml-logo img{
    width:122px;
  }

  .ml-login{
    padding:9px 13px;
    font-size:12px;
  }

  .ml-entry-content{
    width:min(100% - 28px,780px);
    padding-top:120px;
    transform:translateY(45px);
  }

  .ml-entry-title{
    letter-spacing:-1px;
  }

  .ml-entry-subtitle{
    font-size:16px;
  }

  .ml-entry-actions{
    gap:10px;
  }

  .ml-entry-btn{
    padding:11px 18px;
    font-size:13px;
  }

  .ml-services-grid,
  .ml-info-grid,
  .ml-footer-grid{
    grid-template-columns:1fr;
  }

  .ml-gallery-grid{
    grid-template-columns:1fr;
  }

  .ml-gallery-item.big{
    grid-column:auto;
    height:310px;
  }

  .ml-gallery-item{
    height:270px;
  }

  .ml-section{
    padding:66px 0;
  }

  .ml-about-card{
    padding:26px;
  }

  .ml-about-card h2{
    font-size:32px;
  }

  .ml-experience{
    padding:28px;
    border-radius:30px;
  }

  .ml-copyright{
    justify-content:center;
    text-align:center;
  }
}