@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --noir:#14110D;
  --ivoire:#F7F3EC;
  --sable:#DCCFB8;
  --chocolat:#4A3222;
  --gris:#C9C6C0;
  --white:#FFFFFF;
  --ink-soft:#5B5449;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--ivoire);
  color:var(--noir);
  font-family:'Manrope', sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

h1,h2,h3,.serif{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}

/* ---- NAV ---- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(247,243,236,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(20,17,13,0.08);
}
header.site-nav .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
}
.logo{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.3rem;
  letter-spacing:0.02em;
}
.logo span{color:var(--chocolat); font-style:italic;}
nav.links{display:flex; gap:36px; font-size:0.92rem;}
nav.links a{
  position:relative;
  padding-bottom:4px;
  transition:color 0.2s ease;
}
nav.links a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--chocolat);
  transition:right 0.25s ease;
}
nav.links a:hover::after, nav.links a.active::after{right:0;}
nav.links a.active{color:var(--chocolat);}
.nav-cta{
  border:1px solid var(--noir);
  padding:10px 20px;
  font-size:0.85rem;
  border-radius:2px;
  transition:background 0.25s ease, color 0.25s ease;
}
.nav-cta:hover{background:var(--noir); color:var(--ivoire);}
.nav-toggle{display:none;}

@media (max-width:860px){
  nav.links{display:none;}
  .nav-toggle{display:block; font-size:0.85rem; border:1px solid var(--noir); padding:8px 14px;}
}

/* ---- HERO ---- */
.hero{
  padding:110px 0 90px;
  text-align:center;
}
.hero .eyebrow{
  font-size:0.8rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--chocolat);
  margin-bottom:26px;
}
.hero h1{
  font-size:clamp(2.4rem, 5.5vw, 4.2rem);
  line-height:1.12;
  max-width:820px;
  margin:0 auto;
}
.hero h1 em{font-style:italic; color:var(--chocolat);}
.hero p.sub{
  max-width:520px;
  margin:28px auto 0;
  font-size:1.08rem;
  color:var(--ink-soft);
}
.hero-actions{
  margin-top:44px;
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding:15px 30px;
  font-size:0.9rem;
  border-radius:2px;
  transition:all 0.25s ease;
}
.btn-primary{background:var(--noir); color:var(--ivoire);}
.btn-primary:hover{background:var(--chocolat);}
.btn-secondary{border:1px solid var(--noir); color:var(--noir);}
.btn-secondary:hover{background:var(--noir); color:var(--ivoire);}

/* satin ribbon visual */
.ribbon-frame{
  margin:70px auto 0;
  max-width:900px;
  height:280px;
  position:relative;
  border-radius:4px;
  overflow:hidden;
  background:linear-gradient(135deg, #EFE7D8 0%, #E3D6C0 40%, #D9C9AE 100%);
}
.ribbon-frame .fold{
  position:absolute;
  border-radius:50%;
  filter:blur(0px);
}
.ribbon-frame .fold.f1{
  width:520px; height:520px; left:-140px; top:-220px;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.55), rgba(74,50,34,0.12) 60%, transparent 70%);
}
.ribbon-frame .fold.f2{
  width:420px; height:420px; right:-120px; bottom:-200px;
  background:radial-gradient(circle at 60% 60%, rgba(255,255,255,0.4), rgba(20,17,13,0.15) 55%, transparent 70%);
}
.ribbon-frame .stitch{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:70%;
  border-top:1px dashed rgba(20,17,13,0.35);
}
.ribbon-caption{
  position:absolute; bottom:20px; left:28px;
  font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--chocolat);
}

/* ---- SECTIONS ---- */
section{padding:90px 0;}
section.on-white{background:var(--white);}
section.on-dark{background:var(--noir); color:var(--ivoire);}
.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head .eyebrow{
  font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--chocolat); margin-bottom:16px; display:block;
}
.section-head h2{font-size:clamp(1.7rem,3.5vw,2.4rem);}
.section-head p{margin-top:16px; color:var(--ink-soft); font-size:1rem;}
section.on-dark .section-head p{color:var(--gris);}

/* value grid */
.value-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(20,17,13,0.08);
  border:1px solid rgba(20,17,13,0.08);
}
.value-card{background:var(--white); padding:36px 26px; text-align:center;}
.value-card .mark{
  font-family:'Fraunces', serif; font-style:italic;
  font-size:1.1rem; color:var(--chocolat); margin-bottom:14px; display:block;
}
.value-card p{font-size:0.92rem; color:var(--ink-soft);}

@media (max-width:900px){.value-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.value-grid{grid-template-columns:1fr;}}

