/* cinzel-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/cinzel-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* assistant-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/assistant-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




*{ 
    box-sizing:border-box; 
    margin:0; 
    padding:0; 
}

html,body{ 
    height:100%; 
}

body{
  font-family:"Assistant", sans-serif;
  color:#2a2f34;
  background:url('image/background7.jpg') no-repeat center center/cover;
  display:flex;
  flex-direction:column;
  position: relative;           
  min-height: 100dvh;
}

body::before{
  content:"";
  position: fixed; inset: 0;
  background: rgba(255,255,255,0.16);        
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  pointer-events: none;
  z-index: 0;
}

header, main, footer, section{ 
    position:relative; 
    z-index:1; 
}


a{ 
    color:inherit; 
    text-decoration:none; 
    transition:all .2s ease; 
}

.container{ 
    max-width:1200px; 
    margin:0 auto; 
    padding:0 20px; 
}


h1{ 
  font-family: "Cinzel", serif;          、
  font-weight: 700;                       
  font-size: clamp(2.2rem, 1.8rem + 3vw, 3.2rem);
  color: #f6f3f7;
  letter-spacing: .4px; 
}


h2{ 
    font-weight:700; 
    font-size:clamp(0.92rem, 0.85rem + 0.2vw, 1rem); 
    color:#0e141b; 
}

p{ 
    font-size:clamp(1rem, 0.95rem + 0.5vw, 1.125rem); 
    line-height:1.7; }

/* Header*/
header{
  position:relative; 
  top:0; 
  z-index:1;
  background: linear-gradient(to right, #ffffff, #fafafa);
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 4px rgba(0,0,0,.06);
}

header .container{
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  padding: 14px 20px;
}

.logo{ 
    font-size: clamp(22px, 2vw, 28px); 
    font-weight:800; 
    color:#0f172a; 
    letter-spacing:.6px; 
}

nav ul{ 
    display:flex; 
    list-style:none; 
    gap:18px; 
}

nav a{ 
    font-weight:700; 
    padding:8px 12px; 
    border-radius:10px; 
    color:#0f172a; 
}

nav a:hover{ 
    background: #ff5733; 
    color:#fff; 
}



/* == Hero/Banner  == */
.banner{
  position: relative;
  min-height: 56svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 16px;
  color: #fff;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.35));
  background-blend-mode: multiply;
}

.banner h1{
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #ffffff;
  text-shadow: 0 3px 14px rgba(0,0,0,.45);
}

.banner-sub{
  max-width: 820px;
  color: #e6eeff;               
  font-size: clamp(1rem, .9rem + .6vw, 1.15rem);
  line-height: 1.7;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.view-button{
  position: static !important;
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.btn-view{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #ffffff;
  background: linear-gradient(135deg, #ff5733, #e64a2a); 
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 12px 28px rgba(255,87,51,.35);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.btn-view:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(255,87,51,.48);
  filter: saturate(1.05);
}




/* == Home sections == */
.home-section{ 
    padding: 56px 0; 
}

.home-section.alt{ 
    background: rgba(255,255,255,.06); 
    border-top:1px solid rgba(255,255,255,.08); 
    border-bottom:1px solid rgba(255,255,255,.08); 
}

.home-title{
  font-family:"Cinzel", serif;
  font-weight:700;
  font-size: clamp(24px, 2.2vw, 32px);
  color:#111315;
  margin-bottom: 6px;
}

.home-lead{ 
    text-align:center; 
    color:#6f7683; 
    margin:0 auto 8px; 
    max-width:820px;  
}

/* 3-col features */
.feature-grid{
  display:grid; 
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 18px;
}

.feature-card{ 
    background:#fff; 
    border:1px solid rgba(0,0,0,.08); 
    border-radius:14px; 
    padding:16px; 
    box-shadow:0 10px 24px rgba(0,0,0,.12); 
}

.feature-card h3{ 
    color:#0e141b; 
    margin: 10px 2px 4px; 
}

.feature-card p{ 
    color:#5a6473; 
}




/* == Global image defaults == */
img{
  display:block;                 
  max-width:100%;                
  height:auto;                   
  border:0;
  vertical-align:middle;
  image-rendering:auto;
  -webkit-user-drag:none;        
}

.img-card{
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);
  overflow:hidden;
}

.img-cover{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
}

.img-contain{
  width:100%;
  height:100%;
  object-fit: contain;
  background: #fff;              
}

.ratio{
  position:relative; 
  width:100%; 
  overflow:hidden; 
  border-radius:14px;
}

.ratio > img{ 
    position:absolute; 
    inset:0; 
} 

.ratio-16x9{ 
    padding-top:56.25%; 
}

.ratio-4x3 { 
    padding-top:75%; 
}

.ratio-1x1 { 
    padding-top:100%; 
}

.ratio-3x4 { 
    padding-top:133.33%; 
}

.img-rounded{ 
    border-radius:14px; 
    overflow:hidden; 
}

.img-circle { 
    border-radius:50%; 
    overflow:hidden; 
}

.img-hover:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}

.product .desc{
  color:#6b7280;               
  padding: 0 16px 8px;
  font-size: 0.95rem;
  line-height: 1.55;
}



/* Button Style */
.btn-view {
    display: inline-block;
    background-color: #ff5733; 
    color: #fff; 
    padding: 10px 20px; 
    font-size: 18px; 
    font-weight: bold;
    border: none;
    border-radius: 5px; 
    text-decoration: none; 
    transition: background-color 0.3s ease;
}

.btn-view:hover {
    background-color: #e74c3c; 
    cursor: pointer; 
}



/* Header Section */
header {
    background: linear-gradient(to right, #ffffff, #f9f9f9);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header .logo {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    letter-spacing: 1px;
}

header nav ul {
    display: flex;
    list-style: none;
}

header nav ul li {
    margin: 0 15px;
}

header nav ul li a {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 8px 12px;
    border-radius: 5px;
}

header nav ul li a:hover {
    background-color: #ff5733;
    color: #fff;
}

/* Banner Section */
.banner {
    height: 400px;
    background: url('image/indexbg.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    font-size: 36px;
    text-align: center;
}

.banner h1 {
    font-size: 48px;
}

/* Section Styling */
section {
    padding: 50px 20px;
    text-align: center;
}



.na {
    width: 100%; 
    height: 400px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
    text-align: center; 
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); 
}

.na-content h1 {
    font-size: 48px; 
    margin-bottom: 10px; 
}

.na-content p {
    font-size: 18px; 
    margin: 0; 
    color: #f0f0f0; 
}

.cl {
    width: 100%; 
    height: 400px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
    text-align: center; 
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); 
}

.cl-content h1 {
    font-size: 48px; 
    margin-bottom: 10px; 
}

.collection h2 {
    font-family: "Cinzel", serif;       
    font-weight: 800;
    line-height: 1.15;
    font-size: 28px;
    letter-spacing: .6px;
    color: #0f172a;                     
    text-align: center; 
    text-shadow:
    0 1px 0 rgba(255,255,255,.65),    
    0 12px 32px rgba(16,18,24,.22);
}

.cl-content p {
    font-size: 18px; 
    margin: 0; 
    color: #f0f0f0; 
}



/* Product Grid */
.products, .collection-grid{
  display:grid; 
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 22px;
  padding: 0 20px;
}

.product, .collection-item{
  background: #ffffff; 
  border:1px solid rgba(0,0,0,.08); 
  border-radius: 14px;
  overflow:hidden; 
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.product:hover, .collection-item:hover{
  transform: translateY(-4px); 
  box-shadow: 0 18px 44px rgba(0,0,0,.18); 
  border-color: rgba(0,0,0,.12);
}

.product img, .collection-item img{
  width:100%;
  height: 450px;                 
  object-fit: cover; 
  object-position: center;
  display:block;
}

.product h3, .collection-item h3{
  padding: 14px 16px 6px; 
  font-size: 1.05rem; 
  color: #101113;
}

.product p, .collection-item p{
  padding: 0 16px 18px; 
  color: #555e6a;
}



/* New Arrivals / Collections- Top */
.na, .cl{
  min-height: 50svh; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  text-align:center; 
  color:#fff; 
  padding: 24px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.06)),
    url('image/indexbg.jpg') center/cover no-repeat;
}

.na-content h1, .cl-content h1{ 
    font-size: clamp(1.7rem, 1.4rem + 2vw, 2.4rem); 
    color:#fff; 
}

.na-content p, .cl-content p{ 
    color: #e8eefc; 
}



/* About：Team & Story */
.team{ 
    background:#f6f7fb; 
}

.team h2{ 
    text-align:center; 
    margin-bottom: 18px; 
}

.team-grid{
  display:grid; 
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px; 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 20px;
}

.team-member{
  background:#fff; 
  border:1px solid rgba(0,0,0,.08); 
  border-radius: 14px;
  overflow:hidden; 
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.team-member:hover{ 
    transform: translateY(-3px); 
    box-shadow: 0 18px 44px rgba(0,0,0,.18); 
}

.team-member img{ 
    width:100%; 
    height:300px; 
    object-fit:cover; 
}

.team-member h3{ 
    padding: 12px 14px 0; 
    font-weight:700; 
    color:#101113; 
}

.team-member p{ 
    padding: 6px 14px 12px; 
    color:#555e6a; 
}

.story-mission .container{
  display:grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 22px;
  padding: 42px 20px; 
  max-width:1200px; 
  margin:0 auto;
}

.story,.mission{
  background:#fff; 
  border:1px solid rgba(0,0,0,.08); 
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12); 
  padding: 26px; 
  transition: transform .16s ease, box-shadow .16s ease;
}

.story:hover,.mission:hover{ 
    transform: translateY(-3px); 
    box-shadow: 0 18px 44px rgba(0,0,0,.18); 
}



/* Contact */
.contact-container{
  display:grid; 
  grid-template-columns: 1.1fr .9fr; 
  gap:0; 
  max-width:1200px;
  margin: 42px auto; 
  background:#fff; 
  border-radius: 16px; 
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.12); 
  border:1px solid rgba(0,0,0,.08);
}

