/* style_form.css minimal inline fallback (in case external file is not used) */
:root{
  --maxw:1100px;
  --accent:#0a0a0a;
  --muted:#6b6b6b;
  --card-bg:#fff;
  --radius:12px;
  --gap:18px;
  --fw-700:700;
  --line:1px solid #e6e6e6;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--accent);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#f5f5f7}
.container{max-width:var(--maxw);margin:0 auto;padding:20px}

a{
    text-decoration: none;
}

/* HEADER */
.header{
  position:fixed; top:0; left:0; right:0; height:72px; background:#fff; border-bottom:var(--line);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
.header-inner{width:100%;max-width:var(--maxw);display:flex;align-items:center;justify-content:center;padding:0 20px}
.header-logo{height:46px; object-fit:contain}
.header-drawer-btn{position:absolute; right:20px; top:18px; border:none;background:transparent;font-size:22px;cursor:pointer}

/* DRAWER */
.drawer{position:fixed;right:-320px;top:0;height:100vh;width:320px;background:rgba(255,255,255,0.98);backdrop-filter:blur(8px);box-shadow:-12px 0 30px rgba(0,0,0,0.06);transition:right .32s;z-index:1200;padding:24px}
.drawer.open{right:0}
.drawer .close{position:absolute;right:12px;top:12px;border:none;background:none;font-size:22px;cursor:pointer}
.drawer a{display:block;padding:14px 6px;border-bottom:var(--line);color:var(--accent);text-decoration:none;font-weight:600}

/* HERO BANNER 4:3 */
.hero{margin-top:72px}
.hero .hero-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:var(--line)}

/* FORM LAYOUT */
.form-wrap{max-width:900px;margin:28px auto 80px;padding:0 18px}
.progress-wrap{margin-bottom:16px}
.progress-bar{width:100%;height:8px;background:#f0f0f0;border-radius:8px;overflow:hidden}
.progress-fill{height:100%;width:0%;background:var(--accent);transition:width .28s}

/* step labels */
.step-labels{display:flex;justify-content:space-between;margin:10px 0 22px;color:var(--muted);font-size:14px}

/* step card */
.step-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:0 6px 24px rgba(15,15,15,0.04);padding:22px;display:none}
.step-card.active{display:block;animation:fadeIn .36s ease}

/* basic fields */
label{display:block;margin-top:12px;font-weight:600}
input[type="text"],input[type="email"],input[type="date"],input[type="number"],select,textarea,input[type="file"]{
  width:100%;padding:10px;border:1px solid #e7e7e7;border-radius:8px;font-size:15px;margin-top:6px;
}
textarea{min-height:100px;resize:vertical;padding:10px}

/* checkbox rows */
.checkbox-item{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:15px}

/* accordion */
.accordion-title{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:var(--line);cursor:pointer}
.accordion-title .arrow{transition:transform .25s}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .32s ease;padding-top:0}
.accordion-panel.open{padding-top:12px}

