/* ═══════════════════════════════════════════════════════════════════════════
   BlueRobotAI — Technology Page CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --blue:       #1677ff;
  --blue-hover: #1565e8;
  --dark:       #101419;
  --dark2:      #151b23;
  --text:       #111820;
  --muted:      #667085;
  --border:     #e5e5e5;
  --bg-light:   #f7f9fb;
  --font:       'Inter', sans-serif;
  --px:         clamp(1.5rem, 5.56vw, 5rem);
  --nav-h:      64px;
}

/* ─── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { font-family: var(--font); color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }

/* ─── Shared inner container ──────────────────────────────────────────────── */
.t-inner {
  width: 100%;
  max-width: calc(1280px + 2 * var(--px));
  margin: 0 auto;
  padding-left: var(--px);
  padding-right: var(--px);
}

/* ─── Scroll reveal ───────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ─── Spotlight ───────────────────────────────────────────────────────────── */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle 240px at var(--s-x, 50%) var(--s-y, 50%), rgba(22,119,255,.10), transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 2; }

/* ─── Shimmer button ──────────────────────────────────────────────────────── */
@keyframes shimmer {
  from { transform: translateX(-100%) skewX(-12deg); }
  to   { transform: translateX(250%)  skewX(-12deg); }
}
.shimmer-btn { position: relative; overflow: hidden; }
.shimmer-btn::after {
  content: ''; position: absolute; top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translateX(-100%) skewX(-12deg);
  pointer-events: none;
}
.shimmer-btn:hover::after { animation: shimmer .55s ease forwards; }

/* ─── Eyebrow ──────────────────────────────────────────────────────────────── */
.t-eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: 1.56px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 12px;
}
.t-eyebrow--dim { color: rgba(22,119,255,.85); }

/* ─── Shared section title / sub ──────────────────────────────────────────── */
.t-section-title {
  font-size: clamp(24px, 3vw, 28px); font-weight: 700;
  letter-spacing: 0; line-height: 1.2;
  color: var(--text); margin-bottom: 12px;
}
.t-section-title--light { color: #fff; }
.t-section-sub {
  font-size: 16px; font-weight: 400; line-height: 1.6;
  color: var(--muted); white-space: normal;
}
.t-section-sub--light { color: rgba(255,255,255,.65); }
.t-body-text {
  font-size: 16px; font-weight: 400; line-height: 1.65;
  color: var(--muted); margin-bottom: 24px; white-space: normal;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.t-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 600;
  transition: background .2s, transform .15s;
}
.t-btn:hover { background: var(--blue-hover); transform: translateY(-1px); }
.t-btn--pill {
  border-radius: 100px;
  padding: 14px 28px;
}

/* ─── Section wrappers ────────────────────────────────────────────────────── */
.t-section { padding: 96px 0; overflow: hidden; }
.t-section--white { background: #fff; }
.t-section--light { background: var(--bg-light); }
.t-section--dark  { background: #102431; }

.t-section-hd {
  text-align: center; max-width: 620px; margin: 0 auto 56px;
}
.t-section-hd .t-section-title { margin-bottom: 14px; }

/* ─── Split layout ────────────────────────────────────────────────────────── */
.t-split {
  display: flex; align-items: center; gap: 64px;
}
.t-split--rev { flex-direction: row-reverse; }
.t-split-img { flex: 0 0 auto; }
.t-split-text { flex: 1; min-width: 0; }

.t-img-cover {
  width: 100%;
  max-width: 600px;
  border-radius: 24px;
  object-fit: cover;
}
.t-img--480 { height: 480px; }
.t-img--400 { height: 400px; }

/* ─── HERO ────────────────────────────────────────────────────────────────── */
.t-hero {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 640px; overflow: hidden;
  text-align: center;
}
.t-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-image: url("/uploads/large_technology_hero_7bdb65daf1.webp");
}
.t-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,15,22,.55) 0%, rgba(10,15,22,.30) 50%, rgba(10,15,22,.15) 100%);
}
.t-hero-content {
  position: relative; z-index: 2;
  max-width: 800px;
  padding: 0 var(--px);
  display: flex; flex-direction: column; align-items: center;
}
.t-hero-title {
  font-size: clamp(28px, 4vw, 40px); font-weight: 700;
  letter-spacing: 0; line-height: 1.1;
  color: #fff; margin-bottom: 18px;
}
.t-hero-sub {
  font-size: clamp(15px, 2vw, 18px); font-weight: 400;
  line-height: 1.6; color: rgba(255,255,255,.78);
  max-width: 640px; margin-bottom: 32px;
}
.t-hero-cta { display: flex; gap: 12px; }

