:root{
  --bg:#0f111a;
  --card:#181d2e;
  --card2:#1f263d;
  --accent:#5ac8fa;
  --accent2:#8e7cf5;
  --white:#f5f7fa;
  --muted:#b9c1cc;
  --border:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --max:1200px;
}

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

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--white);
  font-family:
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          "Helvetica Neue",
          Arial,
          sans-serif;

  line-height:1.7;
}

a{
  color:inherit;
  text-decoration:none;
}

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

.container{
  width:100%;
  max-width:var(--max);
  margin:auto;
  padding:0 20px;
}

/* 顶部 */

header{
  position:sticky;
  top:0;
  z-index:50;

  backdrop-filter: blur(10px);

  background:rgba(15,17,26,.82);
  border-bottom:1px solid rgba(255,255,255,.05);
}

.header-inner{
  height:72px;

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

.logo{
  display:flex;
  align-items:center;
  gap:12px;

  font-size:1.2rem;
  font-weight:700;
  color:var(--accent);
}

.logo-icon{
  width:40px;
  height:40px;
  border-radius:12px;

  background:
          linear-gradient(135deg,var(--accent2),var(--accent));

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:800;
  color:#fff;

  box-shadow:0 8px 20px rgba(90,200,250,.35);
}

nav{
  display:flex;
  gap:18px;
}

nav a{
  color:var(--muted);
  font-size:.95rem;
  transition:.2s;
}

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

/* Hero */

.hero{
  padding:70px 0 40px;
}

.hero-box{
  background:
          linear-gradient(
                  180deg,
                  rgba(142,124,245,.12),
                  rgba(90,200,250,.06)
          );

  border:1px solid rgba(255,255,255,.06);

  border-radius:28px;

  padding:70px 40px;

  position:relative;

  overflow:hidden;
}

.hero-box::before{
  content:"";

  position:absolute;
  right:-120px;
  top:-120px;

  width:320px;
  height:320px;

  border-radius:50%;

  background:
          radial-gradient(
                  circle,
                  rgba(90,200,250,.18),
                  transparent 70%
          );
}

.hero h1{
  font-size:clamp(2rem,4vw,4rem);
  line-height:1.15;
  margin-bottom:20px;

  position:relative;
  z-index:2;
}

.hero p{
  max-width:760px;

  color:var(--muted);

  font-size:1.05rem;

  position:relative;
  z-index:2;
}

.hero-actions{
  margin-top:32px;

  display:flex;
  gap:16px;
  flex-wrap:wrap;

  position:relative;
  z-index:2;
}

.btn{
  border:none;
  cursor:pointer;

  border-radius:14px;

  padding:14px 26px;

  font-size:1rem;
  font-weight:700;

  transition:.2s;
}

.btn-primary{
  background:
          linear-gradient(
                  135deg,
                  var(--accent2),
                  var(--accent)
          );

  color:#fff;

  box-shadow:
          0 10px 30px rgba(90,200,250,.25);
}

.btn-primary:hover{
  transform:translateY(-2px);
}

.btn-secondary{
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
}

.btn-secondary:hover{
  background:rgba(255,255,255,.09);
}

/* 卡片 */

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;

  margin-top:40px;
}

.card{
  background:var(--card);

  border-radius:22px;

  border:1px solid var(--border);

  padding:30px;

  transition:.25s;

  box-shadow:var(--shadow);
}

.card:hover{
  transform:translateY(-6px);
}

.card-icon{
  width:58px;
  height:58px;

  border-radius:16px;

  background:
          linear-gradient(
                  135deg,
                  rgba(142,124,245,.22),
                  rgba(90,200,250,.18)
          );

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1.5rem;

  margin-bottom:18px;
}

.card h3{
  margin-bottom:10px;
  color:var(--accent);
}

.card p{
  color:var(--muted);
  font-size:.95rem;
}

/* 合同 */

.contract-wrap{
  margin-top:70px;
}

.section-title{
  text-align:center;
  margin-bottom:30px;
}

.section-title h2{
  font-size:2rem;
  margin-bottom:10px;
}

.section-title p{
  color:var(--muted);
}

