:root{
  --bg-main:#f4efe9;
  --bg-section:#e6ddd3;
  --bg-dark:#2b2622;

  --text-dark:#1f1b17;
  --text-light:#6e655d;

  --accent:#b59a6a;
  --border:#d6ccc2;
}

/* BASE */
body{
  margin:0;
  font-family:'Inter', sans-serif;
  background:var(--bg-main);
  color:var(--text-dark);
  line-height:1.6;
}

/* TYPOGRAPHY */
h1,h2,h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  letter-spacing:-0.5px;
}

h1{
  font-size:64px;
  line-height:1.05;
}

h2{
  font-size:40px;
}

h3{
  font-size:22px;
}

p, li{
  color:var(--text-light);
  font-size:15px;
}

/* ACCENT TEXT */
.accent{
  font-style:italic;
  color:var(--accent);
}

/* SMALL LABEL (fig.01 style) */
.label{
  font-size:12px;
  color:var(--text-light);
  margin-bottom:10px;
  display:block;
  letter-spacing:1px;
}

/* HEADER */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 60px;
}

.logo{
  font-size:13px;
  letter-spacing:1px;
  font-weight:500;
}

nav a{
  margin-left:28px;
  text-decoration:none;
  color:var(--text-light);
  font-size:13px;
  transition:0.2s;
}

nav a:hover{
  color:var(--text-dark);
}

/* LAYOUT SECTIONS */
.section{
  padding:100px 60px;
}

.alt{
  background:var(--bg-section);
}

.dark{
  background:var(--bg-dark);
  color:#fff;
  padding:100px 60px;
}

.dark p{
  color:#cfc6bc;
}

/* HERO */
.hero{
  padding:120px 60px;
}

.hero h1{
  font-size:72px;
}

.hero p{
  max-width:420px;
}

/* SPLIT LAYOUT */
.split{
  display:flex;
  gap:60px;
  justify-content:space-between;
  align-items:flex-start;
}

.hero-left{
  flex:2;
}

.hero-right{
  flex:1;
  align-self:center;
}

/* CENTER ALIGN */
.center{
  text-align:center;
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:30px;
  margin-top:40px;
}

/* GENERIC CARD */
.card{
  border:1px solid var(--border);
  padding:20px;
  background:rgba(255,255,255,0.3);
}

/* 🔥 SYSTEMS CARDS (NEW) */
.systems-grid{
  margin-top:60px;
}

.system-card{
  border:1px solid var(--border);
  padding:30px;
  background:rgba(255,255,255,0.4);
  transition:all 0.3s ease;
}

.system-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
}

.system-card h3{
  margin-bottom:10px;
}

.system-card p{
  font-size:14px;
}

/* BUTTON */
.btn{
  display:inline-block;
  margin-top:20px;
  padding:14px 26px;
  border:1px solid var(--accent);
  border-radius:30px;
  text-decoration:none;
  color:var(--text-dark);
  font-size:13px;
  transition:all 0.25s ease;
}

.btn:hover{
  background:var(--accent);
  color:#fff;
}

/* FORM */
.container{
  max-width:800px;
  margin:auto;
  padding:100px 20px;
}

form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

input, select, textarea{
  padding:14px;
  border:1px solid var(--border);
  font-family:inherit;
  font-size:14px;
  background:#fff;
}

textarea{
  min-height:120px;
}

/* IMAGES */
img{
  max-width:100%;
  display:block;
}