/* ─── CORE TECHNOLOGIES ───────────────────────────────────────────────────── */
.t-core-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.t-core-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 24px rgba(0,0,0,.03), 0 8px 12px rgba(0,0,0,.06), 0 2px 2px rgba(0,0,0,.04);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s;
}
.t-core-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 48px rgba(22,119,255,.12), 0 8px 16px rgba(0,0,0,.08);
  border-color: rgba(22,119,255,.3);
}
.t-core-card:hover .t-core-img img { transform: scale(1.04); }
.t-core-img img { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.t-core-grid .t-core-card:nth-child(2) { transition-delay: .08s; }
.t-core-grid .t-core-card:nth-child(3) { transition-delay: .16s; }
.t-core-grid .t-core-card:nth-child(4) { transition-delay: .24s; }
.t-core-img {
  height: 260px; overflow: hidden;
}
.t-core-img img {
  width: 100%; height: 100%; object-fit: cover;
  background: var(--bg-light);
}
.t-core-body {
  padding: 24px;
}
.t-card-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 8px;
}
.t-core-name {
  font-size: clamp(16px, 2vw, 20px); font-weight: 700;
  color: var(--text); margin-bottom: 16px; line-height: 1.3;
}

/* ─── Pills ───────────────────────────────────────────────────────────────── */
.t-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.t-pills--wrap { flex-wrap: wrap; }
.t-pills--gap16 { gap: 10px; }
.t-pill {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px;
  border-radius: 100px; border: 1px solid var(--border);
  background: #fff; color: var(--text);
  font-size: 12px; font-weight: 500; white-space: normal;
}
.t-pill--active {
  background: var(--blue); border-color: var(--blue); color: #fff;
}

/* ─── OPEN INTEGRATION ────────────────────────────────────────────────────── */
.t-proto-block { margin-top: 32px; }
.t-proto-heading {
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 12px;
}