/* product grid */
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
.product-card{
  background:var(--white);
  border-radius:4px;
  overflow:hidden;
  border:1px solid rgba(20,17,13,0.08);
}
.product-visual{
  height:260px;
  position:relative;
}
.product-visual.noir-bg{background:linear-gradient(160deg,#221E19,#0E0C09);}
.product-visual.marron-bg{background:linear-gradient(160deg,#5C3E29,#3A2517);}
.product-visual.blanc-bg{background:linear-gradient(160deg,#F5EFE3,#E6DAC5);}
.product-visual::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 55%);
}
.product-info{padding:24px 26px;}
.product-info h3{font-size:1.15rem; margin-bottom:6px;}
.product-info .ref{font-size:0.78rem; color:var(--ink-soft); letter-spacing:0.04em;}
.product-info p{margin-top:12px; font-size:0.92rem; color:var(--ink-soft);}

@media (max-width:900px){.product-grid{grid-template-columns:1fr;}}

/* benefits row */
.benefit-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:56px;
}
.benefit-item{text-align:center;}
.benefit-item .num{
  font-family:'Fraunces', serif; font-style:italic;
  color:var(--chocolat); font-size:1.4rem; margin-bottom:10px; display:block;
}
.benefit-item h4{font-size:1.05rem; margin-bottom:8px;}
.benefit-item p{font-size:0.9rem; color:var(--ink-soft);}

@media (max-width:760px){.benefit-row{grid-template-columns:1fr;}}

/* wholesale spec / roadmap */
.spec-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(247,243,236,0.15);
  border:1px solid rgba(247,243,236,0.15);
  margin-top:20px;
}
section.on-dark .spec-grid{background:rgba(247,243,236,0.12); border-color:rgba(247,243,236,0.12);}
.spec-item{padding:30px 26px;}
section.on-white .spec-item{background:var(--white);}
section.on-dark .spec-item{background:var(--noir);}
.spec-item .k{font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--sable); display:block; margin-bottom:10px;}
section.on-white .spec-item .k{color:var(--chocolat);}
.spec-item .v{font-family:'Fraunces', serif; font-size:1.3rem;}

@media (max-width:760px){.spec-grid{grid-template-columns:1fr;}}

.roadmap-list{max-width:720px; margin:0 auto;}
.roadmap-item{
  display:grid; grid-template-columns:90px 1fr; gap:24px;
  padding:26px 0; border-bottom:1px solid rgba(20,17,13,0.1);
}
section.on-dark .roadmap-item{border-color:rgba(247,243,236,0.15);}
.roadmap-item:first-child{border-top:1px solid rgba(20,17,13,0.1);}
section.on-dark .roadmap-item:first-child{border-color:rgba(247,243,236,0.15);}
.roadmap-item .stage{font-size:0.8rem; color:var(--chocolat); padding-top:4px;}
section.on-dark .roadmap-item .stage{color:var(--sable);}
.roadmap-item h4{font-size:1.05rem; margin-bottom:6px;}
.roadmap-item p{font-size:0.9rem; color:var(--ink-soft);}
section.on-dark .roadmap-item p{color:var(--gris);}

/* form */
.form-card{
  max-width:640px; margin:0 auto;
  background:var(--white);
  border:1px solid rgba(20,17,13,0.08);
  border-radius:4px;
  padding:44px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.form-row.full{grid-template-columns:1fr;}
.field label{
  display:block; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px;
  border:1px solid rgba(20,17,13,0.18);
  background:var(--ivoire);
  border-radius:2px;
  font-family:'Manrope', sans-serif;
  font-size:0.95rem;
  color:var(--noir);
}
.field textarea{resize:vertical; min-height:110px;}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--chocolat); outline-offset:1px;
}
.submit-btn{
  width:100%;
  background:var(--noir); color:var(--ivoire);
  padding:16px; border:none; border-radius:2px;
  font-family:'Manrope', sans-serif; font-size:0.95rem;
  cursor:pointer; transition:background 0.25s ease;
}
.submit-btn:hover{background:var(--chocolat);}
.form-note{
  margin-top:18px; font-size:0.82rem; color:var(--ink-soft); text-align:center;
}

/* FAQ accordion */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid rgba(20,17,13,0.1);}
.faq-item summary{
  cursor:pointer;
  padding:22px 4px;
  font-family:'Fraunces', serif;
  font-size:1.1rem;
  list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+';
  font-size:1.3rem; color:var(--chocolat);
  transition:transform 0.2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-a{padding:0 4px 22px; font-size:0.95rem; color:var(--ink-soft); max-width:640px;}

/* contact info */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
  max-width:960px; margin:0 auto;
}
.contact-info h3{font-size:1.2rem; margin-bottom:18px;}
.contact-info .line{margin-bottom:14px; font-size:0.95rem; color:var(--ink-soft);}
.contact-info .line strong{color:var(--noir); display:block; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:4px;}

@media (max-width:820px){.contact-grid{grid-template-columns:1fr;}}

/* footer */
footer.site-footer{
  background:var(--noir); color:var(--ivoire);
  padding:64px 0 30px;
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;
  padding-bottom:44px; border-bottom:1px solid rgba(247,243,236,0.15);
}
.footer-grid h4{font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--sable); margin-bottom:16px;}
.footer-grid .foot-logo{font-family:'Fraunces', serif; font-size:1.3rem; margin-bottom:14px;}
.footer-grid p{font-size:0.9rem; color:var(--gris); max-width:320px;}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:10px; font-size:0.9rem;}
.footer-grid a:hover{color:var(--sable);}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:24px; font-size:0.75rem; color:rgba(247,243,236,0.5);
}

@media (max-width:760px){.footer-grid{grid-template-columns:1fr;}}

.center{text-align:center;}

:focus-visible{outline:2px solid var(--chocolat); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}