/* ===== Hero Section ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--header-height) 0 0;
  background: var(--color-bg-deep);
}

.hero__bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.25;
  mix-blend-mode: screen;
}

.hero__mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(6, 164, 231, 0.12), transparent),
    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(2, 43, 95, 0.2), transparent),
    radial-gradient(ellipse 50% 50% at 50% 80%, rgba(1, 121, 196, 0.06), transparent),
    linear-gradient(160deg, #0a1628 0%, #0d2847 40%, #022B5F 70%, #0a1628 100%);
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6, 164, 231, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 164, 231, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%);
}

.hero__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__particles .particle {
  position: absolute;
  background: var(--color-primary-light);
  border-radius: 50%;
  animation: particleFloat linear infinite;
}

@keyframes particleFloat {
  0% { opacity: 0; transform: translateY(100vh) scale(0); }
  5% { opacity: var(--p-opacity, 0.4); }
  95% { opacity: var(--p-opacity, 0.4); }
  100% { opacity: 0; transform: translateY(-10vh) scale(1); }
}

/* Hero Shapes */
.hero__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}

.hero__shape--1 {
  width: 500px; height: 500px;
  background: rgba(6, 164, 231, 0.08);
  top: -10%; right: -5%;
  animation: float1 20s ease-in-out infinite;
}

.hero__shape--2 {
  width: 350px; height: 350px;
  background: rgba(1, 121, 196, 0.06);
  bottom: 5%; left: -5%;
  animation: float2 25s ease-in-out infinite;
}

.hero__shape--3 {
  width: 200px; height: 200px;
  background: rgba(165, 215, 233, 0.05);
  top: 30%; left: 15%;
  animation: float3 18s ease-in-out infinite;
}

.hero__shape--4 {
  width: 150px; height: 150px;
  background: rgba(6, 164, 231, 0.04);
  top: 60%; right: 20%;
  animation: float2 22s ease-in-out infinite reverse;
}

.hero__shape--ring {
  width: 300px; height: 300px;
  border: 1px solid rgba(6, 164, 231, 0.08);
  background: transparent;
  top: 20%; right: 10%;
  filter: none;
  animation: float1 30s ease-in-out infinite;
}

.hero__content {
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero__logo-wrap {
  margin-bottom: 36px;
  animation: logoReveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero__logo--animated {
  max-width: 500px;
  margin: 0 auto;
  filter: drop-shadow(0 0 60px rgba(6, 164, 231, 0.25));
}

@keyframes logoReveal {
  0% { opacity: 0; transform: scale(0.8) translateY(20px); filter: blur(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

.hero__service-label {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--color-primary-light);
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.8s forwards;
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero__title {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.hero__subtitle {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--color-text-secondary);
  margin-bottom: 56px;
  line-height: 2;
}

.hero__actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.hero__scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.5;
}

.hero__scroll-indicator span {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, var(--color-primary-light), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

.sp-hide { display: inline; }

/* Platform section */
.section--platforms {
  background: linear-gradient(180deg, var(--color-bg-section), var(--color-bg-deep));
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 140px 0 80px;
  }
  .hero__logo--animated { max-width: 320px; }
  .hero__logo-wrap { margin-bottom: 28px; }
  .hero__actions { flex-direction: column; align-items: center; margin-bottom: 48px; }
  .hero__actions .btn { width: 100%; max-width: 320px; }
  .hero__scroll-indicator { display: none; }
  .sp-hide { display: none; }
  .section__header { grid-template-columns: 1fr !important; gap: 32px !important; }
  .section__header > div:last-child { order: -1; }
  .platform-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__particles .particle,
  .hero__shape,
  .hero__scroll-line,
  .hero__logo-wrap,
  .hero__service-label { animation: none; opacity: 1; }
  .hero__scroll-indicator { display: none; }
}