/* ─── FLEXIBLE ARCHITECTURE ───────────────────────────────────────────────── */
.t-flex-grid {
  display: flex; gap: 12px;
  max-width: 600px; height: 440px;
}
.t-flex-big {
  flex: 0 0 auto;
  width: min(300px, 50%); height: 100%;
  object-fit: cover; border-radius: 20px;
  background: var(--bg-light);
}
.t-flex-stack {
  display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.t-flex-sm {
  flex: 1; width: 100%;
  object-fit: cover; border-radius: 20px;
  background: var(--bg-light);
}

/* ─── APPLICATION AREAS ───────────────────────────────────────────────────── */
@keyframes t-img-fade {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}
.t-apps-body {
  display: flex; gap: 56px; align-items: flex-start;
}
.t-apps-img-wrap {
  flex: 1 0 0; min-width: 0; align-self: flex-start;
  height: 480px;   /* 切换层 absolute 定位需要容器高度（否则塌陷图不可见） */
}
.t-apps-img-link {
  display: block; position: relative; overflow: hidden;
  height: 480px;   /* img 切换层为 absolute：链接容器必须定高，否则塌陷图不可见 */
  border-radius: 20px; text-decoration: none;
}
.t-apps-img-link:hover .t-apps-img-badge { opacity: 1; transform: translateY(0); }
.t-apps-img-link:hover img { transform: scale(1.03); }
.t-apps-img-wrap img {
  width: 100%; height: 480px;
  object-fit: cover; border-radius: 20px;
  background: var(--bg-light);
  display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.t-apps-img-wrap img.t-img-switching {
  animation: t-img-fade .45s cubic-bezier(.16,1,.3,1) forwards;
}
.t-apps-img-badge {
  position: absolute; bottom: 16px; right: 16px;
  background: rgba(10,14,22,.72); backdrop-filter: blur(8px);
  color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 100px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.t-apps-list {
  width: 400px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.t-area-item {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-radius: 12px;
  border: 1px solid transparent; background: transparent;
  text-align: left; cursor: pointer; width: 100%;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.t-area-item::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 2px 2px 0;
  background: var(--blue);
  transition: height .25s cubic-bezier(.16,1,.3,1);
}
.t-area-item.active {
  background: #fff; border-color: var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
}
.t-area-item.active::before { height: 60%; }
.t-area-num {
  font-size: 13px; font-weight: 700;
  color: rgba(102,112,133,.45);
  flex-shrink: 0; min-width: 22px;
  font-variant-numeric: tabular-nums;
  transition: color .22s ease;
}
.t-area-item.active .t-area-num { color: var(--blue); }
.t-area-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.t-area-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  display: block; line-height: 1.4;
  transition: color .22s ease;
}
.t-area-item:not(.active):hover .t-area-title { color: var(--blue); }
.t-area-arrow {
  margin-left: auto; flex-shrink: 0;
  font-size: 14px; color: var(--blue);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.t-area-item.active .t-area-arrow {
  opacity: 1; transform: translateX(0);
}
.t-area-sub {
  font-size: 12px; font-weight: 400; color: var(--muted);
  line-height: 1.55; max-height: 0; overflow: hidden;
  transition: max-height .3s cubic-bezier(.16,1,.3,1), opacity .25s ease;
  opacity: 0;
}
.t-area-item.active .t-area-sub {
  max-height: 60px; opacity: 1;
}
.t-apps-action {
  padding: 16px 20px 0; flex-shrink: 0;
}

/* ─── PRODUCTS & SERVICES ────────────────────────────────────────────────── */
.t-section--dark .t-section-hd { color: #fff; }
.t-svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.t-svc-card {
  background: #152d3f;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  box-shadow: 0 16px 20px rgba(0,0,0,.15), 0 4px 8px rgba(0,0,0,.20);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s;
}
.t-svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(22,119,255,.18), 0 8px 16px rgba(0,0,0,.25);
  border-color: rgba(22,119,255,.35);
}
.t-svc-card:hover .t-svc-img img { transform: scale(1.04); }
.t-svc-img img { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.t-svc-grid .t-svc-card:nth-child(2) { transition-delay: .08s; }
.t-svc-grid .t-svc-card:nth-child(3) { transition-delay: .16s; }
.t-svc-img {
  height: 160px; overflow: hidden;
}
.t-svc-img img {
  width: 100%; height: 100%; object-fit: cover;
  background: rgba(255,255,255,.05);
}
.t-svc-body {
  padding: 28px 32px 32px;
}
.t-svc-num-row {
  display: flex; align-items: center; gap: 16px; margin-bottom: 12px;
}
.t-svc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 12px; background: var(--blue);
  font-size: 18px; font-weight: 700; color: #fff;
}
.t-svc-name {
  font-size: 20px; font-weight: 600; color: #fff; line-height: 1.3;
}
.t-svc-desc {
  font-size: 14px; font-weight: 400; line-height: 1.6;
  color: rgba(255,255,255,.65);
}

/* ─── DEPLOYMENT EXPERIENCE ───────────────────────────────────────────────── */
.t-deploy-cta { margin-top: 28px; }

/* ─── CTA ─────────────────────────────────────────────────────────────────── */
.t-cta-section {
  background: var(--dark);
  padding: 80px 0 48px;
  overflow: hidden;
}
.t-cta-card {
  position: relative; overflow: hidden;
  background-color: #151b23;
  background-image: url("../../01-homepage/assets/images/cta-bg.webp");
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  padding: 64px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.t-cta-card::before {
  position: absolute; inset: 0; content: ""; pointer-events: none;
  background: rgba(12, 18, 26, 0.62);
}
.t-cta-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
.t-cta-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  max-width: 560px;
}
.t-cta-title {
  font-size: clamp(24px, 3vw, 28px); font-weight: 700;
  letter-spacing: 0; color: #fff; margin-bottom: 14px;
}
.t-cta-sub {
  font-size: 16px; font-weight: 400; line-height: 1.6;
  color: rgba(255,255,255,.65); margin-bottom: 28px;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .t-apps-list { width: 380px; }
}

@media (max-width: 1199px) {

  .t-section { padding: 72px 0; }

  .t-split, .t-split--rev {
    flex-direction: column; gap: 40px;
  }
  .t-split-img { width: 100%; }
  .t-img-cover { max-width: 100%; height: 320px !important; }

  .t-flex-grid {
    max-width: 100%; height: 320px;
  }
  .t-flex-big { width: auto; flex: 1; }

  .t-core-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .t-svc-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  .t-apps-body { flex-direction: column; gap: 28px; }
  .t-apps-img-wrap { position: static; }
  .t-apps-img-wrap { height: 280px; }
  .t-apps-img-wrap img { height: 280px; border-radius: 16px; }
  .t-apps-img-link { height: 280px; border-radius: 16px; }
  .t-apps-list { width: 100%; }
}

@media (max-width: 1199px) {
  .t-section-sub, .t-body-text { white-space: normal; }
}

@media (max-width: 640px) {
  .t-hero { height: 520px; }
  .t-hero-title { font-size: 26px; }

  .t-section { padding: 56px 0; }
  .t-section-hd { margin-bottom: 36px; }

  .t-core-grid { grid-template-columns: 1fr; }
  .t-core-img { height: 200px; }

  .t-svc-grid { max-width: 100%; }

  .t-cta-card { padding: 40px 24px; border-radius: 14px; }

  .t-apps-img-wrap { height: 220px; }
  .t-apps-img-wrap { height: 220px; }
  .t-apps-img-link { height: 220px; }
  .t-apps-img-wrap img { height: 220px; }
  .t-apps-list { gap: 2px; }

  .t-flex-grid { height: 260px; }

  .t-btn--pill { padding: 12px 22px; font-size: 13px; }
}

.t-section-sub,
.t-body-text {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.t-section,
.t-cta-section {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

.t-btn {
  min-height: 44px;
}

@media (min-width: 1200px) {
  .t-apps-body { align-items: stretch; }
  .t-apps-list { height: 480px; }
  .t-area-item {
    flex: 1 1 0;
    min-height: 0;
    transition: flex-grow .25s cubic-bezier(.16, 1, .3, 1), background .22s ease, border-color .22s ease, box-shadow .22s ease;
  }
  .t-area-item.active { flex-grow: 1.35; }
}

/* ─── Application Areas 丝滑图片叠放切换（移植自 solutions）── */
#apps-panel { position: relative; }
#apps-panel .home-switch-image {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; border-radius: 20px;
  opacity: 0; transform: translate3d(3%, 0, 0) scale(1.02);
  transition: opacity .55s ease, transform .62s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}
#apps-panel .home-switch-image.is-active { opacity: 1; transform: translate3d(0,0,0) scale(1); }
#apps-panel .home-switch-image.is-entering-next { transform: translate3d(3%,0,0) scale(1.02); }
#apps-panel .home-switch-image.is-entering-previous { transform: translate3d(-3%,0,0) scale(1.02); }
#apps-panel .home-switch-image.is-leaving-next { opacity: 0; transform: translate3d(-2%,0,0) scale(.985); }
#apps-panel .home-switch-image.is-leaving-previous { opacity: 0; transform: translate3d(2%,0,0) scale(.985); }
#apps-panel .t-apps-img-badge, #apps-panel .home-switch-image { z-index: 2; }