* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0b0f18;
  overflow: hidden;
  background:
    radial-gradient(900px 650px at 55% 85%, rgba(24, 255, 193, 0.18), transparent 65%),
    radial-gradient(1100px 700px at 15% 20%, rgba(177, 188, 226, 0.22), transparent 60%), 
    radial-gradient(900px 650px at 80% 25%, rgba(90, 170, 255, .25), transparent 62%),
    radial-gradient(900px 650px at 55% 85%, rgba(0, 118, 67, 0.18), transparent 65%), 
    /* linear-gradient(180deg, #f7f8ff 0%, #eef2ff 20%, #b4ffc5 60%); */
}

main{ width:100%; height:100vh; }

#hero{
  position: relative;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 80px 20px;
}

/* ===== 마우스커서=========== */
body{ cursor:none; }
.c-dot{
  position:fixed; top:0; left:0;
  width:18px; height:18px;
  border-radius:50%;
  background:#3eaf7c;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:99;
}

@media (hover:none) and (pointer:coarse){
  body{cursor:auto;}
  .c-dot{display:none !important;}
}


/* ===== 배경이름 텍스트 ===== */
.hero-bg-text{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  user-select:none;
  z-index:0;
  opacity:.07;
}

.hero-bg-text span{
  font-family: "Petit Formal Script", cursive;
  font-size: clamp(64px, 10vw, 170px);
  letter-spacing: -1px;
  color:#0b0f18;
  white-space: nowrap;
  transform: translateY(-10px);
}

/* ===== card wrapper ===== */
.hero-folder{
  position: relative;
  z-index: 2;
  width: min(250px);
  padding: 18px;
  border-radius: 28px;
  /* glass */
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 18px 50px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
  transform: translateY(0);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  position: relative;
}

/* ===== traffic lights (mac window controls) ===== */
.hero-folder::before{
  content:"";
  position:absolute;
  top: 14px;
  left: 18px;
  width: 54px;
  height: 14px;
  background:
    radial-gradient(circle at 7px 7px, #ff5f57 0 6px, transparent 7px),
    radial-gradient(circle at 27px 7px, #febc2e 0 6px, transparent 7px),
    radial-gradient(circle at 47px 7px, #28c840 0 6px, transparent 7px);
  opacity: .95;
}

/* ===== thin top bar line ===== */
.hero-folder::after{
  content:"";
  position:absolute;
  top: 44px;
  left: 0;
  right: 0;
  height: 1px;
   background: rgba(20, 25, 40, .08);
}

/* ===== actual folder image ===== */
.hero-folder img{
  display:block;
  width: 60%;
  height: auto;
  margin-top: 34px;   /* below traffic + top line */
  border-radius: 18px;
 margin: 34px auto 0;

  transform: translateY(0);
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;

}

/* hover: super subtle */
.hero-folder:hover{
  transform: translateY(-6px);
  box-shadow:
    0 26px 70px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.7);
  background: rgba(255,255,255,.62);
}

/* .hero-folder:hover img{
  transform: translateY(-2px) scale(1.004);
  box-shadow: 0 18px 45px rgba(0,0,0,.16);
} */

/* ===== ambient grain (optional but very mac) ===== */
#hero .grain{
  position:absolute;
  inset:-50%;
  z-index:1;
  pointer-events:none;
  opacity:.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  animation: grainMove 10s steps(10) infinite;
}

@keyframes grainMove{
  0%{ transform: translate(0,0); }
  100%{ transform: translate(-6%, 4%); }
}

/* ===== mobile ===== */
@media (max-width: 600px){
  #hero{ padding: 60px 14px; }
  .hero-folder{
    border-radius: 22px;
    padding: 14px;
  }
  .hero-folder::after{ top: 40px; }
  .hero-folder img{
    margin-top: 30px;
    border-radius: 16px;
  }
}