/* buttons */
.btn-row{display:flex;gap:12px;margin-top:22px}
.btn{padding:12px 20px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}
.btn.secondary{background:#fff;border:1px solid #ccc;color:var(--accent)}
.btn[disabled]{background:#d0d0d0;cursor:not-allowed;color:#888}

/* footer */
.benefits{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;align-items:center}
.benefit{display:flex;flex-direction:column;align-items:center;width:150px;padding:12px;gap:8px}
.benefit svg{width:36px;height:36px;stroke:var(--accent);fill:none}
.benefit p{font-size:13px;color:var(--muted);text-align:center;margin:0}

/* small responsive */
@media(max-width:720px){
  .benefit{width:45%}
  .drawer{width:85vw}
  .header-drawer-btn{right:12px}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.benefit-icon{
  width:48px;
  height:auto;
  object-fit:contain;
}


/* FOOTER */
.footer {
    background: #0e0e12;
    color: #fff;
    padding: 40px 20px;
}

.footer-container {
    margin-left: 90px;
    display: grid;
    gap: 30px;
}

@media (min-width: 768px) {
    .footer-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 白底圆角社交图标 */
.social-icons.white-style {
    display: flex;
    gap: 14px;
}

.social-icons.white-style a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* hover 动效：轻浮起 + 更明显阴影 */
.social-icons.white-style a:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* 点击反馈 */
.social-icons.white-style a:active {
    transform: scale(0.96);
}

.footer-block h3 {
    margin-bottom: 10px;
}

.footer-block a {
    color:#fff;
}

/* 底部 LOGO */
.footer hr {
    border: 0;
    border-top: 1px solid rgb(117, 114, 114);
    margin: 50px 20px 25px 50px;
}

.footer-logo {
  text-align: center;
  margin: 100px;
}

.footer-logo img {
  height: 40px;
}




.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 2000;
    transition: background 0.4s ease;
    display: flex;
    justify-content: center; /* 让 Logo 置中 */
    align-items: center;
    background: #fff;
    color: #fff;
}

/* LOGO 居中 */
.logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.logo-img {
    height: 48px;
    object-fit: contain;
}

/* 菜单按钮定位在右上，适当向左缩 */
.menu-btn {
    position: absolute;
    right: 50px;   /* 从贴边变为 18px，更舒适 */
    top: 50%;
    transform: translateY(-50%);

    font-size: 28px;
    border: none;
    background: none;
    color: #1e218c;
    cursor: pointer;
}

/* 抽屉栏 */
.drawer {
    position: fixed;
    top: 0;
    right: -60%;      /* 更窄：60% 宽度 */
    width: 60%;
    max-width: 360px; /* 大屏限制最大宽度 */
    height: 100vh;

    backdrop-filter: blur(20px); /* 毛玻璃来了 */
    background: rgba(255,255,255,0.85);
    box-shadow: -8px 0 20px rgba(0,0,0,0.15);

    transition: right 0.35s ease;
    z-index: 3000;
}
/* 抽屉背景毛玻璃罩层 */
.overlay {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(12px);
    background: rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 2500; /* 在 header 下，drawer 下 */
}

.overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.drawer.open {
    right: 0;
}

/* 抽屉顶部栏：关闭按钮 */
.drawer-header {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
}

.drawer-close {
    font-size: 32px;
    border: none;
    background: none;
    cursor: pointer;
    color: #333;
}

/* 抽屉内容 */
.drawer-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.drawer-content a {
    color: #0e0e12;
    padding: 18px 0;
    font-size: 18px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}


 /*IFA展會内容頁面*/
 /* 外部容器 */
.designa, .designb {
    position: relative;
    padding: 30px;
    height: 100vh;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateX(-150px) scale(0.9);
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .designa.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  /* 图片样式 */
  .designimg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片自适应容器 */
    display: block;
  }
  
  /* 文字容器 */
  .textbox {
    position: absolute;
    width: 94%; /* 宽度与图片一致 */
    padding: 20px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.25); /* 半透明黑色背景 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    color: white; /* 文字颜色 */
    box-sizing: border-box; /* 包括内边距 */
  }
  
  /* 标题样式 */
  .designtext {
    text-transform: uppercase;
    font-size: clamp(1.5rem, 2vw, 3rem);
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  /* 描述文字样式 */
  .designtext2 {
    font-size: clamp(1rem, 1.5vw, 2.4rem);
    line-height: 1.5;
  }
  
  .more {
    margin-top: 15px;
    text-align:center;
    padding: 10px 20px;
    font-size: 18px;
    color:#000000;
    background-color: #ffc845;
    cursor: pointer;
    width:200px;
    position: relative;
}

.more:hover {
    background-color: #ffe098;
}
  /* 横屏时文字放右侧 */
  @media (orientation: landscape) {
    .designa {
      height:70vh;
    }
    .textbox {
      position: absolute;
      top: 10%;
      bottom: 10%;
      left: 5%;
      width: 35%; /* 文字容器占图片宽度的40% */
      padding: 20px;
      text-align: left;
      background: rgba(0, 0, 0, 0.25); /* 背景保持不变 */
      backdrop-filter: blur(10px); /* 保持背景模糊 */
    }
  
  /* 标题样式 */
  .designtext {
    font-size: clamp(1.2rem, 1.6vw, 2.5rem);
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  /* 描述文字样式 */
  .designtext2 {
    font-size: clamp(1rem, 1.5vw, 2.4rem);
    line-height: 1.5;
  }
  
  }

  .headback {
    position: relative;
    text-align: center; /* 默认文字居中 */
    width:auto;
    height: 100vh; /* 使图片自适应宽度，保持比例 */
}


.backp {
    height:100%;
    width:100%;
    object-fit: cover; /* 保持图片比例，覆盖整个容器 */
}

.welcome {
  white-space: nowrap;
  position: absolute;
}

.welcome p {
  width: 95%;
  color: white; /* 文字颜色 */
  font-size: 18px; /* 文字大小，基于视口宽度 */
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加文字阴影，提升可读性 */
}