.contact-form{ 
    padding: 30px 28px; 
}

.contact-form h2{ 
    margin-bottom: 8px; 
}

.contact-form p{ 
    color:#555e6a; 
    margin-bottom: 14px; 
}

.contact-form input, .contact-form textarea{
  width:100%; 
  margin-bottom:14px; 
  padding:12px 12px; 
  font-size:1rem;
  border:1px solid #e3e6ee; 
  border-radius: 10px; 
  outline:none;
}

.contact-form input:focus, .contact-form textarea:focus{
  border-color: color-mix(in oklab, #ff5733, black 10%);
  box-shadow: 0 0 0 3px color-mix(in oklab, #ff5733, white 70%);
}

.btn-submit{ 
    font-size: 1rem; 
}

.contact-info{
  background: url('image/contact-bg.jpg') center/cover no-repeat;
  color:#fff; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  padding: 30px; 
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.contact-info .info-content{ 
    background: rgba(0,0,0,.35); 
    border:1px solid rgba(255,255,255,.25); 
    padding: 18px 20px; 
    border-radius: 12px; 
}

.contact-info h2{ 
    color:#fff; 
    margin-bottom:8px; 
}

.contact-info ul{ 
    list-style:none; 
}

.contact-info li{ 
    margin: 8px 0; 
}


/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    width: 100%;
    margin-top: auto; 
    position: relative; 
    bottom: 0;
}