/* Basic reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #2a2a2a;
  background: #f6f1eb;
  overflow-x: hidden;
}

/* Soft animated background gradient */
.bg {
  position: fixed;
  inset: 0;
  background: radial-gradient(1200px 600px at 10% 10%, #fff7ee 0%, transparent 60%),
              radial-gradient(1200px 600px at 90% 20%, #fff 0%, transparent 60%),
              radial-gradient(1200px 600px at 50% 90%, #f1e3d3 0%, transparent 55%);
  filter: blur(0.5px);
  animation: floatBg 14s ease-in-out infinite alternate;
  z-index: -3;
}
@keyframes floatBg {
  from { transform: translateY(-6px); }
  to   { transform: translateY(6px); }
}

/* Film grain for subtle texture */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"160\" height=\"160\" viewBox=\"0 0 160 160\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.9\" numOctaves=\"2\" stitchTiles=\"stitch\"/></filter><rect width=\"100%\" height=\"100%\" filter=\"url(%23n)\" opacity=\"0.04\"/></svg>');
  background-size: 160px 160px;
  z-index: -2;
  opacity: .2;
  mix-blend-mode: multiply;
}

/* Layout */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 20px 72px;
  text-align: center;
}

.brand .mark {
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  filter: drop-shadow(0 6px 12px rgba(180,130,60,0.25));
}
.brand h1 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  letter-spacing: 0.12em;
  font-size: 48px;
  margin: 0 0 4px;
}
.tagline {
  margin: 0 0 24px;
  font-weight: 500;
  opacity: .75;
}

.hero .coming {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 56px;
  margin: 18px 0 10px;
  position: relative;
  display: inline-block;
}

/* Animated shine passing over the headline */
.shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.0) 35%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.0) 65%, transparent 100%);
  transform: translateX(-120%) skewX(-15deg);
  animation: shine 3.2s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes shine {
  0% { transform: translateX(-120%) skewX(-15deg); }
  60% { transform: translateX(120%) skewX(-15deg); }
  100% { transform: translateX(120%) skewX(-15deg); }
}

.sub { margin: 6px 0 28px; opacity: .85; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 28px;
}
.card {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 18px 14px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  backdrop-filter: blur(6px);
}
.card p { margin: 10px 0 0; font-weight: 600; font-size: 0.98rem; }

/* Decorative jewellery shapes */
.ring, .pendant, .drops { width: 64px; height: 64px; margin: 0 auto; position: relative; }
.ring::before, .ring::after {
  content: ''; position: absolute; inset: 8px;
  border-radius: 50%;
  border: 3px solid #c0c0c0;
  box-shadow: inset 0 0 14px rgba(255,255,255,0.9), 0 6px 12px rgba(0,0,0,0.08);
}
.ring::after { inset: 18px; border-color: #e5e5e5; }

.pendant::before {
  content: ''; position: absolute; inset: 6px 14px; border-radius: 40% 40% 50% 50% / 50% 50% 40% 40%;
  border: 3px solid #bdbdbd; background: linear-gradient(180deg,#fafafa,#dedede);
  box-shadow: inset 0 0 12px rgba(255,255,255,0.8), 0 6px 12px rgba(0,0,0,0.08);
}
.drops::before, .drops::after {
  content: ''; position: absolute; width: 18px; height: 48px; left: 12px; top: 6px;
  border-radius: 10px 10px 26px 26px; background: linear-gradient(180deg,#f7f7f7,#cfcfcf);
  box-shadow: inset 0 0 10px rgba(255,255,255,0.8), 0 6px 12px rgba(0,0,0,0.08);
}
.drops::after { left: 34px; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration: none;
  color: #2a2a2a;
  background: linear-gradient(180deg,#fff,#f0e6d9);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  font-weight: 700;
  margin: 4px 8px;
}
.btn:hover { transform: translateY(-1px); transition: .2s ease; }
.btn.outline {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
}

/* Contacts */
.contacts { margin-top: 16px; font-weight: 600; opacity: .9; }
.contact { text-decoration: none; color: inherit; }
.sep { opacity: .4; margin: 0 8px; }

.ico { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.ico.insta { background: conic-gradient(#f9ce34, #ee2a7b, #6228d7, #f9ce34); border-radius: 4px; }
.ico.wa { background: radial-gradient(circle at 30% 30%, #43d854, #24a03a); border-radius: 4px; }
.ico.mail { background: linear-gradient(180deg,#fff,#dcdcdc); border: 1px solid rgba(0,0,0,0.1); border-radius: 3px; }

/* Sparkles floating */
.sparkles { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.sparkles span {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #ffffff, #ffffff88, transparent 70%);
  animation: float 8s linear infinite;
  box-shadow: 0 0 12px #fff;
}
.sparkles span:nth-child(1){ left: 12%; top: 30%; animation-duration: 9s; }
.sparkles span:nth-child(2){ left: 80%; top: 20%; animation-duration: 7s; }
.sparkles span:nth-child(3){ left: 60%; top: 70%; animation-duration: 10s; }
.sparkles span:nth-child(4){ left: 25%; top: 80%; animation-duration: 8s; }
.sparkles span:nth-child(5){ left: 45%; top: 15%; animation-duration: 11s; }
@keyframes float {
  0% { transform: translateY(0) scale(1); opacity: .9; }
  50% { transform: translateY(-18px) scale(1.1); opacity: .6; }
  100% { transform: translateY(0) scale(1); opacity: .9; }
}

/* Responsive */
@media (max-width: 720px){
  .cards { grid-template-columns: 1fr; }
  .brand h1 { font-size: 40px; }
  .hero .coming { font-size: 44px; }
}


.btn.pulse { animation: pulse 1.8s ease-in-out 2; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(184,137,59,0.3); }
  70% { box-shadow: 0 0 0 18px rgba(184,137,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,137,59,0); }
}