/**
 * 组件样式
 */

/* components.css */
.header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:var(--header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);z-index:var(--z-fixed);transition:box-shadow var(--transition-base)}
.header--scrolled{box-shadow:var(--shadow-md)}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xl);font-weight:700}
.logo__icon{width:40px;height:40px;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.nav{display:flex;align-items:center;gap:var(--space-8)}
.nav__link{font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);transition:color var(--transition-fast);position:relative}
.nav__link:hover,.nav__link--active{color:var(--color-primary)}
.nav__link--active::after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--color-primary);border-radius:var(--radius-full)}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:var(--space-2)}
.nav__toggle span{display:block;width:24px;height:2px;background:var(--color-text);transition:transform var(--transition-base),opacity var(--transition-base)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--primary:hover{background:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--outline{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary)}
.btn--outline:hover{background:var(--color-primary);color:#fff}
.btn--ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn--ghost:hover{background:rgba(255,255,255,.2)}
.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base)}
.hero{min-height:100vh;display:flex;align-items:center;padding-top:var(--header-height);background:var(--hero-bg);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(37,99,235,.15) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(6,182,212,.1) 0%,transparent 40%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center;position:relative;z-index:1}
.hero__content{color:#fff}
.hero__badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:rgba(37,99,235,.2);border:1px solid rgba(37,99,235,.4);border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--color-accent);margin-bottom:var(--space-6)}
.hero__title{font-size:clamp(2rem,5vw,var(--text-5xl));line-height:1.2;margin-bottom:var(--space-6)}
.hero__title span{background:linear-gradient(90deg,var(--color-primary-light),var(--color-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero__desc{font-size:var(--text-lg);color:var(--color-text-muted);margin-bottom:var(--space-8);max-width:520px}
.hero__actions{display:flex;gap:var(--space-4);flex-wrap:wrap}
.hero__stats{display:flex;gap:var(--space-8);margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid rgba(255,255,255,.1)}
.hero__stat-value{font-size:var(--text-3xl);font-weight:700;color:#fff}
.hero__stat-label{font-size:var(--text-sm);color:var(--color-text-muted)}
.hero__visual{display:flex;justify-content:center;align-items:center}
.hero__card-stack{position:relative;width:100%;max-width:480px;aspect-ratio:4/3}
.hero__card{position:absolute;background:rgba(255,255,255,.05);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:var(--space-6);color:#fff}
.hero__card:nth-child(1){top:0;left:0;right:20%;z-index:3}
.hero__card:nth-child(2){top:25%;left:15%;right:5%;z-index:2}
.hero__card:nth-child(3){top:50%;left:5%;right:15%;z-index:1}
.hero__card-icon{width:48px;height:48px;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);margin-bottom:var(--space-4)}
.hero__card-title{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2)}
.hero__card-desc{font-size:var(--text-sm);color:var(--color-text-muted)}
.service-card{display:flex;flex-direction:column;height:100%;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);transition:all var(--transition-base);position:relative;overflow:hidden}
.service-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transform:scaleX(0);transition:transform var(--transition-base)}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.service-card:hover::before{transform:scaleX(1)}
.service-card__icon{width:56px;height:56px;background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(6,182,212,.1));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:var(--text-2xl);margin-bottom:var(--space-6)}
.service-card__title{font-size:var(--text-xl);margin-bottom:var(--space-3)}
.service-card__desc{flex:1;color:var(--color-text-secondary);font-size:var(--text-sm);margin-bottom:0;min-height:3.5em}
.service-card__tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tag{display:inline-block;padding:var(--space-1) var(--space-3);background:var(--color-bg-alt);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--color-text-secondary)}
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4);position:relative}
.process::before{content:"";position:absolute;top:28px;left:10%;right:10%;height:2px;background:var(--color-border);z-index:0}
.process__step{text-align:center;position:relative;z-index:1}
.process__number{width:56px;height:56px;background:var(--color-bg);border:2px solid var(--color-primary);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:700;color:var(--color-primary);margin:0 auto var(--space-4)}
.process__title{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-2)}
.process__desc{font-size:var(--text-sm);color:var(--color-text-secondary)}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
.about__features{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-8)}
.about__feature{display:flex;gap:var(--space-4)}
.about__feature-icon{flex-shrink:0;width:40px;height:40px;background:rgba(37,99,235,.1);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-primary);font-size:var(--text-lg)}
.about__feature-title{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-1)}
.about__feature-desc{font-size:var(--text-sm);color:var(--color-text-secondary)}
.about__image{background:linear-gradient(135deg,var(--color-primary),var(--color-accent));border-radius:var(--radius-xl);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--text-4xl);font-weight:800}
.tech-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4)}
.tech-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:#fff;font-size:var(--text-sm);font-weight:500;transition:all var(--transition-fast)}
.tech-item:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.tech-item__icon{font-size:var(--text-xl)}
.case-card{background:var(--color-bg);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);transition:all var(--transition-base)}
.case-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.case-card__image{height:200px;background:linear-gradient(135deg,#1e3a5f,#2563eb);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--text-3xl);font-weight:700}
.case-card__body{padding:var(--space-6)}
.case-card__category{font-size:var(--text-xs);color:var(--color-primary);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2)}
.case-card__title{font-size:var(--text-lg);margin-bottom:var(--space-3)}
.case-card__desc{font-size:var(--text-sm);color:var(--color-text-secondary)}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12)}
.contact__info-item{display:flex;gap:var(--space-4);margin-bottom:var(--space-6)}
.contact__info-icon{flex-shrink:0;width:48px;height:48px;background:rgba(37,99,235,.1);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-primary);font-size:var(--text-xl)}
.contact__info-label{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-1)}
.contact__info-value{font-size:var(--text-base);font-weight:500}
.contact__form{background:var(--color-bg-alt);border-radius:var(--radius-xl);padding:var(--space-8)}
.form-group{margin-bottom:var(--space-6)}
.form-group label{display:block;font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-2)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--input-bg);transition:border-color var(--transition-fast)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--color-primary)}
.form-group textarea{min-height:120px;resize:vertical}
.footer{background:var(--color-bg-dark);color:#fff;padding-block:var(--space-16)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-8);margin-bottom:var(--space-12)}
.footer__brand-desc{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-4);max-width:280px}
.footer__title{font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-4);color:var(--color-text-muted)}
.footer__links li{margin-bottom:var(--space-3)}
.footer__links a{font-size:var(--text-sm);color:var(--color-text-muted);transition:color var(--transition-fast)}
.footer__links a:hover{color:#fff}
.footer__bottom{padding-top:var(--space-8);border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;font-size:var(--text-sm);color:var(--color-text-muted)}
.toast{position:fixed;bottom:var(--space-8);right:var(--space-8);padding:var(--space-4) var(--space-6);background:var(--color-bg-dark);color:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-xl);transform:translateY(100px);opacity:0;transition:all var(--transition-base);z-index:var(--z-modal)}
.toast--show{transform:translateY(0);opacity:1}
.toast--success{background:var(--color-success)}
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.fade-in--visible{opacity:1;transform:translateY(0)}
@media(max-width:768px){
.nav{position:fixed;top:var(--header-height);left:0;right:0;flex-direction:column;background:var(--nav-mobile-bg);padding:var(--space-6);gap:var(--space-4);border-bottom:1px solid var(--color-border);transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform var(--transition-base),opacity var(--transition-base)}
.nav--open{transform:translateY(0);opacity:1;pointer-events:auto}
.nav__toggle{display:flex}
.nav__toggle--active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle--active span:nth-child(2){opacity:0}
.nav__toggle--active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hero__grid{grid-template-columns:1fr;text-align:center}
.hero__desc{margin-inline:auto}
.hero__actions,.hero__stats{justify-content:center}
.hero__card-stack{display:none}
.about__grid,.contact__grid{grid-template-columns:1fr}
.about__features{grid-template-columns:1fr}
.process{grid-template-columns:1fr;gap:var(--space-8)}
.process::before{display:none}
.footer__grid{grid-template-columns:1fr 1fr}
.footer__bottom{flex-direction:column;gap:var(--space-4);text-align:center}
}
@media(max-width:1024px){
.process{grid-template-columns:repeat(3,1fr)}
.process::before{display:none}
}


