:root{
  --brand-green:#8EC5FF;
  --brand-blue:#0F5BD6;
  --brand-ink:#0B1730;
  --grad-primary: linear-gradient(135deg, #0F5BD6 0%, #3C7BE6 100%);
  --grad-reverse: linear-gradient(135deg, #0B3E9B 0%, #5EA3FF 100%);
  --grad-warm: linear-gradient(135deg, #7DB7FF 0%, #B5D6FF 100%);
}
html{ background:#F4F9FF; }
body{
  font-family:'Poppins', sans-serif;
  color:#0B1730;
  background:#F4F9FF;
}
h1,h2,h3,.font-display{ font-family:'Poppins', sans-serif; }
.font-mono-num{ font-family:'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

.grad-text{
  background-image: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-text-warm{
  background-image: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-hero{
  min-height: 92vh;
  background:
    linear-gradient(90deg, rgba(10,62,182,.96) 0%, rgba(10,62,182,.96) 42%, rgba(35,123,255,.98) 42%, rgba(35,123,255,.98) 100%);
  color:#fff;
}
.brand-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:8px;
  background:linear-gradient(90deg, #0F5BD6 0 50%, #7DB7FF 50% 100%);
}
.hero-kicker{ color:rgba(255,255,255,.74); }
.brand-title{ color:#fff; text-shadow:0 18px 45px rgba(3,24,54,.20); }
.hero-copy{ color:rgba(255,255,255,.78); }
.hero-flow .flow-node span{ color:rgba(255,255,255,.78); }
.hero-flow .flow-line{ background:rgba(255,255,255,.50); }
.hero-flow .flow-dot{ box-shadow:0 0 0 3px rgba(255,255,255,.28), 0 0 18px rgba(255,255,255,.75); }
.hero-flow .w-12{ background:rgba(255,255,255,.15) !important; color:#fff !important; border:1px solid rgba(255,255,255,.25); }
.hero-media{
  border-radius:1.5rem;
  box-shadow:0 28px 80px rgba(3,24,54,.32);
}
.image-stage{
  border-radius:1.5rem;
  background:rgba(255,255,255,.16);
  padding:clamp(.7rem, 1.6vw, 1.25rem);
  border:1px solid rgba(255,255,255,.24);
}
.brand-section-green{ background:#3C7BE6; color:#fff; }
.brand-section-blue{ background:#0F5BD6; color:#fff; }
.brand-section-split{
  min-height: 100vh;
  background-image: url('../images/background.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color:#fff;
  display:flex;
  align-items:center;
}
.ecosystem-panel{
  background:rgba(11,23,48,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius:1.5rem;
  padding:3rem 2.5rem;
  display:inline-block;
}
.brand-section-green .text-ink\/60,
.brand-section-blue .text-ink\/60,
.brand-section-split .text-ink\/60{ color:rgba(255,255,255,.74); }
.brand-section-green .text-ink\/70,
.brand-section-blue .text-ink\/70,
.brand-section-split .text-ink\/70{ color:rgba(255,255,255,.78); }
.brand-section-green .text-ink\/85,
.brand-section-blue .text-ink\/85,
.brand-section-split .text-ink\/85{ color:rgba(255,255,255,.88); }
.brand-section-green .grad-text,
.brand-section-blue .grad-text,
.brand-section-split .grad-text{
  background:none;
  color:#fff;
}
.brand-card{
  background:#fff;
  color:#0B1730;
  border-radius:.5rem;
  box-shadow:0 18px 45px rgba(3,24,54,.12);
}
.brand-card .text-ink\/60{ color:rgba(11,23,48,.62); }
.image-band{
  width:100%;
  min-height:clamp(280px, 42vw, 580px);
}

::selection{ background:#0F5BD6; color:#fff; }

@media (max-width:767px){
  .brand-hero{
    background:linear-gradient(180deg, #0F5BD6 0%, #0F5BD6 48%, #3C7BE6 48%, #3C7BE6 100%);
  }
  .brand-section-split{
    background:linear-gradient(180deg, #0F5BD6 0 50%, #3C7BE6 50% 100%);
  }
  .image-stage{ margin-inline:-.25rem; }
}
/* ---- reveal on scroll ---- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: .08s; }
.reveal-delay-2{ transition-delay: .16s; }
.reveal-delay-3{ transition-delay: .24s; }
.reveal-delay-4{ transition-delay: .32s; }

/* ---- image placeholders (临时占位，images/ 文件夹放对应图后自动替换) ---- */
.img-placeholder{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#E8F7F3;
  background-image:
    linear-gradient(135deg, rgba(25,200,125,.34), rgba(40,95,220,.28)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.26) 0px, rgba(255,255,255,0.26) 2px, transparent 2px, transparent 16px);
  border: 1.5px dashed rgba(40,95,220,0.34);
  border-radius: .5rem;
  overflow:hidden;
  background-size: cover;
  background-position: center;
}
.img-placeholder .ph-label{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  color: rgba(11,18,32,0.58);
  text-align:center;
  padding: 1rem;
  font-family:'Poppins',sans-serif;
  font-size: .78rem;
  letter-spacing:.02em;
}
/* 图片加载成功后由 JS 加上此 class：隐藏占位说明、边框变实色透明 */
.img-placeholder.img-loaded{
  border-style: solid;
  border-color: transparent;
  background-color: transparent;
}
.img-placeholder.img-loaded .ph-label{ display:none; }

/* ---- flow connector (signature motif) ---- */
.flow-row{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
@media (min-width:768px){ .flow-row{ flex-direction:row; align-items:center; } }
.flow-node{
  display:flex; flex-direction:column; align-items:center; gap:.65rem;
  text-align:center; flex-shrink:0;
}
.flow-line{
  position:relative;
  background: linear-gradient(90deg, rgba(25,200,125,.78), rgba(40,95,220,.78));
  width: 2px; height: 2.5rem; margin: 0 auto;
}
@media (min-width:768px){
  .flow-line{ width:auto; height:2px; flex:1 1 auto; min-width: 2.5rem; margin:0 1rem; }
}
.flow-dot{
  position:absolute; top:50%; left:50%; width:9px; height:9px; border-radius:50%;
  background:#fff; box-shadow: 0 0 0 3px rgba(40,95,220,.22), 0 0 10px rgba(40,95,220,.65);
  transform: translate(-50%,-50%);
}

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
  .flow-dot{ display:none; }
  .float-anim{ animation:none !important; }
}

.float-anim{ animation: float 6s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }

.dot-marker{ width:.6rem; height:.6rem; border-radius:9999px; border:2px solid currentColor; flex-shrink:0; }

/* ---- logo swap：正式 logo 放入 images/logo.svg 后由 JS 自动替换文字 wordmark ---- */
.logo-fallback{ display:inline-flex; }
.logo-img{ display:none; }

::selection{ background:#0F5BD6; color:#fff; }

@media (max-width:767px){
  .brand-hero{
    background:linear-gradient(180deg, #0F5BD6 0%, #0F5BD6 48%, #3C7BE6 48%, #3C7BE6 100%);
  }
  .brand-section-split{
    background:linear-gradient(180deg, #0F5BD6 0 50%, #3C7BE6 50% 100%);
  }
  .image-stage{ margin-inline:-.25rem; }
}