/* Colors (from you) + dark glass style */
:root{
  --c1: #FFE6D4;
  --c2: #FFC69D;
  --c3: #E06B80;
  --c4: #CD2C58;

  --bg-dark: #0f0f10;
  --glass: rgba(18,18,20,0.55);
  --glass-strong: rgba(18,18,20,0.78);
  --muted: #bdb6b0;
  --maxw: 1100px;
  --radius: 16px;
  --gap: 18px;
}

/* font */
@font-face {
  font-family: 'Sardin';
  src: url('font/Sardin DEMO.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background: linear-gradient(180deg,var(--c1),#f9efe6 60%);
  color:#fff;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* NAV */
.nav {
  position:fixed;left:0;right:0;top:0;z-index:60;
  background: linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0.06));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{font-family:'Sardin';font-size:22px;color:var(--c4);letter-spacing:1px}
.nav-links a{color:#fff;margin-left:18px;opacity:0.9;text-decoration:none;font-weight:600}

/* HERO */
.hero{min-height:72vh;display:flex;align-items:center;justify-content:center;position:relative;padding-top:60px}
.hero-cover{
  position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.7);
  z-index:1;transition:filter .35s ease;
}
.hero-cover::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:48%;
  background: linear-gradient(to top, rgba(15,15,16,0.95), rgba(15,15,16,0.0));
  z-index:2;
}
.hero-inner{position:relative;z-index:20;display:flex;flex-direction:column;align-items:center;padding:48px 20px}

/* dp circle */
.dp-wrap{width:190px;height:190px;border-radius:50%;overflow:hidden;border:8px solid #fff;margin-bottom:18px;box-shadow:0 18px 50px rgba(5,5,6,0.5)}
.dp{width:100%;height:100%;object-fit:cover;display:block}

/* title */
.site-title{font-family:'Sardin';font-size:64px;margin:6px 0 6px;color:var(--c4);letter-spacing:-1px}
.site-tag{color:var(--muted);font-weight:600;margin-bottom:12px}

/* actions */
.btn{display:inline-flex;gap:10px;align-items:center;padding:10px 16px;border-radius:999px;font-weight:800;text-decoration:none;cursor:pointer;border:0}
.primary{background:#0b0b0c;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,0.5)}
.ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#fff}

/* SECTIONS */
.section{padding:64px 20px}
.container{max-width:var(--maxw);margin:0 auto}

/* headings */
.section h2{font-family:'Sardin';font-size:36px;margin:0 0 18px;color:var(--c4)}

/* about */
.about .muted{color:var(--muted);max-width:760px;margin:8px auto 0;font-size:15px;letter-spacing:0.35px}

/* grid (galleries) */
.grid{display:grid;gap:18px}
.gallery-grid{grid-template-columns: repeat(auto-fit,minmax(220px,1fr))}
.lookbook-grid{grid-template-columns: repeat(auto-fit,minmax(260px,1fr))}

/* card style + dark glass */
.card{
  border-radius:12px;overflow:hidden;position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  transform-origin:center center;
  transition: transform .28s ease, box-shadow .28s ease;
}
.card img{width:100%;height:100%;object-fit:cover;display:block}

/* 3D tilt area */
.card:hover{ transform: translateY(-10px) rotateX(3deg) rotateY(2deg); box-shadow:0 30px 70px rgba(0,0,0,0.5)}

/* reels grid (instagram-like) */
.reels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.reels-grid .thumb{aspect-ratio:1/1;overflow:hidden;border-radius:8px;display:block;position:relative}
.reels-grid img{width:100%;height:100%;object-fit:cover}

/* contact */
.contact p a{color:var(--c3);text-decoration:underline}

/* footer */
.footer{padding:40px 20px;text-align:center;color:var(--muted);font-size:14px}

/* responsive */
@media (max-width:880px){
  .site-title{font-size:40px}
  .dp-wrap{width:130px;height:130px}
  .hero-inner{padding:28px}
  .section{padding:42px 16px}
  .nav-inner{padding:10px 14px}
}