.icon-wrap {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0.1));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-6);
}

.icon-wrap--sm {
  width: 48px;
  height: 48px;
  margin-bottom: 0;
}

.icon-wrap--hero {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  margin-bottom: var(--space-4);
}

.about__image img,
.case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__image {
  overflow: hidden;
  padding: 0;
}

.case-card__image {
  height: 200px;
  overflow: hidden;
  padding: 0;
}

.case-card__client {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.service-card__footer {
  margin-top: auto;
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service-card__tags {
  min-height: 1.75rem;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.service-card__link:hover {
  color: var(--color-primary-dark);
}

.btn--block { width: 100%; }

.form-group--error input,
.form-group--error textarea,
.form-group--error select {
  border-color: var(--color-error);
}

.form-group__error {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-error);
}

.form-group--error .form-group__error { display: block; }

.form-group--checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.form-group--checkbox input { width: auto; margin-top: 4px; }

.form-group--checkbox label { margin-bottom: 0; font-weight: 400; }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.toast--error { background: var(--color-error); }

.hero__cards-mobile {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero__cards-mobile .hero__card {
  position: static;
  padding: var(--space-4);
}

.hero__cards-mobile .hero__card-title { font-size: var(--text-sm); }
.hero__cards-mobile .hero__card-desc { font-size: var(--text-xs); }

.footer__icp a { color: var(--color-text-muted); }
.footer__icp a:hover { color: #fff; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.breadcrumb a { color: var(--color-primary); }

.feature-list {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-8) 0;
}

.feature-list__item {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

@media (max-width: 768px) {
  .hero__cards-mobile { display: grid; }
}

.footer__bottom--compact { border-top: none; padding-top: 0; }

.grid--4 > .service-card,
.grid--3 > .service-card { height: 100%; }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}


.theme-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 108px;
  padding: 3px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  isolation: isolate;
}

.theme-switch__indicator {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  height: calc(100% - 6px);
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base);
  z-index: 0;
  box-shadow: var(--shadow-sm);
}

.theme-switch__btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.theme-switch__icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.theme-switch__btn:hover {
  color: var(--color-text);
}

.theme-switch__btn--active {
  color: #fff;
}

.theme-switch__btn--active:hover {
  color: #fff;
}

.grid--4 > .service-card,
.grid--3 > .service-card { height: 100%; }

@media (max-width: 768px) {
  .theme-switch {
    width: 96px;
  }

  .theme-switch__btn {
    height: 28px;
  }

  .theme-switch__icon {
    width: 14px;
    height: 14px;
  }
}