.contract{
  background:var(--card);

  border-radius:24px;

  padding:40px;

  border:1px solid rgba(255,255,255,.06);

  box-shadow:var(--shadow);
}

.contract h3{
  text-align:center;
  margin-bottom:30px;
  font-size:2rem;
}

.party{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:30px;
}

.field label{
  display:block;
  margin-bottom:10px;
  color:var(--muted);
}

.field div{
  background:#121624;

  border:1px solid rgba(255,255,255,.08);

  border-radius:14px;

  min-height:52px;

  padding:14px 16px;

  outline:none;

  font-size:1rem;
}

.field div:focus{
  border-color:var(--accent);
}

.contract-content{
  margin-top:20px;
}

.contract-content p{
  margin-bottom:18px;
  color:#d7dde6;
}

/* 签字 */

.sign-area{
  margin-top:50px;

  display:grid;
  grid-template-columns:1fr;
  gap:30px;
}

.sign-box{
  background:var(--card2);

  border-radius:20px;

  padding:24px;

  border:1px solid rgba(255,255,255,.06);
}

.sign-box h4{
  margin-bottom:16px;
  color:var(--accent);
}

.sign-canvas{
  width:100%;
  height:220px;

  border-radius:14px;

  background:#fff;

  touch-action:none;
}

.sign-tools{
  margin-top:14px;

  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.tool-btn{
  border:none;

  padding:10px 18px;

  border-radius:10px;

  cursor:pointer;

  background:rgba(255,255,255,.08);
  color:#fff;
}

.tool-btn:hover{
  background:rgba(255,255,255,.12);
}

/* 下载 */

.download{
  margin-top:40px;
  text-align:center;
}

.download button{
  min-width:260px;
}

/* footer */

footer{
  margin-top:90px;

  padding:40px 20px 70px;

  text-align:center;

  color:var(--muted);

  border-top:1px solid rgba(255,255,255,.05);
}

/* ---------- footer 链接样式 ---------- */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  font-size: 0.82rem;
  color: var(--muted);
}

.footer-nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover,
.footer-nav a:focus {
  color: var(--accent2);
  outline: none;
}

/* mobile */

@media (max-width:980px){

  .grid{
    grid-template-columns:1fr;
  }

  .party{
    grid-template-columns:1fr;
  }

  .sign-area{
    grid-template-columns:1fr;
  }

}

@media (max-width:768px){

  .hero-box{
    padding:45px 24px;
  }

  .contract{
    padding:26px 18px;
  }

  .hero h1{
    font-size:2rem;
  }

  nav{
    display:none;
  }

  .header-inner{
    height:64px;
  }

  .sign-canvas{
    height:180px;
  }
  /* 新增：手机端缩小签名盒子左右padding，横向更宽 */
  .sign-box{
    padding:24px 0px;
  }
}


@media(max-width:479px){
  .footer-nav {
    gap: 4px;
    font-size: 0.78rem;
  }
}

/* 可编辑状态 */
.contract-content span[contenteditable="true"] {
  display: inline-block;
  min-width: 50px;
  padding: 2px 6px;
  border-bottom: 1px dashed rgba(90,200,250,.6);
  color: #5ac8fa;
  outline: none;
  border-radius: 4px;
  transition: .2s;
}

/* 编辑时高亮 */
.contract-content span[contenteditable="true"]:focus {
  background: rgba(90,200,250,.08);
  border-bottom: 1px solid #5ac8fa;
}

/* hover 提示 */
.contract-content span[contenteditable="true"]:hover {
  background: rgba(255,255,255,.04);
}

/* ❌ 不可编辑状态 */
.contract-content span[contenteditable="false"] {
  display: inline-block;
  min-width: 50px;
  padding: 2px 6px;
  border-bottom: 1px solid #5ac8fa;
  color: #5ac8fa;
  outline: none;
  border-radius: 4px;
  transition: .2s;
}

.sign-date{
  margin-top:14px;
  color:rgba(255,255,255,.7);
  font-size:.95rem;
}

.sign-date span{
  display:inline-block;
  min-width:140px;
  padding:2px 6px;

  border-bottom:1px solid rgba(90,200,250,.6);

  color:#5ac8fa;

  outline:none;
}