/* ============================================================
   Home hero
   ============================================================ */
.hero{
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(44,111,199,0.35), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, #081527 100%);
  color:#fff;
  padding:76px 0 90px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}
@media (max-width:940px){
  .hero-grid{ grid-template-columns:1fr; }
}
.hero h1{ margin-top:16px; }
.hero .lede{ margin-top:20px; color:var(--steel-300); }
.hero-actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }

.hero-stats{
  display:flex; gap:36px; margin-top:48px; flex-wrap:wrap;
}
.hero-stats .stat b{
  display:block; font-family:var(--font-display); font-size:30px; color:var(--orange-400);
}
.hero-stats .stat span{
  font-family:var(--font-mono); font-size:12px; color:var(--steel-300);
  letter-spacing:.04em;
}

/* --- Signature element: the shape-shifting cell --- */
.shape-stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:420px;
}
.shape-stage::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(closest-side, rgba(240,120,30,0.16), transparent 70%);
}
.shape-morph-wrap{
  position:relative;
  width:280px; height:280px;
}
.shape-morph{
  width:100%; height:100%;
  background:linear-gradient(135deg, #E9EDF3 0%, #B9C2CF 38%, #7F8A9B 62%, #5B6577 100%);
  box-shadow:0 30px 70px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,.4);
  animation:morph-cycle 12s ease-in-out infinite;
  position:relative;
}
.shape-morph::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%);
  mix-blend-mode:screen;
  animation:sheen 12s ease-in-out infinite;
}
.shape-tab{
  position:absolute; right:-22px; top:50%; transform:translateY(-50%);
  width:40px; height:34px;
  background:linear-gradient(135deg,#c8ccd4,#8f97a4);
  border-radius:3px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  animation:tab-fade 12s ease-in-out infinite;
}

@keyframes morph-cycle{
  0%,18%{ clip-path:polygon(18% 0%,82% 0%,100% 18%,100% 82%,82% 100%,18% 100%,0% 82%,0% 18%); border-radius:14px; }
  25%,43%{ clip-path:circle(50% at 50% 50%); border-radius:50%; }
  50%,68%{ clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%); border-radius:40%; }
  75%,93%{ clip-path:polygon(0% 30%,20% 0%,100% 0%,100% 70%,80% 100%,0% 100%); border-radius:8px; }
  100%{ clip-path:polygon(18% 0%,82% 0%,100% 18%,100% 82%,82% 100%,18% 100%,0% 82%,0% 18%); border-radius:14px; }
}
@keyframes sheen{
  0%,18%{ opacity:1; } 22%{ opacity:0; } 25%,43%{ opacity:1; } 47%{ opacity:0; }
  50%,68%{ opacity:1; } 72%{ opacity:0; } 75%,93%{ opacity:1; } 97%{ opacity:0; } 100%{ opacity:1; }
}
@keyframes tab-fade{
  0%,18%{ opacity:1; } 20%,93%{ opacity:0; } 95%,100%{ opacity:1; }
}

.shape-caption{
  position:absolute; bottom:-44px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:13px; letter-spacing:.08em;
  color:var(--steel-300); white-space:nowrap;
}
.shape-caption b{ color:var(--orange-400); }

@media (prefers-reduced-motion: reduce){
  .shape-morph, .shape-morph::after, .shape-tab{ animation:none; }
}

/* ============================================================
   Problem / logos / applications (home-specific tweaks)
   ============================================================ */
.problem-art{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
}
.problem-art img{ width:100%; height:100%; object-fit:cover; }

.app-card{
  border-radius:var(--radius-md);
  padding:28px;
  background:var(--paper);
  border:1px solid var(--line);
}
.app-card .icon-badge{ background:rgba(27,79,145,0.1); }