static/css/style.css

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

body{
  font-family:'Inter', sans-serif;
  background:#e9e6e4;
  min-height:100vh;
}

/* PAGE */
.page{
  width:100%;
  min-height:100vh;
  background:#f7f5f4;
  position:relative;
  overflow:hidden;
}

.page::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(128,0,0,.05), transparent 70px),
    radial-gradient(circle at 75% 18%, rgba(128,0,0,.04), transparent 60px),
    radial-gradient(circle at 55% 60%, rgba(128,0,0,.03), transparent 80px);
}

/* HEADER */
.header{
  padding:14px 40px 12px; /* ↓ réduit */
  position:relative;
  z-index:10;
  max-width: 1400px;
  margin: 0 auto;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* LOGO */
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px; /* ↓ réduit */
  font-weight:700;
  color:#111;
}

.logo-icon{
  width:16px;
  height:16px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, #c25b5b 0 20%, transparent 20%),
    radial-gradient(circle at 70% 70%, #800000 0 20%, transparent 20%),
    radial-gradient(circle at 40% 75%, #a30000 0 18%, transparent 18%),
    radial-gradient(circle at 70% 30%, #8b0000 0 18%, transparent 18%);
  box-shadow:0 0 0 3px #800000 inset;
}

/* MENU */
.menu{
  display:flex;
  gap:28px; /* ↓ réduit */
}

.menu a{
  text-decoration:none;
  color:#222;
  font-size:13px; /* ↓ réduit */
  font-weight:500;
}

/* BUTTON */
.login-btn{
  border:1px solid #d6d2cf;
  background:#f8f7f6;
  padding:8px 14px; /* ↓ réduit */
  border-radius:10px;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
  color:#111;
}

/* DIVIDER */
.divider{
  height:1px;
  background:#ded9d5;
  margin-top:10px;
  width: 100%;
}

/* HERO */
.hero{
  text-align:center;
  padding: 60px 20px; /* ↓ réduit */
  position:relative;
  z-index:5;
  max-width: 850px;
  margin: 0 auto;
}

.tag{
  display:inline-flex;
  padding:6px 12px; /* ↓ réduit */
  border-radius:10px;
  border:1px solid #e4e1de;
  background:#fbfbfb;
  font-size:12px;
  margin-bottom:18px;
}

/* TITRE HERO ↓ IMPORTANT */
.hero h1{
  font-size:clamp(32px, 6vw, 58px); /* ↓ réduit */
  line-height:1.05;
  font-weight:800;
  letter-spacing:-1px;
  color:#171414;
}

/* SUBTITLE */
.subtitle{
  width:100%;
  max-width:580px; /* ↓ réduit */
  margin:18px auto 0;
  color:#67625f;
  line-height:1.6;
  font-size:15px; /* ↓ réduit */
}

/* ACTIONS */
.actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:28px;
}

/* BUTTONS */
.primary{
  background:#800000;
  color:white;
  border:none;
  border-radius:10px;
  padding:14px 26px; /* ↓ réduit */
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}

.secondary{
  background:#f8f7f6;
  border:1px solid #dfdbd8;
  border-radius:10px;
  padding:14px 24px; /* ↓ réduit */
  font-size:15px;
  cursor:pointer;
}

/* SHAPES */
.shape-left,
.shape-right{
  position:absolute;
  width:55vw;
  height:55vw;
  max-width: 700px;
  max-height: 700px;
  border-radius:50%;
  border:1px solid rgba(128,0,0,0.2);
  top:10%;
  background:#f4ece7;
  z-index: 1;
}

.shape-left{
  left:-18%;
}

.shape-right{
  right:-18%;
}

/* CENTER ART */
.center-art{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:360px; /* ↓ réduit */
  height:360px;
  opacity:.10;
  pointer-events: none;
}

.ring{
  position:absolute;
  border:1px solid #d6c8bf;
  border-radius:50%;
}

.r1{
  width:260px;
  height:260px;
  left:50px;
  top:40px;
}

.r2{
  width:180px;
  height:180px;
  left:90px;
  top:80px;
}

.node{
  position:absolute;
  width:18px; /* ↓ réduit */
  height:18px;
  background:#800000;
  border-radius:5px;
}

/* nodes */
.n1{ top:55px; left:160px; }
.n2{ top:140px; left:45px; }
.n3{ top:190px; right:25px; }
.n4{ bottom:50px; left:150px; }

/* TRUST */
.trusted{
  padding: 40px 0; /* ↓ réduit */
  text-align:center;
  width: 100%;
  position: relative;
  z-index: 10;
}

.trusted p{
  color:#5f5a57;
  margin-bottom:20px;
  font-size:13px;
}

/* BRANDS */
.brands{
  display:flex;
  gap:40px;
  justify-content: center;
  align-items:center;
  flex-wrap: wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px; /* ↓ réduit */
  font-weight:700;
  color:#1d1d1d;
}

.brand-icon{
  width:20px;
  height:20px;
  border:3px solid #1d1d1d;
  border-radius:50%;
  position:relative;
}

.brand-icon::after{
  content:"";
  position:absolute;
  width:12px;
  height:3px;
  background:#1d1d1d;
  left:-5px;
  top:5px;
  border-radius:20px;
}

.square{
  border-radius:8px;
}

.rotate{
  transform:rotate(35deg);
}

.triangle{
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:18px solid #1d1d1d;
  position:relative;
}

.triangle::after{
  content:"";
  position:absolute;
  left:-4px;
  top:6px;
  width:7px;
  height:7px;
  background:#f7f5f4;
  transform:rotate(45deg);
}